[docs][material] Highlight global state classes in CSS table in API docs #36633
Conversation
hbjORbj
changed the title
hbjORbj
added
docs
hbjORbj
force-pushed
the
highlight/global-states
branch
from
c40d9e4 to
98e777c
Compare
Netlify deploy previewhttps://deploy-preview-36633--material-ui.netlify.app/ Bundle size report |
docs/translations/translations.json
Outdated
| @@ -5,6 +5,7 @@ | |||
| "themeDefaultProps": "Theme default props", | |||
| "themeDefaultPropsDescription": "You can use <code>{{muiName}}</code> to change the default props of this component <a href={{defaultPropsLink}}>with the theme</a>.", | |||
| "hookName": "Hook name", | |||
| "cssDescription": "The following class names are useful for styling with CSS. The global state classes are in <b>bold</b>. To learn more about state classes, check out the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">State classes</a> guide.", | |||
There was a problem hiding this comment.
| "cssDescription": "The following class names are useful for styling with CSS. The global state classes are in <b>bold</b>. To learn more about state classes, check out the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">State classes</a> guide.", | |
| "cssDescription": "The following class names are useful for styling with CSS (the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">state classes</a> are in <b>bold</b>. <br /> To learn more, visit <a href=\"/material-ui/customization/theme-components/\">component customization</a> page", |
I think @samuelsycamore will have a better version 😁.
There was a problem hiding this comment.
I think it is worth linking to https://deploy-preview-36631--material-ui.netlify.app/material-ui/customization/theme-components/ because that's the next step developers should know.
There was a problem hiding this comment.
Just a few tiny fixes on @siriwatknp 's suggestion.
| "cssDescription": "The following class names are useful for styling with CSS. The global state classes are in <b>bold</b>. To learn more about state classes, check out the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">State classes</a> guide.", | |
| "cssDescription": "The following class names are useful for styling with CSS (the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">state classes</a> are in <b>bold</b>). <br /> To learn more, visit the <a href=\"/material-ui/customization/theme-components/\">component customization</a> page.", |
There was a problem hiding this comment.
Since we are using chip to mark it as a state rather than bold text, I changed "state classes are in bold" to "state classes are marked". Feel free to change it. @samuelsycamore
|
2 things:
|
github-actions
bot
added
the
PR: out-of-date
Agree. Replaced it with a chip. It looks better. Addressed.
Can you elaborate on this? By "the description", you mean the column name or individual descriptions of classes? |
hbjORbj
force-pushed
the
highlight/global-states
branch
from
8a489e2 to
a7ee6a3
Compare
github-actions
bot
removed
the
PR: out-of-date
I have followed (at least) the PR section of the contributing guide.
This is a follow-up of the suggestion I made during a discussion in a separate PR: [Base] Add JSDoc comments for classes of Base components #36586 (comment)
This PR is to make it clearer to developers the distinction between global state classes and component-level state classes
Changes
"The following class names are useful for styling with CSS. The global state classes are in **bold**. To learn more about state classes, check out the [State classes](https://mui.com/material-ui/customization/how-to-customize/#state-classes) guide."Preview