-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add HTML hidden attribute docs, increase [hidden] selector specificity #561
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of adding this base style to the utilities section, you can double up the [hidden]
selector in primer-base
Example:
[hidden][hidden] { display: none !important; }
.d-block { display: block !important; }
In this example [hidden]
will override d-block
even if they're both applied. Here's a codepen example https://codepen.io/jonrohan/pen/QJdVVY toggle the hidden
prop on the <div
/cc @jonrohan — I did this here rather than in normalize.scss because I didn't want to lose it if we ever update that file again.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rock
This updates our display utility docs (rendered: before, after) to include a section about using the HTML
hidden
attribute with the utility classes. I've also added a heading for thedisplay: table
wrapping bug note to separate it out from the new section.The new section links to the now-missing
v10.9.0v10.10.0 release notes, which should exist once we publish the release via #556.@muan, I'd love your input on this! 🙇