Add docs for component states #4632
Conversation
|
|
|
||
| ### Application state naming | ||
|
|
||
| Some application states correspond directly to CSS pseudo-classes (e.g., disabled), while others are named more generically to apply across components (e.g., “selected” can refer to a selected dropdown item or checked checkbox). |
There was a problem hiding this comment.
| Some application states correspond directly to CSS pseudo-classes (e.g., disabled), while others are named more generically to apply across components (e.g., “selected” can refer to a selected dropdown item or checked checkbox). | |
| Some application states correspond directly to CSS pseudo-classes (e.g., disabled), while others are named more generically to apply across components (e.g., “selected” can refer to a selected dropdown option or checked checkbox). |
|
|
||
| ## Component-specific tokens | ||
|
|
||
| For each component with [component-specific tokens](/design-tokens/how-to-read-design-tokens#component), the applicable state combinations are provided as design tokens. |
There was a problem hiding this comment.
Also, the table on the "how to read tokens" refers to "enabled" instead of "rest".
There was a problem hiding this comment.
Can you show me where you're seeing this still? I believe I fixed references to "enabled" in a PR on master. should be resolved already
|
|
||
| | | rest | hover | focus | active | Notes | | ||
| | ------------- | :-------------------------------------: | :-------------------------------------: | :-------------------------------------: | :-------------------------------------: | ------------------------- | | ||
| | none | <span><Checkmark size="small" /></span> | <span><Checkmark size="small" /></span> | <span><Checkmark size="small" /></span> | <span><Checkmark size="small" /></span> | -- | |
There was a problem hiding this comment.
a11yTitles for Checkmark icons.
|
|
||
| ## Component-specific tokens | ||
|
|
||
| For each component with [component-specific tokens](/design-tokens/how-to-read-design-tokens#component), the applicable state combinations are provided as design tokens. |
✅ Deploy Preview for rad-shortbread-897892 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploy Preview
What does this PR do?
Where should the reviewer start?
What testing has been done on this PR?
In addition to the feature you are implementing, have you checked the following:
General UX Checks
Accessibility Checks
Code Quality Checks
How should this be manually tested?
Any background context you want to provide?
What are the relevant issues?
Screenshots (if appropriate)
Should this PR be mentioned in Design System updates?
Is this change backwards compatible or is it a breaking change?