USWDS 3.8.0 #5812

thisisdano · 2024-03-11T19:24:25Z

Features

Package	A11y	Breaking	Markup change	Description
`usa-checkbox`, `uswds-core`	-	-	-	Added styles for indeterminate checkboxes. Checkboxes will now display as indeterminate when you set `input.indeterminate = true` via JavaScript or add the `data-indeterminate` attribute. This is only a style addition and does not affect checkbox functionality. Thanks @lpsinger! (#5713)
`usa-in-page-nav`	-	-	-	Added the ability to customize which headings will be pulled into the in-page navigation link list. Use the optional `data-heading-selector` attribute to designate the heading levels that should be included in the component. By default, the component will pull all `H2` and `H3` headers. (#5444)
`usa-table`, `uswds-core`	-	-	-	Added a sticky header variant to the table component. Use the new `.usa-table--sticky-header` class to enable sticky positioning on table headers. Use the new `$theme-table-sticky-top-offset` setting to set the value of the top offset for sticky table headers. (#5420) Thanks @etanb!
`usa-table`, `uswds-core`				Added the ability to customize the table background color at a theme level. Use the `$theme-table-background-color` setting to set your desired table background color. (#5420)
`usa-validation`	-	-	-	Added `textarea` support to the validation component. (#5233) Thanks @danbrady!
`usa-layout-docs`, `uswds-core`	Yes	Yes	Yes	Added `$theme-sidenav-reorder` for documentation page sidenav. Use `$theme-sidenav-reorder` to support old CSS order functionality. This setting can introduce usability issues, so we suggest that teams update their sidenav markup instead. (#5807)

Bug fixes

Package	A11y	Breaking	Markup change	Description
`usa-button`, `uswds-core`	-	-	-	Improved the vertical alignment of `usa-icon` elements inside of `usa-button`. Use the new `$theme-button-icon-gap` setting to set the width of the horizontal gap between the button's text and icon. (#5398)
`usa-button`, `usa-checkbox`, `usa-combo-box`, `usa-file-input`, `usa-radio`, `uswds-core`	Yes	-	-	Added automated color contrast checks for disabled tokens. On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback also fails to meet minimum contrast requirements, the system will provide a warning in the terminal. (#5455)
`usa-button-group`	-	-	-	Improved the appearance of button groups when button text wraps to multiple lines. Now, every button in the group will be the same height. (#5657) Thanks @aduth!
`usa-date-picker`	Yes	-	-	Added focus styles to the calendar button in high contrast mode. Now, the calendar icon changes to the `highlight` high contrast token on focus. (#5701)
`usa-footer`	-	-	-	Fixed a bug that caused some grid utility classes to be ignored when used inside `usa-footer`. (#5675)
`usa-layout-docs`	Yes	Yes	Yes	Updated the order of the side navigation markup on the documentation page template. Now, the HTML order of the page matches the visual order at narrow screen widths.(#5794)
`usa-table`	Yes	-	Yes	Simplified the structure of the scrollable table component example. This removes some accessibility errors related to incomplete table markup. (#5783)

Breaking changes

Documentation page template

We're updating the documentation template to better match the HTML order of the side navigation to the visual order at mobile widths. Before USWDS 3.8.0 we used CSS to re-order the sidenav at mobile widths, placing it below the page's main text content. Starting with USWDS 3.8.0, our default styles no longer use CSS to re-order the side navigation. Now, we suggest including a duplicate sidenav after the main text content, using utility classes to hide/show the sidenavs at the proper widths. The example below shows a before/after.

<div class="grid-container">
  <div class="grid-row grid-gap">
-   <div class="usa-layout-docs__sidenav">
+   <!-- One of two sidenav's only shown in desktop breakpoints. --> 
+   <div class="usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-3">
      {{ SIDENAV_MARKUP }}
    </div>
-   <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+   <main class="desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
      {{ MAIN_CONTENT }}
    </main>
  </div>
+ <!-- New duplicate section only shown on mobile. -->
+  <div class="usa-layout-docs__sidenav desktop:display-none">
+    {{ SIDENAV_MARKUP }}
+  </div>
</div>

Teams that wish to maintain the old CSS order functionality can temporarily add $theme-sidenav-reorder: true to their project settings. This setting reinstates the CSS re-ordering. As we mentioned, this setting can introduce usability issues, so the best long-term solution is to update the sidenav markup instead.

Dependencies and security

Dependency name	Previous version	New version
@babel/core	7.23.2	7.23.6
@babel/preset-env	7.23.2	7.23.6
@types/node	20.8.9	20.10.4
eslint	8.52.0	8.55.0
eslint-config-prettier	9.0.0	9.1.0
gulp-mocha	8.0.0	9.0.0
handlebars-helpers	0.10.0	--
html-webpack-plugin	5.5.3	5.5.4
postcss	8.4.31	8.4.32
postcss-import	--	15.1.0
postcss-preset-env	9.2.0	9.3.0
postcss-sass-loader	1.1.0	--
resolve-url-loader	4.0.0	5.0.0
sass	--	1.69.5
snyk	1.1237.0	1.1262.0
svgo	3.0.2	3.1.0
typescript	5.2.2	5.3.3

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
15 moderate, 25 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 072f0f8333b1aa000183e00676616d9ff5a174e27ca8d35c130ca70ea5d4f66d

Add sample styles to show what would be required for border-collapse: separate

…ky-table-header

- Done to improve consistency in control presentation

…meter used

…wds/uswds into checkbox-indeterminate-feature-branch

USWDS - Dependencies: POAM March ‘24

…anch USWDS - Checkbox: Add indeterminate styles

USWDS - Pages: Avoid reordering content in Documentation example

USWDS - Update README references to 3.8.0

Allows us to reuse content in all templates and set custom controls on test.

USWDS - Documentation page: Improve backwards compatibility with sidenav order

Add notifications related to USWDS 3.8.0

mejiaj

LGTM, checked for information and double-checked HTML build output.

mejiaj · 2024-03-11T19:47:41Z

package.json

Version number is correct.

Dependencies are accurate and captured in release notes dependency section.

mejiaj · 2024-03-11T20:09:43Z

packages/usa-table/src/usa-table.json

Confirming, no regressions found in HTML build output (npm run html:build).

mahoneycm

LGTM!

Tables are accurate
Breaking change instructions are listed and are accurate
Dependency updates accurate

etanb and others added 30 commits December 20, 2022 11:58

add the ability to sticky the header of the table component

9a8a13a

prettier

567876c

Merge branch 'develop' into eb-sticky-table-header

93269e5

fixes to implementation

630eadc

Update validation to support textarea

0b4aa55

Add sticky header control

4c9a177

Override position:relative on sortable sticky th cells

ab1e642

Remove stickyheader control

455296b

Add sortable JSON file

db6c5f7

Add demo for multi-row headers

3b03d79

Add sample styles to show what would be required for border-collapse: separate

Add multipleHeaderRows control for testing

8dae8db

Remove background color and extra borders from sticky table thead

a060c6a

Disable multipleHeaderRows for sortable tables

37d56a8

Remove text-right from table header

63f925b

Merge branch 'develop' of https://github.com/uswds/uswds into al-stic…

08024a6

…ky-table-header

Run prettier

81c43dd

Add settings for table background color and sticky table top offset

40dac7c

Improve appearance of segmented button text wrapping

9e43a7a

Push the actual style revisions 🤦‍♂️

dcbe174

Fix build error

28eab8f

Add basic support for usa-icon in buttons

7fa6bda

Improve label for icon name control

110559a

Move stickyheader from json to a storybook control

a477cd0

- Done to improve consistency in control presentation

Remove stickyheader check on scrollable variant

ab585ae

Format code

da2a9e7

Move scrollable setting from json to storybook

6bd2f54

Let $theme-table-background-color accept default

fd01eb4

Run prettier

54debdc

Fix default for $theme-table-background-color

121762b

Clean up multiple header rows code

65c03b6

mahoneycm and others added 24 commits March 5, 2024 10:32

Rename 'selected' color mixins to 'active' to be consistent with para…

a399129

…meter used

Merge branch 'checkbox-indeterminate-feature-branch' of github.com:us…

21642dc

…wds/uswds into checkbox-indeterminate-feature-branch

Run prettier

e44bbbe

Update indeterminate checkbox SASSDoc comment

c31e6f9

Run prettier

7072256

Merge pull request #5800 from uswds/cm-POAM-march-24

90617b4

USWDS - Dependencies: POAM March ‘24

Replace direct download link with link to latest releases

5d30f50

Merge pull request #5713 from uswds/checkbox-indeterminate-feature-br…

58a6d92

…anch USWDS - Checkbox: Add indeterminate styles

Merge pull request #5794 from uswds/cm-feature-doc-layout-order

49973df

USWDS - Pages: Avoid reordering content in Documentation example

Merge branch 'develop' into al-update-refs-3.8.0

2332c4b

Merge pull request #5796 from uswds/al-update-refs-3.8.0

7f67cad

USWDS - Update README references to 3.8.0

Add sidenav setting to allow reordering single sidenav with a11y warning

990bf78

Fix HTML output by setting default desktop sidenav classes

57298a4

Run prettier

17600ba

Set default content in storybook

32e8a78

Allows us to reuse content in all templates and set custom controls on test.

Run prettier

aee4d17

Update template comments

ba608d1

Merge pull request #5809 from uswds/jm-feature-doc-layout-order-setting

8cb4125

USWDS - Documentation page: Improve backwards compatibility with sidenav order

Add 3.8.0 notifications

f6288bc

Use actual affected class

316d621

Fix typo

852b4f1

Merge pull request #5811 from uswds/dw-notifications-3.8.0

6bb9449

Add notifications related to USWDS 3.8.0

3.8.0

815071a

Create uswds-3.8.0-zip-hash.txt

ee06f4e

thisisdano marked this pull request as ready for review March 11, 2024 19:24

thisisdano requested review from mejiaj and mahoneycm March 11, 2024 19:25

mejiaj approved these changes Mar 11, 2024

View reviewed changes

mahoneycm approved these changes Mar 11, 2024

View reviewed changes

thisisdano merged commit 71d27d1 into main Mar 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

USWDS 3.8.0 #5812

USWDS 3.8.0 #5812

Uh oh!

thisisdano commented Mar 11, 2024 •

edited by mahoneycm

Loading

Uh oh!

mejiaj left a comment

Uh oh!

mejiaj Mar 11, 2024

Uh oh!

mejiaj Mar 11, 2024

Uh oh!

mahoneycm left a comment

Uh oh!

Uh oh!

USWDS 3.8.0 #5812

USWDS 3.8.0 #5812

Uh oh!

Conversation

thisisdano commented Mar 11, 2024 • edited by mahoneycm Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Bug fixes

Breaking changes

Documentation page template

Dependencies and security

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

mejiaj Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

mejiaj Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thisisdano commented Mar 11, 2024 •

edited by mahoneycm

Loading