10.0.0

Design System [10.0.0]

🚨 Breaking

• Officially dropped support for React 16
• Removed deprecated semantic font-size classes (ds-h1, ds-display, etc.) (#2982)
  • We've included a migration script for this (npm run cmsds-migrate or yarn cmsds-migrate)
• Removed two optional aria-label props from VerticalNav component that were no longer necessary after simplifying the screen-reader experience (#2951)
• Removed the following CSS variables:
  • --button-icon__fill (#2940)
  • --color-background-dialog (#2933)
  • --color-background-dialog-mask (#2933)
  • --autocomplete* variables (#2928)
  • --dropdown* variables (#2928)
  • --dialog-icon__size (#2927)
  • --icon__color--error (#2927)
  • --icon__color--inverse (#2927)
  • --icon__color--primary (#2927)
  • --icon__color--success (#2927)
  • --icon__color--warn (#2927)
  • --label__color--inverse (#2927)
  • --table-striped-header__background-color (#2998)
• Renamed the following CSS variables (#2927):

  From	To
  --table-striped__background-color	--table__background-color--striped
  --form-hint__color	--hint__color
  --form-hint__color--inverse	--hint__color--inverse
  --form-error__color	--inline-error__color
  --form-error__color--inverse	--inline-error__color--inverse

• Updated Alert background colors to ensure sufficient color contrast (no change for Medicare.gov) (#3007)

⚠️ Deprecated

• Deprecated ds-u-truncate utility class (#2977)

💅 Changed

• Reconfigured browserslist to both increase calculated coverage of users and decrease bundle size. React bundle size shrunk by 20%, and it had similar results on Preact and web components. (#2957)
• Started using the new JSX transform for React 17, which cuts our bundle size by about 4% (#2994)
• Removed the empty string as the default value for the href prop on ExternalThirdPartyLink (#2949)
• The value of --alert__icon-size now uses rems instead of px and accurately reflects the final size of those icons (#2927)
• Upgraded to TypeScript v5, but you should still be able to use your current TypeScript version if it worked with the design system before (#2990)

🚀 Added

• <ds-dropdown> web components now accept <option> and <optgroup> in their inner HTML and not just a JSON options attribute (#2973)
• Drawer now passes backdropClickExits prop to NativeDialog (#2582)

🛠 Fixed

• Simplified screen reader experience for VerticalNav, Pagination, and Accordion components (#2951, #2970, #2971, #2950)
• Fixed accordion heading styles getting clobbered by ds-content CSS class by lowering specificity of :first-child and :last-child rules (#2942)
• Adjusted sizing and padding for SingleInputDateField to use relative units instead of absolute units so text does not get cut off in browsers with larger default font sizes (#2917)
• Added missing inversed attribute to ds-dropdown (#3044)
• Fixed typo in ds-dropdown requirement-label attribute definition (#3043)
• Fixed dialogs inheriting font size from ancestors (#3033)
• Improved focus styles for UsaBanner on small screens (#3030)
• ChoiceList TypeScript definitions no longer requires options to have Choice props that are already provided by the ChoiceList (#3027)

📦 Internal

• Added scripts for syncing tokens with Figma (#2946, #2945)
• Added VRTs for example projects (#2959, #2961)
• New browser testing wrapper script (#3006, #3012)

CMS.gov Design System [10.0.0]

All changes from the core design system and...

🚨 Breaking

• Updated Alert background colors to ensure sufficient color contrast (#3007)

Healthcare.gov Design System [14.0.0]

All changes from the core design system and...

🚨 Breaking

• Updated Alert background colors to ensure sufficient color contrast (#3007)

Medicare.gov Design System [12.0.0]

All changes from the core design system

Documentation

💅 Changed

• Examples to use local design system packages (#2938)
• Add warning in docs to skip v7 (#3037)

🚀 Added

• Add more documentation about our web components (#3038)

🛠 Fixed

• Fix doc-page pattern in Storybook (#3029)
• Fixed layout issues in doc pages (#2972)
• Fixed inaccurate color representation in theme-colors page (#2962)
• Fixed background color of docs vertical nav on hover (#2937)
• Removed unnecessary display utils from docs layout (#2936)
• Fixed outdated example projects (#2992)

10.0.0-beta.3

Beta release details

Design System [10.0.0-beta.3]

🚨 Breaking

• Updated Alert background colors to ensure sufficient color contrast (#3007)

📦 Internal

• New browser testing wrapper script (#3006, #3012)

10.0.0-beta.2

Beta release details

Design System [10.0.0-beta.2]

🚨 Breaking

• Officially dropped support for React 16
• Removed the --table-striped-header__background-color CSS variable (see previous beta release notes for earlier changes to this variable) (#2998)

💅 Changed

• Upgraded to TypeScript v5, but you should still be able to use your current TypeScript version if it worked with the design system before (#2990)
• Started using the new JSX transform for React 17, which cuts our bundle size by about 4% (#2994)

Documentation

🛠 Fixed

• Fixed outdated example projects (#2992)

10.0.0-beta.1

Beta release details

Design System [10.0.0-beta.1]

🚨 Breaking

• Removed deprecated semantic font-size classes (ds-h1, ds-display, etc.) (#2982)
  • We've included a migration script for this (npm run cmsds-migrate or yarn cmsds-migrate)
• Removed two optional aria-label props from VerticalNav component that were no longer necessary after simplifying the screen-reader experience (#2951)
• Removed the following CSS variables:
  • --button-icon__fill (#2940)
  • --color-background-dialog (#2933)
  • --color-background-dialog-mask (#2933)
  • --autocomplete* variables (#2928)
  • --dropdown* variables (#2928)
  • --dialog-icon__size (#2927)
  • --icon__color--error (#2927)
  • --icon__color--inverse (#2927)
  • --icon__color--primary (#2927)
  • --icon__color--success (#2927)
  • --icon__color--warn (#2927)
  • --label__color--inverse (#2927)
• Renamed the following CSS variables (#2927):

  From	To
  --table-striped__background-color	--table__background-color--striped
  --table-striped-header__background-color	--table-header__background-color--striped
  --form-hint__color	--hint__color
  --form-hint__color--inverse	--hint__color--inverse
  --form-error__color	--inline-error__color
  --form-error__color--inverse	--inline-error__color--inverse

• Make token changes informed by Figma migration (#2927)

⚠️ Deprecated

• Deprecated ds-u-truncate utility class (#2977)

💅 Changed

• Reconfigured browserslist to both increase calculated coverage of users and decrease bundle size. React bundle size shrunk by 20%, and it had similar results on Preact and web components. (#2957)
• Removed the empty string as the default value for the href prop on ExternalThirdPartyLink (#2949)
• The value of --alert__icon-size now uses rems instead of px and accurately reflects the final size of those icons (#2927)

🚀 Added

• <ds-dropdown> web components now accept <option> and <optgroup> in their inner HTML and not just a JSON options attribute (#2973)

🛠 Fixed

• Simplified screen reader experience for VerticalNav, Pagination, and Accordion components (#2951, #2970, #2971, #2950)
• Fixed accordion heading styles getting clobbered by ds-content CSS class by lowering specificity of :first-child and :last-child rules (#2942)
• Adjusted sizing and padding for SingleInputDateField to use relative units instead of absolute units so text does not get cut off in browsers with larger default font sizes (#2917)

📦 Internal

• Added scripts for syncing tokens with Figma (#2946, #2945)
• Added VRTs for example projects (#2959, #2961)

Healthcare.gov Design System [14.0.0-beta.1]

All changes from the core design system

Medicare.gov Design System [12.0.0-beta.1]

All changes from the core design system

Documentation

💅 Changed

• Examples to use local design system packages (#2938)

🛠 Fixed

• Fixed layout issues in doc pages (#2972)
• Fixed inaccurate color representation in theme-colors page (#2962)
• Fixed background color of docs vertical nav on hover (#2937)
• Removed unnecessary display utils from docs layout (#2936)

9.0.2

Design System [9.0.2]

🛠 Fixed

• Privacy settings to no longer throw error when no cookie exists (#2958)
• Made case-it a direct dependency (needed for web components) (#2954)
• Fixed instance of static id in dialogs (#2947)

Healthcare.gov Design System [13.0.2]

All changes from the core design system

Medicare.gov Design System [11.0.2]

All changes from the core design system

9.0.1

Design System [9.0.1]

🛠 Fixed

• Added missing <IdleTimeout> Spanish translations for default content (#2916)
• Fixed scroll position bug for <Dialog> instances using the old API (#2915)
• Fixed crash of <PrivacySettingsDialog> in Node environments (#2908)

📦 Internal

• Fixed Choice hint text causing unexpected deprecation warnings (#2893, #2921)

Healthcare.gov Design System [13.0.1]

All changes from the core design system and...

🛠 Fixed

• Capitalized Vietnamese language resources link in <Footer> (#2931)
• Improved accessibility in the <Footer> by removing out-of-place heading (#2926)

Medicare.gov Design System [11.0.1]

All changes from the core design system

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)

9.0.0-beta.2

Beta release details

Design System [9.0.0-beta.2]

🚨 Breaking

• 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

💅 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)

🛠 Fixed

• 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)

CMS.gov Design System [9.0.0-beta.2]

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-beta.2]

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-beta.2]

All changes from the core design system

Documentation

🚀 Added

• 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 a dead link in the Spinner guidance (#2874)
• Fixed flash of unstyled TextField story (#2869)
• Updated Storybook examples to follow label guidance (#2846)

📦 Internal

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

9.0.0-beta.1

Beta release details

Design System [9.0.0-beta.1]

🚨 Breaking

• 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)
• Removed the deprecated textClassName prop from labels (#2780)
• 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)
• 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.
• 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.

🚀 Added

• Added ds-dropdown web component (#2772)
• Added custom event handling to web components (#2738)
• Added web-component support to our Storybook (#2715)
• 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)

🛠 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

📦 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)

Documentation

💅 Changed

• Storybook to use Preact by default again (#2769)

🚀 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)

🛠 Fixed

• Fixed radio example showing on checkbox doc page (#2767)
• Fixed dead links in docs (#2766)

8.0.5

Design System [8.0.5]

🚀 Added

• Added a name property to the DropdownChangeObject sent in the Dropdown component's onChange handler (#2805)

🛠 Fixed

• Worked around React/Google-Translate issue in dropdown options (#2819)
• Removed redundant table role to fix axe-core error (#2818)
• Restored ability to disable autocompletes (#2797)