What's new in USWDS 2.8.0
New components
We're excited to release a new batch of components. Learn more about each of them on our website:
- Breadcrumb: Breadcrumbs provide secondary navigation to help users understand where they are in a website.
- Date picker: A date picker helps users select a single date.
- Date range picker: A date range picker helps users select a range between two dates.
- File input: File input allows users to attach one or multiple files.
- Tooltip: A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.
Updates to the banner
We've made some important updates to the banner text. Our new banner text incorporates feedback we've received over the last year or so, and incorporates a few key enhancements:
Teams should work to update this banner text as soon as possible. Consistency improves the reliability, trustworthiness, and awareness of this important component. Thanks @h-m-f-t, @konklone, @wslack, @lggsa, and @leilanimartinez!
These banner updates also include better settings support for the banner, including support for custom banner background and link colors, and improved readability at wide display widths.
⚠️ The banner code requires Autoprefixer to work properly. See https://designsystem.digital.gov/documentation/developers/#sass-compilation-requirements
.gov domains
| Official websites use .gov |
Secure .gov websites use HTTPS |
| A .gov website belongs to an official government organization in the United States. |
A lock (🔒) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites. |
.gov domains (Spanish)
| Los sitios web oficiales usan .gov |
Los sitios web seguros .gov usan HTTPS |
| Un sitio web .gov pertenece a una organización oficial del Gobierno de Estados Unidos. |
Un candado (🔒) o https:// significa que usted se conectó de forma segura a un sitio web .gov. Comparta información sensible sólo en sitios web oficiales y seguros. |
.mil domains
| Official websites use .mil |
Secure .mil websites use HTTPS |
| A .mil website belongs to an official U.S. Department of Defense organization. |
A lock (🔒) or https:// means you've safely connected to the .mil website. Share sensitive information only on official, secure websites. |
.mil domains (Spanish)
| Los sitios web oficiales usan .mil |
Los sitios web seguros .mil usan HTTPS |
| Un sitio web .mil pertenece a una organización oficial del Departamento de Defensa de EE. UU. |
Un candado (🔒) o https:// significa que usted se conectó de forma segura a un sitio web .mil. Comparta información sensible sólo en sitios web oficiales y seguros. |
New settings
| Setting |
Accepts |
Default |
Usage |
| $theme-link-reverse-color |
color token |
"base-lighter" |
Default link color for reverse (dark) backgrounds |
| $theme-link-reverse-hover-color |
color token |
"base-lightest" |
Default link hover color for reverse (dark) backgrounds |
| $theme-link-reverse-active-color |
color token |
"white" |
Default link hover color for reverse (dark) backgrounds |
| $theme-banner-background-color |
color token |
"base-lightest" |
Banner background color |
| $theme-banner-link-color |
color token or default |
default |
Banner link color. default uses the value in `$theme-link-color. The system will calculate hover, active, and visited states. |
| $theme-breadcrumb-background-color |
color token |
"white" |
Breadcrumb background color. Note that the system needs to evaluate color contrast, so this cannot be any transparent-based token. |
| $theme-breadcrumb-font-size |
font size token |
"sm" |
Breadcrumb font size |
| $theme-breadcrumb-font-family |
font family token |
"body" |
Breadcrumb font family |
| $theme-breadcrumb-link-color |
color token or default |
default |
Breadcrumb link color. default uses the value in `$theme-link-color. The system will calculate hover, active, and visited states. |
| $theme-breadcrumb-min-width |
spacing token |
"mobile-lg" |
Breakpoint at which the breadcrumb switches to non-mobile display |
| $theme-breadcrumb-padding-bottom |
spacing token |
2 |
Breadcrumb bottom padding |
| $theme-breadcrumb-padding-top |
spacing token |
2 |
Breadcrumb top padding |
| $theme-breadcrumb-padding-x |
spacing token |
0 |
Breadcrumb left and right padding |
| $theme-breadcrumb-separator-color |
color token |
"base" |
Color of the breadcrumb chevron separator |
Dependencies and security
| package |
old |
new |
| @types/node |
13.13.12 |
13.13.13 |
| yargs |
15.3.1 |
15.4.0 |
| @babel/preset-env |
7.10.2 |
7.10.4 |
| autoprefixer |
9.8.0 |
9.8.4 |
| axe-core |
3.5.4 |
3.5.5 |
| chrome-launcher |
0.13.3 |
0.13.4 |
| eslint-plugin-import |
2.21.2 |
2.22.0 |
| sass |
1.26.8 |
1.26.10 |
| stylelint |
13.6.0 |
13.6.1 |
| stylelint-config-prettier |
8.0.1 |
8.0.2 |
| stylelint-scss |
3.17.2 |
3.18.0 |
0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)5 low, 3 high vulnerabilities in devDependencies (development dependencies)
