Skip to content

11.0.0-beta.0

Pre-release
Pre-release
Compare
Choose a tag to compare
@tamara-corbalt tamara-corbalt released this 13 Aug 19:11
· 86 commits to main since this release
@cmsgov/design-system@11.0.0-beta.0
This tag was signed with the committer’s verified signature.
kim-cmsds Kim Niedermaier
GPG key ID: DD25B3F4E7758C0E
Learn about vigilant mode.
e479a57
This commit was signed with the committer’s verified signature.
kim-cmsds Kim Niedermaier
GPG key ID: DD25B3F4E7758C0E
Learn about vigilant mode.

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 (#3186)
  • Fixed Gatsby static image paths for archives and demos (#3176, #3183)
  • Improved guidance for error messages around what to avoid (#3154, #3137)

📦 Internal

  • Improved documentation, including adding a script to identify broken links (#3185, #3128, #3173)
  • Implemented open graph tags on design.cms.gov (#3169)
Assets 6
Loading