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

USWDS-Site - Display utility: Visually demonstrate display-none #1630

Merged
merged 4 commits into from Jun 8, 2022

Conversation

amyleadem
Copy link
Contributor

@amyleadem amyleadem commented Jun 2, 2022

Description

Closes: #1498

Preview link: Display utility page

Problem

The display utility page does not have an clear presentation of .display-none. Because this class hides the display of the element, users do not know that the utility class exists unless they look at the code snippet.

Solution

Restructuring the section allows for a display that suggests the utility class and property exist, and that it is behaving as expected when applied to an example.

Screenshots

Current display:

image

Updated display:

image

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

@amyleadem amyleadem marked this pull request as ready for review June 3, 2022 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

display-none not displayed in docs because class is applied as example
3 participants