Releases: carbon-design-system/carbon-design-kit
Releases · carbon-design-system/carbon-design-kit
v10.20.0
✨ Enhancements
- Button: Changed the name of medium button to
field
button. #322 - Code snippet: Ability to hide the copy button. #348
- Content switcher: Added
selected + focus
state symbols. #347 - Dropdown: Added symbols for the
multi-select filterable
dropdown. #328 - Form inputs: #289
(Dropdown, Date picker, File uploader, Number input, Text input, Select)- Added
large
(48px),medium
(40px) andsmall
(32px) sizes. - Moved helper text from above to below the fields.
- Added
- Modal: Added a divider rule between buttons for 3:1 accessibility. #349
- Notification: Added an override to turn off the
close icon
. #341 - Text input: Added
no label
variant symbols with all states. #359 - Tile: Removed the
checkmark icon
on hover. #342 - UI shell: Added smart layout resizing to header icons. #358
🎨 Elements
-
Color palette:
-
Color tokens:
-
Type styles: Corrected line height and letter spacing for
caption-01
. #360
🐛 Bugs
- Accordion: Fixed inconsistent padding between the title and description in an open panel. #317
- Button:
- Checkbox: Fixed disabled state symbol colors. #292
- Code snippet: Fixed ghost button text color in mutli-line code snippet. #343
- Data table:
- Date picker:
- Dropdown:
- File uploader: Adjusted text content inside the file uploader component. #350
- Inline loading: Updated the
success icon
style. #306 - List: Reduced spacing between list items to 0px. #340
- Modal: Repinned the cancel button to stick with the footer when resizing. #311
- Notification:
- Number input: Adjusted symbol height for invalid states.
- Overflow menu: Fixed height of option containers. #338
- Radio button: Resolved duplicate symbols for the
unselected
state. #298 - Search: Repinned the cursor to follow input text. #301
- Tab: Fixed inconsistent left padding increments. #296
- Text area:
- Text input:
- Toggle: Resolved inconsistent off state colors. #344
v10.10.0
Components:
- Ghost button: changed
icon button
to be nested as a variation under ghost button. #286 - Tertiary button: add icon variation. #280
- Dropdown: add
checkmark
icon to selected states. #283 - Time picker: added focus, filled, disabled and two open states. #278
- Notification: added info icon to informational high and low contrast notifications. #276
Elements:
-
Color tokens:
- Added
text-error
token. #263 - Updated
disabled-03
value. - Updated tag to use the v2 palette.
- Added
-
Type styles:
- Fixed
caption-01
to have correct line heights.
- Fixed
Bugs:
- Data table: added rule divider to batch action bar between the cancel and action buttons. #291
- Tabs: changed padding to 16px to allow longer text and renamed fixed tabs to
container
tabs. #287 - Tooltip: adjusted shark fins in all variation to have the same sizing and spacing.
- Assorted smart layout bugs.
v10.9.0
(skipped to v10.9)
Components:
- Modal: added four new size variations
- Tabs: new
container
variations #222 - Dropdown:
- Data table: adjustable Title bar #235
Elements:
-
Color tokens:
- Updated
disabled-02
value #264 - Update placeholder text color
text-03
- Updated
text-02
value - Updated colors in new v2 palette
- Updated
-
Type styles
body-short-01
addeddisabled-03
style option
Bugs:
- UI Shell: removed duplicates in
white theme/UI shell/header/item/icon-button
- Text area: enabled background override.
- Search: enabled border-bottom override.
- Notifications: updated low contrast to use v2 colors
- Assorted smart layout bugs
v10.5.0
⭐️ New
Components
- Notification:
- Radio button: added horizontal group symbols, added category of "vertical group" #164
- Text input:
- added
with icon
variation #143
- added
Elements
- Spacers: added
layout
spacers #155 - Type tokens: #169
- Added
$productive-heading-06
- Added
$productive-heading-07
- renamed all headings to have prefix "productive-"
- Added
- Color tokens: #138
- Added
$inverse-focus-ui
- Added
$inverse-hover-ui
- Added
$inverse-link
#147
- Added
📣 Enhancements (updated)
Components
- Data table:
- Form: #164
- replaced all "form / ... / item" to be standard component symbols
- Form / modal: replaced custom buttons with buttons from modal component
- Icon button: #134
- Added overrides for default background
- Added
selected
state
- Search:
- Structured list: updated type title to use
body-long-01
#146 - Text area: added
label + helper text
category and states #144
Elements
- Spacers: #155
- Updated scale to match spacing tokens
- Update visual style to match spec-ing style
- Color tokens: #167
- (White, Gray 10) Updated
interactive-02
value in toGray 80
(effects secondary buttons) - (Gray 10, Gray 90, Gray 100) Updated
$highlight
value - (Gray 100) Updated
$skeleton-02
- (White, Gray 10) Updated
🐛 Bugs
- Code snippet: enabled overrides for background color #139
- Data table
- Date picker:
- Dropdown:
- Modal: update background and field colors #164
- Progress indicator / vertical: fixed resizing issue #160
- Tab: (Gray 100) fixed missing overrides #156
- Tile / expandable: (Gray 90, Gray 100) fixed pinning issue with chevron #157
- Tool tip: fixed scaling issue with shark fin #151
v10.4.0
⭐️ New
- UI Shell templates
- UI Shell rail component
📣 Enhancements (updated)
- 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
🐛 Bugs
- Icon button: added disabled state #121
- Dropdown:
- 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
v10.3.0
⭐️ New
- Button: 40px height variant (for all buttons)
- Icon Button (for Primary and Secondary buttons only)
- Text area: Character count feature added
- UI Shell: Left panel (side-nav)
- UI Shell: Right panel
📣 Updated
- Bug fixes
- Icon Tooltip alignments
- Data table: bulk expandable option
- UI Shell: Header
v10.1.0
⭐️ New
- White theme file
- Gray 10 theme file
- Gray 90 theme file
- Gray 100 theme file
📣 Updated
- Notifications
- Change color to be high contrast
- Bug fixes
v10.0.0
⭐️ New
- Gray 10 theme
- Component skeleton states
📣 Updated
- Toggle colors
- Component bug fixes
📆 Coming soon
- Gray 90 and Gray 100 dark themes
- UI Shell
- Data Viz
10.0.0-beta
⭐️ New:
- IBM Design Language V2 style
- The Carbon default styling is changing to reflect the new IBM Design Language styles and assets.
- Only one theme is currently available in the kit. Other themes to follow soon.
- Kit structure:
- The kit and its symbols have been reworked to be more user friendly. Symbols less embedded to make controlling overrides easier.
- Each component now lives on its own page instead of grouped in a single all components page
- Text Styles:
- Text Styles have been added to match the new Carbon type tokens. Each style includes the various colors used with that type token.
- Spacers:
- Spacing symbols have been added to certain symbols to help correctly re-size components. Look for “spacer” in the overrides panel to turn one on.
- Icons
- Internal padding has been added to all icons
- Icons in the kit are now nested symbols from the IBM Design Language Sketch Library.
- Any icon not imbedded in a Carbon symbol will need to be added from the IBM Design Language instead of in the Carbon kit itself.
- Color tokens:
- $icon-01
- $icon-02
- $text-04
- $interactive-01 (replaces $brand-01)
- $interactive-02 (replaces $brand-02)
- $interactive-03 (replaces $brand-03)
- $ui-background
- $overlay-01
- Interactive color tokens
📣Updated:
- All components visual style
- Each component has been updated to reflect the new IBM Design Language
- Elements page
- Formerly the Style page in the kit and Elements page has been update with the new Language influences styles.
- Getting started page
- Updated instructions on how to use the kit.
- Layer Styles
- Carbon color tokens are updated to with new color values
💀Deprecated
- Layout Templates page
- Data Viz page
- Full Language color palette
- Icons (use IBM Design Language library instead)
📆Coming soon
- Themes! Gray 10, Gray 90, Gray 100 themes
- New layout examples
9.0.1
📣 Updates
- Added missing
Button-secondary-icon
andButton-secondary-small-icon
🐛 Bug Fixes
- Typo in Getting Started page
UI-02
corrected on style page.Brand-01
color updated to correct value in spec