USWDS 3.0.0 Beta 2

What's new in 3.0.0 Beta 2

This release builds on Beta 1 and is up-to-date with USWDS 2.12.2.

This release is focused on component lifecycles for any component enhanced with JavaScript (like Combo Box, Date Picker, and Modal). So, if you integrate these components into a JavaScript application and have been looking for some more flexibility with component initialization, check it out.

JavaScript components now allow for references other than document.body to be referenced with initialization. This makes make the JavaScript-enhanced components more flexible and easy to use, especially in scenarios where components are rendered after initial page load + USWDS init, as with Angular, React, jQuery, vanilla JavaScript, etc.

For example, passing a selector to the Modal that is not document.body:

  const modalRef = useRef()

  useEffect(() => {
    const modalElement = modalRef.current;
    modal.on(modalElement)
    return () => {
      modal.off(modalElement)
    }
  }, [modalRef])

What's in this release

• Drop support for IE11 [IN PROGRESS]
• Reorganize internal directory structure [IN PROGRESS]
• Use Sass Module Syntax [Coming in a later release]
• Publish component packages [Coming in a later release]

Updating from stable

Install on your project with npm install --save uswds@beta

If you're using includePaths in sass, you'll need to update the path from ./node_modules/uswds/dist/scss to /node_modules/uswds/dist/scss/stylesheets.

Example using USWDS-Gulp:

// OLD
.pipe(
  sass({
    includePaths: [
      `sass/styles.scss`,
      `${uswds}/scss`,
      `${uswds}/scss/packages`,
    ],
  })
)

// NEW
.pipe(
  sass({
    includePaths: [
      `sass/styles.scss`,
      `${uswds}/scss/stylesheets`,
      `${uswds}/scss/stylesheets/packages`,
    ],
  })
)

⚠️ Breaking changes

From Beta 1

None

From Stable

Updated package names
Only affects those using USWDS packages. The required and global partials are now prefixed with uswds-.

For example:

@import 'packages/required';
@import 'packages/global';

Required and global SCSS packages have been updated to:

@import 'packages/uswds-required';
@import 'packages/uswds-global';

Security

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

Internal only: 53 vulnerabilities (2 low, 27 moderate, 22 high, 2 critical) in devDependencies (development dependencies)

Release ZIP SHA-256 hash: 55ffc38b87c619c9b0e6cc0d6d7bbd03b3729122f1dbc60d326ae406503dd368