What’s new

October 2019

@carbon/colors@10.5.0

New features

feat(colors): update colors to match V2 palette (#3957) (ed202f8f6)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4262) (8983ed788)
chore(colors): add color palette source files (#4206) (4d1781eee)
chore(release): update package versions (#4139) (1a435757c)

carbon-components@10.7.0

New features

feat(toggle): add aria-label and label text props to skeletons (#4204) (fef8eb9f4)
feat(components,themes): add enable-css-custom-properties feature flag (#4100) (d8d93e366)
feat(themes): update build step to emit prefixed custom properties (0b0599e6e)
feat(file-uploader): add drop and drop file uploader (#3873) (0074e2219)
feat(link): introduce inline variant (#3859) (f167fd6fb)
feat(FileUploader): add drag and drop file uploader (#3872) (8a4fae72c)
feat(floating-menu): add focus wrap element to components (#3652) (34d1fddcf)
feat(TooltipIcon): port vanilla WCAG 2.1 fixes (#3842) (aeacad436)

Bug fixes

fix(components): make sure font weight is loaded (#4160) (f73d62a81)
fix(dropdown): update overflow style rules for ie, edge, and safari support (#4132) (a48e6bd66)
fix(accordion): top align accordion headings (#4125) (1974a1e86)
fix(components): call carbon—theme to keep themes in sync (14cbc219d)
fix(modal): use focus theme token for close button border color on focus (#4078) (d96efd6d5)
fix(button): add higher contrast danger button color token to all themes (#4037) (7c8fd431a)
fix(toggle): update colors (#4038) (9ac1eef87)
fix(button): vertically align to top by default (#3983) (06b15f3c6)
fix(date-picker): update month UI upon manual input (#3979) (cccb54c56)
fix(form): remove italic from helper text (#3977) (dfbeb8dce)
fix(dropdown): restore space bar and enter key item selection (#3926) (fc2277328)
fix(skeleton): disable motion if prefers-reduced-motion is true (#3905) (d9aede10e)
fix(notification): fix low contrast markup (#3899) (95e02b98b)

Documentation

docs(migration): update scss migration guide links (#4140) (b2636f786)
docs(components): remove sassdoc annotation (#3916) (884c2985c)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4262) (8983ed788)
chore(release): update package versions (#4139) (1a435757c)
test(components): update snapshots (319b58952)
chore(project): sync generated files (f65266835)
chore(project): check-in generated files (9dab26827)
refactor(components): update test formatting (59f999862)
chore(project): remove custom eslint rules (#4027) (58833d0bc)
chore: removes dashed outline from modal close in firefox (#3984) (8de0efcaf)
chore(data-table): mark sticky header experimental (#3949) (11b87ab01)
chore(react): update storybook and react (#3891) (548a04168)

@carbon/elements@10.7.0

New features

feat(components,themes): add enable-css-custom-properties feature flag (#4100) (d8d93e366)

Bug fixes

fix(form): remove italic from helper text (#3977) (dfbeb8dce)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4262) (8983ed788)
chore(release): update package versions (#4139) (1a435757c)
chore(project): sync generated files (f65266835)
chore(project): check-in generated files (9dab26827)

@carbon/pictograms-react@10.7.0

Bug fixes

fix: update pictograms dep (#4105) (fc1dde65f)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4139) (1a435757c)
chore: make pictogram packages public (#4098) (ca4b18e00)

@carbon/pictograms@10.7.0

New features

feat(pictograms): add pictograms and update metadata (#4041) (a8379f7d8)

Bug fixes

fix(pictograms): Update metadata.yml (#4093) (31e74266f)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4139) (1a435757c)
chore(pictograms): update metadata for milan and mexico-city as… (#4102) (10378d578)
chore: make pictogram packages public (#4098) (ca4b18e00)

carbon-components-react@7.7.0

New features

feat(toggle): add aria-label and label text props to skeletons (#4204) (fef8eb9f4)
feat(components,themes): add enable-css-custom-properties feature flag (#4100) (d8d93e366)
feat(tile): support ignoring click events (#4059) (1c7ad53b4)
feat(ui-shell): add alternative behaviours (#3990) (a53796102)
feat: add Carbon theme switcher to React storybook (#3989) (9f2894f29)
feat(TooltipDefinition): support custom trigger element class names (#3995) (59d0e3cdc)
feat(link): introduce inline variant (#3859) (f167fd6fb)
feat(TooltipIcon): auto generate default IDs (#3954) (a18e7348f)
feat(data-table): add sticky header to React data table (#3876) (9b8a4619f)
feat(FileUploader): add drag and drop file uploader (#3872) (8a4fae72c)
feat(TooltipIcon): port vanilla WCAG 2.1 fixes (#3842) (aeacad436)

Bug fixes

fix(accordion): top align accordion headings (#4125) (1974a1e86)
fix(DatePicker): improve keyboard navigation (#4101) (40da1fade)
fix(tooltip): conditionally set aria-describedby on open (#4110) (39640c529)
fix(icon-build-helpers): remove convertPathData minification ru… (#4107) (81d69760a)
fix(ExpandableTile): resolves VO issues (#4055) (02415c815)
fix(tooltip): add aria-labelledby and aria-describedby properties (#4073) (c352d315a)
fix(Modal): remove scroller class on unmount (#4066) (be8980767)
fix(ComboBox): resolves DAP violations (#4028) (b0af77524)
fix(date-picker): update month UI upon manual input (#3979) (cccb54c56)
fix(InlineLoading): support richer description (#3951) (605502a88)
fix(TileGroup): Wrap RadioTiles inside TileGroup (#3947) (becfd1939)
fix(table-batch-action): remove default iconDescription, add proptype check, update stories (#3928) (765e7ece0)
fix(InlineLoading): fix prop type (#3933) (5ebdd2d3b)
fix(TableToolbarAction): adds forwardRef so focus management works as expected (#3918) (6dcabd4cf)

Documentation

docs(react): upgrade storybook to 5.2 (#4192) (bb682418b)
docs(text-input): set display name and props for variations (#4190) (6bd123ccb)
docs(accordion): add displayname for select component proptable (#4186) (687da2f84)
docs(inline-loading): update mocksubmission example to have proptable (#4182) (2e3291761)
docs(radio-button): remove checked knob from story (#4087) (810498081)
docs: create so-you’re-going-on-vacation.md (#4029) (0efa21b82)
docs(button): add display name in storybook (#3996) (f00f1ce97)
docs(OverflowMenu): use overflow menu example (#3966) (c6df3cded)
docs(DataTable): adds with OverflowMenu story (#3956) (4901bf98c)
docs(button): update iconDescription prop description (#3924) (bbc27a4af)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4262) (8983ed788)
chore(react): add component name to deprecation warning for toolbar (#4229) (dd2c1357c)
test(dropdown): assign mockProps before each title test (#4150) (d2f1562e6)
test(combo-box): add required id to mockProps before each test (#4169) (faf492993)
chore(release): update package versions (#4139) (1a435757c)
chore(react): add deprecation warning to Toolbar/ToolbarSearch (#4097) (2e4ee8fca)
test(react): add toHaveNoViolations matcher (#3927) (4c0675682)
chore(project): force react resolutions (#3917) (5285ccbc4)
chore(react): update storybook and react (#3891) (548a04168)

@carbon/themes@10.7.0

New features

feat(themes): add type tokens to themes (580955f54)
feat(components,themes): add enable-css-custom-properties feature flag (#4100) (d8d93e366)
feat(themes): update build step to emit prefixed custom properties (0b0599e6e)
feat(tokens): add danger, text05, update text02 (#3962) (36113ce67)

Bug fixes

fix(themes): delay token or map initialization (225b4911b)
fix(themes): remove duplicate danger token (9f37efa5b)
fix(button): add higher contrast danger button color token to all themes (#4037) (7c8fd431a)
fix(themes): update disabled-02 value (#3980) (401107df3)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4262) (8983ed788)
chore(release): update package versions (#4139) (1a435757c)
test(themes): update themes test (c02493166)
chore(project): sync generated files (f65266835)
chore(themes): remove comment block from theme-maps (5b26e6dfc)
chore(project): check-in generated files (9dab26827)
refactor(themes): move tests out of scss dir to prevent copy (60e737bb1)
refactor(themes): split out tests and update import paths (9d9e7df53)
refactor(themes): update themes build and output to generated (4e3264235)

@carbon/type@10.6.0

New features

feat(type): add support for emitting custom properties (a36bb199c)
feat(type): add token reference (41e2fc3b7)

Bug fixes

fix(type): remove italic from helper text 01 (#4004) (a4e1ee18c)
fix(form): remove italic from helper text (#3977) (dfbeb8dce)

Housekeeping

chore(release): update package versions (#4265) (346e93543)
chore(release): update package versions (#4139) (1a435757c)
test(type): update test snapshots (a2a51058f)
chore(project): sync generated files (f65266835)

August 2019

@carbon/cli@10.5.0

New features

feat(cli): add changelog command #3890

carbon-components@10.6.0

New features

feat(inline-loading): introduce error state #3772
feat(ui-shell): add option for large variation and disabling mouse listeners #3802

Bug fixes

fix(css-reset): apply box-sizing reset to all descendants #3884
fix(toggle): use rem instead of px values #3858
fix(grid): update margin at max breakpoint #3824
fix(checkbox): reverse label text #3845
fix(TableToolbarSearch): support back-tab #3836
fix(tabs): update token values #3828
fix(fileUploader): add in disabled styles #3799
fix(tile): a11y fixes for expandable tile #3785
fix(content-switcher): set height in button container instead of button #3758
fix(breadcrumb): terminating slash based on current page existence #3750
fix(type): add default type feature flag #3742

Housekeeping

chore(release): update package versions #3863
refactor(modal): remove leftover mixin #3846
chore(devenv): simpler custom properties build #3851
chore(release): update package versions #3826
chore(readme): remove references to Bluemix Components #3818
refactor(tooltip): avoid calc inside transform for IE support #3739
chore(date-picker): fix date picker disabled state colors #3761

@carbon/elements@10.6.0

Bug fixes

fix(grid): update margin at max breakpoint #3824
fix(type): add default type feature flag #3742

Housekeeping

chore(release): update package versions #3863
chore(release): update package versions #3826

@carbon/grid@10.6.0

Housekeeping

chore(release): update package versions #3863

`@carbon/icons-handlebars@10.6.0`

Housekeeping

chore(release): update package versions #3863

`@carbon/icons-react@10.6.0`

New features

feat(icon-build-helpers): add icon-build-helpers #3820

Housekeeping

chore(release): update package versions #3863

@carbon/icons-vue@10.6.0

Housekeeping

chore(release): update package versions #3863
chore(release): update package versions #3826
refactor(icons-vue): port icons-react changes, refactors, optimizations #3643

@carbon/icons@10.6.0

New features

feat(icons): add august batch of icons #3731
feat(icon-build-helpers): add icon-build-helpers #3820

Bug fixes

fix(icons): update ci-check and fix metadata #3856
fix(icons): remove fog.svg #3878)
fix: 3D-iCA metadata #3709

Housekeeping

chore(release): update package versions #3863

`@carbon/layout@10.5.0`

Bug fixes

fix(grid): update margin at max breakpoint #3824

Housekeeping

chore(release): update package versions #3863

carbon-components-react@7.6.0

New features

feat(TooltipDefinition): port vanilla WCAG 2.1 fixes #3840
feat(inline-loading): introduce error state #3772
feat(Tooltip): support controlled and uncontrolled modes #3357
feat(ui-shell): add option for large variation and disabling mouse listeners #3802

Bug fixes

fix(Slider): remove redundant labelText #3894
fix(Dropdown, ComboBox): adds listener to open/close menu on enter #3862
fix(TableToolbarSearch): support back-tab #3836
fix(fileUploader): add in disabled styles #3799
fix(sidenav): sidenavmenu stays open when in rail #3626
fix(tile): a11y fixes for expandable tile #3785
fix(breadcrumb): terminating slash based on current page existence #3750

Documentation

docs(Icon): more detailed migration guide #3789
docs(data-table): update readme code block lang to jsx #3779

Housekeeping

chore(release): update package versions #3863
chore(Tooltip): cleanup and remove outdated clickToOpen tests #3866
refactor(TableToolbarSearch): remove unused classname #3839
chore(toolbar): add proper aria labels #3844
chore(release): update package versions #3826
chore(storybook): update brand url to new monorepo pkg #3784

@carbon/themes@10.6.0

Housekeeping

chore(release): update package versions #3863

@carbon/type@10.5.0

Bug fixes

fix(type): add default type feature flag #3742

Housekeeping

chore(release): update package versions #3863
chore(release): update package versions #3826

July 2019

Our release focused on the following projects:

Community contribution
Icons
Patterns curriculum
IDL site QA and release
Website content and strategy
Design kit

View our v10.4.0 changelog for more details.

March 2019: v10 release

Carbon v10 is released. The Carbon Design System adopts the new IBM Design Language.

There are extensive visual changes, and some functional changes, to all components.
There should be feature parity with Carbon v9.
For full information on component changes, please refer to the migration guides; Carbon Components Vanilla Javascript, Carbon Components React
Introduction of production ready Carbon Elements package.
The Carbon Design System website at next.carbondesignsystem.com will convert to the www site on 4/1/2019.

February 2019

The Carbon v10 launch is just around the corner, and we’ve officially entered Beta! That means the core team has been hard at work ensuring the new system is ready to ship. We have tons of improvements headed your way, including implementation of the new IBM Design Language and an all-new website.

We expect v10 to launch mid-March, so keep your eyes peeled. If you’re interested in getting started before our public launch, we’re always looking for beta testers to help us squash bugs and improve the Carbon Design System.

October 2018

Experimental

A new Experimental section has been added to the website. Experimental components, designs, patterns, and other resources are work that is still under development.

Experimental components, designs, and other resources are presented for testing and feedback. They are not intended for production use.

June 2018: V9 Release

Website

Add-ons section has been removed. There is an Add-ons page that now lives under the Getting Started section
The contribution overview page has been moved from the Guidelines to the Getting Started section
Data Visualization has moved from under the components section into its own section

Components

New

Updates (Visual & Interaction)

Code snippets now have a new style and new interaction options. There is also a variation with line numbers available.
Interactive Tooltip (formerly Tooltip) can now contain interactive elements and opens on click
Updated all inputs so they meet the new WCAG 3:1 color ratio guidelines for defined objects
Date & Time Picker
Dropdown
Number Input
Search
Select
Slider
Text Input
Text Area

Color

Go check out the Swatches page to see the new color options and updates.

Colors have been updated to make them more accessible— changing hex values and roles for some of the swatches
The new, updated palette is available with Design Kit
The changes include (bold indicates a new color token)
$ui-05 – #5A6872 (passing 4.5:1, high contrast border, secondary icons)
$ui-04 – #8897A2 (passing 3:1, now used for emphasis borders)
$ui-03 – #DFE3E6 (not passing 3:1, now used for subtle borders)
$support-01 – #E0182D (passing 4.5:1)
$support-01 – #CDD1D4 (not passing 4,5:1, used only for placeholder text)
$field-01 – #F4F7FB (input field background on $ui-01)
$field-02 – #FFFFFF (input field background on $ui-02)
$inverse-02 – #272d33 (passing 4,5:1)

There are four new hover tokens added to the Carbon palette. They can now be found on the Swatches page and are available in the Design Kit and palette plugin

$hover-primary – #30588c
$hover-primary-text – #294c86
$hover-row – #5596e6 at 10% opacity
$hover-secondary – #3d70b2
$hover-danger – #bd1427

Icons

Check out the Iconography page to see the new icon style
All Icons are now 16x16px (24x24px is no longer being supported).
The --glyph modifier has been deprecated. Most of the glyph variations were replaced with a --solid modifier. Check out the icon migration docs to see the status of all the icons.

Design Kit

Download the latest version of the Carbon Design Kit & Library
Components on the Component page are now split up into five different artboards: Controls, Content, Navigation, Inputs, and Data Tables
Library has been made more flexible and customizable
Kit and library have been updated with the new colors, components, and icon styles.

May 2018

Utilities

There is a new section called Utilities which gives guidance on common pattern handlings. Unlike the component section, these guidelines offer usage guidance with minimal code documentation. To read more about each of these utilities see the sections below:

Themes

The Themes page has been moved to the Style section.

March 2018

Style

Systematic spacing

We have tokenized our spacing and now offer two systemized scales. The Spacing Scale defines space within a component while the Layout Scale is used to help position elements on a page. Check out the new Spacing section to learn more about these scales and read the rest of the spacing guidelines.

Design Kit

Sketch Libraries

We have recorded a Carbon Design Kit with Sketch Libraries Tutorial over on our YouTube channel. It goes over how to download the Carbon Sketch Kit, import a Sketch Library, as well as how to get and accept library updates/notifications. It also gives a brief overview of how the Library is organized and how to use the overrides panel and library symbols.

February 2018

Design Kit

Sketch Libraries

The Carbon Design Kit now includes Sketch Libraries, a better way to share and version symbols across Sketch files. Check out our Sketch Libraries wiki to get a quick tutorial on libraries.

Sketch libraries in the Carbon design kit.

Sketch Plugins

With the latest release of the Design Kit, we’ve included the Sketch Palettes plugin, which allows you to load in pre-saved palettes for Sketch. You can import Carbon’s four color palettes (Carbon default theme, Data Vis primary, Data Vis secondary, and Data Vis tertiary) into your working Sketch document. There’s also a variety of other plugins we recommend to help improve your workflow using Sketch.

Download the latest kit today! Carbon design kit.

Sketch palettes plugin.

Carbon Sessions

Interested in getting some 1:1 time with the Carbon team? Carbon Sessions is a chance for anyone using the Carbon Design System to ask questions and get feedback. Sessions happen very Wednesday morning (Central Standard Time). Time slots are around 10 minutes, but feel free to book more than one if you need additional time.

January 2018

Components

We’re excited to bring some added functionality that enhances our Dropdown component. Filtering, Multi-select, and Inline Dropdown are new additions to our basic Dropdown component.

Note: This component is currently only available in React.

Example of a dropdown with multi-select.

Small Toggle

Small Toggle is a style variation of our traditional Toggle component. It’s more compact in size, which allows them to be used in Data Tables or inline with Form elements.

Example of small toggle.

Data Vis: Bar Graph

Bar Graph is the newest addition to our Data Visualization collection. It comes in two variations: Bar Graph and Grouped Bar Graph. You can use this component to represent quantitative information, such as comparing the taco sales between Austin taco shops in the month of June.

Read more about the usage of Bar Graph, or check out our CodePen to view the live demo.

We have created several Data Visualization Tooltip variations to show the value for a specific data point or increment range. Tooltips appear on hover above or below a data representation, depending on the use case.

Read more about the usage of Data Vis Tooltips, or check out our CodePen to view the live demo.

Small tooltip used within a bar graph.

Edit this page on GitHub

How to contribute: Add ons

Updates: Roadmap

October 2019

@carbon/colors@10.5.0

New features

Housekeeping

carbon-components@10.7.0

New features

Bug fixes

Documentation

Housekeeping

@carbon/elements@10.7.0

New features

Bug fixes

Housekeeping

@carbon/pictograms-react@10.7.0

Bug fixes

Housekeeping

@carbon/pictograms@10.7.0

New features

Bug fixes

Housekeeping

carbon-components-react@7.7.0

New features

Bug fixes

Documentation

Housekeeping

@carbon/themes@10.7.0

New features

Bug fixes

Housekeeping

@carbon/type@10.6.0

New features

Bug fixes

Housekeeping

Archive

August 2019

@carbon/cli@10.5.0

New features

carbon-components@10.6.0

New features

Bug fixes

Housekeeping

@carbon/elements@10.6.0

Bug fixes

Housekeeping

@carbon/grid@10.6.0

Housekeeping

@carbon/icons-handlebars@10.6.0

Housekeeping

@carbon/icons-react@10.6.0

New features

Housekeeping

@carbon/icons-vue@10.6.0

Housekeeping

@carbon/icons@10.6.0

New features

Bug fixes

Housekeeping

@carbon/layout@10.5.0

Bug fixes

Housekeeping

carbon-components-react@7.6.0

New features

Bug fixes

Documentation

Housekeeping

@carbon/themes@10.6.0

Housekeeping

@carbon/type@10.5.0

Bug fixes

Housekeeping

July 2019

March 2019: v10 release

February 2019

October 2018

Experimental

June 2018: V9 Release

Website

Components

New

`@carbon/icons-handlebars@10.6.0`

`@carbon/icons-react@10.6.0`

`@carbon/layout@10.5.0`