Skip to content

Update dependency @uswds/uswds to v3.0.0 - autoclosed

igswsihw-wmadepbot requested to merge renovate/uswds-uswds-3.x into main

This MR contains the following updates:

Package Change Age Adoption Passing Confidence
@uswds/uswds 3.0.0-beta.4 -> 3.0.0 age adoption passing confidence

Release Notes

uswds/uswds

v3.0.0

Compare Source

A colorful group of shapes spell out "3.0"

USWDS 3.0: A more modular design system, incrementally

USWDS 3.0 is an important major design system update that's easy to apply to an existing USWDS 2 project. USWDS 3.0 allows teams to update their projects to modern Sass syntax, improve performance, and reduce the size of project CSS. Where USWDS 2.0 introduced a new design language and changed the way we built our components from the ground up, USWDS 3.0 adds important incremental improvements without fundamentally changing how the design system works.

For most USWDS 2 projects, migrating to USWDS 3.0 should only require changing a few lines of project code. We've developed this new version to be a simple, straightforward migration. We want teams to start using USWDS 3.0, and we'll be there to help you do it.

For migration assistance, start with our USWDS 3.0 Migration Guide →

If you have any questions or feedback let us know at the USWDS Public Slack, GitHub Discussions, or uswds@gsa.gov.

If you aren't a member of the USWDS Public Slack, sign up here by "Joining a TTS Chat Room" — then select "U.S. Web Design System" as your chat topic.

What's new in USWDS 3.0?

USWDS 3.0 takes a modular, component-centered approach to the design system. We've rebuilt our codebase with a component focus so teams can more effectively integrate the design system incrementally and use only the USWDS components needed in their projects.

Update to modern Sass syntax

USWDS 3.0 stylesheets use the most modern version of the Sass module syntax. The Sass language that we use to write our stylesheets updated its syntax in 2020 and the old syntax (using @import) is now deprecated. Sass will no longer support the old syntax starting in October 2022. We want teams to use source code with reliable support throughout the life of their project, and USWDS 3.0 allows teams to migrate to Sass modules and maintain support.

Read more about the Sass module syntax →

Improve performance and reduce the size of your project CSS

Unbundle the design system with USWDS 3.0. Using USWDS 3.0 with Sass module syntax allows teams to unbundle their implementations of USWDS and use only the components and code that they need on their project. Depending on your project, this could mean significant reduction of CSS code you ship. This means faster load times, better scores in performance evaluation tools, and a better developer experience.

Read more about USWDS Packages →

Simplify your project settings

USWDS is a highly customizable design system, but that doesn't mean that our settings files need to be long and complicated. Starting in USWDS 3.0, projects will use settings files that include only the settings you've changed in your project. This means fewer project settings to manage, and a clearer vision of your project's customizations.

Read more about USWDS settings →

Stay up-to-date with minimal hassle

We want teams to benefit from the most current version of USWDS. Many projects should be able to migrate from USWDS 2 to USWDS 3.0 in about an hour or less. This new version makes no markup or style changes from USWDS 2.13.3. If you already use USWDS 2.13.0 or later, you should be able to update to USWDS 3.0 in a matter of minutes. Additionally, the under-the-hood changes we're introducing in USWDS 3.0 will make it easier to stay up-to-date with USWDS over time. An incremental update now will make subsequent updates simpler as well.

Support changes in USWDS 3.0

As we move forward to USWDS 3.0 and beyond, we're making some changes to the browsers and functionality our design system supports, consistent with our 2% support threshold and modern development practices.

No longer explicitly support IE11

IE11 has fallen below our 2% support threshold as monitored by analytics.usa.gov. While we have not removed any existing IE11 support from our codebase, we may make changes and add functionality that no longer supports IE11 as we move forward. When we do make any changes like this, we'll be sure to note it in our release notes.

USWDS browser support (2% rule) →

See current analytics from analytics.usa.gov →

Support some Javascript-required functionality

