@salesforce-ux/design-system

## **Release [2.6.2] - June 29, 2018** ## Fixes **[Cards](https://www.lightningdesignsystem.com/components/cards)** - Updated broken links within the Cards docs ([7b48637](https://github.com/salesforce-ux/design-system/commit/7b48637)) **Gulp Script Update** - Fix path to gulp.js to resolve build error in Windows ([2a78a47](https://github.com/salesforce-ux/design-system/commit/2a78a47)) **[Input](https://www.lightningdesignsystem.com/components/input)** - Updated the Error with Icon example to use the new Error icon ([35d90ba](https://github.com/salesforce-ux/design-system/commit/35d90ba)) **[Margin](https://www.lightningdesignsystem.com/utilities/margin)** - Added examples of using "none" on margin utilities ([a3e9eb9](https://github.com/salesforce-ux/design-system/commit/a3e9eb9)) - Updated broken links within the Margin docs ([26a5eed](https://github.com/salesforce-ux/design-system/commit/26a5eed)) ## **Release [2.6.1] - May 18, 2018** ## Fixes **[Form Element](https://www.lightningdesignsystem.com/components/form-element/#Compound)** - Removed margin if compound field is found inside of a stacked form ([0d3e752](https://github.com/salesforce-ux/design-system/commit/0d3e752)) **[Grid](https://www.lightningdesignsystem.com/utilities/grid/)** - Adjusted docs to avoid confusion on columns and vertical alignment ([1b17639](https://github.com/salesforce-ux/design-system/commit/1b17639)) **[Tabs](https://www.lightningdesignsystem.com/components/tabs/)** - Fixed incorrect link to Vertical Tabs component in Tabs documentation ([#548](https://github.com/salesforce-ux/design-system/issues/548)) ## **Release [2.6.0] - May 4, 2018** May the 4th be with you! ## Big Impact **[Component Blueprints](https://lightningdesignsystem.com/components/overview)** - Renamed our 'Components' to 'Component Blueprints' to create distinction between our SLDS Components and ([Lightning Components](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref.htm)). We define our 'Component Blueprints' as 'Framework agnostic, accessible HTML and CSS used to create components in conjunction with our implementation guidelines'. For more details, check out the glossary we added to our [FAQ page](/faq). **[Form Layout](https://lightningdesignsystem.com/components/form-element/#Layout)** - Merged Form Layout into Form Element ([f3c5b48](https://github.com/salesforce-ux/design-system/commit/f3c5b48)) **[Icon](https://lightningdesignsystem.com/icons/#utility)** - Addressed 2 issues with the usage of *Warning* and *Error* icons. ([cd98ab6](https://github.com/salesforce-ux/design-system/commit/cd98ab6)) 1) Research showed that the ban icon best represented an error for our users, so we switched the error and ban icons. The new error icon is the circle with a diagonal slash through it 2) We also realized that we used the same icon for both error and warning states in many components, so we updated components that were using the warning icon in red as an error state to use the new error icon. **[Lookup](https://lightningdesignsystem.com/components/lookups/)** - Deprecated `slds-lookup` and replaced with `slds-combobox` and `slds-combobox-group` ([2dbe619](https://github.com/salesforce-ux/design-system/commit/2dbe619)) **[Walkthrough -> Trial Bar](https://lightningdesignsystem.com/components/trial-bar/)** - Renamed our Walkthrough component to Trial Bar ([fe8cfc1](https://github.com/salesforce-ux/design-system/commit/fe8cfc1)) ## New components: **[Builder Header](https://lightningdesignsystem.com/components/builder-header/)** - Created new Builder Header component ([3b6f741](https://github.com/salesforce-ux/design-system/commit/3b6f741)) **[Illustration](https://lightningdesignsystem.com/components/illustration/)** - Created new component for Empty States and other Illustrations ([a1824e0](https://github.com/salesforce-ux/design-system/commit/a1824e0)) **[Setup Assistant](https://lightningdesignsystem.com/components/setup-assistant/)** - Created new Setup Assistant component ([26be78c](https://github.com/salesforce-ux/design-system/commit/26be78c)) **[Summary Detail](https://lightningdesignsystem.com/components/summary-detail/)** - Created new Summary Detail component ([245492e](https://github.com/salesforce-ux/design-system/commit/245492e)) **[Welcome Mat](https://lightningdesignsystem.com/components/welcome-mat/)** - Created new Welcome Mat component ([5d2d818](https://github.com/salesforce-ux/design-system/commit/5d2d818)) ## Documentation Updates **[Button](https://lightningdesignsystem.com/components/buttons/#Disabled)** - Updated examples to show disabled states of all variants ([013b16d](https://github.com/salesforce-ux/design-system/commit/013b16d)) **[Combobox](https://lightningdesignsystem.com/components/combobox/)** - Updated examples and documentation for Base, Autocomplete, Entity Autocomplete, and Grouped comboboxes ([6c79edd](https://github.com/salesforce-ux/design-system/commit/6c79edd)) - Added an example to show [listbox styling options](https://lightningdesignsystem.com/components/combobox/#Styling-choices-for-options) ([3d4af71](https://github.com/salesforce-ux/design-system/commit/3d4af71)) - Updated mouse and keyboard interaction documentation ([04bde0c](https://github.com/salesforce-ux/design-system/commit/04bde0c)) **[Dueling Picklist](https://lightningdesignsystem.com/components/dueling-picklist/#Group-Label)** - Added an example detailing how to add a group label to a dueling picklist ([b5e0083](https://github.com/salesforce-ux/design-system/commit/b5e0083)) **[Form Element](https://lightningdesignsystem.com/components/form-element/#Record-Detail)** - Added an example to show Record Detail ([73989b0](https://github.com/salesforce-ux/design-system/commit/73989b0)) **[Global Header](https://lightningdesignsystem.com/components/global-header/#Notifications)** - Updated documentation to show animated examples ([399da9c](https://github.com/salesforce-ux/design-system/commit/399da9c)) **[Grid](https://lightningdesignsystem.com/utilities/grid/#Content-alignment-with-bump)** - Added examples and documentation for `slds-col-bump_*` classes ([a095cba](https://github.com/salesforce-ux/design-system/commit/a095cba)) **[Icon](https://lightningdesignsystem.com/components/icons/#Current-Color)** - Added an example that uses `slds-current-color` ([2ef3489](https://github.com/salesforce-ux/design-system/commit/2ef3489)) **[Rich Text Editor](https://lightningdesignsystem.com/components/rich-text-editor/)** - Updated examples to properly wrap the Rich Text Editor in `slds-form-element` ([b6df0b0](https://github.com/salesforce-ux/design-system/commit/b6df0b0)) ## Features **[Button](https://lightningdesignsystem.com/components/buttons/#Outline-Brand)** - Added `slds-button_outline-brand` modifier ([0dec41e](https://github.com/salesforce-ux/design-system/commit/0dec41e)) **[Chat](https://lightningdesignsystem.com/components/chat/#Delivery-Status-Messages)** - Added support for delivery failure and unsupported type messages ([14aa268](https://github.com/salesforce-ux/design-system/commit/14aa268)) **[Combobox](https://lightningdesignsystem.com/components/combobox/#Grouped-Comboboxes-(Cross-entity-Polymorphic))** - Introduced grouped comboboxes with text and icon variants ([6c79edd](https://github.com/salesforce-ux/design-system/commit/6c79edd)) **[Dueling Picklist](https://lightningdesignsystem.com/components/dueling-picklist/#Edit-Mode)** - Updated docs to add non-reorderable and view mode variants of dueling picklist to be used for multiple selection ([c336057](https://github.com/salesforce-ux/design-system/commit/c336057)) - Added `slds-is-grabbed` class - Added `slds-dueling-picklist__column_responsive` to add [responsiveness](https://lightningdesignsystem.com/components/dueling-picklist/#Responsive) ([4000150](https://github.com/salesforce-ux/design-system/commit/4000150)) **[Global Header](https://lightningdesignsystem.com/components/global-header/)** - Added support for branded skip links ([789aa99](https://github.com/salesforce-ux/design-system/commit/789aa99)) **[Input](https://lightningdesignsystem.com/components/input/?example=counter&variant=base)** - Added counter variant ([0b20b85](https://github.com/salesforce-ux/design-system/commit/0b20b85)) **[Panel](https://lightningdesignsystem.com/components/panels/)** - Added docked panel variant ([e88713e](https://github.com/salesforce-ux/design-system/commit/e88713e)) **[Popover](https://lightningdesignsystem.com/components/popovers/)** - Added warning and error variants ([60a628d](https://github.com/salesforce-ux/design-system/commit/60a628d)) **[Progress Bar](https://lightningdesignsystem.com/components/progress-bar/?example=progress-bar-descriptive&variant=base)** - Added an example of descriptive progress bar with label and progress percentage above bar ([dbd0db1](https://github.com/salesforce-ux/design-system/commit/dbd0db1)) **[Progress Indicator](https://lightningdesignsystem.com/components/progress-indicator/)** - Added new vertical variant ([118b520](https://github.com/salesforce-ux/design-system/commit/118b520)) - Added `slds-progress__marker_icon-success` to indicate completed stage **[Progress Ring](https://lightningdesignsystem.com/components/progress-ring/)** - Added `slds-progress-ring_large` modifier to make a 32x32px ring ([26be78c](https://github.com/salesforce-ux/design-system/commit/26be78c)) - Added `slds-progress-ring_active-step` modifier to change color of progress ring **[Spinner](https://lightningdesignsystem.com/components/spinners/?example=inlined&variant=base)** - Added new inline spinner variant ([c05738f](https://github.com/salesforce-ux/design-system/commit/c05738f)) **[Tabs](https://lightningdesignsystem.com/components/tabs/#On-Mobile)** - Added new mobile stacked variant ([9d7b861](https://github.com/salesforce-ux/design-system/commit/9d7b861)) **[Text](https://lightningdesignsystem.com/utilities/text/?example=text-font-monospace&variant=text)** - Added new monospace font-family ([7a41fd6](https://github.com/salesforce-ux/design-system/commit/7a41fd6)) ## Fixes **[Avatar](https://lightningdesignsystem.com/components/avatar/?example=fallback-user-initials&variant=base)** - Added text shadow to `slds-avatar__initials` for better contrast ([3f43dfa](https://github.com/salesforce-ux/design-system/commit/3f43dfa)) - Added `slds-avatar__initials_inverse` for dark text initials on a light background **[Button Group](https://lightningdesignsystem.com/components/button-groups/?example=button-group-more-open&variant=base)** - Added `slds-dropdown_actions` to button group overflow dropdown ([8ab08fe](https://github.com/salesforce-ux/design-system/commit/8ab08fe)) **[Button Icon](https://lightningdesignsystem.com/components/button-icons/?variant=bordered-inverse)** - Added selected stying to border inverse variant ([2624d4f](https://github.com/salesforce-ux/design-system/commit/2624d4f)) **[Card](https://lightningdesignsystem.com/components/cards/?example=related-list-table&variant=base)** - Added `slds-card__footer-action` to have footer link take up full width of card ([89c6a28](https://github.com/salesforce-ux/design-system/commit/89c6a28)) **[Chat](https://lightningdesignsystem.com/components/chat/#Sneak-peek)** - Changed `slds-chat-message__text-sneak-peak` to `slds-chat-message__text-sneak-peek` ([cdaabbf](https://github.com/salesforce-ux/design-system/commit/cdaabbf)) **[Checkbox](https://lightningdesignsystem.com/components/checkbox/)** - Updated examples to have unique `value` attributes ([cdf72cd](https://github.com/salesforce-ux/design-system/commit/cdf72cd)) **[Compound Form](https://lightningdesignsystem.com/components/form-element/#Compound)** - Fixed layout overflow bug ([#530](https://github.com/salesforce-ux/design-system/issues/530)) **[Data Table](https://lightningdesignsystem.com/components/data-tables/?state=row-error-and-selected&variant=inline-edit)** - Adjusted styling for edited and error cells when row is selected ([9ed087a](https://github.com/salesforce-ux/design-system/commit/9ed087a)) - Updated checkboxes and radio groups in Data Tables to be grouped with a common label by using `aria-labelledby` and hidden group label in the column header ([f8f8801](https://github.com/salesforce-ux/design-system/commit/f8f8801)) **[Datepicker](https://lightningdesignsystem.com/components/datepickers/?state=datepicker-with-error&variant=base)** - Prevented error border from applying to nested select component ([0fa0165](https://github.com/salesforce-ux/design-system/commit/0fa0165)) **[Dueling Picklist](https://lightningdesignsystem.com/components/dueling-picklist/)** - Updated all examples to include a group label and form-element wrapper ([8d1a1b4](https://github.com/salesforce-ux/design-system/commit/8d1a1b4)) **[Form Element](https://lightningdesignsystem.com/components/form-element/#Compound)** - Added `slds-form-element__legend_has-tooltip` modifier to allow for tooltip icon next to legend ([f3c5b48](https://github.com/salesforce-ux/design-system/commit/f3c5b48)) **[Global Header](https://lightningdesignsystem.com/components/global-header/)** - Updated colors of global [actions](https://lightningdesignsystem.com/components/global-header/#Global-Actions-Bar) ([58d68e1](https://github.com/salesforce-ux/design-system/commit/58d68e1)) - Updated search to use [new combobox group](https://lightningdesignsystem.com/components/global-header/#Global-Search) ([9bddfde](https://github.com/salesforce-ux/design-system/commit/9bddfde)) **[Input](https://lightningdesignsystem.com/components/input/)** - Removed red box shadow from required inputs in firefox ([069a3c8](https://github.com/salesforce-ux/design-system/commit/069a3c8)) - Used `aria-labelledby` instead of `aria-describedby` for associating the prepended and appended fixed text to the input ([25d51d7](https://github.com/salesforce-ux/design-system/commit/25d51d7)) - Reordered `slds-input:required` styles to prevent overrides ([ba3ac5b](https://github.com/salesforce-ux/design-system/commit/ba3ac5b)) - Removed pointer event when icon is located on top of an input ([84b650b](https://github.com/salesforce-ux/design-system/commit/84b650b)) - Added `slds-input-has-icon_group-right` to fix spacing issues for [multiple icons on the right](https://lightningdesignsystem.com/components/input/?example=double-icon-spinner&variant=base) ([9bddfde](https://github.com/salesforce-ux/design-system/commit/9bddfde)) **[Modal](https://lightningdesignsystem.com/components/modals/?modifiers=.slds-fade-in-open&modifiers=.slds-modal_medium&variant=base)** - Changed width of medium modal to 70% ([b2d9e1b](https://github.com/salesforce-ux/design-system/commit/b2d9e1b)) **[Path](https://lightningdesignsystem.com/components/path/)** - Added focus styling for completed stages ([f197b4a](https://github.com/salesforce-ux/design-system/commit/f197b4a)) - Reordered `slds-is-active` and `slds-is-complete` to prevent overrides - Added min-width to action button ([1b8e6b8](https://github.com/salesforce-ux/design-system/commit/1b8e6b8)) **[Radio Group](https://lightningdesignsystem.com/components/radio-group/) and [Radio Button Group](https://lightningdesignsystem.com/components/radio-button-group/)** - Updated examples to have unique `value` attributes ([cdf72cd](https://github.com/salesforce-ux/design-system/commit/cdf72cd)) **[Rich Text Editor](https://lightningdesignsystem.com/components/rich-text-editor/?state=error&variant=base)** - Added white background to error message with `slds-form-element__help` modifier ([8033c22](https://github.com/salesforce-ux/design-system/commit/8033c22)) - Removed margin-bottom from `slds-rich-text-editor__spacing-wrapper` and added it to `slds-rich-text-editor__select` ([bf907ed](https://github.com/salesforce-ux/design-system/commit/bf907ed)) **[Trees](https://lightningdesignsystem.com/components/trees/?state=metatext&variant=base)** - Added missing assistive text span for tree branch with metatext ([a407e58](https://github.com/salesforce-ux/design-system/commit/a407e58)) **Utilities** - Added `!important` to [visibility utilities](https://lightningdesignsystem.com/utilities/visibility/?example=hidden-visible&variant=visibility) `slds-hide` and `slds-hidden` ([16bf902](https://github.com/salesforce-ux/design-system/commit/16bf902)) - Fixed error in Grid documentation around [width and ordering class prefixes](https://latest-214.lightningdesignsystem.com/utilities/grid/#Responsive-Layout-Options) ([f6a66d9](https://github.com/salesforce-ux/design-system/commit/f6a66d9)) **[Vertical Tabs](https://lightningdesignsystem.com/components/vertical-tabs/)** - Removed outline when link has focus ([72fcd6f](https://github.com/salesforce-ux/design-system/commit/72fcd6f)) **[Visual Picker](https://lightningdesignsystem.com/components/visual-picker/)** - Added focus styling ([cbd07e9](https://github.com/salesforce-ux/design-system/commit/cbd07e9)) ## Tokens **[Text](https://lightningdesignsystem.com/design-tokens/#category-text-color)** - Changed value of `$color-text-success`([97d13bb](https://github.com/salesforce-ux/design-system/commit/97d13bb)) - Changed value of `$color-text-link`([9bc8b0d](https://github.com/salesforce-ux/design-system/commit/9bc8b0d)) ## **Release [2.5.4] - April 19, 2018** ## Fix - Reordered Quill styles to apply indentation styles to the Rich Text Editor output class ([0bbf51c](https://github.com/salesforce-ux/design-system/commit/0bbf51c)) ## **Release [2.5.3] - March 13, 2018** ## Fix - Remove Quill styles from the Rich Text Editor output class to fix properly nested lists ([296afb3](https://github.com/salesforce-ux/design-system/commit/296afb3)) ## **Release [2.5.2] - February 8, 2018** ## Fix - Add warm/cool header contrast tokens ([d6515ee](https://github.com/salesforce-ux/design-system/commit/d6515ee)) - Set background image on Brand Band to not repeat ([d843c97](https://github.com/salesforce-ux/design-system/commit/d843c97)) - Update bundle script to fix windows npm error ([#523](https://github.com/salesforce-ux/design-system/issues/523)) ## **Release [2.5.1] - January 19, 2018** ## Fix - Backport tokens for Path ([1932e76](https://github.com/salesforce-ux/design-system/commit/1932e76)) ## **Release [2.5.0] - January 9, 2018** ## Features **General Notes** - Updated Color guidelines to include Gray palette and Brand Colors - Introduced a new documentation style for Badges, Brand Band, Carousel, Chat, Menus, and the Grid utility. ### The following components have been updated: **Activity Timeline** - Updated behavior and styling of activity timeline by adding expandable sections ([10cf834](https://github.com/salesforce-ux/design-system/commit/10cf834)) **Brand Band** - Added Brand Band component **Breadcrumbs** - Added overflow menu button option for breadcrumbs ([a69621c](https://github.com/salesforce-ux/design-system/commit/a69621c)) **Button Icons** - Added new branding variant **Cards** - Added variant with Einstein branded header **Carousel** - Added Carousel component **Chat** - Added Chat component **Checkbox** - Added a stacked variant **Data Tables** - Added icons to data table headers and cells ([59c44b2](https://github.com/salesforce-ux/design-system/commit/59c44b2)) - Added header menu buttons to table headers ([33bd050](https://github.com/salesforce-ux/design-system/commit/33bd050)) - Added Product Listing example to advanced data tables - Added Radio Group example to advanced data tables **Global Header** - Updated styling to allow for rectangular logos ([ea43705](https://github.com/salesforce-ux/design-system/commit/ea43705)) **Grids** - Added top level gutter classes: `slds-gutters` and `slds-gutters_*` for sizes ([b6d7fd5](https://github.com/salesforce-ux/design-system/commit/b6d7fd5)) **Icons** - Added utility class `slds-current-color` to set an icon to use current color ([c9974d1](https://github.com/salesforce-ux/design-system/commit/c9974d1)) **Map** - Added Map component **Menus** - Added a variant for Menus with Submenus **Notifications** - Updated multiple styling attributes for reminder notifications, including background color, border color, and spacing ([9cbb18a](https://github.com/salesforce-ux/design-system/commit/9cbb18a)) **Popovers** - Added variant with Einstein branded header - Added variant for Feature callout **Rich Text Editor** - Moved Quill styles to rich text editor ([402845b](https://github.com/salesforce-ux/design-system/commit/402845b)) **Spinners** - Added class `slds-spinner_delayed` to apply a 300ms delay to the animation ([fbaa8d4](https://github.com/salesforce-ux/design-system/commit/fbaa8d4)) **Trees** - Added new ability to include metatext on tree items ([754c9fe](https://github.com/salesforce-ux/design-system/commit/754c9fe)) **Utilities** - Added utility class `slds-size-xxx-small` for sizing ([69d0eb2](https://github.com/salesforce-ux/design-system/commit/69d0eb2)) - Added utility class `slds-text-color-success` for text ([e744eb2](https://github.com/salesforce-ux/design-system/commit/e744eb2)) **Vertical Navigation** - Added a variant of vertical nav that uses radio groups as underlying markup ## Fixes The following fixes are now available: **Accordion** - Adjusted styling to only target first accordion child ([9f8f601](https://github.com/salesforce-ux/design-system/commit/9f8f601)) - Changed accordion focus styling from overall highlight to underline of header text ([0658e13](https://github.com/salesforce-ux/design-system/commit/0658e13)) - Updated to hide content overflow when closed ([7fb7cb0](https://github.com/salesforce-ux/design-system/commit/7fb7cb0)) **App Launcher** - Added grab styling to match current use in product - Changed to Dev Ready from prototype **Button Groups** - Updated z-index for button group focus ([259a6db](https://github.com/salesforce-ux/design-system/commit/259a6db)) **Buttons** - Stopped events from happening on disabled buttons ([e661ee8](https://github.com/salesforce-ux/design-system/commit/e661ee8)) **Color Picker** - Added spacing utility class to dropdown button icon between color and arrow ([69839b2](https://github.com/salesforce-ux/design-system/commit/69839b2)) **Combobox** - Added class `slds-combobox__input-value` that must be applied, in order to propagate styling, when a selection is made in a single selection inline listbox ([1d4e30f](https://github.com/salesforce-ux/design-system/commit/1d4e30f)) - Added spacing utility class to dropdown button icon between icon and arrow ([69839b2](https://github.com/salesforce-ux/design-system/commit/69839b2)) **Data Tables** - Added `slds-table_column-*-wrap` to add column wrap support ([b841961](https://github.com/salesforce-ux/design-system/commit/b841961)) **Date Picker** - Fixed background color used when today's date is selected ([75f0f6a](https://github.com/salesforce-ux/design-system/commit/75f0f6a)) **Dueling Picklist** - Fixed accessibility of disabled list boxes ([4ea5889](https://github.com/salesforce-ux/design-system/commit/4ea5889)) - Renamed Required to Locked, switched to lock icon instead of red asterisk ([3556b26](https://github.com/salesforce-ux/design-system/commit/3556b26)) - Updated background and border colors of disabled picklist ([4ea5889](https://github.com/salesforce-ux/design-system/commit/4ea5889)) **Expandable Section** - Updated to hide content overflow when closed ([7fb7cb0](https://github.com/salesforce-ux/design-system/commit/7fb7cb0)) **Global Navigation** - Changed global nav styling when subtabs are present with `slds-has-sub-tabs` ([d99332b](https://github.com/salesforce-ux/design-system/commit/d99332b)) - Prevented icons from shrinking when long text is present ([881da86](https://github.com/salesforce-ux/design-system/commit/881da86)) **Input** - Updated size of search icon to be 14x14px from 16x16px ([add0ba0](https://github.com/salesforce-ux/design-system/commit/add0ba0)) - Fixed vertical alignment issues when using `slds-input__icon` ([cb3fe60](https://github.com/salesforce-ux/design-system/commit/cb3fe60)) **Lookups** - Fixed icon alignment ([9b3de3c](https://github.com/salesforce-ux/design-system/commit/9b3de3c)) **Menus** - Fixed disabled menu items to turn disabled icons gray - Updated `slds-dropdown_xx-small` to use correct token ([0569d6d](https://github.com/salesforce-ux/design-system/commit/0569d6d)) **Modal** - Fixed modal background color ([2f0ad5a](https://github.com/salesforce-ux/design-system/commit/2f0ad5a)) - Removed hyphenation from modal body ([9f70ae7](https://github.com/salesforce-ux/design-system/commit/9f70ae7)) **Pills** - Update icons and improve consistency among pill usage **Popovers** - Updated background color of Walkthrough popovers ([08b2aac](https://github.com/salesforce-ux/design-system/commit/08b2aac)) - Added clouds to the header ([08b2aac](https://github.com/salesforce-ux/design-system/commit/08b2aac)) - Removed hyphenation from body text ([9f70ae7](https://github.com/salesforce-ux/design-system/commit/9f70ae7)) **Rich Text Editor** - Fixed issue where selection dropdowns overlapped content on smaller screens ([f1a7e8d](https://github.com/salesforce-ux/design-system/commit/f1a7e8d)) - Updated to prevent hyperlinks from breaking mid word ([4827702](https://github.com/salesforce-ux/design-system/commit/4827702)) **Tabs** - Adjusted position of unsaved indicator on a tab when used with notifications ([5916f2f](https://github.com/salesforce-ux/design-system/commit/5916f2f)) **Trees** - Added missing ARIA role `role=gridcell` to tree grid TD elements ([f94d3dd](https://github.com/salesforce-ux/design-system/commit/f94d3dd)) - Removed extra indentation spacing for base variant ([e64cfc1](https://github.com/salesforce-ux/design-system/commit/e64cfc1)) **Utilities** - Added missing BEM syntax to `slds-text-link_faux` ([#505](https://github.com/salesforce-ux/design-system/issues/505)) **Vertical Navigation** - Changed active and hover background colors ([ae7997c](https://github.com/salesforce-ux/design-system/commit/ae7997c)) ## Tokens **Sizing** - Added `$size-xxx-small` sizing token for UI components ([69d0eb2](https://github.com/salesforce-ux/design-system/commit/69d0eb2)) ## **Release [2.4.6] - November 22, 2017** ## Fixes **Colors** - Modified tokens using gray-2 to use gray-3 ## **Release [2.4.5] - November 14, 2017** ## Fixes **Buttons** - Remove pointer-events from icons found within buttons ## **Release [2.4.4] - October 17, 2017** ## Fixes **Cards** - Fixed padding-left and padding-right on nested `slds-card__header` and `slds-card__footer` with `slds-card_boundary` **Sizing** - Fixed known IE11 bug when you have nested flex containers with flex-basis on children ## **Release [2.4.3] - September 19, 2017** ## Fixes **Buttons** - Removed dark border on focus, fixing bug when buttons are found inside of a button group **Checkbox/Radio Button Group** - Fixed issue when a selection is made then that selection is put into a disabled state **Modal** - Update background color token to transparent value **Path** - Use transform to properly align checkmark inside of path element ## **Release [2.4.1] - September 14, 2017** ## Big Impact We've made several enhancements in the Winter ’18 release which might affect your components and pages. **As a designer what do I need to know about the design changes in the Winter ‘18 release?** - We’ve enhanced font hierarchy to draw attention to what's most important in the moment and improve legibility. - We’ve condensed the spacing of content (from 16px to 12px) to allow more information on the page. You’ll especially notice this in the tightening of data tables. - We've added layering and a colorful graphics to the layout to create contrast between foreground and background cards. The cards have white backgrounds and drop shadows, while the page background introduces color. - The components we’ve updated are cards, avatar, data tables, and page headers. - For more detailed information, please visit this Salesforce UX blog post: [Evolving the Lightning User Experience](https://medium.com/salesforce-ux/evolving-the-lightning-user-experience-5f1de21f7af) **As a developer what do I need to know about the design changes in the Winter ‘18 release?** - With the changes to the page background color, you may notice some of your custom components are transparent, rendering the text on the dark background. You can fix that easily by adding the class `.slds-card` to the outer wrapper of your component. - If you need default tabs to appear to be in a card, you can place the `.slds-tabs_card` class on the `.slds-tabs_default` DOM node. This will give the tabset padding and drop-shadows like a card. - When the `.slds-card` class is used inside `.slds-tabs_default`, `.slds-modal`, or another `.slds-card`, they no longer have the drop-shadow card look. Instead they are simply white. In some situations, you may need to differentiate your card from content around it. You can add the `.slds-card_boundary` class to the `.slds-card` for a rounded border. - On some pages, you’ll notice the header is attached to a list view. If you have a custom page where you’d like to attach the header to a component below, add the `.slds-has-bottom-magnet` class to the `slds-page-header`. Then add `.slds-has-top-magnet` to the component below. This will visually attach the components to each other. - If you have been using SLDS in Visualforce via the `<apex:slds />` tag, your Visualforce pages will also inherit the new styling in Winter ’18 - For more detailed information, please visit this developer blog post: [Get your Lightning components ready for Winter ’18](https://developer.salesforce.com/blogs/developer-relations/2017/08/winter-coming-lightning.html) ## Fixes **Cards** - Added `slds-card_boundary` class to provide card-like look when component is inside a tabset **Magnet** - Force magnet layout by making their properties immutable when using `slds-has-top-magnet` and `slds-has-bottom-magnet` ## **Release [2.4.0] - September 12, 2017** ## Features The following are now available: **Badges** - Added dark blue badge - Added white badge with icon and normalized text **Dynamic Menu** - Removed dynamic lists from combobox component and created new dynamic menu component **Progress Bar** - Added green variant **Progress Ring** - Added new Progress Ring component **Scoped Notification** - Added scoped inline notifications component **Slider** - Added two `spans` inside `label` to give the ability to visually hide one or both ## Fixes The following issues have now been resolved: **Alerts** - Fixed grammatical errors in alerts documentation ([aa8099a](https://github.com/salesforce-ux/design-system/commit/aa8099a)) **Button Group** - Button menu uses filled button icon modifier by default ([f9c2168](https://github.com/salesforce-ux/design-system/commit/f9c2168)) **Buttons** - Added `pointer-events:none` to svg in button ([cc9cd5f](https://github.com/salesforce-ux/design-system/commit/cc9cd5f)) **Cards** - Removed card look when inside of a modal ([f58c355](https://github.com/salesforce-ux/design-system/commit/f58c355)) - Removed card look when inside of a tabset **Color Picker** - Added more descriptive assistive text and fixed `tabindex` on swatches ([fc989c1](https://github.com/salesforce-ux/design-system/commit/fc989c1)) - Added `input` error state ui and examples ([b982bf7](https://github.com/salesforce-ux/design-system/commit/b982bf7)) - Added focus state to color picker slider thumb ([c29d368](https://github.com/salesforce-ux/design-system/commit/c29d368)) **Combobox** - Added `role=none` to `div` that wraps `input` ([e695ae7](https://github.com/salesforce-ux/design-system/commit/e695ae7)) - Removed title and assistive text from search icon **Date Picker** - Added styles when adjacent month is selected within a week range ([bab8e26](https://github.com/salesforce-ux/design-system/commit/bab8e26)) **Dueling Picklist** - Added documentation on focus management - Fixed syntax and grammatical errors in dueling picklist accessibility docs - Removed double focus on ul ([c231132](https://github.com/salesforce-ux/design-system/commit/c231132)) **File-selectors** - Fixed file selector input labelling **Global Navigation** - Added animation on active and when hovering on a global navigation list item ([074771a](https://github.com/salesforce-ux/design-system/commit/074771a)) **Grids** - Fix IE sizing issue by adding max-width ([00a0e35](https://github.com/salesforce-ux/design-system/commit/00a0e35)) **Modals** - Removed extra `.slds-modal__header` class from headless modal example **Normalize** - Removed `[hidden] { display: none; }` to fix Visual Force charts disappearance when SLDS is added **Notifications** - Updated assistive text for dismiss notification button and added event type to header and live region ([d96535d](https://github.com/salesforce-ux/design-system/commit/d96535d)) - Updated styling to add bordercolor and darker drop shadow ([f977ee6](https://github.com/salesforce-ux/design-system/commit/f977ee6)) **Path** - Simplified and fix active tab focus styling across all stage states ([3f9fbd4](https://github.com/salesforce-ux/design-system/commit/3f9fbd4)) **Responsive Tables** - Examples for using responsive tables can now be found on the site again ([d427148](https://github.com/salesforce-ux/design-system/commit/d427148)) ## Tokens **Colors** - Reduced and updated gray palettes to 12 total ([ff582b0](https://github.com/salesforce-ux/design-system/commit/ff582b0)) ## Design Changes **Cards** - Background color changed to white - Added drop shadow for improved depth and heirarchy - Cards found inside of a tabset have their drop shadow removed **Data Tables** - Decreased row height for improved content density **Split View** - Changed color of background **Static/Read Only Inputs** - Updated font size, weight, and color ([ce7b275](https://github.com/salesforce-ux/design-system/commit/ce7b275)) **Default Tabs** - Tabs take on the look and feel of a card ## **Release [2.3.1] - May 25, 2017** ## Big Impact **BEM naming change** Initially we used the double dash style for BEM notation (`--`). Due to the fact that double dashes are problematic in an XML environment (which doesn't allow double dashes within comments), we have upgraded our syntax to use the single underscore style (`_`). This change is backward compatible for 18 months. But all components going forward are built with the single underscore BEM style. ## Fixes The following issues have now been resolved: * Removed dotted underline for `abbr` that Chrome introduced in version 58 * Fix issue on Spinner component where Firefox and IE11 wouldn't respect its z-index token * Fix line-height issue on `slds-form-element__static` when the output was multi-line * Fix BEM naming convention on visibility classes - [#452](https://github.com/salesforce-ux/design-system/issues/452) ## **Release [2.3.0] - May 15, 2017** ## Features The following are now available: **Accordion** * Added Accordion component — [Accordion](/components/accordion) **Button** * Added class `slds-is-selected-clicked` to handle click event on stateful button - [Stateful Button](/components/buttons?modifiers=.slds-is-selected-clicked&variant=stateful) **Combobox** * Added Combobox component — [Combobox](/components/combobox) **Docked Utility Bar** * Added two line support for docked utility bar items **Dueling Picklist** * Re-named from Multi-select — [Dueling Picklist](/components/dueling-picklist) **Dynamic Icons** * Added Ellie animated icon * Added Equalizer animated icon * Added Score animated icon * Added Waffle animated icon * Added Strength animated icon * Added Trend animated icon **Expandable Section** * Added Expandable section component — [Expandable Section](/components/expandable-section?modifiers=.slds-is-open&variant=base) * Added non-collapsable example **Input** * Added an example for Search input with loading spinner - [Input with spinner](/components/input?example=double-icon-spinner&variant=base) * Added `slds-has-input-focus` utility class to provide focus styles on an element **Lookups** * Uses new combobox HTML **Menus** * Added `slds-dropdown—fluid` to adjust the width of a dropdown so it can be fluid to its container * Added updated styles for base HTML elements in the Rich Text Editor * Added the same updated styles in the output of the Rich Text Editor using the `.slds-rich-text-editor__output` class * Added `slds-pill_link` to modify pill for when we want the hyperlink to take up 100% of the available pill * Added `slds-pill__action` to the actionable link element inside of `slds-pill—link` **Path** * Re-named from Process **Picklist** * Uses new combobox HTML **Pills** * Added listbox of pill option variant — [Listbox of Pill Options](/components/pills?variant=listbox-of-pill-options) **Popover** * Added `slds-popover_walkthrough-alt` to modify the background of a walkthrough popover - [Walkthrough Popover](/components/popovers?example=action-popover&variant=walkthrough) **Progress Bar** * Added Progress Bar component — [Progress Bar](/components/progress-bar) **Rich text editor** * Added bottom toolbar support - [Bottom toolbar example](/components/rich-text-editor?example=bottom-toolbar&variant=base) * Added long-form formatting support **Spinner** * Xx-small Spinner variant — [Spinner](/components/spinners?modifiers=.slds-spinner_xx-small&variant=base) **Split View List** * Added Split View component — [Split View](/components/split-view) **Visual Picker** * Added Visual Picker component — [Visual Picker](/components/visual-picker) **Vertical Navigation** * Added Vertical Navigation component — [Vertical Navigation](/components/vertical-navigation/) * Deprecated Navigation component for this improved version **Visibility** * Improved visibility classes for responsive design — [#429](https://github.com/salesforce-ux/design-system/pull/429) - Thanks [@3den](https://github.com/3den)! ## Fixes The following issues have now been resolved: * Fix for `::-ms-clear` to remove native clear button in IE * Whenever `slds-truncate` is used, it is required to be used in conjunction with a [title] attribute * The Alert component icon is now contained within `slds-icon_container` * The Button icon component is required to have `slds-button—icon` applied to the `<button />` element. Before, `slds-button—icon-inverse`, `slds-button—icon-container`, `slds-button—icon-border`, `slds-button—icon-border-filled`, `slds-button—icon-border-inverse`, `slds-button—icon-more`, and `slds-button—icon-error` were used in conjunction with the `slds-button` classname but we now require `slds-button—icon` to be a part of this grouping of classnames * The Stateful button component is required to have `slds-button—stateful` applied to the `<button />` element * The Toast component icon is now contained within `slds-icon_container` * The Page header component "entity" icon is now contained within `slds-icon_container` * The Feeds component "Post" examples have been updated to be contained within the `slds-feed` list * The Compound Form Layout example was updated so each `fieldset` is correctly using the `slds-form-element` class and the whole form is now contained in `slds-form—compound` * Unless the HTML output is represented as a list — `ul`, `ol`, or `dl` — all examples were updated to use `slds-bottom—[position]` instead of `slds-has-divider—[position]` * Whenever `slds-dropdown` is used, it is required to be contained inside an element that has the classname `slds-dropdown-trigger` * Whenever `slds-form—stacked`, `slds-form—horizontal`, and `slds-form—compound` is used, it is required to be used in conjunction with `slds-form` * Whenever `slds-icon-text-default`, `slds-icon-text-warning`, or `slds-icon-text-error` is used, it is required to be used in conjunction with `slds-icon` * Fixed a bug where the task2 icon corresponding class name was incorrectly named "task-2" * Scoped :focus style for data-tables to `slds-table` * Fixed an issue where assistive text in an parent with `text-transform: uppercase` would get read as full-caps (e.g. "Sorted ascending" in data table headers getting read as * Rounded corners have been removed from utility icons so that they no longer clip incorrectly * Breadcrumbs now wrap properly * Focus state for pills has been moved to the containing element, rather than just the text inside of the pill * Updated z-index of Docked Utility Bar to 4 to play nicely with others * Prevent docked composer content from collapsing in Safari * Updated cursor style for disabled state on radio button groups ## Deprecated The following features are being marked as deprecated in this release and will be removed in three releases: * Navigation was removed from site navigation and replaced with improved Vertical Navigation — [Vertical Navigation](/components/vertical-navigation/) ## Design The following updates have been made to component designs: * Touch components have been removed from the site **Dropdown Menus:** * Sub-headings inside of dropdown menus should now be truncated **Docked Composer:** * Added focus state around entire composer panel * Title inside of composer panel header should truncate instead of wrap to two lines **Feeds:** * Removed the like count in the bottom right of the Feed post * Changed spacing between feed posts from 1.5rem to .75rem * Add top border to feed footer on mobile **Files:** * Added example for no title * Added example for loading state * Updated location of the files action menu **Popovers** * Always have a close button icon ## Tokens The following changes have been made to tokens: * `TASK_2` was renamed into `TASK2` * Standard icon set: Added `ENTITLEMENT` * Standard icon set: Added `LIVE_CHAT` **s1-base/sizing** * Removed `MAX_HEIGHT_ACTION_OVERFLOW_MENU` * Removed `MAX_WIDTH_ACTION_BAR` * Removed `MAX_WIDTH_ACTION_BAR_ITEM` * Added `UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS` * Added `VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_HOVER` * Added `VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_ACTIVE` ## Accessibility The following changes have been made to make our product more accessible: **Activity Timeline** - Added `title` attribute to item icons - Changed the checkbox markup to match the new, "Explicit Label" markup pattern **App Launcher** - Changed `slds-modal` to be a `<section />` element - Changed `slds-modal__header` to be a `<header />` element - Changed the App Tiles icons to match the new [Avatar Fallback Entity Initials](/components/avatar) pattern, adding an `<abbr />` tag - Removed Assistive Text from Drag Handle image as it's irrelevant to screen reader users - Implemented the new Expandable Section pattern to the expanding sections - Placed a button element inside the section heading elements - Added `aria-expanded="true|false"` to reflect state - Added `aria-controls="id_of_expanding_section"` to associate the button to the content it controls and gave the content wrapper the same id - Added three new states for Accessible Drag and Drop - Added in the three missing states, necessary to demonstrate the Assistive Technology implementation for the full Drag and Drop lifecycle. "Grabbed", "Moved in list" and "Dropped" - Added a live region to be used to update the user of Assistive Technology, to the current state of the operation - Add an additional hidden piece of instructional text, that instructs the user how to perform the operation: "Press space bar to move this app within the list." This is present in the default state. - Each focusable tile element, should be `aria-describedby="id-of-span-containing-instructional-text"` - In the grabbed state - Remove the instructional text as the user has performed the action, but keep the container - Change the content of the live region, to be "{App Name}: current position {x} of 6. Use the up and down arrows to move this app" - In the "Moved in List" state, implement the same changes applied to Grabbed but: - Update the live region text to be: "{App Name}: new position {x} of 4." - In the dropped state - Update the live region text to be: "{App Name}: final position {x} of 4." - Replace the hidden instructional text to be what it was in the base state **Avatars** - Added missing title attributes **Button** - Fixed the color contrast issues on the Success Button **Card** - Changed `slds-card__footer` to a `<footer />` element - Changed Tiles to be a list of `slds-tile`'s **Checkbox Button Group** - Removed `for` attributes on wrapping `span` elements **Date Picker** - Added `role="dialog"` to the `slds-datepicker` - Added `aria-label` to the `dialog` to describe its purpose - Made the first day cell focusable as it is a ARIA `grid` widget - Added `aria-multiselectable="true"` to the `grid` to indicate you can selected multiple dates - Removed `headers` attribute from each `gridcell` - Added assistive text for when we mark today's date in the grid. We do this to provide additional meaning since the grey background color is not enough of an indicator to non-sighted users - Changed the "Today" option to be a selectable cell, just like any other day in the grid, by removing its `<a />` tag **Docked Composer** - Changed the container element to be a `<section role="dialog" />` - Added `aria-describedby="id_of_body_element"` to the element that holds the `dialog` role. Gave the Composer body the same ID - Changed the header to be to a `<header />` element - Removed redundant word "icon" in assistive text for icons in the Overflow Menu items - Removed a duplicate `role="dialog"` attribute from the Popout variant as it created nested dialogs - Added a means to tell a Docked Composer is "Minimized" by adding Assistive Text to the header - Changed the Composer body and footer to be truly hidden when minimized **Docked Composer - Task** - Added assistive text to the icons used in the Lookup examples - Upgraded the Lookups to ARIA 1.1 Specification - See Lookup Notes for details - Upgraded `listbox` markup to include option group headings being accessible, to match Picklist - See Lookup Notes for details - Fixed Listbox `option`'s markup to not wrap `div` elements in `span` elements **Docked Composer - Voice** - Added `aria-live="assertive"` to the header for alerting a user of a change in status of a call - Changed the Mute button to be an ARIA Toggle Button with `aria-pressed="true|false"` - Made "Recent Activity" on Incoming call example an `<h3 />` - Updated icon assistive text for icons in the Incoming Call example - Added assistive text to the icons used in the Lookup examples on Log a Call - Upgraded the Lookups to ARIA 1.1 Specification - See Lookup Notes for details - Upgraded `listbox` markup to include option group headings being accessible, to match Picklist - See Lookup Notes for details - Fixed Listbox `option`'s markup to not wrap `div` elements in `span` elements **Docked Form Footer** - Fixed button text on "with errors" state from "Settings" to "Review the Following Errors" **Docked Utility Bar** - Removed invalid role of `footer` from the `<footer />` element - Implemented the ARIA Toggle Button pattern using `aria-pressed="true|false"` on buttons. Provides indication of an active or open utility panel **Docked Utility Panel** - Changed the container element to be a `<section role="dialog" />` - Changed the header to be to a `<header />` element - Made sure the content of a minimized Panel is not focusable by removing it from the DOM completely **Expandable Section** - Added `aria-controls` to the `<button />` element that performs the action - Added `aria-expanded="true|false"` to the `<button />` element that performs the action - Added `aria-hidden="true|false"` to the `slds-section__content` wrapper - Added an ID to `slds-section__content` which the `<button />` uses as its `aria-controls` value **Feeds** - Changed "Like" buttons to be `<button />` elements - Changed "Like" buttons to be ARIA Toggle Buttons with `aria-pressed="true|false"` - Changed "More Comments" button to be a `<button />` element - Changed "Share" buttons to be `<button />` elements **Form Layout** - Updated Checkbox and Radio Buttons to match newer "Explicit Label" pattern **Global Header** - Added `aria-label` to the Notifications dialog - Added `aria-describedby` to the Notifications dialog - Upgrade the ARIA Combobox markup to ARIA 1.1 Specification - See Lookup Notes for details - Upgraded `listbox` markup to include option group headings being accessible, to match Picklist - See Lookup Notes for details - Fixed Listbox `option`'s markup to not wrap `div` elements in `span` elements - Fixed Favorites Button to communicate pressed state by Implementing the ARIA Toggle Button pattern using `aria-pressed` **Global Navigation** - Changed the App Launcher link to be a `<button />` as it launches a Modal - Fixed a malformed `title` attribute of the App Name - Fixed the `title` attribute of the Object Switcher link to match visual text - Fixed the `title` attribute of the Object Switcher Menu Button **Global Navigation - Navigation Bar** - Fixed Menu item title attributes - Removed `aria-haspopup=true` from dropdown `li`. - Removed `tabindex="0"` from `slds-context-bar__icon-action`. - Removed `tabindex="-1"` from `slds-context-bar__icon-action`'s button. - Added `aria-haspopup="true"`