Skip to content

2.10.1

Choose a tag to compare

@thisisdano thisisdano released this 19 Feb 22:20
bd0c371

What’s new in USWDS 2.10.1

Bugfixes and updates

Fix automatic accessible color picker: Now the accessible color picker will properly pick the correct text color from a given background color. It will also throw warnings instead of errors if accessible combinations aren't found. (#3906 and #3926)

New or ⚠️ changed setting Default Description
$theme-body-background-color "white" Background for the page body
$theme-text-color "ink" Page text color
$theme-text-reverse-color "white" Text color with dark backgrounds
$theme-alert-text-color default (uses whatever is set for $theme-text-color) Text color for light-background alerts
$theme-alert-text-reverse-color default (uses whatever is set for $theme-text-reverse-color) Text color for dark-background alerts
$theme-alert-link-color default (uses whatever is set for $theme-link-color) Link color for light-background alerts
$theme-alert-link-reverse-color default (uses whatever is set for $theme-link-reverse-color) Link color for dark-background alerts
⚠️ $theme-breadcrumb-background-color default (uses whatever is set for $theme-body-background-color) Background color for the breadcrumb
$theme-identifier-primary-link-color default (system picks between $theme-alert-link-color and $theme-alert-link-reverse-color depending on the background color) Color of the links in the identifier masthead

Allows svg4everybody polyfill to compile properly in React and Vue: Now React and Vue applications won't crash with a TypeError caused by svgforeverybody. (#3909)

Properly give an accessible name to the combobox: Now the combobox will have an accessible name as long as the label's for attribute matches the id of the input.usa-combo-box or input.usa-time-picker. (#3900)

Fix styling in collection calendars: Removes a thin white line which could appear at the top of calendars in collection items. (#3917)

Fix a radio/checkbox focus outline bug on Firefox. Removes unwanted text indent from checkbox and radio input, which was causing the focus outline to be improperly sized on Firefox. (#3916)

Utilize $theme-alert-icon-size variable for setting the alert icon size: Now the setting works as expected. Thanks @sawyerh! (#3942)

⚠️ NOTE: This changes the value of the $theme-alert-icon-size default to 5 from 4.

Adds an instagram social icon to our default footer. (#3948)

Updates all icons used by components to the new icon set. (#3992)

Fixes left padding for anchor links in the sidenav. Thanks @fsierra! (#3944)

Fixes the import path for the usa-icons package. Thanks @jennyychaa! (#3954)

Fixes a secondary nav display bug in the header in Safari: Now the search component and the secondary nav display and resize properly in Safari. Thanks @akanelson! (#3805)

⚠️ Use proper semantic markup for footer title: Now we're using a p instead of an h3 for usa-footer__logo-heading since the name of the project or agency is hot a heading in this context.

Properly wrap the wrapped breadcrumb on Safari: Now the usa-breadcrumb--wrap breadcrumb variant will wrap properly on Safari, instead of overflowing. (#3997)

Update project's version of Node to the most current LTS (14.15.4).

Dependencies

  • Adds sass-true@6.0.1 for Sass unit testing
  • Updates snyk to 1.439.1
  • Updates @frctl/fractal to 1.5.4
  • Updates @frctl/nunjucks to 2.0.8

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

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