11.0.0-beta.1

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

Design System [11.0.0-beta.1]

🚀 Added

• Add cmsds-migrate script for v11 CSS changes as described in the previous beta release notes. Attention: use this script to highlight CSS variables that were removed or require replacement. (#3208)

🛠 Fixed

• Prevent console error from onAnalyticsEvent attribute rendering to DOM through HelpDrawer (#3210)

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

All changes from the core design system and...

🛠 Fixed

• Define a better return type for defaultMenuLinks (#3211)

Documentation

🛠 Fixed

• Render default stories for Modal Dialog and Drawer in Storybook (#3203)

10.1.3

Design System [10.1.3]

🛠 Fixed

• Fixed bug causing drawers to always trap focus (#3108)
• Fix onAnalyticsEvent prop bleeding into <dialog> DOM elements through HelpDrawer. (#3210)
• Fix Define a better return type for defaultMenuLinks (#3211)

Healthcare.gov Design System [14.1.3]

All changes from the core design system.

Medicare.gov Design System [12.1.3]

All changes from the core design system.

11.0.0-beta.0

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

Design System [11.0.0-beta.0]

🚨 Breaking

• As a result of migrating to Figma (#3138), a number of CSS variables have been changed to increase consistency and facilitate bi-directional syncing between our codebase and the Figma design library. More context can be found in the Release 11 blog post. The specific CSS variables that have been updated, replaced, or added are listed in the section below.

  Details of CSS Variable updates (#3107, #3110, #3111, #3112, #3131, #3133)

  • Removed --button_font-weight variable in favor of the following new variables:

    • --font-weight-button-sm
    • --font-weight-button-md
    • --font-weight-button-lg

  • Removed these font variables:

    • --font-sans
    • --font-serif
    • --font-weight-light
    • --font-weight-semibold
    • --typography-body__font-family
    • --typography-heading-2xl__font-size--mobile
    • --typography-heading-2xl__font-size
    • --typography-heading-3xl__font-size--mobile
    • --typography-heading-3xl__font-size
    • --typography-heading-3xl__font-weight
    • --typography-heading-4xl__font-size--mobile
    • --typography-heading-4xl__font-size
    • --typography-heading-4xl__font-weight
    • --typography-heading-5xl__font-size--mobile
    • --typography-heading-5xl__font-size--tablet
    • --typography-heading-5xl__font-size
    • --typography-heading-lg__font-size
    • --typography-heading-lg__font-weight
    • --typography-heading-md__font-size
    • --typography-heading-md__font-weight
    • --typography-heading-sm__font-size
    • --typography-heading-sm__font-weight
    • --typography-heading-xl__font-size
    • --typography-heading__font-family
    • --typography-heading__font-weight

  • Added the following font variables:

    • --font-family-body
    • --font-family-button
    • --font-family-heading
    • --font-family-link
    • --font-weight-body-lg
    • --font-weight-body-md
    • --font-weight-body-sm
    • --font-weight-button-lg
    • --font-weight-button-md
    • --font-weight-button-sm
    • --font-weight-heading-2xl
    • --font-weight-heading-3xl
    • --font-weight-heading-4xl
    • --font-weight-heading-5xl
    • --font-weight-heading-lg
    • --font-weight-heading-md
    • --font-weight-heading-sm
    • --font-weight-heading-xl

  • Added globally inherited font variables:

    • --global__font-family
    • --global__font-size
    • --global__line-height

  • Removed the ds-u-sans-serif and ds-u-serif classes and related variables:

    • --font-sans
    • --font-serif

  • Removed shadow variables:

    • --shadow-base-blur-radius
    • --shadow-base-color
    • --shadow-base-offset-x
    • --shadow-base-offset-y
    • --shadow-base
    • --shadow-focus-inverse
    • --shadow-focus-link
    • --shadow-focus

  • Removed the ds-u-font-weight--semibold utility class

  • Removed USA Banner variables:

    • --usa-banner-gutter-width
      • This variable can continue to be used by teams to modify the component, but we will no longer be providing a default value in the theme files because it is redundant information.
    • --usa-banner__max-width
      • Similar to the previous variable, teams can still use it to change the max width from the default, but we'll no longer be declaring it.
    • --usa-banner-color
      • Same as above. It's still an option for customizing, but we don't declare it ourselves.
    • --usa-banner-link__color
      • Same as above. It's still an option for customizing, but we don't declare it ourselves.
    • --usa-banner-heading__font-family
    • --usa-banner-heading__font-size
    • --usa-banner-heading__line-height
    • --usa-banner-panel__font-family
    • --usa-banner-panel__font-size
    • --usa-banner-panel__line-height

  • Removed the following CSS variables:

    • --form__max-width
    • --form__max-width--small
    • --form__max-width--medium

  • Replaced them with these:

    • --field-max-width
    • --field-max-width--small
    • --field-max-width--medium

  • Removed the following CSS variables:

    • --autocomplete*
    • --dropdown*

  • Split --accordion__border-radius into the following variables to support Figma:

    • --accordion__border-bottom-left-radius
    • --accordion__border-bottom-right-radius
    • --accordion__border-top-left-radius
    • --accordion__border-top-right-radius

  • Healthcare

    • Removed the following CSS variables:
      • --inset__border-width
      • --footer__list-marker-size
      • --accordion-icon__size

  • Medicare

    • Increased hint text size to match the size of inline-error text, improve legibility, and be consistent with other CMS brands (#3110, #3116)
    • Removed --hint__font-size from medicare theme
    • Replaced --choice__translateY with --choice-label__top-offset
    • Replaced --datefield-separator__display with --datefield__hide-separators

• Improved ChoiceList accessibility by preventing nested errors (#3145)

• Removed the <PrivacySettingsDialog> dialog (#3083)

• Removed the onEnter prop from Dialog (#3057)

• Removed ds-u-truncate class (#3021)

• Changed the optional component prop for the React StepList component from accepting keyof JSX.IntrinsicElement to just "a" (#3089)

💅 Changed

• CSS variables in theme CSS files reference other CSS variables (#3135)
• Fixed Link component based on Figma token constraints (#3123)
• Implemented stricter warnings when the isOpen prop isn't used with the Dialog component (#3121)
• Reduced dialog polyfill to bare minimum (#2996)
• Standardized and applied the following attributes to <ds-alert>, <ds-choice>, <ds-button>, <ds-dropdown>, and <ds-month-picker> (#3089):
  • analytics
  • analytics-label-override
  • analytics-event-type-override
  • analytics-parent-heading
  • analytics-parent-type
  • label
  • label-class-name
  • label-id
  • hint
  • hint-id
  • requirement-label
  • error-id
  • error-placement
  • error-message
  • error-message-class-name

🚀 Added

• Added PrintIcon component (#3196)
• Added ds-date-field web component (#3182)
• Added ds-text-field component (#3172)
• Increased scope of Prettier formatting for the design system token package (#3102)
• Added full support for font-family tokens when syncing with Figma (#3101)

🛠 Fixed

• Fixed SCSS token generation and consumption (#3100)
• Removed unused storybook styles, add support for font fallbacks (#3153)
• Removed inversed prop from label-div (#3122)
• Fixed bug causing drawers to always trap focus (#3108)

📦 Internal

• Deleted Sketch plugin (#3097)
• Updated design system token build scripts to rely on version-controlled JSON source (#2952)

💅 Changed

• Increased Hint text size to match the size of inline-error text

🛠 Fixed

• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink and made side effects consistent across packages (#3157)

Healthcare.gov Design System [15.0.0-beta.0]

All changes from the core design system and ...

🚨 Breaking

• In the wake of migrating to Figma (more information can be found in the Release 11 blog post), removed the following CSS variables:
  • --inset__border-width
  • --footer__list-marker-size
  • --accordion-icon__size

🚀 Added

• Improved potential for tree-shaking (#3157)

Medicare.gov Design System [13.0.0-beta.0]

All changes from the core design system and...

🚨 Breaking

• Increased the size of form-field hint text to be consistent with other CMS brands and to improve legibility for Medicare.gov users (#3110, #3116)
• In the wake of migrating to Figma (more information can be found in the Release 11 blog post), made the following changes to CSS variables:
  • Removed --hint__font-size
  • Replaced --choice__translateY with --choice-label__top-offset
  • Replaced --datefield-separator__display with --datefield__hide-separators

🛠 Fixed

• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink (#3157)

Documentation

💅 Changed

• Component and pattern guidance found on design.cms.gov now link to Figma pages (#3189)
• Design.cms.gov references new JSON tokens (#3098)
• The ThirdPartyExternalLink component is used on design.cms.gov (#2522)

🚀 Added

• Updated third party external link docs to include PDF guidance (#3156)
• Added links to analytics docs from prop descriptions in Storybook (#3124)
• Added Form Validation pattern guidance to the docs site (#3093)

🛠 Fixed

• Fixed broken links in COMPONENT_MATURITY.md (...

9.0.3

Design System [9.0.3]

🛠 Fixed

• Export the new Hint component (#3096)
• Export the new useDialog hook (#3130)

Healthcare.gov Design System [13.0.3]

All changes from the core design system

Medicare.gov Design System [11.0.3]

All changes from the core design system

10.1.2

Design System [10.1.2]

🚀 Added

• Added ability to spread props on drawer (#3074)

🛠 Fixed

• Improved screen reader experience by ensuring aria-live and aria-atomic regions are always be present in DOM (#3136)
• Fixed generating error ids for individual Choices (#3146)
• Fixed Dropdown flashing closed in certain situations (#3143)
• Fixed Firefox scrolling pages to the top when a dialog opens (#3142)
• Fixed body scroll freeze persisting after dialog unmounts (#3140)
• Started exporting the new useDialog hook (#3130)
• Restricted initial screen-reader anouncements of alerts to their headings and not their body content (#3129)
• Audited and adjusted ARIA attributes to adhere to current standards (#3051)

📦 Internal

• Cleaned up analytics code in Storybook (#3139)

Healthcare.gov Design System [14.1.2]

All changes from the core design system and...

💅 Changed

• Added header and footer sub-element CSS-class customization to support Smartling translation (#2860)

🛠 Fixed

• Started exporting the healthcare version of ThirdPartyExternalLink (#3126)

Documentation

📦 Internal

• Removed dead link to Sketch assets (#3141)

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)

Healthcare.gov Design System [14.1.1]

All changes from the core design system

Medicare.gov Design System [12.1.1]

All changes from the core design system

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)