- Increase line-height for accordion heading content to improve readability. (#316)
- Update USWDS from v2.13.2 to 2.13.3. (#312)
- Add styles and markdown content for selected and disabled radios and checkboxes. (#313)
- Fix an issue where search field submit buttons would not show text at small viewport sizes. (#311)
- The
alerts/success-badge.svg
image will be removed in a future major version. Usealerts/success.svg
instead. (#306)
- Improve appearance of illustrated tile checkboxes and radio buttons. (#309)
- Use correct "Success" green color for
alerts/unphishable.svg
icon. (#306)
- Remove documentation-specific images from published package. (#300)
- Remove duplicate styles. (#301)
- Reconcile redundant focus styles with U.S. Web Design System. (#302)
- Remove documentation site styles from design system artifact. (#305)
- Reduce size of SVG images. (#307)
- Update USWDS from v2.13.1 to 2.13.2. (#304)
- Update dependencies to resolve vulnerability advisories. (#308)
- Changing the radio tile image size from 1rem to 1.5rem. (#299)
- Line height calculations are improved such that the desired token size will always apply regardless of font family or scale. (#291)
- In the case of headings, line-height will fall back to the configured body line-height if the resulting actual line-height would be smaller than body content when using the heading scale.
- Body font size has been increased slightly to restore an effective font size of 1rem. (#292)
- The Process List component no longer applies vertical padding which would affect its layout relative to surrounding content. (#290)
- Input hint text is no longer italicized. (#293)
- New variation of checkbox and radio button tiles with illustrations is added to form fields. (#296)
- Improve vertical spacing in heading of Process List item spanning multiple lines. (#288)
- Fix external link icon margin when followed by additional text content. (#289)
- Field validation success is added to form validation. (#265)
- Added custom styling for the Process List component. (#279)
- The default font is now Public Sans for both headings and body copy. This is not being considered a breaking change, as it is the new default guidance. To preserve existing font settings to allow more time to migrate, set
$theme-font-type-sans: 'source-sans-pro';
and$theme-font-type-serif: 'merriweather';
. (#264) - Add Login.gov-specific component configuration. (#258)
- Identifier component
- Link colors on dark backgrounds
- The default line-height is now set to 1.5. This is not being considered a breaking change, as it is the new default guidance. To preserve existing font settings to allow more time to migrate, set
$theme-body-line-height: 6
. (#283) - Overlay is now shown with a lighter backdrop color. (#260)
- Form Dropdown is now more visually consistent with other form fields. (#263)
- Form hint text is now shown with an italicized style and increased vertical margins. (#262)
- Icons for form validation errors are aligned to the top. (#265)
- The tile variant of checkboxes and radio buttons have a slightly increased font size. (#281)
- Checkbox and radio labels which span multiple lines should now appear with a consistent line height relative to surrounding body copy. (#283)
- Search will now show full text labels at all sizes, and uses standardized font tokens. (#259)
- Fix an issue where
.usa-input--error
would apply the incorrect border color unless also accompanied by.usa-input
,.usa-textarea
, or.usa-select
. (#275)
- Upgraded USWDS from v2.12.1 to v2.13.1 (see release notes) (#269, #277, #280)
- All theme variables are now set as default values, allowing you to override them for per-project requirements. (#247)
- Note: Since the design system is meant to be an opinionated set of smart defaults, it's recommended to use restraint with variable customization, or at least consider when it may be more appropriate to adjust a setting from the design system itself in order to maintain consistency across projects.
- Responsive variants of width utility classes are now enabled. (#248)
- Navbar link text is no longer uppercase. (#249)
- Visual alignment of Badge component is improved, and its markup guidance has been simplified with improved accessibility semantics. (#251)
- Field validation error messages now use updated styling to always display an icon as part of the error message, and not within the field itself. The modifier classes
usa-input--inline
andusa-error-message--with-icon
no longer have any effect and can be safely removed. (#255) - Focus styles for links and unstyled buttons are now the same. (#253)
- USWDS is upgraded to the latest version, from v2.11.2 to v2.12.1.
- Whitespace in checkbox and radio label markup will no longer cause the label text to be misplaced.
- Margins surrounding an external link icon have been increased slightly.
- Padding and label font size for tile checkboxes and radio buttons have increased slightly.
- USWDS is upgraded to the latest version, from v2.9.0 to v2.11.2.
- The bordered and large styles of checkboxes and radio buttons have updated guidance to improve compatibility with the USWDS tile style. The classes
usa-radio-bordered
,usa-radio-large
,usa-checkbox-bordered
, andusa-checkbox-large
have been removed. Instead, addusa-radio__input--bordered
,usa-radio__input--tile
,usa-checkbox__input--bordered
,usa-checkbox__input--tile
respectively as modifiers to the element with the classusa-radio__input
orusa-checkbox__input
.
- The bordered and large styles of checkboxes and radio buttons have updated guidance to improve compatibility with the USWDS tile style. The classes
- The Accordion component no longer includes a "Close" button. Remove any instances of
<button class="usa-accordion__close-button">
in your project, or references to theaccordionCloseButton
exported member of the JavaScript package.
- Add support for SASS package entrypoints to limit or control loading of styles, similar to USWDS components. Available packages are
packages/required
,packages/global
,packages/components
, andpackages/utilities
. - The Side Navigation component is now documented and includes updated and improved styling. While this should not require any markup changes, you should validate that the updated styling does not conflict with any product-specific styles for side navigation.
- Reduce the border width of the normal outline button to the intended width of
1px
(previously2px
). The big variant of the outline button is unaffected by this change, and remains2px
. - Fix rounded corners on sidebar current page item.
- Fix unintentional rounded corners on search text field.
- Fix utility classes not always applying as expected when applied to components. For example, using
margin-
utility classes on an unstyled button would previously unexpectedly conflict with and not take precedent over the button's own margins. - Fix all instances of font weight appearance of unstyled buttons in content which applies anti-aliased font smoothing. Previous bug fix attempts had still missed default
:hover
and:active
states.
- Fix font weight appearance of unstyled buttons in content which applies anti-aliased font smoothing.
- Fix the appearance of unstyled buttons to appear visually identical to a link.
- Fix an issue where a second focus ring effect was still applied to the unstyled button variant.
- Several button variants have been removed. These include:
- Success (
usa-button--success
) - Dropdown (
usa-button--dropdown
) - Small (
usa-button--small
) - Tiny (
usa-button--tiny
)
- Success (
- The Password Strength Meter component has been removed.
- Link hover and active colors are now distinct.
- Before: Hover and active colors are both
primary-darker
. - After: Hover is
primary-dark
, and active isprimary-darker
.
- Before: Hover and active colors are both
- Improved support for "Unstyled" button variant (see documentation)
- Add three new button variants to control width:
usa-button--wide
displays a button at a wider (minimum) width at larger viewport displays.usa-button--flexible-width
displays a button at flexible width regardless of viewport size, and overrides default mobile appearance of full-width buttons.usa-button--full-width
displays a button at full width regardless of viewport size, and overrides default desktop appearance of flexible-width buttons.
- Fix an issue where focused buttons appear with a double focus ring style.
- Fix an issue where using the "auto" package entrypoint may cause components not to be loaded when used with some bundlers (e.g. Webpack).
- Add documentation for "Big" button variants.
- Rename "Secondary" as "Outline" in buttons documentation.
- The Spinner button has been removed (
.usa-button__lg-invokeSpinner
). - Favicon images have been updated for consistency with the U.S. Web Design System. Existing references to
favicon-16x16.png
should be updated tofavicon-16.png
.favicon-32x32.png
has been removed. The closest substitute isfavicon-40.png
, at size 40 pixels x 40 pixels.
- New favicon size variations are available. The complete set of pixel sizes are:
16
,40
,57
,72
,114
,144
,192
.
- Fix an issue where builds may produce styles in an unpredictable order.
- Fix an issue where
.usa-display
heading font size was rendered larger than intended. - Fix an issue where
dropdownButton
was using invalid CommonJS syntax when imported from ES module entrypoint. - Fix an issue where
.usa-prose
heading margins were not applied consistently. - Fix an issue where importing subpaths may not resolve correctly using native ES modules.
- Replace deprecated USWDS variable references with updated equivalent values.
- Updates USWDS from 2.0.3 to 2.9.0. Review release notes for specific changes which may apply. Specific impactful changes include...
- The Tooltip component is now inherited from USWDS, newly introduced as of USWDS 2.8.0. See component documentation for more information. The markup of this component is significantly different than that of the component previously implemented in the Login.gov Design System.
- Due to a rounding precision fix, line-heights for text may appear larger than it had previously.
- Guidance for many components has been updated to improve accessibility and usability of markup. Neglecting to update this markup should not result in user-facing regressions, but you are recommended to update to improve end-user experience. Refer to the release notes and related component documentation for specifics:
- SVG images should include
role="img"
. - Numeric fields should use
type="text" inputmode="numeric"
instead oftype="number"
. - Search forms should assign
role="search"
to the form element. - Banner should be rendered as a
section
element instead of adiv
, and include a descriptivearia-label
. - Footer and hero content should include a descriptive
aria-label
. - Graphic list should use
h2
as a heading element instead ofh3
.
- SVG images should include
- "Official government website" banner text has been updated. Refer to USWDS guidance for updated markup.
- The published NPM package can now be imported into a project. Bundlers that support dead-code elimination (Webpack, etc.) can automatically remove unused code to optimize bundle size. Existing usage of JavaScript code from
dist/assets/
is unaffected by these changes.
- Fixed support for multiple dropdown buttons on a page.