Skip to content

11.0.0

Latest
Latest
Compare
Choose a tag to compare
@jack-ryan-nava-pbc jack-ryan-nava-pbc released this 18 Sep 19:55
· 29 commits to main since this release
@cmsgov/[email protected]
This tag was signed with the committer’s verified signature.
jack-ryan-nava-pbc Jack Ryan
GPG key ID: B2622685AE08FE4D
Learn about vigilant mode.
fe14b5a
This commit was signed with the committer’s verified signature.
jack-ryan-nava-pbc Jack Ryan
GPG key ID: B2622685AE08FE4D
Learn about vigilant mode.

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

  • Render default stories for Modal Dialog and Drawer in Storybook (#3203)
  • 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