What's new
This chronological list shows all of the items that have been added or updated in the design system.
Description
- Migrated to latest token system
- Migrated to latest token system
- Migrated to latest token system
- This component was added to the website.
- Added additional options, behaviors, usage guidelines, internationalization guidelines, keyboard interactions, and theming.
- Icon changed from UI icon to workflow icon.
- Updated colors to 6.0.0.
- Changed placeholder text to function as a label in body text style.
- Migrated to latest token system
- Removed quick actions (deprecated) from cards
- Updated read-only option design
- Updated read-only option design
- Migrated to latest token system
- Updated read-only option design
- Migrated to latest token system
- Migrated to latest token system
- Updated read-only option design
- Updated read-only option design
- Updated read-only option design
- Updated read-only option design
- Updated read-only option design
- Updated read-only option design
- Added new additional variants (notice, gray, green, blue, red, cyan)
- Updated background colors
- Removed disabled state (badges are not interactive)
- Migrated to latest token system
- Migrated to latest token system
- Added static color option
- Migrated to latest token system
- Migrated to latest token system
- Default offset value updated to spacing-100 (8 px)
- Background color updated to background-layer-2-color (no change in light theme, changed from gray-50 to gray-100 in dark/darkest themes)
- Migrated to latest token system
- Migrated to latest token system
- Added sizes to UI kits
- Migrated to latest token system
- Updated background colors
- Migrated to latest token system
- Added selection style (checkbox or switch)
- Removed actions area
- Updated disabled text color (from gray-500 to gray-400)
- Updated disabled text color (from gray-500 to gray-400)
- Updated disabled text color (from gray-500 to gray-400)
- Inherited action button 8.0.0 updates (non-emphasis colors, icon colors, disabled colors, keyboard focus state design)
- Updated disabled text color (from gray-500 to gray-400) and disabled border color (from gray-200 to gray-300)
- Updated disabled text color (from gray-500 to gray-400) and disabled border color (from gray-200 to gray-300)
- Updated pending state border color (from gray-200 to gray-300)
- Migrated to the latest token system
- Updated spacing for side label to use spacing tokens (spacing-100 for small, spacing-200 for medium, large, and extra-large)
- Updated disabled text color (from gray-500 to gray-400)
- Updated disabled text color (from gray-500 to gray-400)
- Updated disabled text color (from gray-500 to gray-400)
- Updated colors for non-emphasized selected state
- Updated icon colors to match text color
- Updated keyboard focus state for non-quiet buttons to use focus ring
- Updated disabled text and icon color (from gray-500 to gray-400)
- Updated all colors to 6.0.0
- Removed uppercase detail typography style from section headers
- Added unavailable option
- Added collapsible header option
- Added more documentation (composition, behaviors, and guidelines)
- Removed optional button group area from composition
- Replaced uppercase detail typography style with heading style in headers
- Replaced uppercase detail typography style with heading style in column headers
- This item has been added to the website
- Updated color indices with 14 tints and shades per color
- Enhanced contrast for gray system
- Removed Lightest theme
- Updated colors with increased saturation and minor hue adjustments
- Added cyan color
- Restructured documentation
- Documented high-level content related to color system (Fundamentals)
- Documented the gray and color systems (Color system)
- Documented background layering, app framing, two-tone pairing, and various usage guidelines (Using color)
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Added darkest color theme to UI kit
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Updated all colors to 6.0.0
- Added options for popover (placement, offset, cross offset, container padding)
- Added composition section
- Added keyboard interactions section
- This item has been added to the website
- Added size option
- Added double-click to reset
- Added mixed value
- Added mixed value behavior
- Added size option
- Removed placeholder text option
- Removed placeholder text option
- Removed placeholder text option
- Renamed “dialog” to “alert dialog”
- Updated desktop padding from 40 px to 32 px
- Added warning variant
- Added informative variant
- Updated label color for error state
- Renamed "clear button" to "close button"
- Added size option
- Added icon size option
- Added static color option
- Added size option
- Added size option
- Updated quiet style card previews to align edge-to-edge
- Updated read-only option design
- Updated read-only option design
- Added size option
- Updated read-only option design
- Updated read-only option design
- Updated read-only option design
- Updated read-only option design
- Added extra-small size
- Updated label option to required
- Added hide label option
- Added cursor direction behavior
- Updated clear "x" icon to a close button
- Added static color option (removed "over background" variant)
- Updated positive (green) and seafoam colors for increased contrast
- Added size option
- Added two size options (medium, extra-large)
- Added size option
- Added size option
- Added type input option
- Moved placement of checkmark to left side of menu items
- Moved placement of checkmark to left side of menu items
- Renamed "bulk action bar" to "action bar"
- Renamed "call to action" variant to "accent" and added outline style
- Added style option (removed quiet option)
- Added static color option (removed "over background" variant)
- Added hide label option
- Added justified option
- Added pending option
- Added content standards
- This component has been added to the website
- This component has been added to the website
- Updated documentation for Radio button to Radio group
- Added size option
- Added size option
- Added mobile scale to the UI kit
- Rename "list item" to "menu"
- Moved checkmark placement to left of menu items
- This component has been added to the website
- Added min value and max value options
- Added min value and max value options
- Added min value, max value, and step options
- Added static color option and usage guidelines
- Added progression scale option
- Big number updated to match styling of big number data visualization component
- Added "Show the whole" usage guideline
- This component has been added to the website
- Added border to all swatches (removed low contrast swatch)
- Updated border opacity to be more accessible
- Updated line height to use
component line height
- Updated font weight from bold to regular
- Updated line height to use
component line height
- Added size, drag icon, selection mode, selection style, and selection behavior options
- Replaced quiet option with emphasis (changes default)
- Renamed standalone option as detached
- Removed top and bottom padding
- Added height option
- Updated placeholder text color for higher contrast
- This component has been added to the website
- Removed top and bottom padding
- Added options (width, height, show tip, placement, offset, cross offset, container padding)
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- Changed checkbox to a close button
- Added placement options
- Updated tooltip examples
- Changed text to regular weight instead of bold
- Added guidelines for period usage
- This component has been added to the website
- Added size option
- Added size option
- Updated current (medium) size to accommodate multiple sizes
- Updated keyboard focus state design for emphasized action buttons
- Updated background color to be consistent between selected action buttons
- Removed border in selected quiet action button in UI kit (bug)
- Separated action group into its own component
- This component has been added to the website (separated from action button)
- Added table of options
- Added text overflow behavior
- Added RTL (right-to-left) guidelines
- Added keyboard interactions guidelines
- Updated border color to be more accessible
- Renamed "warning" variant to "notice"
- Rename "critical" variant to "negative"
- Added value and value label options
- Added width option
- This component has been added to the website
- This component has been added to the website
- Changed alignment of icons, keyboard shortcuts, and selection controls from middle to top
- Left-aligned content for single-line designs in desktop scale
- Corrected padding and margins in mobile scale
- Corrected button text size in desktop scale
- Corrected baseline of text in desktop scale
- Corrected informative and error icon placement
- Removed color loupe (separated into its own component)
- Added background option
- Added x/y value, min and max values, step options
- Added width option
- Added height option
- This component has been added to the website
- Removed color loupe (separated into its own component)
- Added background option
- Added value, min and max values, step options
- Added length option
- Removed color loupe (separated into its own component)
- Removed color area from component
- Added background option
- Added value, min and max values, step options
- Added size option
- Added RTL (right-to-left) guidelines
- Separated button group into its own component
- Chart hover state changed from tooltip to a popover
- Action bar now appears below chart instead of on top of chart
- Added an option for size legends with related usage guidelines
- Chart hover state changed from tooltip to a popover
- Action bar now appears below chart instead of on top of chart
- "Bar loader" has been renamed to "progress bar"
- "Circle loader" has been renamed to "progress circle"
- "Dropdown" has been renamed to "picker"
- Updated background color to gray-100 on dark and darkest themes
- This component has been added to the website
- Corrected selected text color in menu
- Updated keyboard focus state to be more accessible
- Updated keyboard focus state to be more accessible
- Updated keyboard focus state to be more accessible
- Updated keyboard focus state to be more accessible
- Updated size options
- Added image option
- Added disabled option
- Added keyboard focus state
- Updated handle border transparency to meet minimum contrast ratio
- Updated handle border transparency to meet minimum contrast ratio
- Updated handle border transparency to meet minimum contrast ratio
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- Changed the title color of the error variant from red-500 to gray-900
- Added read-only option
- Updated border color to be more accessible
- This component has been added to the website
- This component has been added to the website
- Updated border color to be more accessible
- This component has been added to the website
- Added size option
- Added read-only option
- Added read-only option
- Added read-only option
- Added read-only option
- Updated border color to be more accessible
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- Updated RTL internationalization guideline to include the indeterminate option
- Released as individually versioned component
- Added options for script and classification
- Updated to use t-shirt sizing
- Added larger size options
- Released as individually versioned component
- Added options for script, weight and classification
- Updated to use t-shirt sizing
- Added larger size options
- Released as individually versioned component (consolidated with Subheading)
- Added options for script, weight and classification
- Updated to use t-shirt sizing
- Added larger size options
- Released as individually versioned component
- Added options for script, weight and classification
- Updated to use t-shirt sizing
- Added larger size options
- This item has been added to the website
- Updated design file to correct a few margin errors.
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- This component has been added to the website
- Removed guideline about label color order and color vision deficiency for non-semantic status lights
- Added density option (regular/compact)
- Added emphasis option (emphasized/not emphasized)
- Added alignment option (start/center)
- Added fluid height option for horizontal tabs
- Removed guideline about label color order and color vision deficiency.
- This pattern has been added to the website
- Increased opacity of the animated indicator
- Renamed "deletable" option to "removable"
- Added text overflow behavior
- Added group overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added text overflow behavior
- Added emphasis (“emphasized/not emphasized”)
- Combined tool component with this component
- Changed selected item text color from blue 500 to gray 800
- Added orientation (“horizontal/vertical”)
- Changed “standard/quiet” to “primary” and “secondary” variants
- Added quiet as an option
- Deprecated this component and combined it with the action button component
- Updated text to use sentence case
- Updated text to use sentence case
- Replaced “standard/quiet” variants with emphasis (“emphasized/not emphasized”)
- Replaced “standard/quiet” variants with emphasis (“emphasized/not emphasized”)
- Updated navigation item text to use sentence case
- Replaced “standard/quiet” variants with emphasis (“emphasized/not emphasized”)
- Updated text to use sentence case
- Changed the text size to font size 100 (15 px to 14 px on desktop, 18 px to 17 px on mobile) and adjusted the baseline alignment. This is also reflected in components using buttons: coach mark, dialog, and toast.
- "Rule" has been renamed to "divider"
- This pattern has been added to the website
- Fixed the mobile (large scale) font size for the title and body text in the UI Kit.
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added button group overflow behavior
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component has been included to the website.
- This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)
- This component has been included to the website.
- This component has been included to the website.
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component has been included to the website.
- This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
- This component is now individually versioned (individual versions of existing items start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added an indeterminate variant
- Added RTL (right-to-left) guidelines
- This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added read-only option
- Updated border color to be more accessible
- Added text overflow behavior
- Changed selected item text color from blue 500 to gray 800