Releases: CMSgov/design-system
Releases · CMSgov/design-system
1.0.0-alpha.8
1.0.0-alpha.7
Documentation 👉
🚀 Added
- New React form components
<ChoiceList>
conditionally renders aradio
,checkbox
, orselect
field<TextField>
- renders a textinput
ortextarea
field
🚨 Breaking changes
- Some of the filenames of existing components were changed:
Form/FormLabel
moved toFormLabel/FormLabel
Form/FormField
changed toTextField/TextField
1.0.0-alpha.6
Documentation 👉
- Published as a public NPM package
1.0.0-alpha.5
Documentation 👉
🚀 Added
- New React components
- Example React project, showing how to incorporate the design system into a build process (Using Webpack and Gulp).
Important: Since these components extend React.PureComponent
, your project needs to have a React version of 15.3
or higher.
🚨 Breaking changes
- Renamed
ds-c-dropdown
tods-c-select
, since this is applied to a<select>
element, and now also the<Select>
React component. There were no visual changes. - The default button component style is now with an outline. You no longer need to apply the
ds-c-button--outline
modifier class to achieve this style. A newds-c-button--transparent
modifier class has been added, which changes the button style to look more like an anchor element (no outline or background). - The label component (
ds-c-label
) will no longer have amargin-top
value when it's thefirst-child
of a fieldset. The fieldset component (ds-c-fieldset
) will now control the top margin, which resolves an issue with WebKit ignoring themargin-top
property when applied to alegend
element. This is being considered a breaking change since the margin is now applied to a different element and may introduce an unintended visual change if you had previously overwritten the label's margin or were relying on the previously broken behavior.
💅 Changes
🛠 Fixed
- Fixed checkbox/radio button's vertical alignment
- Center text on anchor buttons
1.0.0-alpha.4
🚀 Added
- Responsive utility prefixes! View the new "Responsive design" page of the documentation to learn more.
- US Web Design Standard - Vertical navigation component:
- A
.ds-h6
base typography class: - A
.ds-u-font-size--h4
utility class - The design system's version # is now included in a CSS comment at the top of the transpiled CSS file.
🚨Breaking changes
- Renamed
ds-title
tods-display
and renamedds-title--alt
tods-title
to be more consistent with thefont-size
utility class names. Sorry 😬
💅 Changes
🛠 Fixed
📝 Documentation
- Added a "Getting started" and "Core concepts" page
- Added "Further reading" sections
- Rendering as static HTML pages
1.0.0-alpha.3
🛠 Fixed
- Fixed the
@font-face
URLs in the transpiled CSS.
📝 Documentation
- Added an
examples
directory to the repo with basic examples of the design system in use.
1.0.0-alpha.2
🚀 Added
- CSS components and typography styles from the US Web Design Standards. Specifically:
input
,textarea
=ds-c-field
select
=ds-c-field ds-c-field--dropdown
radio
,checkbox
=ds-c-choice
button
,ds-c-button
- Alert/Notification =
ds-c-alert
- Typography
ds-base--inverse
base class which applies an "inverse" background and text colords-u-border--0
utility class for removing an element's default border- Yeoman generator (
yarn run generate
) for creating a component's initial files
Note: If you plan to use the Sass files, you'll want to be sure to copy the src/images
directory and ensure the $image-path
Sass variable points to wherever your project's images directory is.
🚨Breaking changes
- The
accessible-outline
mixin (_mixins.outline
) has been removed - The
px
function (functions.px
) has been removed
📝 Documentation
- Details and usage instructions are now collapsed by default so the code snippets don't get pushed so far down the page. This is a temporary solution until the docs get some lovin'.
- Now link to a component's USWDS companion page
1.0.0-alpha.1
🚀 Added
- Utility classes! A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element. We can begin using utility classes to prototype possible components. Once we've identified what these components are, we can then roll them into the design system using more succinct names. This is just a first pass and I'm very open to feedback, especially on the naming convention. I'm currently favoring clarity over succinctness. This means the design system may be verbose, but it should deliver clarity and resilience in exchange. The styling of these utility classes will likely also evolve as we continue pushing on the design front.
- A new base CSS layer. You can apply the
ds-base
class to the<body>
or parent element to apply a base layer of styling (color
,font-family
,font-size
,line-height
). Let me know if you have feedback or more ideas on how we can apply base HTML styles while still allowing the design system to be effectively implemented into existing codebases.
🚨Breaking changes
- The namespace changed from
hc-
tods-
to align closer with CMS.gov as a whole, rather than being tied to just HealthCare.gov. No promises that this will be the last time this changes 😬 - The package is now published to the
cmsgov
NPM account rather than Nava's. If you previously installed the package, you'll want to update the package name since it's now@cmsgov/design-system-core
.
📝 Documentation
- Still lots of work to be done, but there's now a bit more organization applied to the documentation.
- Code snippets can now be hidden using the
@hide-markup
KSS flag - A new
@status
KSS flag allows us to mark components as Prototype/Alpha/Beta/etc - Published online so anyone can now read it without generating it locally. Temporarily hosted on S3 until we get GitHub pages working.
- KSS markup comments can now use EJS to generate more complex examples.