ui guidelines: add custom properties and disabled state guidance#75912
Conversation
ciampo
added
[Type] Developer Documentation
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
Nice 👍 It's a bit on the longer side and maybe we can tighten it up a bit, though it's a complex topic and I think the explanations under "Rule" and "Why" sections really help illustrate the problem.
|
|
||
| ### Disabled State Styling | ||
|
|
||
| When styling disabled states, use the `data-disabled` attribute provided by Base UI rather than targeting `disabled` or `aria-disabled` directly. Base UI applies `data-disabled` consistently regardless of whether the underlying implementation uses the native `disabled` attribute or `aria-disabled` (which depends on the `focusableWhenDisabled` prop). This keeps styles decoupled from the specific HTML attribute and avoids verbose selectors that would need to target both. |
There was a problem hiding this comment.
Is it assumed that all components that would be disable-able would be using BaseUI? The guidance here is pretty specific to those use-cases (specifically focusableWhenDisabled), and if we had any components that could be disabled but don't use BaseUI, I might be pretty confused by what I'm expecting to do with disabled styling.
There was a problem hiding this comment.
Sure, I added that this specifically refers to Base UI-based components. Also happy to remove the section altogether if you think it's too detailed / doesn't bring much value.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
@aduth I followed your feedback. Happy to iterate in follow-ups if necessary. |
2 participants
What?
Following up the conversation in #75568 (comment), add a section in the
@wordpress/uiguidelines around how to use custom properties in the context of composing and re-defining them across several components.Why?
Writing documentation helps us enforce good pattenrs and avoid bad patterns.
How?
Added a section to the GUIDELINES docs
Testing Instructions
Read the added sections of the docs