Skip to content

Bump uswds from 2.11.2 to 2.12.0

Bucknell, Mary S. requested to merge dependabot/npm_and_yarn/uswds-2.12.0 into master

Created by: dependabot-preview[bot]

Bumps uswds from 2.11.2 to 2.12.0.

Release notes

Sourced from uswds's releases.

2.12.0

What's new in USWDS 2.12.0

New component

We have one new component in this release. Learn more about it on our website:

Pagination: Pagination is navigation for paginated content.

New Spanish-language templates

We now have Spanish-language versions of our 404 template and our Authentication page templates

Other improvements and bug fixes

Added more negative margin tokens to margin utilities. Now you can use utilities like margin-neg-4 and margin-neg-5. Thanks @​mahoneycm! (uswds/uswds#4212)

Card's body exdent modifier now works as documented. Now adding the .usa-card__body--exdent modifier will work as expected. Thanks @​btwegmann! (uswds/uswds#4165)

Checkbox and radio buttons now include automatic accessible color. Now checkbox and radio buttons will display in the proper accessible color, and adapt to the text, link, and background colors you set in your projects's settings. You can also declare a custom background color for checkbox and radio buttons with $theme-input-background-color. The selected tile color is now based on the accessible link color, and is not a custom setting. (uswds/uswds#4199)

We also added a new mixin to make it easier to scope custom checkbox and radio button colors: checkbox-and-radio-colors($bg-color, $selected-color)

It takes two color token inputs, $bg-color and $selected-color. Neither are required and will assume the values in settings if omitted. It returns all the code necessary to set checkbox and radio inputs for the desired scope.

For instance, if you wanted to change the color of all checkbox and radio elements within a .checkbox-tests container, you could do something like the following

.checkbox-tests {
  @include set-text-and-bg("green-80");
  @include checkbox-and-radio-colors("green-80", "green-warm-10v");
  padding: units(2);
  border-radius: radius("md");
}

State color tokens available in default utilities. Now you can use utilities like text-primary-dark in the default utility set. (uswds/uswds#4198)

The success-dark color token now looks better. We updated the value of success-dark to be more vivid and look more like success. Thanks @​maya! (uswds/uswds#4183)

Cleaner margins in radio tiles. Now radio tiles have cleaner, more reliable styling for their margin. Thanks @​maya! (uswds/uswds#4181)

Settings

Status Item New Old Notes
Changed $theme-color-success-dark green-cool-50 green-cool-50v —
Changed $theme-color-success-darker green-cool-80 green-cool-60v —
New $theme-input-background-color 2 — A value of default uses the value of $theme-body-background-color.
New $theme-pagination-background-color default — A value of default uses the value of $theme-body-background-color.
New $theme-pagination-breakpoint tablet —
New $theme-pagination-button-border-radius md —

... (truncated)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
  • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in your Dependabot dashboard:

  • Update frequency (including time of day and day of week)
  • Pull request limits (per update run and/or open at any time)
  • Automerge options (never/patch/minor, and dev/runtime dependencies)
  • Out-of-range updates (receive only lockfile updates, if desired)
  • Security updates (receive only security updates, if desired)

Merge request reports