11.1.0

Design System [11.1.0]

💅 Changed

• Updated the color of the inline tooltip to each theme's base color (#3199)

🚀 Added

• Added ds-filter-chip web component (#3270)
• Added customizable arialabel prop to Tabs component. (#3264)
• Added ds-autocomplete web component (#3257)
• Added ds-drawer web component. (#3256)
• Added ds-tooltip web component (#3249)
• Added ds-tabs web component. (#3234)
• Added ds-step-list web component. (#3215)
• Added Email, Link, RSS, and What's New Icon components (#3202)

🛠 Fixed

• Resolved stylelint errors and updated snapshots (#3281)
• Simplified NPM distribution method for web components (#3262)
• Local state in web components is now maintained when attributes change (#3253)

📦 Internal

• Expanded the clean command with clean:builds subcommand (#3274)
• Added optional bundle analysis to the build command (#3258)
• Updated versions script and added latest patch and release versions (#3233)
• Figma token scope values are now sorted alphabetically (#3226)

CMS.gov Design System [11.1.0]

All changes from the core design system and...

💅 Changed

• Changed headers to Lexend (#3268)
• Changed body copy to Public Sans (#3251, #3276)
• Changed focus color from orchid to copper (#3246)

🚀 Added

• Added Lexend and Public Sans font files to CMS.gov theme (#3250)

Documentation

💅 Changed

• Removed doc site email icon (#3243)

🚀 Added

• Created dedicated stories for the ds-tab-panel web component (#3279)
• Added a shared web components example template and new example project (#3267)
• Added utility actions pattern guidance page (#3198)

📦 Internal

• Added default value overrides to Storybook (#3216)

11.0.1

Design System [11.0.1]

🛠 Fixed

• Reintroduces semibold font weight that was removed in version 11 (#3266)

Healthcare.gov Design System [15.0.1]

All changes from the core design system

Medicare.gov Design System [13.0.1]

All changes from the core design system

11.0.0

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

Design System [11.0.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, #3116, #3230)

  • Increased hint text size to match the size of inline-error text, improve legibility, and be consistent with other CMS brands

  • 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

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

⚠️ Deprecated

• As part of the Figma migration, there is now a single file for Sass tokens called core-theme.scss (and based on theme, e.g. cmsgov-theme.scss, healthcare-theme.scss, medicare-theme.scss) that you can import instead of core-tokens.scss and core-component-tokens.scss (same pattern applies for the other themes: cmsgov, healthcare, and medicare), but we’ve left those two older files for backwards compatibility. (#3100, #3230)

💅 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)
• Increased Hint text size to match the size of inline-error text
• 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 cmsds-migrate script for v11 CSS changes as described in the “Breaking” section (above). Attention: use this script to highlight CSS variables that were removed or require replacement. (#3208)
• 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

• Prevent console error from onAnalyticsEvent attribute rendering to DOM through HelpDrawer (#3210)
• 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)
• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink and made side effects consistent across packages (#3157)

📦 Internal

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

Healthcare.gov Design System [15.0.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)

🛠 Fixed

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

Medicare.gov Design System [13.0.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 lin...

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]

🚨 Breaking

• Undo the removal of the <PrivacySettingsDialog> dialog (6280081)

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