We believe that JavaScript-disabled environments fall below our 2% support threshold, and that we may require JavaScript for some design system functionality. While we have not made any changes to our codebase that affect how we use JavaScript with our components, we may make changes that require JavaScript for some functionality as we move forward. When we do make any changes like this, we'll be sure to note it in our release notes.

Support USWDS 2 with maintenance and security patches for one year

In addition to supporting active development on USWDS 3, we will continue to support the USWDS 2 branch for one year of maintenance and security patches (until April 2023). The current LTS version of USWDS 2 is USWDS 2.13.3.

Long-term support of version 2.x →

Dependencies and security

Dependency | Old | New --- | --- | --- @babel/core | — | 7.16.7 @babel/preset-env | 7.15.8 | 7.16.7 @chanzuckerberg/axe-storybook-testing | — | 5.0.0 @frctl/fractal | 1.5.11 | removed @frctl/nunjucks | 2.0.13 | removed @storybook/addon-a11y | — | 6.4.18 @storybook/addon-actions | — | 6.4.18 @storybook/addon-essentials | — | 6.4.18 @storybook/addon-links | — | 6.4.18 @storybook/addon-postcss | — | 2.0.0 @storybook/builder-webpack5 | — | 6.4.18 @storybook/html | — | 6.4.18 @storybook/manager-webpack5 | — | 6.4.18 @types/node | 16.11.6 | 16.11.19 @whitespace/storybook-addon-html | — | 5.0.0 autoprefixer | 10.3.7 | 10.4.1 babel-loader | — | 8.2.2 chrome-launcher | 0.15.0 | removed chrome-remote-interface | 0.31.0 | removed css-loader | — | 6.2.0 eslint-plugin-import | 2.25.2 | 2.25.4 extract-loader | — | 5.1.0 file-loader | — | 6.2.0 gulp-filter | 7.0.0 | removed gulp-replace | 1.1.1 | 1.1.3 gulp-sass | — | 5.1.0 html-webpack-plugin | — | 5.4.0 lodash.merge | — | 4.6.2 node-notifier | 10.0.0 | removed nswatch | 0.2.0 | removed nyc | 15.1.0 | removed path | — | 0.12.7 postcss | 8.3.11 | 8.4.0 resemblejs | 4.0.0 | removed sass | 1.43.4 | 1.45.2 sass-loader | — | 12.1.0 snyk | 1.746.0 | 1.817.0 storybook-addon-html-document | — | 1.0.1 style-loader | — | 3.3.0 twig-html-loader | — | 0.1.9 twigjs-loader | — | 1.0.2 webpack | — | 5.58.1 webpack-cli | — | 4.9.1 yargs | 17.2.1 | removed

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

Internal only: 2 low, 9 moderate, 30 high vulnerabilities in devDependencies (development dependencies)

Release package SHA-256 hash: a98c4b4fc5974f5e335c2fc9d9a0416c236dd73e53dac62c0cc0031adfa5bb03

v3.0.0-beta.5

Compare Source

What's new in 3.0.0 Beta 5

This release builds on Beta 4 and is up-to-date with USWDS 2.13.3. This is probably the last Beta release before USWDS 3.0.0.

Fixed bug where Sass placeholders caused compile errors. We replaced table-related placeholders with mixins to prevent compile errors related to Sass Modules and placeholders.

Fix bug in Identifier links. Fixes a bug in identifier links that could show the wrong link color when the usa-link package is included after usa-identifier.

⚠️ Use a simpler setting for utilities uselist. We're deprecating the $output-all-utilities setting which overrides all utilities settings and outputs all utilities. Instead, we're using a utility module uselist, defined in a new $output-these-utilities setting. The default for $output-these-utilities is default — which outputs all utilities. Otherwise, you can pass a list of utility modules, and the utility builder will output only those utilities.

For example, the following settings will output only the background-color, color, display, margin, and padding. It also shows how you can further customize the color utility with custom settings and palettes.

