1.5.0

💅 Changes

• Undocumented props passed to <TextField> will now be added to the rendered input DOM node. This is the same behavior as <Choice>, <Select>, and <Button>. #192 - thanks @apobbati!

1.4.0

🚀 Added

• Added a requirementLabel prop to the FormLabel component
• Added fieldRef prop to the TextField React component to expose a ref on the input/textarea element #171
• Added max and min props to TextField component. #183
• Add ds-c-alert--hide-icon CSS class and hideIcon React prop to hide Alert component's icon #182, #187

  

• Added a checkedChildren and uncheckedChildren prop to the Choice component. These props conditionally display content below the Choice field when the field is checked or unchecked, respectively. #173

  

• Added ds-l-form-row to provide tighter spacing on form fields laid out using grid classes #180

  

• Added ds-l-col--auto to allow grid columns to span their content's natural width (useful for form fields) #180

  

• Added DateField CSS and React component #183
  

💅 Changes

• Removed .ds-c-field--select. We instead look at whether ds-c-field is added to a select element instead. #179

🛠 Fixed

• Remove Chrome's new default border-radius #174

Before	After

• Added padding to the select element so that text doesn't overlap with the icon when the field's width is set to auto #179

  

1.3.0

🚀 Added

• Added support for React 16. #163

💅 Changes

• Changed padding values of button, input, and select components. #165

  

• Changed icon of select component to be consistent with U.S. Web Design Standards #166

  

• Removed PNG fallback icons. These were only needed for IE9 support. #166

1.2.0

🚀 Added

@cmsgov/design-system-core

• Right-to-left checkbox/radio style - #144
  • New ds-c-choice--right modifier class for placing a checkbox/radio on the right side of the label
  • New inputClassName and inputPlacement props added to Choice component

    

• Added a "small" size variant to the Choice component - #146
  • New ds-c-choice--small modifier class added
  • New size prop added to Choice component

    

• New aria-valuetext and role props (with default values) added to Spinner component - #138, #141

💅 Changes

@cmsgov/design-system-core

• Bumped react and react-dom to 15.6.2 - #153
  (We'll add support for v16.x very soon, after a little more testing).

@cmsgov/design-system-support

• Bumped uswds package to 1.3.1 - #145

Sketch file - #142

• Renamed file to make more sense with how Sketch Libraries work
• Reorganized text styles
• Updated color values
• Added additional button component variations
• Added "small" body text style
• Fixed resizing constraints of Dropdown, Checkbox, and Radio buttons
• Add "big" variation of "disabled" button

🛠 Fixed

@cmsgov/design-system-core

• Fixed checkbox/radio behavior caused by negative margin: The Choice input was hidden by setting its margin-left property to -100%. This caused issues when two choices were side by side. #143

📦 Internal

• Added ability to preview site packages, AKA "themes", in the context of the documentation - #139

1.1.0

🚀 Added

Core

• A Sketch file with design system's components and shared styles is now available in the design-assets directory of the repo.
• New component: Spinner (#126)
  Currently considered in Alpha status, so expect further guidance and possibly breaking changes for this component.

  

Support

• New mixin: inline-icon

💅 Changes

Core

• Updated the visual design of the Alert component, reflecting the same visual changes coming down the US Web Design Standards pipeline. (#128)

  

1.0.1

🛠 Fixed

@cmsgov/design-system-core

• Fixed IE compatibility of the VerticalNavItem and VerticalNavItemLabel React components

📦 Internal

• Fixed IE compatibility of docs site

1.0.0

This is the first official release of the CMS Design System. Future releases will conform to the Semantic Versioning as outlined here.

🚀 Added

• Added a flex-wrap utility class
• Added a $ds-include-base-html-rulesets: true Sass variable which, when set to false, will disable the base HTML selectors. (Only a {...} right now — see below)
• Added SkipNav CSS and React component
  

🚨 Breaking changes

• Added styling to base <a> elements (More info here: #106)
• Renamed ds-c-vertical-nav__link to ds-c-vertical-nav__label to more accurately represent its functionality — it can be used on more than just <a> tags. (#116)
• Changed both the default font and image paths so that their directories are now expected to live in the same directory as the CSS's directory. This is actually what the U.S. WDS does, so it's a reversion of customizations we made early on. The expected file structure is now:

  ├── Assets directory/
      ├── css/          # The CSS directory can be named whatever you want.
      ├── images/
      └── fonts/
  

  To restore the previous behavior, you could define the following variables before the line where you @import the design system's Sass file:

  $font-path: 'fonts';
  $image-path: 'images';
  
  @import '@cmsgov/design-system-core';

• Moved the fonts and images directories to the root of packages/core, moving them out of the dist and src directories.

💅 Changes

• ds-u[-*]-justify-content*, ds-u[-*]-align-items*, and ds-u[-*]-flex-wrap* now use !importants when setting properties.

• ds-display and ds-title will now drop down to the font-size of ds-h1 on small screens. This is similar to what USWDS does and saves the trouble of doing this yourself during implementation, which you'd likely need to do.

• When a Vertical Nav item includes a sub-navigation menu, the user can now toggle the sub-nav by clicking anywhere on the label. Before, they had to click the arrow icon, which was pretty annoying. Below is a visual comparison of the functionality:

  Before	After

🛠 Fixed

• Fixed unexpected flexbox grid column behavior caused by the default min-width value of flexbox items being set to auto. This could result in a grid column overflowing the viewport on the x-axis, rather than resizing to fit within the viewport as you'd expect. For more context, check out this article.

1.0.0-rc.2

🚀 Added

• Flexbox utility classes
• display utilities now support flex as a value
• margin utilities now support auto as a value
• @cmsgov/design-system-support package. See note about this in the "Breaking changes" section below.
• @cmsgov/design-system-layout package with a ✨ responsive flexbox grid ✨
  
• Added "Documentation page" pattern, based on the one by USWDS.

🚨 Breaking changes

• Moved Sass mixins and variables to separate NPM package: @cmsgov/design-system-support — These are still included in the core package and this change shouldn't break anything unless you were importing the individual settings or mixins files.

💅 Changes

• Removed bourbon dependency

📦 Internal

Lots of improvements to the internal tooling and documentation site. Some highlights:

• HTML examples are now rendered in a sandboxed iframe
• Added the ability for some examples to include toggles, allowing you to preview the example at various breakpoints
• Added GOVERNANCE.md

1.0.0-rc.1

This is the first release candidate — meaning we feel confident that the components within it which are being recommended have no known bugs. Each component now has its own status (alpha, beta, or recommended). The majority of the components are now considered "recommended". This is consistent with their status in the U.S. Web Design Standards, which is where most came from.

🚀 Added

• Added support for Table row headers and a new ds-c-table__caption component

  

💅 Changes

• Substantial updates to the guidance documentation of each component
• Changed the styling of the Badge component and added additional modifiers:

  

1.0.0-alpha.11

🚀 Added

• React component for Vertical Navigation #73

💅 Changes

• Increased smallest font size from 13px to 14px #73

• Upgraded dependencies #74

  Package	Current version	Updated version
  React	15.5.4	15.6.1
  USWDS	1.2.0-rc1	1.2.1