CMS Design System 2.0.0

See our migration guide for an overview of changes

@cmsgov/design-system

CMSDS usage has been simplified to a single dependency (#648)
The core, support, and layout npm packages have been deprecated and replaced with a new consolidated @cmsgov/design-system package. The deprecated @cmsgov/design-system-layout package is now located at dist/scss/base/grid, and @cmsgov/design-system-settings can be found at dist/scss/settings/index.
<ChoiceList> component’s type prop is now required (#686)
The <ChoiceList> component previously contained logic that dynamically rendered checkbox fields or radio buttons depending on certain props and conditions. This experience wasn’t very transparent, and could result in unexpected markup for the user. We removed certain props like multiple, and instead opted for a required type prop so users have to explicitly define whether they want to render checkboxes or radio buttons.
Fully deprecated and removed the <Select> component, use the <Dropdown> component instead. (#635)
We separated <Select> out of <ChoiceList>, and deprecated it in favor of <Dropdown> in v3.2.0. Now <Select> has been fully removed from the CMSDS.
Fully deprecated and removed right to left <Choice> component (#635)
Fully deprecated and removed fieldRef props in favor of inputRef naming convention (#635)

Support ES modules (#707)
ES module version of our React components are now available at @cmsgov/design-system/dist/esnext. Our package.json has been updated to let bundlers like webpack know to use this new entry point when possible.
Added typescript definition files for components (@cmsgov/design-system/dist/types). CMSDS components are still written in normal JSX, however we are still able to provide definition files
Added autoComplete prop to Date field component (#693)
This prop sets the autocomplete attribute on the date fields to bday-day, bday-month and bday-year.
Add status option to <Alert> component's ARIA role prop (#749)

All code and files related to documentation have been moved to the new @cmsgov/design-system-docs package
For more information about the new design system folder structure check out the documentation in GitHub
The robust gold focus styles have been moved back to beta, and are disabled by default.
See the CMS Design system (theming page)[https://design.cms.gov/startup/theming#focus-style-settings], the (migration guide)[https://design.cms.gov/startup/migrating-v2/#focus-styles], or internal confluence post for more details

Fixed named imports. With the addition of ES module support, we now support webpack’s sideEffects optimizations, which fixes unused components being included in the bundle when using named imports.
Fixed <HelpDrawerToggle> component’s inline prop to apply display: inline instead of display: inline-block (#713)
This change fixes an issue when the HelpDrawerToggle is a string of text in a paragraph element, particularly on small/mobile screen sizes. See this screenshot for an example.
Fixed “Cannot read property 'checked' of null” bug for checkedChildren (#725)
Fixed currency mask to include comma and decimals for Firefox (#704)
Fixed <Dropdown> with error message border styling to be consistent with other fields (#712)
Removed aria-labels from StepList list items with no label text (#711)

New @cmsgov/design-system-scripts package with shared design system scripts (#651) (#659) (#672) (#692)
- Script for compiling & minifying design system files
- Script for building & watching documentation site files
- Script for running Jest unit & e2e tests
- Script for running fully configurable linter/formatter (eslint, stylelint and stylelint)
Added support for TypeScript compilation, Typescript react prop docs, and Typescript definition file generation(#727)
Added cmsds.config.js (#737)
The cmsds.config.js file contains options like enabling Typescript support or template tags, see the config options here
Added template tags for Github repo links, npm package names, and design system names for dynamic documentation content

Optimized build scripts to be faster
KSS documentation tags have been updated. @react-props and @react-example tags are now used to define React prop documentation and React examples respectively.
See our updated guide on writing documentation for more information.

Fixed rootPath logic when generating build files for Github Pages or other domains with a root path.
Fixed “Download code and files” button to work for child design systems (#734)

Added @cmsgov/design-system-docs package containing default documentation site content, styles, and scripts
Added V2 Migration Guide documentation page
Added Child Design System documentation page

Updated the ‘Install with NPM” documentation content, new name is “Installation”
Combined “Using font and images” documentation page with “Using Sass/CSS”
Updated “Theming” documentation page
Updated inverse button examples (#687)
Improved guidance for form validation (#691)