@​use "uswds-core" with (
  $output-these-utilities:(
    "background-color",
    "color"
    "display",
    "margin",
    "padding",
  ),
  $color-settings: (
    "output": true
    "responsive": false
    "active": false
    "focus": false
    "hover": false
    "visited": false
  ),
  $color-palettes: (
    "palette-color-theme"
  ),
);
Utility module names

add-aspect add-list-reset align-items align-self background-color border border-color border-radius border-style border-width bottom box-shadow circle clearfix color cursor display flex flex-direction flex-wrap float font font-family font-feature font-style font-weight height justify-content left letter-spacing line-height margin max-height max-width measure min-height min-width opacity order outline outline-color overflow padding pin position right square text-align text-decoration text-decoration-color text-indent text-transform top vertical-align whitespace width z-index

⚠️ Use a more concise syntax for exports. We're updating our exports to use a simpler, more concise syntax. Component JS and Sass should point to the required package. Packages typically are in the format usa-[component-name], like usa-accordion.

Type | Old | New | Example --- | --- | --- | --- JS (all; backward compatibility) | ./src/js/components | ./src/js/components | @uswds/uswds/src/js/components JS (all) | ./src/js/components | ./js | @uswds/uswds/js JS (component) | ./src/js/components/* | ./js/* | @uswds/uswds/js/usa-accordion CSS (compiled) | ./css/* | ./css/* | @uswds/uswds/css/uswds.min.css Sass (compiled) | ./scss/* | ./scss/* | @uswds/uswds/scss/usa-accordion Images | ./img/* | ./img/* | @uswds/uswds/img/usa-icons/add.svg Images | ./fonts/* | ./fonts/* | @uswds/uswds/fonts/public-sans

Packages

usa-accordion usa-alert usa-banner usa-breadcrumb usa-button usa-button-group usa-card usa-character-count usa-checkbox usa-checklist usa-collection usa-combo-box usa-content usa-dark-background usa-date-picker usa-date-range-picker usa-display usa-embed-container usa-error-message usa-fieldset usa-file-input usa-footer usa-form usa-form-group usa-graphic-list usa-header usa-hero usa-hint usa-icon usa-icon-list usa-identifier usa-input usa-input-prefix-suffix usa-intro usa-label usa-layout-docs usa-layout-grid usa-legend usa-link usa-list usa-media-block usa-memorable-date usa-modal usa-nav usa-pagination usa-paragraph usa-process-list usa-prose usa-radio usa-range usa-search usa-section usa-select usa-sidenav usa-site-alert usa-site-title usa-skipnav usa-step-indicator usa-summary-box usa-table usa-tag usa-textarea usa-time-picker usa-tooltip usa-validation uswds uswds-elements uswds-fonts uswds-form-controls uswds-global uswds-helpers uswds-typography uswds-utilities

Updating from stable or previous betas

Install on your project with npm install --save @​uswds/uswds

Security

Package updates

We're now pinning our dependencies to exact version to be more intentional about which dependency versions we support.

Dependency name | Old | New --- | --- | --- express | 4.17.2 | removed lodash.debounce | 4.0.7 | removed lodash.merge | 4.6.2 | moved to dev dependencies browser-sync | 2.27.3 | removed chrome-launcher | 0.15.0 | removed chrome-remote-interface | 0.31.0 | removed gulp-filter | 7.0.0 | removed gulp-run-command | 0.0.10 | removed raw-loader | 4.0.2 | removed twig-loader | 0.5.5 | removed url-loader | 4.1.1 | removed

NOTE: We're now releasing the binary as a tarball created from npm pack for consistency with the npm-distributed release.

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

Internal only: 41 vulnerabilities (2 low, 9 moderate, 30 high) in devDependencies (development dependencies)

Release TGZ SHA-256 hash: 827982ca2b6da828aa3d49eb189e42e27d4fb705385d38ee411e09ece55bf5ac

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this MR and you won't be reminded about this update again.

  • If you want to rebase/retry this MR, click this checkbox.

This MR has been generated by Renovate Bot.

Edited by igswsihw-wmadepbot

Merge request reports