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)