@salesforce-ux/design-system

## Release 2.12.0 - April 28, 2020 ## Components ### [Buttons](https://www.lightningdesignsystem.com/components/buttons) #### Changed - Set the inverse button text color to 50% opacity when the button is disabled. ### [Data Tables](https://www.lightningdesignsystem.com/components/data-tables) #### Changed - Changed `white-space` property to `pre-line` in `slds-cell-wrap` for cell content that has pre-formatted line breaks. - Adjusted positioning for resize handle for better usability on touch devices, and made the handle visible in all cases #### Added - Added documentation and examples for wrapping, line clamping and truncating table cell content. ### [Input](https://www.lightningdesignsystem.com/components/input) #### Fixed - Resolved issue where Chrome on Android was rendering misaligned text for date-related input types. ### [Popovers](https://www.lightningdesignsystem.com/components/popovers) #### Fixed - Fixed the text color in form inputs for the Walkthrough variation. ### [Progress Ring](https://www.lightningdesignsystem.com/components/progress-ring) #### Fixed - Resolved an IE11 issue with positioning of the `.slds-progress-ring__progress` element by setting more explicit position settings. #### Changed - Set the blueprint recommendation to use a `<circle>` element instead of a `<path>` element when the completion of the progress circle is 100%. This change resolves an IE11 rendering issue with completed rings. ### [Visual Picker](https://www.lightningdesignsystem.com/components/visual-picker) #### Added - Added a Small variant to the visual picker ## Utilities ### [Line Clamp](https://www.lightningdesignsystem.com/utilities/line-clamp) #### Changed - Changed `white-space` property to `pre-line` in `slds-line-clamp` in consideration of content that has pre-formatted line breaks. #### Added - Added an X-Small modifier that truncates text after two lines. ## Release 2.11.9 - April 27, 2020 - Updated Icons to 9.35.0 ## Release 2.11.8 - April 15, 2020 ## Components ### [Data Tables](https://www.lightningdesignsystem.com/components/data-tables) #### Changed - Adjusted positioning for `slds-th__action-button` for better vertical alignment and made additional changes to support appearance in the touch implementation ## Release 2.11.7 - April 2, 2020 - Moved font-size declaration on touch devices to the touch CSS file ## Components ### [Accordion](https://www.lightningdesignsystem.com/components/accordion) #### Changed - Adapted line height on accordion buttons to function better with multi-line instances. ### [Combobox](https://www.lightningdesignsystem.com/components/combobox) #### Added - Added documentation and examples for mobile/touch context ### [Data Tables](https://www.lightningdesignsystem.com/components/data-tables) #### Changed - Updated height and width dimensions on touch version of `slds-th__action-button` ### [Datepickers](https://www.lightningdesignsystem.com/components/datepickers) #### Fixed - Resolved incorrect spacing when nested in a data table by increasing specificity of certain `slds-datepicker` specific CSS selectors  ### [Datepickers](https://www.lightningdesignsystem.com/components/datepickers) #### Changed - Replaced `slds-disabled-text` with specific selector `slds-day_adjacent-month` for dates outside of current month, so that they will be selectable but with a different text color that meets accessibility requirements. ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Added - Added documentation and examples for mobile/touch context ### [Input](https://www.lightningdesignsystem.com/components/input) #### Added - Added documentation and examples for mobile/touch context ### [Map](https://www.lightningdesignsystem.com/components/map) #### Added - Added documentation and examples for mobile/touch context ### [Menus](https://www.lightningdesignsystem.com/components/menus) #### Added - Added documentation and examples for mobile/touch context ### [Modals](https://www.lightningdesignsystem.com/components/modals) #### Added - Added documentation and examples for mobile/touch context ### [Pills](https://www.lightningdesignsystem.com/components/pills) #### Added - Added documentation and examples for mobile/touch context ### [Popovers](https://www.lightningdesignsystem.com/components/popovers) #### Added - Added documentation and examples for mobile/touch context ### [Progress Indicator](https://www.lightningdesignsystem.com/components/progress-indicator) #### Added - Added documentation and examples for mobile/touch context ### [Radio Button Group](https://www.lightningdesignsystem.com/components/radio-button-group) #### Added - Added documentation and examples for mobile/touch context ### [Radio Group](https://www.lightningdesignsystem.com/components/radio-group) #### Added - Added documentation and examples for mobile/touch context ### [Slider](https://www.lightningdesignsystem.com/components/slider) #### Added - Added documentation and examples for mobile/touch context ## Utilities ### [Text Utility](https://www.lightningdesignsystem.com/utilities/text) #### Added - Added documentation and examples for mobile/touch context ## Release 2.11.6 - March 11, 2020 ## Components ### [Button Icons](https://www.lightningdesignsystem.com/components/button-icons) #### Fixed - Sizing classes are now respected in mobile/touch context #### Added - Added documentation and examples for mobile/touch context ### [Cards](https://www.lightningdesignsystem.com/components/cards) #### Added - Added documentation and examples for mobile/touch context ### [Checkbox Button](https://www.lightningdesignsystem.com/components/checkbox-button) #### Added - Added documentation and examples for mobile/touch context ### [Checkbox Toggle](https://www.lightningdesignsystem.com/components/checkbox-toggle) #### Added - Added documentation and examples for mobile/touch context ## Release 2.11.5 - March 5, 2020 ## Components ### [Accordion](https://www.lightningdesignsystem.com/components/accordion) #### Changed - Replaced `slds-truncate` with specific selector `slds-accordion__summary-content` in Accordion title so content will only truncate for larger screens. ### [Badges](https://www.lightningdesignsystem.com/components/badges) - Added examples for communicating Success, Warning and Error states. ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox) #### Added - Added documentation and examples for mobile/touch context ### [Checkbox Button Group](https://www.lightningdesignsystem.com/components/checkbox-button-group) #### Added - Added documentation and examples for mobile/touch context ### [Path](https://www.lightningdesignsystem.com/components/path) #### Added - Added documentation and examples for mobile/touch context ### [Scoped Notifications](https://www.lightningdesignsystem.com/components/scoped-notifications) - Added examples for Informational, Success, Warning and Error states  ## Release 2.11.4 - February 12, 2020 ## Components ### [Spinners](https://www.lightningdesignsystem.com/components/spinners) - Moved the `will-change: transform` rule from the dots (pseudo-elements) to their parents (`.slds-spinner, .slds-spinner__dot-…`) to fix visual cropping of dots ## Release 2.11.3 - February 3, 2020 ## Fixed - Corrected class name in Progress Bar Circular example - Corrected various documentation typos and formatting in: - components/activity-timeline - components/alert - components/app-launcher - components/avatar-group - components/breadcrumbs - components/builder-header - components/button-groups - components/button-icons - components/buttons - components/cards - components/carousel - components/chat - components/color-picker - components/combobox - components/data-tables - components/datepickers - components/datetime-picker - components/drop-zone - components/dueling-picklist - components/dynamic-menu - components/expandable-section - components/expression - components/file-selector - components/form-element - components/global-header - components/global-navigation - components/icons - components/illustration - components/input - components/menus - components/page-headers - components/panels - components/path - components/picklist - components/pills - components/progress-indicator - components/progress-ring - components/prompt - components/publishers - components/scoped-notifications - components/setup-assistant - components/tabs - components/trees - utilities/borders - utilities/description-list - utilities/line-clamp/docs.mdx ## Release 2.11.2 - January 23, 2020 ## Updated - Removed `slds-is-mobile` scoping class. Touch related styles will now be applied automatically via a feature detection media query. - Blueprints now use specific `_touch.scss` files for touch context styling. ## Release 2.11.1 - January 21, 2020 ## Updated - Updated node dependencies to remove vulnerabilities. - Updated project readme to recommend use of the Storybook development environment. ## Release 2.11.0 - January 9, 2020 ## Added - Added `-moz` and `-webkit` prefixes to `appearance : none` rules - Generate a sanitized version of SLDS in `.dist` that does not contain `--` BEM notation for modifiers, removes deprecated code, and only imports support Lightning Web Components. ## Tokens ### Changed - Set `access:global` to the following tokens: - `brandPrimary` - `brandPrimaryActive` - `brandPrimaryTransparent` - `brandLight` - `brandLightActive` - `brandDark` - `brandDarkActive` - `brandAccessible` - `brandAccessibleActive` - `brandDisabled` - `brandContrast` - `brandContrastActive` - `brandBackgroundPrimary` - `brandBackgroundDark` - `brandTextLink` - `brandTextLinkActive` - Primitive tokens now default to our warm gray color palette - `PALETTE_GRAY_1`: `#ffffff` - `PALETTE_GRAY_2`: `#fafaf9` - `PALETTE_GRAY_3`: `#f3f2f2` - `PALETTE_GRAY_4`: `#ecebea` - `PALETTE_GRAY_5`: `#dddbda` - `PALETTE_GRAY_6`: `#c9c7c5` - `PALETTE_GRAY_7`: `#b0adab` - `PALETTE_GRAY_8`: `#969492` - `PALETTE_GRAY_9`: `#706e6b` - `PALETTE_GRAY_10`: `#514f4d` - `PALETTE_GRAY_11`: `#3e3e3c` - `PALETTE_GRAY_12`: `#2B2826` - `PALETTE_GRAY_13`: `#080707` ## Components ### [Badges](https://www.lightningdesignsystem.com/components/badges) #### Changed - Added `display: inline-flex` and `align-items: center` to badge to center content vertically ### [Buttons](https://www.lightningdesignsystem.com/components/buttons) #### Changed - For touch devices, update the line-height token of `.slds-button` to use the touch-specific token `$height-tappable` (2.75rem) which is a system-wide touch token instead of using a component-specific token. ### [Cards](https://www.lightningdesignsystem.com/components/cards) #### Fixed - Added `display: flex` to `.slds-card__header-title` to enable truncation on contained link that already has `slds-truncate` ### [Chat](https://www.lightningdesignsystem.com/components/chat) #### Fixed - Fixed an issue where some message text containers would have a width equal to the message meta even though the container contained less text and should have had a smaller width. ### [Checkbox Button](https://www.lightningdesignsystem.com/components/checkbox-button) #### Added - Introduced new base blueprint for the checkbox button called `.slds-checkbox-button` which improves icon customization, state handling, and blueprint composition. #### Changed - `.slds-checkbox_add-button` has been deprecated in favor of `.slds-checkbox-button` (see 'Added' above) - Documentation has been updated to reflect the new `.slds-checkbox-button` blueprint - Updated the background color of the checkbox button's selected state from `$color-background-success` to `$color-brand-darker` since a checkbox button is meant to communicate a selected state, not success. ### [Checkbox Button Group](https://www.lightningdesignsystem.com/components/checkbox-button-group) #### Changed - For mobile devices, checkbox button groups stack vertically to account for the limited horizontal space of mobile screens. ### [Docked Utility Bar](https://www.lightningdesignsystem.com/components/docked-utility-bar) #### Fixed - The popout indicator icon now positions itself correctly in the right-to-left context.  ### [List Builder](https://www.lightningdesignsystem.com/components/list-builder) #### Changed - List Builder now uses the new `.slds-checkbox-button` instead of the deprecated `.slds-checkbox_add-button` ### [Lookups](https://www.lightningdesignsystem.com/components/lookups) #### Added - Grouped Lookup wrapping `<div>` attributes: - `role="combobox"` - `aria-haspopup="listbox"` - `aria-expanded="true"` - Grouped Lookup `<input>` attribute `aria-controls` set to id of adjacent table #### Changed - Grouped Lookup `<input>` `role` from `combobox` to `textbox` ### [Radio Button Group](https://www.lightningdesignsystem.com/components/radio-button-group) #### Changed - For mobile devices, radio button groups stack vertically to account for the limited horizontal space of mobile screens.  ### [Setup Assistant](https://www.lightningdesignsystem.com/components/setup-assistant) #### Changed - Updated progress examples to use `slds-media` around `slds-media__figure` and `slds-media__body` to fix icon alignment. ### [Slider](https://www.lightningdesignsystem.com/components/slider) #### Changed - For mobile devices: - Increased the tap target size of the slider thumb to `$height-tappble (2rem)` for increased usability. - Minor layout and spacing adjustments to account for the larger slider thumb ### [Tabs](https://www.lightningdesignsystem.com/components/tabs) #### Changed - For touch devices: - Removed the focus styling from the button nested within `.slds-tabs-mobile__item` so the text color does not change on press for mobile (background color still changes on press) ## Utilities ### [Line Clamp](https://www.lightningdesignsystem.com/utilities/line-clamp) #### Added - Added the Line Clamp utility with four modifier options: - `.slds-line-clamp` - clamps at 3 lines, value provided by `line-clamp` token. - `.slds-line-clamp_small` - clamps at 3 lines - `.slds-line-clamp_medium` - clamps at 5 lines - `.slds-line-clamp_large` - clamps at 7 lines ## Release 2.10.2 - October 10, 2019 ## Components ### [Input](https://www.lightningdesignsystem.com/components/input) #### Fixed - Resolved issue where Webkit-based browsers lost their platform-native styling - Resolved issue with certain cases where an input's height would change after a value was defined ## Release 2.10.1 - October 2, 2019 ## Changed - All mobile/touch enhancements are now scoped `slds-is-mobile`. The scoping class should be applied to the `html/body` element. ## Release 2.10.0 - August 22, 2019 - Update color swatch to latest token values - Removed support for ASE color swatch format ## Tokens ### Changed - Global tokens have been removed from this repository and are installed as a dependency from https://www.npmjs.com/package/@salesforce-ux/design-system-primitive-tokens ## Components ### [Accordion](https://www.lightningdesignsystem.com/components/accordion) #### Added - Added right-to-left specific selector to `slds-accordion__summary-action-icon` to allow the icon to rotate in the proper direction in right-to-left languages. ### [App Launcher](https://www.lightningdesignsystem.com/components/app-launcher) ### Fixed - App Launcher did not use brand tokens for `:hover` and `:active` states - `.slds-app-launcher__tile` now uses `$brand-accessible` for its `:hover` state and `$brand-accessible-active` for its `:active` state ### [Button Groups](https://www.lightningdesignsystem.com/components/button-groups) #### Changed - For touch devices, the visual height of the button group is increased for an improved tap target size. This change comes from `slds-button` which is a child component of button-group. ### [Button Icons](https://www.lightningdesignsystem.com/components/button-icons) #### Changed - Center contents of `slds-button_icon` with change of `display: inline-flex` to `slds-button` ### [Buttons](https://www.lightningdesignsystem.com/components/buttons) #### Fixed - Fixed poor color contrast of inverse buttons on hover and focus #### Changed - Modify display of `slds-button` to `inline-flex` - Center contents of contained Buttons with change of `display: inline-flex` to `slds-button` - `justify-content: center` is now applied to the stretch variant `.slds-button_stretch` to ensure centered text after `inline-flex` was added to `slds-button` - For touch devices: - Increase the line-height (which affects the overall visual height) to `$button-line-height-touch` (2.65rem) - Set the size of `.slds-button__icon` to `$square-icon-medium-content` (1rem) - Boldened Button labels ### [Cards](https://www.lightningdesignsystem.com/components/cards) #### Changed - Visually remove border and set border-radius to zero for touch devices - For touch devices: - Set font size of `.slds-card__header-title` to `$var-font-size-6` (1.125rem) - Make `.slds-card__header-title` always bold whether it contains a link or not ### [Chat](https://www.lightningdesignsystem.com/components/chat) #### Changed - Horizontal rules have been removed from event messages for an improved chat experience, `.slds-chat-event__rule` is no longer used and marked as deprecated - Bookends now span full width which allows the bookend borders to be visually flush with their container `.slds-chat-list` - Horizontal padding added to `.slds-chat-bookend` to compensate for the negative margins used to make the bookend span full width ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox) #### Changed - For touch devices: - Increase size of faux checkbox to `$square-tappable-x-small` (1.5rem) - Increase tap target size of `.slds-checkbox__label` to `$height-tappable` (2.75rem) and center with flex properties - Increase `font-size` of inline label to `$font-size-5` (1rem) - Increase size of `.slds-checkbox_standalone` to `$height-tappable` (2.75rem) for consistency with tap target size increases - Within `.slds-checkbox_standalone`, increase the tap target size of the checkbox input - Ensure the checkbox input is hidden with `opacity: 0` ### [Checkbox Button](https://www.lightningdesignsystem.com/components/checkbox-button) #### Changed - For touch devices, increase size of checkbox-button to `$square-tappable` (2.75rem) and center children with flex properties ### [Checkbox Button Group](https://www.lightningdesignsystem.com/components/checkbox-button-group) #### Changed - For touch devices, increase tap target size of `.slds-checkbox_button` to `$height-tappable` (2.75rem)  ### [Checkbox Toggle](https://www.lightningdesignsystem.com/components/checkbox-toggle) #### Changed - For touch devices: - Change `font-size` of label text to `$font-size-5` (1rem) - Increase `font-size` of `.slds-checkbox_faux_container` to `$font-size-2` (0.75rem)  ### [Color Picker](https://www.lightningdesignsystem.com/components/color-picker) #### Changed - Removed `text-transform: uppercase` from default and custom tabs ### [Combobox](https://www.lightningdesignsystem.com/components/combobox) #### Changed - For touch devices: - Increase font-size and height of combobox height - Increase height of a listbox option - Changed the size of icon in a plain listbox to inherit the size of the `body` - Modified the spacing between pills when inside the context of a selection group #### Fixed - Resolve issue with deprecated inline listbox not displaying correctly when multiple pills forces the container to grow - Resolve issue where deprecated inline listbox was not the same height as other inputs ### [Counter](https://www.lightningdesignsystem.com/components/counter) - Created new page for the Counter version of Input. ### [Data Tables](https://www.lightningdesignsystem.com/components/data-tables) #### Changed - Changed `slds-th__action-button` alignment to use `margin-top` instead of `transform: translateY` ### [Dueling Picklist](https://www.lightningdesignsystem.com/components/dueling-picklist) #### Fixed - Locked items now have `aria-disabled="true"` to improve accessibility and help indicate the locked item's immutable behavior within the listbox. - Styling of locked items now inherits from `.slds-listbox__option[aria-disabled="true"]` and properly displays a disabled styling - Removed `.slds-icon-text-default` from `.slds-icon` and replaced it with `.slds-current-color` on the icon's container `.slds-icon_container` so the icon's color matches the locked item's disabled color - Removed `draggable` attribute from locked items as they are not draggable in the locked state ### [File Selector](https://www.lightningdesignsystem.com/components/file-selector) #### Changed - For touch devices, the line-height is increased for a larger tap target size. This change comes from `slds-button` which is used as a child component in file-selector. ### [Files](https://www.lightningdesignsystem.com/components/files) #### Fixed - Scoped the eyeball hover effect to the figure link only. - Added `display` and `overflow` css rules to allow for text truncation on `.slds-file__text`. ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Changed - For touch devices: - Set the amount of space created for the edit icon to `$square-tappable` (2.75rem) which aligns with touch specific sizing - Increase the tap target size of `.slds-form-element__label` to `$height-tappable-small` (2rem), center with flex, and increase `font-size` to `$font-size-4` (0.875rem) - Set the tap target height of button-icons to `$height-tappable-small` (2rem) when inline with label text - Increase the font size of `.slds-form-element__static` to `$font-size-5` (1rem) - Within `.slds-form-element_readonly`, increase the size of `.slds-icon` to `$square-tappable-x-small` (1.5rem) and increase the height of `.slds-form-element__control` to `$height-tappable` (2.75rem) which aligns `.slds-form-element_readonly`'s touch height to other form elements - Remove the `min-height` from `.slds-form-element_readonly .slds-form-element__control` for denser read-only forms ### [Input](https://www.lightningdesignsystem.com/components/input) #### Added - Updated documentation to state that iconLeft and fixed text labels are incompatible. - When an `input` has an error, `aria-invalid="true"` has been added to the `input` element #### Changed - Removed default `box-shadow` on `inputs` for Webkit - Added ltr declarations on `url`, `tel`, and `email` type inputs to prevent rtl adjustments from being inherited (these input types should always render ltr) - For touch devices: - Increase the line-height to `$height-tappable` (2.75rem) for an improved tap target - For read-only inputs, increase the font size to `$font-size-5` (1rem) for consistency with the font sizes of other inputs - Positioning of icons inside of inputs have been tweaked ### [Map](https://www.lightningdesignsystem.com/components/map) #### Changed - For touch devices: - Adjusted padding around map - Removed height restriction on `.slds-has-coordinates` to prevent internal scrolling of long lists - Increased font size of `.slds-coordinates__title` ### [Menus](https://www.lightningdesignsystem.com/components/menus) #### Changed - For touch devices: - Set tap target size of menu row item to `$height-tappable` (2.75rem) - Remove padding from `.slds-dropdown` after increased tap target size of menu row items - Set `font-size` of menu to `$font-size-5` (1rem) - Remove `font-size` declaration from `slds-dropdown__header` to inherit `font-size` from `body` element - Update `.slds-dropdown_fluid` to have a `min-width` set to `$size-x-small` (12rem) to prevent menus from being unreadable when associated with inputs that have a small width #### Added - Added explicit `right: auto` to `slds-dropdown_left` ### [Modals](https://www.lightningdesignsystem.com/components/modals) #### Changed - Changed `slds-modal_small` width to percentage-based to address the disparity of size relationship between `slds-modal_small` and other sized modals `slds-modal_medium` and `slds-modal_large`) - Deprecated use of `slds-text-heading_medium` utility class on Modal title, added class `slds-modal__title` to declare styles for the Modal title. - For touch devices: - Set font weight of Modal title to `$font-weight-bold` - Set tap target size of the Modal close button to `$height-tappable` (2.75rem)  ### [Path](https://www.lightningdesignsystem.com/components/path) #### Changed - For touch devices, increased the height and tap target size of the path component to `$height-tappable` (2.75rem) #### Fixed - Fixed text disappearing when peaking between stage in Safari ### [Picklist](https://www.lightningdesignsystem.com/components/picklist) #### Added - Added `.slds-picklist input[readonly]` selector to fix styling of deprecated markup #### Changed - Migrated picklist HTML to use non-deprecated combobox ### [Pills](https://www.lightningdesignsystem.com/components/pills) #### Changed - For touch devices: - Increase tap target height of `.slds-pill` to `$height-tappable-small` (2rem) and change horizontal padding to `$spacing-small` (0.75rem) - Update spacing between pills to `$spacing-xx-small` (0.25rem) - Set padding of pill container to `$spacing-xx-small` (0.25rem) - Set `font-size` of `.slds-pill__label` to `$font-size-4` (0.875rem) - Update the padding of `.slds-pill__action` - Adjust the positioning of the icon inside a pill after padding updates  ### [Popovers](https://www.lightningdesignsystem.com/components/popovers) #### Added - Added a new 'prompt' variant of popover useful for showing non-blocking messages needing interaction. - Added `@noflip` annotation to left and right nubbin selectors. ### [Progress Indicator](https://www.lightningdesignsystem.com/components/progress-indicator) #### Changed - Updated how the vertical variant handles the layout of its indicators so pixel nudging becomes deprecated (e.x. `margin-left: 1px` on `.slds-progress__item.slds-is-completed .slds-progress__marker_icon`) - For touch devices: - Increased tap target size of contained `.slds-button` to a height equal to `$height-tappable` (2.75rem) using `:before` pseudo element - Increased icon and marker size to `$square-tappable-xx-small` (1.25rem) - For vertical variant, increased font size to `$font-size-4` (0.875rem) ### [Radio Group](https://www.lightningdesignsystem.com/components/radio-group) #### Changed - For touch devices: - Increase tap size of `.slds-radio__label` to `$height-tappable`(2.75rem) - Increase the size of the faux radio element to `$square-tappable-x-small` (1.5rem) - Let the label text inherit its `font-size` from the body ### [Rich Text Editor](https://www.lightningdesignsystem.com/components/rich-text-editor) #### Added - Created Toolbar Only variant for use without attached textarea for touch devices #### Changed - Removed size utility classes on combobox/selects in toolbar for component-specific classes (`slds-rich-text-editor__select_x-small` and `slds-rich-text-editor__select_xx-small`) ### [Spinners](https://www.lightningdesignsystem.com/components/spinners) #### Fixed - Revised keyframes and transform rules to fix spinner CPU / rendering performance issues. ### [Tabs](https://www.lightningdesignsystem.com/components/tabs) #### Changed - For touch devices: - Changed the text color of `.slds-tabs-mobile__item` to Gray Color 12 - Removed the active color from the button nested within `.slds-tabs-mobile__item` so the text color does not change on press (background color still changes on press) ### [Trees](https://www.lightningdesignsystem.com/components/trees) #### Added - Added right-to-left specific selector to `slds-tree__item` to place the `box-shadow` in the correct location in right-to-left languages. - Added right-to-left specific selector to `slds-tree__item slds-button__icon` to allow the icon to rotate in the proper direction in right-to-left languages. ### [Vertical Navigation](https://www.lightningdesignsystem.com/components/vertical-navigation) #### Added - Added right-to-left specific selector to `slds-nav-vertical__action_overflow slds-button__icon` to allow the icon to rotate in the proper direction in right-to-left languages. - Added right-to-left specific selector to `slds-nav-vertical__action` to place the `box-shadow` in the correct location in right-to-left languages. ## Release 2.9.5 - August 2, 2019 ## Components ### [Rich Text Editor](https://www.lightningdesignsystem.com/components/rich-text-editor) #### Fixed - Added text treatments for `<ins>` and `<del>` ## Release 2.9.4 - July 3, 2019 ## Components ### [Color Picker](https://www.lightningdesignsystem.com/components/color-picker) #### Changed - Moved the FormElement from inside the summary-input div to wrapped around the entire summary component - Moving the FormElement component gives the label the class `slds-form-element__label` - Moving the FormElement component wraps the button as well as the input in the `slds-form-element__control` div - Relaxed the restrictions to allow for nesting the label and inputs an additional level  ## Utilities ### [Text Utility](https://www.lightningdesignsystem.com/utilities/text) #### Fix - Revert `font-size` of text utilities back to their original state for touch devices ## Release 2.9.3 - May 24, 2019 ## Fix - Fix `font-size` of `body` to adjust when on a touch-enabled device ## Release 2.9.2 - May 7, 2019 ## General - Moved all components to mdx documentation ## Release 2.9.1 - April 18, 2019 ## Fix - Fix import statement for VisualForce specific styles ## Release 2.9.0 - April 17, 2019 ## Tokens ### Added - Standard Set - ACTIONS_AND_BUTTONS - LETTERHEAD - INVOCABLE_ACTION - SHIFT_TYPE - SHIFT - CATEGORY - CATALOG - VISIT_TEMPLATES - INSTORE_LOCATIONS - STORE_GROUP - VISUALFORCE_PAGE - JAVASCRIPT_BUTTONS - SALES_CADENCE_TARGET ## Components ### [Accordion](https://www.lightningdesignsystem.com/components/accordion) - Replaced `aria-hidden` with the HTML5 `hidden` attribute on closed `slds-accordion__section`s to hide content from both screen readers and browsers. ### [Builder Header](https://www.lightningdesignsystem.com/components/builder-header) #### Fixed - Fixed issue where page type content was not being truncated - Added `slds-has-flexi-truncate` to `slds-builder-header__item` element - Added `<span class="slds-truncate" title="...">` inside of `<h1 class="slds-builder-header__item-label">` ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox) #### Fixed - Added @noflip annotation for correct alignment in RTL languages ### [Combobox](https://www.lightningdesignsystem.com/components/combobox) #### Added - Added styling for disabled listbox options ### [Dueling Picklist](https://www.lightningdesignsystem.com/components/dueling-picklist) #### Fixed - Scrollbar not visible in narrow width containers - `slds-dueling-list__options` is no longer set to a fixed `max-width` and instead is limited to 100% ### [Icons](https://www.lightningdesignsystem.com/components/icons) #### Added - Icon modifier class `slds-icon_flip` to horizontally flip icons. ### [Path](https://www.lightningdesignsystem.com/components/path) #### Added - Added `slds-path__trigger-coaching-content` to create a full width coaching toggle in small regions. #### Changed - Padding has been removed from `slds-path__track` to fix display issues when the Path is nested inside of a Card; of which is it's default state. - Modified to be mobile first and responsive. - Changed border radius to make circle and pill shaped buttons to square and rectangular shape. - Removed horizontal rule under coaching title areas ## Fixed - Flipped chevrons for RTL languages ### [Vertical Navigation](https://www.lightningdesignsystem.com/components/vertical-navigation) #### Changed - Replaced active navigation item background token with `BRAND_PRIMARY_TRANSPARENT_10` branding token. ## Release 2.8.4 - February 21, 2019 ## Components ### [Breadcrumbs](https://www.lightningdesignsystem.com/components/breadcrumbs) #### Fixed - Adjusted typographic styling for breadcrumb items. ### [Select](https://www.lightningdesignsystem.com/components/select) #### Fixed - Adjusted pseudo elements to allow click events to pass through ## Release 2.8.3 - February 4, 2019 ## Components ### [Global Navigation](https://www.lightningdesignsystem.com/components/global-navigation) #### Fixed - Fixed issue where a navigation item would lose its background color when active and/or hovered. ### [Tabs](https://www.lightningdesignsystem.com/components/tabs) #### Changed - Removed animation when invoking an active tab ## Release 2.8.2 - February 1, 2019 ## Components ### [Files](https://www.lightningdesignsystem.com/components/files) #### Fixed - Adjusted `z-index` for hover and focus state to not overlap modal overlays and the global header. ## Release 2.8.1 - January 23, 2019 ## Components ### [Cards](https://www.lightningdesignsystem.com/components/cards) #### Fixed - Fixed collapsing issue when `slds-assistive-text` would be applied to `slds-card__header` ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Fixed - Resolved issue where left-aligned checkbox labels would become squished ### [Progress Indicator](https://www.lightningdesignsystem.com/components/progress-indicator) #### Fixed - IE11: Layout issues when in a modal ### [Welcome Mat](https://www.lightningdesignsystem.com/components/welcome-mat) #### Fixed - Fixed vertical alignment of `slds-welcome-mat__info-content` in IE11. ## Release 2.8.0 - January 4, 2019 ## Components ### [Accordion](https://www.lightningdesignsystem.com/components/accordion) #### Changed - Updated Accordion title to respond to user's densification settings. ### [Alert](https://www.lightningdesignsystem.com/components/alert) #### Fixed - Added `slds-button_icon-small` to the close button on alerts to fix the sizing of the click target. - Improved the contrast for focus and hover states on links and buttons in alerts ### [Avatar Group](https://www.lightningdesignsystem.com/components/avatar-group) #### Added - Added a new blueprint and docs for Avatar Group component that is used for communicating to users that more than one person is associated with an item. ### [Badges](https://www.lightningdesignsystem.com/components/badges) #### Added - Examples for all color variants with left and right aligned placement. - Wrapping `slds-badge__icon` element to position and color icons. #### Changed - Increased font size to 12px, applied bold font weight, and removed uppercase styling in `.slds-badge`. ### [Breadcrumbs](https://www.lightningdesignsystem.com/components/breadcrumbs) #### Changed - Added bold font weight to '.slds-breadcrumb__item`. #### Removed - Removed `.slds-text-title_caps` from breadcrumb list item. ### [Button Groups](https://www.lightningdesignsystem.com/components/button-groups) #### Added - Added the classes `slds-button_first`, `slds-button_middle`, and `slds-button_last` that targets the position of each button inside of a button group ### [Button Icons](https://www.lightningdesignsystem.com/components/button-icons) #### Added - Added support for disabled stateful button icons ### [Buttons](https://www.lightningdesignsystem.com/components/buttons) #### Added - New Dual Stateful variation, which acts similar to a [Toggle Button](/accessibility/patterns/togglebutton/#site-main-content), by using the `slds-button_dual-stateful` class. - This variation toggles between the styling of a neutral button and a brand button. - Added `slds-button_stretch` modifier for adjusting any style button to take 100% width of its container - Added examples of links that look like buttons (to be used sparingly) #### Changed - Updated the disabled styling for the success, destructive, and outline brand buttons to be consistent across variants #### Fixed - Prevented hover styling on success buttons when disabled ### [Chat](https://www.lightningdesignsystem.com/components/chat) #### Changed - Added `aria-hidden="true"` to the Avatar for inbound chat messages to avoid duplication of the user's name for screen reader users ### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox) #### Added - Added unchecked image based checkbox example [view mode checkbox - unchecked](components/checkbox/?state=view-mode-unchecked&variant=form-element) - Added checked image based checkbox example [view mode checkbox - checked](components/checkbox/?state=view-mode-checked&variant=form-element) ### [Combobox](https://www.lightningdesignsystem.com/components/combobox) #### Added - Added `slds-listbox__option-header` to increase font size to 14px, and apply bold font weight, on listbox option headers. - Added a new variant for combobox that uses a dialog for the dropdown for situations like multi-selection #### Removed - Removed `slds-text-title_caps` from listbox option headers ### [Data Tables](https://www.lightningdesignsystem.com/components/data-tables) #### Changed - Added bold font weight to `th` elements within table headers. #### Removed - Removed `slds-text-title_caps` from table headers. ### [Dynamic Menu](https://www.lightningdesignsystem.com/components/dynamic-menu) #### Added - Added `slds-dynamic-menu__header` to increase font size to 14px and apply bold font weight. #### Removed - Removed `slds-text-title_caps` from dynamic menu headers. ### [Files](https://www.lightningdesignsystem.com/components/files) #### Fixed - Aligned `hover` and `focus` states to have matching styles - Added "Preview:" as accessible text via the `slds-assistive-text` utility. ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Added - Added form classes for rows and columns, `slds-form__row` and `slds-form__item` - Added `slds-form-element_stacked` to manage stacked form elements - Added `slds-form-element_horizontal` to manage horizontal form elements - Added `slds-is-edited` class to indicate if a form element has been edited but not saved - Added `slds-form-element_undo` to wrap the undo button icon when a form element has been edited but not saved - Added support for single column horizontal form elements with `slds-form-element_1-col`, used to re-distribute the ratio of label to control - Added `slds-form-element_compound` to manage compound form elements - Added `slds-form-element_address` for address specific compound form elements - Added image based checkbox to record form #### Changed - Added spacing around `slds-form-element` depending on densification settings - Form labels will now hyphenate when a word with no spaces exceeds the available space of the label container #### Deprecated - Deprecated `slds-form_stacked` for `slds-form-element_stacked` - Deprecated `slds-form_horizontal` for `slds-form-element_horizontal` - Deprecated `slds-form_compound` for `slds-form-element_compound` ### [Global Header](https://www.lightningdesignsystem.com/components/global-header) #### Removed - Removed `slds-text-title_caps` from menu headers. ### [Global Navigation](https://www.lightningdesignsystem.com/components/global-navigation) #### Added - Tabbed Navigation Bar can now show 3 different statuses to alert users - error, success, and warning #### Removed - Removed `slds-text-title_caps` from menu headers. ### [Input](https://www.lightningdesignsystem.com/components/input) #### Fixed - Resolved issue where `slds-input__icon_left` and `.slds-input__icon` elements were positioned over labels when in horizontal form elements ### [Menus](https://www.lightningdesignsystem.com/components/menus) #### Added - 3 levels of status for menu items to alert the user - error, success, and warning #### Changed - Increased font size to 14px applied bold font weight in `slds-dropdown__header`. #### Removed - Removed `slds-text-title_caps` from menu sub headers. ### [Page Headers](https://www.lightningdesignsystem.com/components/page-headers) #### Changed - Update padding for `slds-page-header` to use directionally aware variable spacing tokens. - Update Record Home margins on `slds-page-header__detail-row` to correctly use directionally aware variable spacing tokens. ### [Path](https://www.lightningdesignsystem.com/components/path) #### Changed - Increased font size to 14px, applied bold font weight, and removed uppercase styling in `slds-path__coach-title`. ### [Picklist](https://www.lightningdesignsystem.com/components/picklist) #### Added - Added `slds-listbox__option-header` to increase font size to 14px, and apply bold font weight, on listbox option headers. #### Removed - Removed `slds-text-title_caps` from listbox option headers. ### [Popovers](https://www.lightningdesignsystem.com/components/popovers) #### Fixed - Improved the contrast for focus and hover states on the close button. #### Added - Added `slds-popover_panel__label` to increase panel label font size to 14px and apply bold font weight. - Added `slds-popover__footer_form` to center align content and add a background for footers of form popovers. #### Removed - Removed `slds-text-title_caps` from panel labels. ### [Process](https://www.lightningdesignsystem.com/components/process) #### Fixed #### Removed - Removed `slds-text-title_caps` from wizard labels. ### [Setup Assistant](https://www.lightningdesignsystem.com/components/setup-assistant) #### Added - Added `slds-container_fluid` to the div containing a step's title and content in order to display the Setup Assistant properly in IE11 ### [Split View](https://www.lightningdesignsystem.com/components/split-view) #### Changed - Increased font size to 14px, applied bold font weight, and updated line-height in `slds-split-view__list-header`. #### Removed - Removed `slds-text-title_caps` split view list headers. ### [Tabs](https://www.lightningdesignsystem.com/components/tabs) #### Added - Added examples of icon use in default tabs - Sub Tabs can now show 3 different statuses to alert users - error, success, and warning #### Removed - Removed `slds-text-title_caps` from scrolling tab items. ### [Toast](https://www.lightningdesignsystem.com/components/toast) #### Fixed - Improved the contrast for focus and hover states on links and buttons in toasts ### [Tooltips](https://www.lightningdesignsystem.com/components/tooltips) #### Added - Added examples for tooltip triggered by links, buttons, and inputs ### [Trees](https://www.lightningdesignsystem.com/components/trees) #### Added - Two new examples of trees; filterable and filtered trees, with a search input. These show how you can use an input to filter the contents of a large tree and highlight the search term in matching items #### Fixed - Adjusted the alignment of the tree item text and chevron to be less reliant on button line height ### [Vertical Navigation](https://www.lightningdesignsystem.com/components/vertical-navigation) #### Changed - Increased font size to 16px and applied bold font weight to `slds-nav-vertical__title`. - Increased left padding in `slds-nav-vertical__action`. - Changed background color of the selected `slds-nav-vertical__item` element in the shaded background example to be white. - Moved the `aria-describedby` attribute from the individual navigation `<a />` links to the list `<ul>`. #### Removed - Removed `slds-text-title_caps` from vertical navigation titles. ### [Vertical Tabs](https://www.lightningdesignsystem.com/components/vertical-tabs) #### Added - Added examples of icons in vertical tabs - Added examples of badges in vertical tabs - Added new classes to support icons and badges, `slds-vertical-tabs__left-icon` and `slds-vertical-tabs__right-icon` ### [Welcome Mat](https://www.lightningdesignsystem.com/components/welcome-mat) #### Added - Splash variant for one-time interstitial purposes - Info-only variant for informational purposes - `slds-modal-small` to size Welcome Mat modal - `slds-welcome-mat_info-only` can now set the `slds-welcome-mat__tiles` section to "info only" mode. - Markup structure so that `slds-welcome-mat` and `slds-welcome-mat__content` are now within `slds-modal__content` #### Changed - Removed `slds-welcome-mat` from `slds-modal` - Removed `slds-welcome-mat__content` from `slds-modal__content` - Moved `slds-grid` from `slds-modal__content` to `slds-welcome-mat__content` #### Deprecated - Deprecated `.slds-welcome-mat .slds-modal-container` selector for `.slds-modal-small` to be applied to `slds-modal`. To upgrade existing welcome mat, in `slds-modal`, replace `slds-welcome-mat` with `slds-modal_small`, and also remove `slds-welcome-mat__content` from `slds-modal-container`. Markup structure changes need to be made existing code. First, wrap the existing content of `<div class='slds-modal-container'>` with `<div class='slds-welcome-mat__content slds-grid'>`. Then, wrap `<div class='slds-welcome-mat__content slds-grid'>` with `<div class='slds-welcome-mat'>`. #### Fixed - Fixed vertical alignment of `slds-welcome-mat__info-content` in IE11. ## Utilities ### [Margin Utility](https://www.lightningdesignsystem.com/utilities/margin) #### Added - Added documentation detailing the values of the variable density classes in Comfy and Compact modes ### [Padding Utility](https://www.lightningdesignsystem.com/utilities/padding) #### Added - Added documentation detailing the values of the variable density classes in Comfy and Compact modes ## Release 2.7.5 - November 19, 2018 ## Components ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Changed - Form labels will now hyphenate when a word with no spaces exceeds the available space of the label container ### [Rich Text Editor](https://www.lightningdesignsystem.com/components/rich-text-editor) #### Fixed - Resolved issue where table elements within a rich text editor output would improperly wrap ## Release 2.7.4 - October 11, 2018 ## Components ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Added - Added `slds-form-element_address` for address specific compound form elements #### Fixed - Resolved issue where empty form elements would collapse in view mode ## Release 2.7.3 - October 4, 2018 ## Components ### [Form Element](https://www.lightningdesignsystem.com/components/form-element) #### Fixed - Resolved issue where Rich Text content would overflow the container of a form element in IE11 ## Release 2.7.2 - September 21, 2018 ## Tokens ### Fixed - Fixed issue where missing cssProperties would cause compilation issues ## Release 2.7.1 - September 9, 2018 ## Components ### [Global Navigation](https://www.lightningdesignsystem.com/components/global-navigation) #### Fixed - Remove `font-weight: 300` from app title to increase legibility ### [Page Headers](https://www.lightningdesignsystem.com/components/page-headers) #### Changed - Reduce font-size of `slds-page-header__title` to 18px ## Release 2.7.0 - September 7, 2018 ## General - Redesigned our [Design Tokens page](https://lightningdesignsystem.com/design-tokens/) to include GA vs Internal designations and "New" badges - Added Release Notes to individual component pages - Improved the accessibility of links on our site - Added new design guidelines for [Builders](https://lightningdesignsystem.com/guidelines/builder/) and [Empty States](https://lightningdesignsystem.com/guidelines/empty-state/) - Moved [Tree Grid](https://lightningdesignsystem.com/components/tree-grid/) to its own item, instead of being included in Trees - Added [variable spacing tokens](https://lightningdesignsystem.com/design-tokens/#category-spacing) to support new Densification settings ## Components ### [Accordion](https://www.lightningdesignsystem.com/components/accordion) #### Removed - Removed hard coded text sizing utility class, `slds-text-heading_small`, from the `slds-accordion__summary-heading` element. ### [Alert](https://www.lightningdesignsystem.com/components/alert) #### Changed - Changed HTML so the button icon can be slotted into the `slds-notify__close` element #### Fixed - Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden ### [App Launcher](https://www.lightningdesignsystem.com/components/app-launcher) #### Changed - Updated the tile markup for improved accessibility and added features - Changed the outer element from an `<a/>` to a `<div/>` and removed `aria-describedby` - Replaced the grab handle icon with a stateful icon button, which will now be the keyboard accessilbe drag and drop control. Please [read the new section](https://www.lightningdesignsystem.com/components/app-launcher/#Reordering-tiles-via-drag-and-drop) in the documentation about specific implementation detials - Moved the tile link to the card title since the whole tile is no longer a link - Made the "more" overflow a tooltip trigger ### [Avatar](https://www.lightningdesignsystem.com/components/avatar) #### Changed - Changed HTML so the Avatar component can be slotted inside of an `href` vs being the `href` element ### [Badges](https://www.lightningdesignsystem.com/components/badges) #### Fixed - Nested `inline`