10.1.1

Design System [10.1.1]

🛠 Fixed

• Replaced Dropdown label with div to comply with a11y rules (#3099, #3103)
• Added missing Hint component export (#3096)
• Fixed warnings about end vs flex-end (#3095)
• Fixed the MultiInputDateField overwriting some props with defaults (#3094)
• Restored additional screen-reader context for calendar-picker days (#3091)

10.1.0

Design System [10.1.0]

💅 Changed

• Removed outdated analytics event properties (#3054, #3058)
• Decreased amount of JavaScript needed for <SingleInputDateField> (saves 5% of total bundle size for the design system) (#3064)

🚀 Added

• Added the following web components:
  • <ds-accordion> (#3071)
  • <ds-accordion-item> (#3071)
  • <ds-choice> (#3047)
  • <ds-choice-list>
  • <ds-hint> (#3026)
  • <ds-inline-error> (#3024)
  • <ds-label> (#3034)
  • <ds-month-picker> (#3068)
  • <ds-pagination> (#3075)
  • <ds-skip-nav> (#3056)
  • <ds-spinner> (#3050)
• Added bundle generation for individual web components (#3070, #3072)
• Added optional analytics tracking to ThirdPartyExternalLink (#3059)
• Web components that accept HTML content like <ds-alert> can now be updated by changing the inner HTML, and they will automatically re-render (#3053)

🛠 Fixed

• Fixed <Accordion> interfering with keyboard strokes of child elements (#3067)
• Fixed <Dialog> and <HelpDrawer> analytics firing too early (#3055)
• Fixed <Table> ignoring the id prop (#3065)
• Fixed missing dependencies for cmsds-migrate script (#3066)
• Fixed ES Modules support for <SingleInputDateField> (#3064)
• Fixed nesting web components in other web components as well as re-rendering web components (#3053)

Healthcare.gov Design System [14.1.0]

All changes from the core design system and...

🚀 Added

• Added analytics to healthcare footer links (#3063)

Documentation

💅 Changed

• Updated label guidance (#3008)

🚀 Added

• Added documentation for web component slots (#3079)
• Updated analytics docs page (#3078)
• Added links to Storybook in label, hint, and inline-error docs (#3039)

🛠 Fixed

• Fixed changing themes in web component stories (#3023)

📦 Internal

• Added live-analytics option to Storybook (#3073)

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