Releases: CMSgov/design-system
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
andds-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
- Removed the following CSS variables:
-
Medicare
- Removed
--hint__font-size
from medicare theme - Replaced
--choice__translateY
with--choice-label__top-offset
- Replaced
--datefield-separator__display
with--datefield__hide-separators
- Removed
-
-
Improved
ChoiceList
accessibility by preventing nested errors (#3145) -
Removed the
onEnter
prop fromDialog
(#3057) -
Removed
ds-u-truncate
class (#3021) -
Changed the optional component prop for the React
StepList
component from acceptingkeyof 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 ofcore-tokens.scss
andcore-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 theDialog
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 throughHelpDrawer
(#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
, andThirdPartyExternalLink
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
- Removed
🛠 Fixed
- Fixed overrides in
HelpDrawer
,HelpDrawerToggle
, andThirdPartyExternalLink
(#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 throughHelpDrawer
(#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 throughHelpDrawer
. (#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
andds-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
- Removed the following CSS variables:
-
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
onEnter
prop fromDialog
(#3057) -
Removed
ds-u-truncate
class (#3021) -
Changed the optional component prop for the React
StepList
component from acceptingkeyof 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 theDialog
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
, andThirdPartyExternalLink
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
- Removed
🛠 Fixed
- Fixed overrides in
HelpDrawer
,HelpDrawerToggle
, andThirdPartyExternalLink
(#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
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
andaria-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
vsflex-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:
- 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 theid
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
oryarn cmsds-migrate
)
- We've included a migration script for this (
- 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 onExternalThirdPartyLink
(#2949) - The value of
--alert__icon-size
now usesrems
instead ofpx
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 JSONoptions
attribute (#2973)Drawer
now passesbackdropClickExits
prop toNativeDialog
(#2582)
🛠 Fixed
- Simplified screen reader experience for
VerticalNav
,Pagination
, andAccordion
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 tods-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 haveChoice
props that are already provided by theChoiceList
(#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
🚀 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)