Skip to content
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

Merged
merged 11 commits into from
Nov 13, 2018

Conversation

shawnbot
Copy link
Contributor

@shawnbot shawnbot commented Aug 23, 2018

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 the display: table wrapping bug note to separate it out from the new section.

The new section links to the now-missing v10.9.0 v10.10.0 release notes, which should exist once we publish the release via #556.

@muan, I'd love your input on this! 🙇

@shawnbot shawnbot requested review from jonrohan and muan August 23, 2018 23:20
@shawnbot shawnbot changed the title Add docs for using the HTML hidden attribute with display utilities [WIP] Add docs for using the HTML hidden attribute with display utilities Aug 24, 2018
@shawnbot shawnbot added the docs label Oct 5, 2018
@shawnbot shawnbot changed the title [WIP] Add docs for using the HTML hidden attribute with display utilities Add docs for using the HTML hidden attribute with display utilities Oct 16, 2018
@shawnbot shawnbot requested a review from a team October 16, 2018 20:43
@shawnbot
Copy link
Contributor Author

@muan now that #557 is merged into the 10.9.0 release branch, are you cool with this? /cc @jonrohan

@shawnbot shawnbot changed the base branch from release-10.9.0 to release-10.10.0 October 24, 2018 05:25
@shawnbot shawnbot changed the title Add docs for using the HTML hidden attribute with display utilities Duplicate [hidden]{display:none!important} in primer-utilities Oct 26, 2018
@shawnbot shawnbot mentioned this pull request Oct 26, 2018
19 tasks
Copy link
Member

@jonrohan jonrohan left a 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

@shawnbot shawnbot changed the title Duplicate [hidden]{display:none!important} in primer-utilities Add HTML hidden attribute docs, increase [hidden] selector specificity Nov 13, 2018
/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.
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rock

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants