Skip to content

Conversation

@thisisdano
Copy link
Contributor

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

thisisdano and others added 26 commits March 15, 2021 21:25
- Remove overflow (error state won't show otherwise)
- Add margin for even space when input has a background
- Rewrite input custom sizes
- Display input-group as inline flex/width: auto to fit to custom input sizes
Update CI processes to use main branch
- Put _all_ Material Icons in their own directory: `material-icons`
- Put _all_ USWDS icons in their own directory: `uswds-icons`
- Remove `usa-icons-unused` directory in favor of these two new directories
@thisisdano thisisdano requested a review from mejiaj March 17, 2021 21:06
@thisisdano thisisdano changed the title USWDS 2.11.0 Release 2.11.0 Mar 17, 2021
@thisisdano thisisdano merged commit e06173b into main Mar 17, 2021
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.