[docs] Convert alpha component docs to new docs template #392
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| {{"demo": "UnstyledNumberFieldIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} | ||
| Base UI components are all available as a single package. |
There was a problem hiding this comment.
🚫 [vale] reported by reviewdog 🐶
[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('Base UI' instead of 'Base UI')
|
|
||
| {{"demo": "UnstyledSwitchIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} | ||
| Base UI components are all available as a single package. |
There was a problem hiding this comment.
🚫 [vale] reported by reviewdog 🐶
[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('Base UI' instead of 'Base UI')
|
|
||
| {{"demo": "UnstyledCheckboxIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} | ||
| Base UI components are all available as a single package. |
There was a problem hiding this comment.
🚫 [vale] reported by reviewdog 🐶
[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('Base UI' instead of 'Base UI')
michaldudak
changed the title
|
Maybe it's something to address separately (and later): I find the style of these three components' demos quite different. It would be great if we restyled them so they feel like they belong to the same design system. |
@michaldudak Yep the design consistency, design quality, CSS consistency, and CSS quality needs to be improved. I'll do it in a separate PR. |
|
|
||
| ## Accessibility | ||
|
|
||
| Ensure the number field has an accessible name via a `label` element. | ||
| Ensure the number field has an accessible name via a `<label/>` element. |
There was a problem hiding this comment.
<label> rather than <label/> is used for the other documents. It would be good to have a code example like they do as well here.
| ```jsx | ||
| <NumberField.Input render={(props) => <MyCustomInput {...props} />}> /> | ||
| ``` |
There was a problem hiding this comment.
We should show the two methods now that we support them:
<NumberField.Input render={<MyCustomInput />} />This is where it's important to mention that the components need to forwardRef and spread all props to the underlying DOM element ("be open for extension")
(This one also has a stray > that I've removed)
<NumberField.Input render={(props) => <MyCustomInput {...props} />} />There was a problem hiding this comment.
Since this impacts most components and is duplicate content, I'm gonna move this into the global page in the "getting started" section. We can still include this little section on each page with a link to the more detailed page, but I think we should avoid duplicating this large block on every component page.
Preview: https://deploy-preview-392--base-ui.netlify.app/base-ui/react-checkbox/