Skip to content

2.11.0
Compare
Choose a tag to compare
@thisisdano thisisdano released this 17 Mar 21:19
· 4640 commits to main since this release
v2.11.0
e06173b
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

What's new in USWDS 2.11.0

New components

We have three new components in this release. Learn more about them on our website:

  • Icon list: An icon list reinforces the meaning and visibility of individual list items with a leading icon.
  • Modal: A modal disables page content and focuses the user’s attention on a single task or message.
  • Input prefix or suffix: Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.

Updated components

We have two updated components in this release. Learn more about each of them on our website:

  • Sortable table: A sorted column changes the row ordering based on alphabetical or numeric cell values.
  • Links: We updated and improved our guidance around links. Notably, we no longer suggest using the external link icon, as it is often interpreted as share or open in a new tab. Instead, we recommend adding a link destination into the text of the link if you need to be clear where the link points. We've also expanded our guidance around linking to documents.

New templates

We have one new template in this release. Learn more about it on our website:

  • 404 page: A 404 page informs users that a requested page doesn’t exist.

Other improvements and bug fixes

Fixed tooltip positioning. We fixed an issue that prevented some longer tooltips in some positions to display incorrectly. (#4062)

Using a custom font without a custom font stack now get a default font stack. We fixed as bug where setting a custom font without setting a custom font stack resulted in no font stack at all. Now custom fonts will get a default stack appropriate to it's type (sans, serif, or mono). (#4084)

Now you can use a custom prefix separator. Some systems don't parse the : separator character in the default USWDS responsive and state prefixes like tablet:margin-x-2. Now you can set the value of $theme-prefix-separator to output any character or string between the prefix and the main class. (#4085)

Note that the default needs two \ characters to properly output the escaped : character in the final CSS.

$theme-prefix-separator: "\\:",
ex: .tablet\:margin-x-2
     <div class="tablet:margin-x-2">

$theme-prefix-separator: "--",
ex: .tablet--margin-x-2
     <div class="tablet--margin-x-2">

Fixed character display in checkboxes and radio buttons. The  character can show up next to checkboxes and radio buttons where a non-breaking space should be when <meta charset="utf-8"> isn't set properly. Now it will display properly regardless of character encoding. Thanks @andycochran! (#4080)

Provide better support for color icons that adapt to theme settings. Now the color of the alert icon will update automatically to adapt to the alert background, or to the color of the alert text. (#4079)

Updated the banner to use the new icon set.

Settings

Status Item New Old Notes
Changed $theme-alert-icon-size 5 4 —
New $theme-alert-padding-y 2 — —
New $theme-icon-list-font-family "body" — —
New $theme-icon-list-title-font-family "heading" — —
New $theme-modal-border-radius "lg" — —
New $theme-modal-default-max-width "mobile-lg" — —
New $theme-modal-lg-content-max-width "tablet" — —
New $theme-modal-lg-max-width "tablet-lg" — —
Changed $theme-table-border-color "ink" default A value of default uses either the default text or reverse text color depending on the site background color.
Changed $theme-table-header-text-color "ink" default A value of default uses either the default text or reverse text color depending on the header background color.
Changed $theme-table-stripe-text-color "ink" default A value of default uses either the default text or reverse text color depending on the stripe background color.
Changed $theme-table-text-color "ink" default A value of default uses either the default text or reverse text color depending on the site background color.
New $theme-table-sorted-header-background-color "accent-cool-light" — —
New $theme-table-sorted-background-color "accent-cool-lighter" — —
New $theme-table-sorted-stripe-background-color "blue-cool-10v" — —
New $theme-table-sorted-icon-color default — —
New $theme-table-unsorted-icon-color "base" — —
New $theme-prefix-separator "\\:" — —

Dependencies and security

No package changes.

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)

6 low, 2 high vulnerabilities in devDependencies (development dependencies)

Release ZIP SHA-256 hash: 204f91185f424abdd1b65ea2d1b4565f2208726be429c455477668d1507a9a5b

Assets 3
Loading