v10.4.0 (2019-07-16)

We're excited to announce the latest release of the Carbon Design System, v10.4.0 🥳

This release targeted several project areas, including:

• General component enhancements
• Icons
• UI Shell
• Component specification
• Theming
• Contribution

In addition to these projects, we also introduced general updates to our website and have an ongoing support project for managing issue triage and fixing bugs. Highlights from these projects are detailed below, for a full list of changes, please view the changelog.

Here are the highlights from our projects:

Theming

Enhancements 🛠

• Added color theme dropdown in vanilla development environment (https://the-carbon-components.netlify.com) #3073
• Updated theming sandbox with v10 components and color themes (http://themes.carbondesignsystem.com)

Bug fixes 🐛

• Button disabled state background color in dark themes
• Ghost button text/icon colors in dark themes
• Danger button border color in dark themes
• Disabled checkbox to show check in dark themes
• Content switcher to use $disabled-0* color tokens for dark themes
• Inline dropdown background and disabled colors in dark themes
• Skeleton color tokens to work in all themes
• Theme $highlight token in dark themes
• Theme $hover-primary-text token in dark themes
• Theme $hover-ui token in g90 theme

Features:

• Emit custom properties for @carbon/themes color tokens

Icons

Bug fixes 🐛

• The following icons have been tweaked
  • battery--low.svg
  • ibm-security.svg
  • logo--slack.svg
  • logout.svg
  • mobile--add.svg
  • mobile--check.svg
  • mobile--download.svg
  • mobile.svg
  • popup.svg
  • text--strikethrough.svg
  • mammogram.svg

Enhancements 🛠

• Bespoke icons added at the following sizes:
  • 20/time.svg
• @carbon/icons-react now supports an entrypoint index.js, you no longer are required to specify the path for an icon

New ✨

• Support for the following icons:
  • language.svg
  • laptop.svg
  • account.svg
  • branch.svg
  • enterprise.svg
  • fog.svg
  • help-desk.svg
  • no-image.svg
  • no-ticket.svg
  • pause--filled.svg
  • play--filled--alt.svg
  • service-desk.svg
  • skip--back--filled.svg
  • skip--forward--filled.svg
  • stop--filled--alt.svg
  • audio-console.svg
  • battery--empty.svg
  • battery--quarter.svg
  • carbon.svg
  • category--add.svg
  • category--and.svg
  • category--new-each.svg
  • category--new.svg
  • category.svg
  • concept.svg
  • fork.svg
  • hurricane.svg
  • mobile--landscape.svg
  • partly-cloudy.svg
  • sunny.svg
  • sunset.svg
  • tablet--landscape.svg
  • tablet.svg
  • term.svg
  • text-link--analysis.svg
  • text-link.svg
  • text-mining--applier.svg
  • text-mining.svg
  • tree-view--alt.svg
  • type-pattern.svg
  • types.svg

Removed ☠️

• The following icons have been removed:
  • mammogram--stacked.svg

UI Shell

New ✨

• Guidance for UI Shell Navigation patterns
• UI Shell Sketch template and symbols added to the Sketch kit.
• Rail functionality for UI shell left panel.
• Responsive behavior for the header with nav links.

Support and Component Enhancements

Bug fixes 🐛

• Accessibility updates to Tooltips
  • Definition tooltip WCAG 2.1 compliance (#3151)
  • Interactive tooltip html updates for a11y (#3148)
• Update toggle labels to be accessible (#2885)
• Accessibility updates for underlying Listbox (#3139)
• Data Table updates
  • data table merge sticky header style (#2965)
  • apply persistent styles to data table (#3311)
  • fix data table clear input button functionality (#3285)
  • reset expand button height in short table (#3057)
• Accessibility updates for Overflow Menu

Enhancements 🛠

• <Search> component light variant (#3230)

New ✨

• add icon-only button to React library (#3368)
• inline-notification action button with click handler (#3283)

Design kit

Bug fixes 🐛

• Icon button: added disabled state #121
• Dropdown:
  • overrides enabled #125
  • drop-shadow background color fix (G90 and G100 theme) #127
• Checkbox: missing indeterminate state (G90 and G100 theme) #128
• Data table:
  • Corrected pinning in icon symbols (G10 theme) #129
• Overflow menu: duplicated symbols removed (G100 theme) #137
• Skeleton states: updated to use new tokens #138
• Tooltip: re-organized symbol structure #140
• Pagination: updated symbol structure for standalone variation, add number states #130

Enhancements 🛠

• Modal: added footer symbol and single action option #116
• Progress indicator: added vertical variation #123
• Color tokens: added #138
  • hover-selected-ui
  • skeleton-01
  • skeleton-02
  • inverse-support-01
  • inverse-support-02
  • inverse-support-03
  • inverse-support-04
• Text style: added "body-short-02/text-03" #136

New ✨

• UI Shell templates
• UI Shell rail component

Changelog

Bug fixes

• fix(shell): add breakpoint to overlay active (#3384) (fb0594d7a)
• fix(button): fix theme tokens and focus style (#3287) (c827911f3)
• fix(ComposedModal): fix button variants (#3347) (f8a740792)
• fix(data-table): remove extra padding on toolbar-action element (#3356) (e1d038115)
• fix(file-uploader): add default for role prop, update tests & story (#3362) (70a0f7aaa)
• fix(tabs): use fragment for customlabel wrapper in story (#3360) (afc39be85)
• fix(icons-react): format SVG props as camelCase (#3342) (e3332feb4)
• fix(notification): use close20 icon, not close16 (#3324) (e8eefb824)
• fix(data-table): increase table expand button size (#3333) (0d370c968)
• fix(skeleton): update color tokens (#3293) (9690f7e40)
• fix(dropdown): update color tokens (#3301) (a937c4ec0)
• fix(TextArea): add ref forwarding to TextArea (#3295) (98163e130)
• fix(react): update deprecate helper (#3314) (d62ac2b9a)
• fix(button): remove top level ampersand from btn-field selector (#3313) (7066ac4a6)
• fix(icons-react): add support for aliases (#3307) (21dca10a1)
• fix(checkbox): fix color token of check mark (#3288) (ff520eb2e)
• fix(Modal): require aria-labelledby (#2851) (d8fba2d54)
• fix(DataTable): clear input button now resets filtering (#3285) (74f37efa0)
• fix(data-table): avoid clipping toolbar content (#3286) (baaad1d70)
• fix(notification): title word wrap (#3280) (d13e1ebf4)
• fix(tile): add link class to clickable tile (#3275) (45dbc9e02)
• fix(pagination): capture click on prev/forward icon (#3272) (944dbe4de)
• fix(modal): ensure text input fills it's container (#3242) (0ccefcf9a)
• fix(ListBox.Field): disallow focus when disabled (#3253) (ef8c54666)
• fix(search): add styles for custom search buttons (#3247) (96f13e2f3)
• fix(themes): update highlight token for dark themes (#3248) (76f62d0f9)
• fix(link): replace box-shadow with text-decoration & outline (#3225) (d95002371)
• fix(data-table): update position of toolbar search icon (#3245) (8cae8a780)
• fix(themes): fix hover-primary-text for dark themes (#3236) (c8b62ec44)
• fix(number-input): use aria-label for input attribute (#3244) (4606a99b3)
• fix(Search): add support for light prop (#3230) (442ed9ecb)
• fix(components): add disabled color tokens to content switcher (#3227) (48fef199e)
• fix(inline-loading): import spinner style (#3221) (5c328b8fd)
• fix(devenv): fix floating menu container (#3214) (654609267)
• fix(content-switcher): adds arrow key support and enhanced screen reader functionality (bd8a24f3a)
• fix(ui-shell): a11y updates, refactor right panel (#3209) (1dd02d92a)
• fix(ui-shell): enforce height/width on svg directly (#3188) (8a199fbac)
• fix(overflow-menu): use correct icon color for danger items (#3147) (f06f38f0c)
• fix(react): exclude MultiSelect classes from ComboBox (#3118) (5fc3498a1)
• fix(ListBox): address DAP violations (#3139) (b0cd3856c)
• fix(ui-shell): sidenav menu height transition bug for Safari (#3162) (ec3bd2ffc)
• Fix(data-table): table headers in table body (#3150) (f6178fb6e)
• fix(theme): fix hover-ui in g90 (#3136) (00101aa5d)
• fix(react): update code to avoid object prototype builtin (2bcb358fa)
• fix(cli): add ignore for atomic update (6d57959bc)
• fix(upgrade): ignore files that have correct import path (#3144) (a9c9f5fa3)
• fix(theme): fix hover-ui in g90 (#3136) (4676414b5)
• fix(data-table): fix action bar animation (#3095) (a4e790ae6)
• fix(react): specify dropdown props shape (#3123) (3a085349b)
• fix(time-picker): remove invalid flag from pattern regex (#3119) (cea559816)
• fix(multi-select): fix development error for downshiftProps (#3109) (8f2ec371a)
• fix(data-table): unset expand button height in short table (#3057) (81bf06372)
• fix(icons-angular): update node parse logic (#3062) (daf27eddf)
• fix(button): danger button border color same as bg color (#3038) (9e73d9a6f)
• fix(tabs): use focus outline mixin (#3044) (7b845c8fd)
• fix(upgrade): include change-case in dependencies (#3130) (6b20f1913)
• fix(data-table): fix action bar animation (#3095) (fbcca913b)
• fix(react): specify dropdown props shape (#3123) (6e40a6984)
• fix(time-picker): remove invalid flag from pattern regex (#3119) (17602f6a4)
• fix(multi-select): fix development error for downshiftProps (#3109) (33a053118)
• fix(data-table): unset expand button height in short table (#3057) (deba49b6c)
• fix(runner): check if ranges intersect (06947fd09)
• fix(runner): use writeJson instead of writeFile (d188a957d)
• fix(runner): reverse arguments in diff (5520aeb14)
• fix(cli): revert change to log out time to complete (97e173fd7)
• fix(icons-angular): update node parse logic (#3062) (84232fde1)
• fix(button): update deprecation warning w/ correct prop (#3051) (c1fc2871c)
• fix(PasswordInput): center password visibility toggle tooltip (#3020) (21709c0b5)
• fix(DatePicker): fix for new onChange ref after mount (#3050) (c8caed5c5)
• fix(select): inherit font-family (#3052) (0711cab03)
• fix(button): danger button border color same as bg color (#3038) (2bb7432de)
• fix(tabs): use focus outline mixin (#3044) (4ac8b413f)
• fix(overflow-menu): update aria-label and roles, made ul a sibling (#2906) (5cc00bbd6)
• fix(overflow-menu): update aria-label and roles, made ul a sibling (#2906) (2acc3e33c)
• fix(Modal): click-outside by mousedown (#3014) (13213de18)
• fix(Modal): click-outside by mousedown (#3014) (bb01adc32)
• fix(MultiSelect): add filter tag class to (#2936) (92e72218b)
• fix(icons-angular): use DOMParser to support ie11 (#3005) (41b66694e)
• fix(list): fix markers for nested list items (#2941) (d5c779455)
• fix(components): fix font style for firefox (#2990) (6de379186)
• fix(ui-shel): fix header panel function (#2993) (a6b91717a)
• fix(Tile): add event.persist() to event handlers (#2983) (7a8fd7900)
• fix(Loading): use description prop as SVG title (#2955) (ecfe5012e)
• fix(code-snippet): set single line overflow-x to auto (#2953) (29d95fe1f)
• fix(date-picker): upgrade Flatpickr to 4.6.x (#2947) (de37946e1)
• fix(MultiSelect): add filter tag class to (#2936) (77b619726)
• fix(icons-angular): use DOMParser to support ie11 (#3005) (ed6717697)
• fix(list): fix markers for nested list items (#2941) (9870dbb08)
• fix(components): fix font style for firefox (#2990) (3a9af5a1b)
• fix(ui-shel): fix header panel function (#2993) (643912af9)
• fix(Tile): add event.persist() to event handlers (#2983) (679ef8a24)
• fix(Loading): use description prop as SVG title (#2955) (14fdd5c64)
• fix(code-snippet): set single line overflow-x to auto (#2953) (6f4c3b0a7)
• fix(date-picker): upgrade Flatpickr to 4.6.x (#2947) (33df98ac2)

Features

• feat(Button): add icon-only button support (#3368) (048bd147d)
• feat(inline-notification): add action button with click handler (#3283) (3063cc8e6)
• feat(ui-shell): add side nav rail (#3173) (7436b9842)
• feat(tabs): support home/end keyboard navigation (#3258) (cb25e3e73)
• feat(upgrade): update package name and icons-react migration (#3308) (6a4004898)
• feat(definition-tooltip): WCAG 2.1 compliance (#3151) (0a22e222a)
• feat(side-nav): add isActive styles based on child props (#3303) (400bc7a47)
• feat(DatePicker): pass along onClose (#3300) (7e521c2eb)
• feat(ui-shell): add responsive UX for header nav (#3105) (73eccb191)
• feat(overflow-menu): html a11y updates (#3181) (cb0caed2d)
• feat(modal): support a CSS class on body (#3237) (9e8bc7aa6)
• feat(icons): add 20/time.svg (#3259) (07f1a995e)
• feat(tooltip): html updates for a11y (#3148) (4111cb8c3)
• feat(icons): add new icons for June (#3152) (1ad2b09b5)
• feat(cli): add contribute commands (#3155) (d92da0251)
• feat(icons): add language.svg, laptop.svg (#3149) (3dabe8fd1)
• feat(components): add ability to emit custom properties (#3033) (4f4aa80c4)
• feat(icons-react): reintroduce entrypoint with new icon strategy (#3078) (53385e764)
• feat(ui-shell): add divider element and styles (#3063) (4e12f9f9f)
• feat(data-table): merge sticky header style (#2965) (df11c2da9)
• feat(eslint-config-carbon): add react-hooks plugin (#3087) (08f0f99da)
• feat(upgrade): add upgrade package (9d5df11d1)
• feat(cli): update ignore to array of patterns (769ef41f0)
• feat(migrations): update to include alpha.31 range (ca033e91d)
• feat(colors): update to new carbon-- namespace (3f8170765)
• feat(carbon-type): add support for type-scale function and mixin (742a12b32)
• feat(type): update migration to include font-face (6bd816872)
• feat(regex): add mixin regex support (60f180340)
• feat(elements): update range to alpha.32 (38b364312)
• feat(cli): add prompt to confirm migrations (946085978)
• feat(eslint): add eslint-config-carbon (#2986) (b4c7c66ec)
• feat(cli): add @carbon/cli package (#2982) (804af9de0)
• feat(eslint): add eslint-config-carbon (#2986) (68851267b)
• feat(cli): add @carbon/cli package (#2982) (46bfaeb27)