[Autocomplete] Add hint demos to Material UI and Joy UI docs #37496
Conversation
sai6855
added
docs
Netlify deploy preview
Bundle size report |
|
@siriwatknp Tried to add same demo to joy https://codesandbox.io/s/smoosh-snowflake-w9xn7e?file=/demo.js |
For Joy UI, you have to create a custom wrapper component and replace the default one. Here https://codesandbox.io/s/cool-shannon-5lzl7m?file=/demo.js |
|
@siriwatknp added demo for joy UI |
| @@ -195,6 +195,12 @@ The `size` can also be controlled at the `FormControl`. | |||
|
|
|||
| {{"demo": "SizeWithLabel.js"}} | |||
|
|
|||
| ## Hint | |||
There was a problem hiding this comment.
let's make this an h3 so it sits under the "Customization" h2 and doesn't break the header flow:
| ## Hint | |
| ### Hint |
| @@ -195,6 +195,12 @@ The `size` can also be controlled at the `FormControl`. | |||
|
|
|||
| {{"demo": "SizeWithLabel.js"}} | |||
|
|
|||
| ## Hint | |||
|
|
|||
| Following demo shows how to add hinting feature to Autocomplete using `filterOptions` prop. | |||
There was a problem hiding this comment.
| Following demo shows how to add hinting feature to Autocomplete using `filterOptions` prop. | |
| The following demo shows how to add a hint feature to the Autocomplete using the `filterOptions` prop: |
| @@ -106,6 +106,12 @@ You could also display a dialog when the user wants to add a new value. | |||
|
|
|||
| {{"demo": "FreeSoloCreateOptionDialog.js"}} | |||
|
|
|||
| ## Hint | |||
|
|
|||
| Following demo shows how to add hinting feature to Autocomplete using `renderInput` and `filterOptions` prop. | |||
There was a problem hiding this comment.
| Following demo shows how to add hinting feature to Autocomplete using `renderInput` and `filterOptions` prop. | |
| The following demo shows how to a add hint feature to the Autocomplete using the `renderInput` and `filterOptions` props: |
There was a problem hiding this comment.
🤩 This is awesome @sai6855, thanks for working on this. A very good example for using the slots prop.
I have updated the hint text to look good in dark mode and apply Sam's suggestion. Ready to go!
Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
samuelsycamore
changed the title
Related to #22648
material ui preview: https://deploy-preview-37496--material-ui.netlify.app/material-ui/react-autocomplete#hint
joy ui preview: https://deploy-preview-37496--material-ui.netlify.app/joy-ui/react-autocomplete#hint
( Not Really sure where to place demos, so I've placed at last)
screen-recording-2023-06-03-at-102242-pm_gmdqqR8O.mov