9.0.0

For a high-level overview, please read our Release 9.0 blog post.

Design System [9.0.0]

🚨 Breaking

• Labels, hints, and inline-error messages are now independent elements. (#2685)
  • They used to all be contained within a single <label> element rendered by a FormLabel component. The new React components are Label, Hint, and InlineError (not new), but FormLabel still exists in this version for backward compatibility. Note that we forgot to export the Hint component, but it has been added in version 9.0.3
  • Replaced useFormLabel with smaller, more focused hooks (#2814). This was an internal hook that was exported by the package. We're no longer exporting it, thus why it is being marked as a breaking change.
  • Removed the deprecated textClassName prop from labels (#2780)
• Standardized dialog close button across themes with simple X design (#2828, #2833)
  • Removed the following props:
    • closeButtonText: Please use ariaCloseLabel instead.
    • closeButtonSize: Standardized
    • closeButtonVariation: Standardized
    • closeIconComponent: Standardized
• Added isOpen prop to Drawer and Dialog to fix focus-management issue (#2890)
  • The old API will be supported until the next major version, but a drawer or dialog will still have the bug until it is updated.
  • Note that dialog elements will now exist in the DOM before they are visible, which is how HTML dialog elements work. This means that any HTML snapshot tests you have could change to show unopened <dialog> elements.
• Refined typography tokens and their usage:
  • Removed misnamed --typography-heading-base__font-size CSS variable from theme files (#2784)
  • Typography .ds-text-* and .ds-text-body-* classes are no longer controlled by setting the --typography-heading-* CSS variables (which are for headings). They now get their sizes directly from the --font-size-* variables. (#2784)
  • Reorganized the font tokens (#2776)
    • The following CSS variables were renamed:
      • --form-label__color--inverse renamed to --label__color--inverse
    • The following CSS variables were removed:
      • --font-family-open-sans
      • --font-family-rubik
      • --font-family-montserrat
      • --font-family-bitter
• Removed the unused "success" text field (ds-c-field--success class) (#2725)

🚀 Added

• Added ds-dropdown web component (#2772)
• Added custom event handling to web components (#2738)
• Added web-component support to our Storybook (#2715)
• Added new useDialog hook (see documentation here) (#2898). Note that we forgot to export the useDialog hook, but it has been added in version 9.0.3
• Added new DrawerManager and useDrawerManager (see documentation here) (#2896)
• Replace many config functions with single global config function (#2889, #2904)
• Reorganized the font tokens, adding the following CSS variables (#2776):
  • --font-size-* variables targeting specific screen sizes
  • --typography-heading-* variables for font-size
  • --label* variables about text styling
• Added fallback fonts to theme tokens (#2721)

💅 Changed

• Removed core-js polyfills for IE (#2866)
• Standardized on using p tags for hints and errors instead of div and span (#2857)
• Hint and InlineError can now receive passthrough props (#2841)
• Expanded IdleTimeout component's continueSessionText and endSessionButtonText prop types from accepting string to accepting any ReactNode (#2900)

🛠 Fixed

• Fixed inconsistencies between fallback fonts for StepList bullet points between different browsers (#2734)
• Fixed alert body content flowing out of bounds (#2824)
• Updated prop type definitions for the following components to support passthrough attributes (#2798):
  • Badge
  • SingleInputDateField
  • Tooltip
  • All the icon components
• Fixed keyboard focus causing dropdown caret to disappear in Firefox (#2876)
• Fixed pressing ESC in Dialog and Drawer failing to call exit handler (#2870)
• Enforced mutual exclusivity of the mask and labelMask props in TextField (#2863)
• Added missing ds-u-color--gray-dark utility class (#2880)
• Removed a console.log (#2892)

📦 Internal

• Fixed interaction tests run with Preact (#2768)
• Added a "patch" script for automatically cherry-picking commits (#2762)
• Packages to now consume tokens directly from tokens directory instead of copying (#2808)

CMS.gov Design System [9.0.0]

All changes from the core design system and...

💅 Changed

• Updated the visited link color for the cmsgov theme (#2882)

Healthcare.gov Design System [13.0.0]

All changes from the core design system and...

🚨 Breaking

• Removed the showUsaBanner feature flag prop in HealthCare.gov Header (#2865)

🛠 Fixed

• Fixed content with stacking contexts bleeding through Healthcare.gov Header menu (#2862)

Medicare.gov Design System [11.0.0]

All changes from the core design system

Documentation

💅 Changed

• Storybook to use Preact by default again (#2769)
• Opened up some theme-colors page content to all themes (#2887)

🚀 Added

• Documented pass-through props in Storybook dev docs (#2799)
• Added an attributes table to storybook docs for web components (#2753)
• Added more functionality to ds-alert story (#2728)
• Added a ds-usa-banner story (#2727)
• Added long-term support (LTS) policy to doc site (#2873)
• Added a label migration guide (#2859)
• Created/Updated docs for label, hint, and inline error (#2843)

🛠 Fixed

• Fixed radio example showing on checkbox doc page (#2767)
• Fixed dead links in docs (#2766)
• Fixed a dead link in the Spinner guidance (#2874)
• Fixed flash of unstyled TextField story (#2869)
• Updated Storybook examples to follow label guidance (#2846)
• Fixed HelpDrawer Storybook docs (#2902)
• Fixed some inconsistent arg tables in Storybook (#2901)
• Unchecked the maturity checklist item that stated that IdleTimeout has Spanish translations built in (it doesn't) (#2894)

📦 Internal

• Updated the create-react-app-typescript example project (#2868)