About the availability of these changes
We’re continually improving SLDS. The following changes are listed by the date we completed each change. The changes will be publicly available in the next major Salesforce release following the listed date.
Release 2.14.3 – March 18, 2021
class=”site-text-heading_large”>
Release 2.14.2 – February 5, 2021
class=”site-text-heading_large”>
Release 2.14.1 – January 8, 2021
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Datepickers
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed typo in CSS Class Overview table for .slds-datepicker__filter_month
Release 2.14.0 – December 16, 2020
class=”site-text-heading_large”>
- Corrected the syntax for various stylesheet annotations so that they will properly appear in the Overview of CSS Classes section for their respective blueprint.
- Updated to Icons v9.39.0 and added new icon design token colors
Components
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_large”>
- Added Styling Hook for the background color of Accordion headings.
- Added Styling Hooks for default text color, as well as hover/focus states, of Accordion headings.
Changed
class=”site-text-heading_large”>
- The Accordion heading button will now take up all available space, allowing for a larger hit target to toggle the Accordion functionality.
Alert
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fix incorrect Styling Hook name for –sds-c-alert-text-color-warning.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed component level styling hooks for status states.
Alert
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
Refactored the component markup to function with or without theme utility classes.
Builder Header
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue with non-link text color in Builder Header menu dropdowns by adding default text color
- Added an example with an open menu to demonstrate this pattern
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added Styling Hook for box-shadow
- Added Styling Hook for block level padding
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed component-level styling hooks for disabled states. These will be handled at the global level.
- Removed –sds-c-button-inverse-color-border-focus.
Cards
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for Cards. See Card’s styling hooks overview table for a full listing of the currently available hooks.
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for checkbox. See checkbox’s styling hooks overview table for a full listing of the currently available hooks.
Checkbox Toggle
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for checkbox toggle. See checkbox toggle’s styling hooks overview table for a full listing of the currently available hooks.
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Adjusted space between the form label and the information button icon for Mobile.
Icons
class=”site-text-heading_medium slds-m-top_none”>
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed hooks for modifying the status states of icons at the component level.
Input
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for Inputs. See Input’s styling hooks overview table for a full listing of the currently available hooks.
Menus
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added default text color to dropdown menus to fix issue with dropdowns inheriting font color from parent blueprints
Modals
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added styling hooks for text color that let you set the color for the whole modal or a specific section.
- Added styling hooks for background color that let you set the background-color for the whole modal or a specific section.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed incorrect styling hooks on heading
Pills
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Fixed incorrect styling hooks on focus state, suffix is now using -focus vs -active.
Radio Group
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled Styling Hooks for Radio Group. See Radio Group’s Styling Hooks overview table for a full listing of the currently available hooks.
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Increased nesting styles for Rich Text Editor output from 3 levels to 5 levels deep.
Scoped Tabs
class=”site-text-heading_medium slds-m-top_none”>
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed variant specific styling hooks for scoped tabs.
Select
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for select. See select’s styling hooks overview table for a full listing of the currently available hooks.
Slider
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for slider. See slider’s styling hooks overview table for a full listing of the currently available hooks.
Spinners
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Added demo background-color to with-container and fixed-container examples
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added additional styling hooks. See tab’s styling hooks overview table for a full listing of the currently available hooks.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed white background-color from .slds-tabs_default to expose surface color of the tabs parent container.
Textarea
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for textarea. See textarea’s styling hooks overview table for a full listing of the currently available hooks.
Toast
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added –sds-c-toast-text-color which allows you to customize the text color.
Visual Picker
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Changed checkmark vertical positioning
Release 2.13.7 – October 21, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Revert compound form to its existing behavior of not wrapping to prevent unwanted side-effects in existing layouts.
Release 2.13.6 – October 14, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Trees
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed the issue with metatext not appearing disabled if the tree item was disabled.
Release 2.13.5 – September 30, 2020
class=”site-text-heading_large”>
Release 2.13.4 – September 29, 2020
class=”site-text-heading_large”>
Release 2.13.3 – September 24, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Alert
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-alert-color-text => –sds-c-alert-text-color.
Avatar
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-avatar-initials-color-text => –sds-c-avatar-initials-text-color.
Badges
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-badge-color-text => –sds-c-badge-text-color.
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-button-color-text => –sds-c-button-text-color.
Modals
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed incorrect styling hooks on footer.
Pills
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-pill-color-text => –sds-c-pill-text-color.
Scoped Tabs
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-tabs-scoped-color-text => –sds-c-tabs-scoped-text-color.
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-tabs-item-color-text => –sds-c-tabs-item-text-color.
Tooltips
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. –sds-c-tooltip-color-text => –sds-c-tooltip-text-color.
Release 2.13.2 – September 23, 2020
class=”site-text-heading_large”>
- Added icons synonym metadata to SLDS dist
Release 2.13.1 – September 18, 2020
class=”site-text-heading_large”>
- In Summer ’21, all BEM notation with double dashes will no longer be available in SLDS 2.13.0 and later versions. For your styles to continue working with SLDS 2.13.0 and later versions, replace — with _ in your CSS. For more information see the Salesforce Winter `21 release notes.
- Updated @salesforce-ux/icons to 9.38.0
- Added proper font-size change to mobile demos on the site
Components
class=”site-text-heading_large”>
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Added background shorthand and set to initial to recreate existing behavior that relied on the shorthand to apply initial values to unspecified values.
- Fixed issue where mobile text size wasn’t accurately sized.
Checkbox Button Group
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue where mobile text size wasn’t accurately sized.
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed erroneous camelcasing of autocomplete attribute.
- Small improvements to the UI text.
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Keyboard interaction examples were only showing Mac-specific instructions (Cmd), changed to be more general (Cmd/Ctrl)
Expression
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed Mobile example under Stacked Alignment and Horizontal Alignment examples, as they did not conform to the specification.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Icons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- slds-current-color to restricted classes.
Illustration
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Removed Xlink namespace. It was deprecated in the SVG 2 specification.
Input
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- For inline help example:
- Removed unnecessary aria-labelledby from input. A label was already associated with the input.
- Moved .slds-form-element__help out of .slds-form-element__control, it is supposed to be a sibling in the markup structure.
- Added aria-describedby to input which uses the id of the help message.
- Small improvements to the UI text.
Lookups
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Menus
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed Mobile examples as they did not conform to the specification.
Modals
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue where mobile text size wasn’t accurately sized.
- Small improvements to the UI text.
Picklist
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Popovers
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed Mobile examples as they did not conform to the specification.
Prompt
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Radio Button Group
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue where mobile text size wasn’t accurately sized.
Select
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Textarea
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Small improvements to the UI text.
Release 2.13.0 – August 20, 2020
class=”site-text-heading_large”>
- Added opacity override for placeholder text in inputs for Firefox browser
Components
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for accordion. See accordion’s styling hooks overview table for a full listing of the currently available hooks.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated heading elements from h3 class=”site-text-heading_medium slds-m-top_none” to h2 class=”site-text-heading_large”.
Alert
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for alert. See alert’s styling hooks overview table for a full listing of the currently available hooks.
Avatar
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for avatar. See avatar’s styling hooks overview table for a full listing of the currently available hooks.
Badges
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for badge. See badge’s styling hooks overview table for a full listing of the currently available hooks.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed inconsistent heights between variants when border isn’t present.
Breadcrumbs
class=”site-text-heading_medium slds-m-top_none”>
- Enabled styling hooks for breadcrumb. See breadcrumb’s styling hooks overview table for a full listing of the currently available hooks.
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for button. See button’s styling hooks overview table for a full listing of the currently available hooks.
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- The assistive text for the listbox of pills has been moved out of the individual pills to remove repetition for users with screen readers.
Datetime Picker
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Datetime Picker blueprints no longer use the deprecated variant .slds-form_compound on its parent .slds-form. Instead, it now uses .slds-form-element_compound on its parent .slds-form-element.
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- The compound form now wraps when the width of its parent container is smaller than the combined width of the form elements. This prevents the issue of input values becoming cutoff and unreadable due to shrinking compound form elements in a container with a small width.
- When .slds-form-element is a child of .slds-form-element_compound, it now uses margins instead of padding for its horizontal spacing. This fixes the issue of dropdowns being incorrectly offset because the dropdown uses the extra space created by padding as its positioning reference.
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Adjusted color of unsaved tab indicator asterisk to comply with accessibility color contrast rules
Icons
class=”site-text-heading_medium slds-m-top_none”>
- Enabled styling hooks for icon. See icon’s styling hooks overview table for a full listing of the currently available hooks.
List Builder
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- The assistive text for the listbox of pills has been moved out of the individual pills to remove repetition for users with screenreaders.
Lookups
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- The assistive text for the listbox of pills has been moved out of the individual pills to remove repetition for users with screenreaders.
Modals
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for modal. See modal’s styling hooks overview table for a full listing of the currently available hooks.
Path
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed role="application" from slds-path__scroller.
Pills
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- The assistive text for the listbox of pills has been moved out of the individual pills to remove repetition for users with screenreaders.
- Addressed layout inconsistencies for touch styles
- Clarified documentation around when linked pills can be used
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for pill. See pill’s styling hooks overview table for a full listing of the currently available hooks.
- Added example for Listbox of Pills in Group
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed redundant border-radius on .slds-pill:focus
Progress Indicator
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_large”>
- Addressed issue where button icons in progress items were misaligned for mobile/touch
Progress Ring
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added sizing instructions to ensure a correct ratio.
Radio Button Group
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added aria-describedby="error_01" to the inputs to improve accessibility in the error state.
Scoped Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for scoped tab. See scoped tab’s styling hooks overview table for a full listing of the currently available hooks.
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for tab. See tab’s styling hooks overview table for a full listing of the currently available hooks.
Toast
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for toast. See toast’s styling hooks overview table for a full listing of the currently available hooks.
Tooltips
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Enabled styling hooks for tooltip. See tooltip’s styling hooks overview table for a full listing of the currently available hooks.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated blueprint examples from anchor links to more semantically correct buttons
Trees
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added aria-disabled to treeitem that are disabled and updated text color to represent disabled state.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Deprecated the usage of .slds-is-disabled in favor of .slds-is-hidden to hide chevron icon, use aria-disabled instead if you need to represent a disabled state.
Release 2.12.3 – June 19, 2020
class=”site-text-heading_large”>
- Corrected various documentation typos and formatting in:
- components/app-launcher
- components/button-icons
- components/global-header
- components/global-navigation
- components/lookups
- components/menus
- components/panels
- components/picklist
- components/popovers
- components/progress-indicator
- components/prompt
- components/publishers
- components/setup-assistant
- components/spinners
- components/tabs
- components/tiles
- components/toast
- components/trees
- components/vertical-tabs
- Fixed broken links in earlier release notes
- Updated Icons to 9.37.1
Components
class=”site-text-heading_large”>
Global Header
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added assistive text for the logo.
Radio Group
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where radio buttons would not retain their shape and appeared squished.
Release 2.12.2 – June 11, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed <span class="slds-assistive-text">Current Selection:</span> from Listbox options
- Updated guidance documentation regarding the usage of aria-selected and aria-checked
Added
class=”site-text-heading_small slds-m-top_none”>
- Added aria-checked="true" to Listbox options when selected
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- For touch devices, fixed an issue with button icons being the incorrect height if using custom elements.
Release 2.12.1 – May 7, 2020
class=”site-text-heading_large”>
- Updated Icons to 9.36.1
Components
class=”site-text-heading_large”>
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated styles for resize handle if final column is resizable.
Release 2.12.0 – April 28, 2020
class=”site-text-heading_large”>
- Updated Icons to 9.35.0
Components
class=”site-text-heading_large”>
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Set the inverse button text color to 50% opacity when the button is disabled.
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for wrapping, line clamping and truncating table cell content.
Input
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where Chrome on Android was rendering misaligned text for date-related input types.
Popovers
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed the text color in form inputs for the Walkthrough variation.
Progress Ring
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved an IE11 issue with positioning of the .slds-progress-ring__progress element by setting more explicit position settings.
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added a Small variant to the visual picker
Utilities
class=”site-text-heading_large”>
Line Clamp
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Changed white-space property to pre-line in slds-line-clamp in consideration of content that has pre-formatted line breaks.
Added
class=”site-text-heading_small slds-m-top_none”>
- Added an X-Small modifier that truncates text after two lines.
Release 2.11.9 – April 27, 2020
class=”site-text-heading_large”>
Release 2.11.8 – April 15, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
- Moved font-size declaration on touch devices to the touch CSS file
Components
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Adapted line height on accordion buttons to function better with multi-line instances.
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated height and width dimensions on touch version of slds-th__action-button
Datepickers
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved incorrect spacing when nested in a data table by increasing specificity of certain slds-datepicker specific CSS selectors
Datepickers
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Input
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Map
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Menus
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Modals
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Pills
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Popovers
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Progress Indicator
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Radio Button Group
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Radio Group
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Slider
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Utilities
class=”site-text-heading_large”>
Text Utility
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Release 2.11.6 – March 11, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Button Icons
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Sizing classes are now respected in mobile/touch context
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Cards
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Checkbox Button
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Checkbox Toggle
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Release 2.11.5 – March 5, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced slds-truncate with specific selector slds-accordion__summary-content in Accordion title so content will only truncate for larger screens.
Badges
class=”site-text-heading_medium slds-m-top_none”>
- Added examples for communicating Success, Warning and Error states.
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Checkbox Button Group
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Path
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation and examples for mobile/touch context
Scoped Notifications
class=”site-text-heading_medium slds-m-top_none”>
- Added examples for Informational, Success, Warning and Error states
Release 2.11.4 – February 12, 2020
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Spinners
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Fixed
class=”site-text-heading_large”>
- 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
class=”site-text-heading_large”>
Updated
class=”site-text-heading_large”>
- 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
class=”site-text-heading_large”>
Updated
class=”site-text-heading_large”>
- Updated node dependencies to remove vulnerabilities.
- Updated project readme to recommend use of the Storybook development environment.
Release 2.11.0 – January 9, 2020
class=”site-text-heading_large”>
Added
class=”site-text-heading_large”>
- 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
class=”site-text-heading_large”>
Changed
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Badges
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added display: inline-flex and align-items: center to badge to center content vertically
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Added display: flex to .slds-card__header-title to enable truncation on contained link that already has slds-truncate
Chat
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Introduced new base blueprint for the checkbox button called .slds-checkbox-button which improves icon customization, state handling, and blueprint composition.
Changed
class=”site-text-heading_small slds-m-top_none”>
- .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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- For mobile devices, checkbox button groups stack vertically to account for the limited horizontal space of mobile screens.
Docked Utility Bar
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- The popout indicator icon now positions itself correctly in the right-to-left context.
List Builder
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- List Builder now uses the new .slds-checkbox-button instead of the deprecated .slds-checkbox_add-button
Lookups
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Grouped Lookup <input> role from combobox to textbox
Radio Button Group
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- For mobile devices, radio button groups stack vertically to account for the limited horizontal space of mobile screens.
Setup Assistant
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated progress examples to use slds-media around slds-media__figure and slds-media__body to fix icon alignment.
Slider
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Line Clamp
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Input
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Changed
class=”site-text-heading_large”>
- 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
class=”site-text-heading_large”>
- Update color swatch to latest token values
- Removed support for ASE color swatch format
Tokens
class=”site-text-heading_large”>
Changed
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Center contents of slds-button_icon with change of display: inline-flex to slds-button
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed poor color contrast of inverse buttons on hover and focus
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- For touch devices, increase size of checkbox-button to $square-tappable (2.75rem) and center children with flex properties
Checkbox Button Group
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- For touch devices, increase tap target size of .slds-checkbox_button to $height-tappable (2.75rem)
Checkbox Toggle
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed text-transform: uppercase from default and custom tabs
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Created new page for the Counter version of Input.
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Changed slds-th__action-button alignment to use margin-top instead of transform: translateY
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Added explicit right: auto to slds-dropdown_left
Modals
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- For touch devices, increased the height and tap target size of the path component to $height-tappable (2.75rem)
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed text disappearing when peaking between stage in Safari
Picklist
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added .slds-picklist input[readonly] selector to fix styling of deprecated markup
Changed
class=”site-text-heading_small slds-m-top_none”>
- Migrated picklist HTML to use non-deprecated combobox
Pills
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Created Toolbar Only variant for use without attached textarea for touch devices
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Revised keyframes and transform rules to fix spinner CPU / rendering performance issues.
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Added text treatments for <ins> and <del>
Release 2.9.4 – July 3, 2019
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Color Picker
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Text Utility
class=”site-text-heading_medium slds-m-top_none”>
Fix
class=”site-text-heading_small slds-m-top_none”>
- Revert font-size of text utilities back to their original state for touch devices
Release 2.9.3 – May 24, 2019
class=”site-text-heading_large”>
Fix
class=”site-text-heading_large”>
- Fix font-size of body to adjust when on a touch-enabled device
Release 2.9.2 – May 7, 2019
class=”site-text-heading_large”>
General
class=”site-text-heading_large”>
- Moved all components to mdx documentation
Release 2.9.1 – April 18, 2019
class=”site-text-heading_large”>
Fix
class=”site-text-heading_large”>
- Fix import statement for VisualForce specific styles
Release 2.9.0 – April 17, 2019
class=”site-text-heading_large”>
Tokens
class=”site-text-heading_large”>
Added
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
- Replaced aria-hidden with the HTML5 hidden attribute on closed slds-accordion__sections to hide content from both screen readers and browsers.
Builder Header
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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=”site-text-heading_xx-large” class="slds-builder-header__item-label">
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Added @noflip annotation for correct alignment in RTL languages
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added styling for disabled listbox options
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Icon modifier class slds-icon_flip to horizontally flip icons.
Path
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-path__trigger-coaching-content to create a full width coaching toggle in small regions.
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_large”>
- Flipped chevrons for RTL languages
Vertical Navigation
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced active navigation item background token with BRAND_PRIMARY_TRANSPARENT_10 branding token.
Release 2.8.4 – February 21, 2019
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Breadcrumbs
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Adjusted typographic styling for breadcrumb items.
Select
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Adjusted pseudo elements to allow click events to pass through
Release 2.8.3 – February 4, 2019
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue where a navigation item would lose its background color when active and/or hovered.
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed animation when invoking an active tab
Release 2.8.2 – February 1, 2019
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Files
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Adjusted z-index for hover and focus state to not overlap modal overlays and the global header.
Release 2.8.1 – January 23, 2019
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Cards
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed collapsing issue when slds-assistive-text would be applied to slds-card__header
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where left-aligned checkbox labels would become squished
Progress Indicator
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- IE11: Layout issues when in a modal
Welcome Mat
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed vertical alignment of slds-welcome-mat__info-content in IE11.
Release 2.8.0 – January 4, 2019
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated Accordion title to respond to user’s densification settings.
Alert
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Examples for all color variants with left and right aligned placement.
- Wrapping slds-badge__icon element to position and color icons.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Increased font size to 12px, applied bold font weight, and removed uppercase styling in .slds-badge.
Breadcrumbs
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added bold font weight to ‘.slds-breadcrumb__item`.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed .slds-text-title_caps from breadcrumb list item.
Button Groups
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added support for disabled stateful button icons
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- New Dual Stateful variation, which acts similar to a Toggle Button, 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
class=”site-text-heading_small slds-m-top_none”>
- Updated the disabled styling for the success, destructive, and outline brand buttons to be consistent across variants
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Prevented hover styling on success buttons when disabled
Chat
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added aria-hidden="true" to the Avatar for inbound chat messages to avoid duplication of the user’s name for screen reader users
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added unchecked image based checkbox example view mode checkbox – unchecked
- Added checked image based checkbox example view mode checkbox – checked
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from listbox option headers
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Added bold font weight to th elements within table headers.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from table headers.
Dynamic Menu
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-dynamic-menu__header to increase font size to 14px and apply bold font weight.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from dynamic menu headers.
Files
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Aligned hover and focus states to have matching styles
- Added "Preview:" as accessible text via the slds-assistive-text utility.
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from menu headers.
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Tabbed Navigation Bar can now show 3 different statuses to alert users – error, success, and warning
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from menu headers.
Input
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where slds-input__icon_left and .slds-input__icon elements were positioned over labels when in horizontal form elements
Menus
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 3 levels of status for menu items to alert the user – error, success, and warning
Changed
class=”site-text-heading_small slds-m-top_none”>
- Increased font size to 14px applied bold font weight in slds-dropdown__header.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from menu sub headers.
Page Headers
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Increased font size to 14px, applied bold font weight, and removed uppercase styling in slds-path__coach-title.
Picklist
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-listbox__option-header to increase font size to 14px, and apply bold font weight, on listbox option headers.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from listbox option headers.
Popovers
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Improved the contrast for focus and hover states on the close button.
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from panel labels.
Process
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from wizard labels.
Setup Assistant
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Increased font size to 14px, applied bold font weight, and updated line-height in slds-split-view__list-header.
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps split view list headers.
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added examples of icon use in default tabs
- Subtabs can now show 3 different statuses to alert users – error, success, and warning
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from scrolling tab items.
Toast
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Improved the contrast for focus and hover states on links and buttons in toasts
Tooltips
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added examples for tooltip triggered by links, buttons, and inputs
Trees
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Adjusted the alignment of the tree item text and chevron to be less reliant on button line height
Vertical Navigation
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Removed slds-text-title_caps from vertical navigation titles.
Vertical Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- 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
class=”site-text-heading_small slds-m-top_none”>
- Fixed vertical alignment of slds-welcome-mat__info-content in IE11.
Utilities
class=”site-text-heading_large”>
Margin Utility
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation detailing the values of the variable density classes in Comfy and Compact modes
Padding Utility
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added documentation detailing the values of the variable density classes in Comfy and Compact modes
Release 2.7.5 – November 19, 2018
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Form labels will now hyphenate when a word with no spaces exceeds the available space of the label container
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where table elements within a rich text editor output would improperly wrap
Release 2.7.4 – October 11, 2018
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-form-element_address for address specific compound form elements
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where empty form elements would collapse in view mode
Release 2.7.3 – October 4, 2018
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Resolved issue where Rich Text content would overflow the container of a form element in IE11
Release 2.7.2 – September 21, 2018
class=”site-text-heading_large”>
Tokens
class=”site-text-heading_large”>
Fixed
class=”site-text-heading_medium slds-m-top_none”>
- Fixed issue where missing cssProperties would cause compilation issues
Release 2.7.1 – September 9, 2018
class=”site-text-heading_large”>
Components
class=”site-text-heading_large”>
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Remove font-weight: 300 from app title to increase legibility
Page Headers
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Reduce font-size of slds-page-header__title to 18px
Release 2.7.0 – September 7, 2018
class=”site-text-heading_large”>
General
class=”site-text-heading_large”>
- Redesigned our Design Tokens page 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 and Empty States
- Moved Tree Grid to its own item, instead of being included in Trees
- Added variable spacing tokens to support new Densification settings
Components
class=”site-text-heading_large”>
Accordion
class=”site-text-heading_medium slds-m-top_none”>
Removed
class=”site-text-heading_small slds-m-top_none”>
- Removed hard coded text sizing utility class, slds-text-heading_small, from the slds-accordion__summary-heading element.
Alert
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Changed HTML so the button icon can be slotted into the slds-notify__close element
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden
App Launcher
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- 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 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
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Changed HTML so the Avatar component can be slotted inside of an href vs being the href element
Badges
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Nested inline and inline-block elements now receive the proper vertical alignment.
Builder Header
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Updated design guidelines and design notes.
Button Groups
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- A 1px separator now appears when a brand button and a brand button icon are used within a button group.
- Added Button Group Row component that provides spacing in between each item that contains a button
Button Icons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added a title and assistive text to most button icon examples
Buttons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- slds-button_text-destructive modifier option, which is styled as an inverted slds-button_descructive button.
- Added selector for :disabled pseudo-class.
Deprecated
class=”site-text-heading_small slds-m-top_none”>
- Deprecated the class slds-button__icon_stateful, which was located on the svg inside of the button. Use the Button Icon component with a small size modifier instead, slds-button__icon slds-button__icon_small.
Cards
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
Carousel
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Swapped values for aria-hidden on Carousel panels.
- In previous versions, the true and false values for aria-hidden were inadvertently reversed—aria-hidden: true was placed on open panels, and vice versa. This has now been updated to use the proper values for open and closed panels.
- Fixed bug that caused Carousel panels to be improperly sized in IE11.
Chat
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- File component (image and file content types) is now natively supported within an inbound and outbound message.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Outbound messages that contain a string of text shorter than the max-width no longer has unnecessary white space.
- Removed unnecessary whitespace when sending messages with a small amount of text (.e.g, "Hi there.").
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added variant for a checkbox inside of a standard form element component
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue #556 by increasing the font size on checkbox labels to match radio button labels
Checkbox Button
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added an example of a checked-and-disabled checkbox button.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Increased the contrast between the plus symbol and background color for the disabled checkbox button.
Combobox
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-listbox__option-icon to be used as a container that maintains the dimensions of an icon when it is removed from the HTML
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Increased z-index of entity icon when a selection is made to ensure icon is always on top of input field
- Fixed alignment of dropdown icon in object switcher
- Click events are no longer prevented on the grouped combobox in Firefox
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added a hidden header variation of the data table
- This involves adding the slds-table_header-hidden class to the <table> and using the slds-assistive-text class on the <thead> to ensure the table remains accessible
- Multi select data tables now require aria-multiselectable="true" applied to the table element for both Advanced and Inline Edit variants.
- Multi select data tables now require aria-selected to be set to false on every row that is not selected
Changed
class=”site-text-heading_small slds-m-top_none”>
- Data tables underwent some minor markup changes to help align all the different variants to use common markup patterns. No visual styling or functionality has changed, but you will notice more examples.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Improved the color contrast of links inside of selected rows
Drop Zone
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added new Drop Zone component to help construct a drag and drop screen building experience
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Wrapped slds-dueling-list element with slds-form-element__control.
- Removed slds-text-title_caps from label.
Expandable Section
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
Expression
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added new Expression component to help users declaratively construct logical expressions
Feeds
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
File Selector
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
- Reduced height to minimize whitespace
Files
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- New class sld-file_loading for loading state.
- In effort to prevent the hover styles from applying to the loading state, slds-file_loading is now added to slds-file.
- Class slds-has-title for when Files have a title applied.
- slds-has-title is now added to slds-file to ensure the Preview icon (displayed in hover state) is properly centered.
- This class should not be added when slds-file_overlay is used.
- z-index to titles and actions for non-loading states.
- This is an effort to keep the new hover overlay styles from not covering the title and actions to keep them clickable.
Changed
class=”site-text-heading_small slds-m-top_none”>
- New design treatment for hover state.
- box-shadow and transition have been replaced with an overlay and absolutely-centered Preview icon.
- This hover state does not appear on devices that do not support hover (e.g., mobile). Note that this does effect devices that supports both hover (e.g., touch) and no-hover (e.g., mouse) input devices, such as the Microsoft Surface.
- New option for loading state.
- Added a loading spinner option for Files with and without a title.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Improved the color contrast of the text placed on top of a file overlay
Form Element
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Left aligned label support for components with help text icon and required asterisk
- Left aligned label support for fieldset and legend form elements
- Added slds-form-element__readonly to apply appropiate styling when a form element is in view mode
Changed
class=”site-text-heading_small slds-m-top_none”>
- Reduced overall height of all view mode form elements
- Changed labels to be left-aligned when using slds-form_horizontal
- Changed HTML so a compound form’s slds-form-element__group is wrapped inside of slds-form-element__control
- Changed HTML that moved the required asterisk inside of legend element
- Changed HTML that moved the help text icon to be adjacent to the legend element
- Changed HTML so slds-form-element__legend is now required on all legend elements
- Changed HTML so slds-form-element__control is now required to wrap all form controls
Global Header
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Changed Salesforce logo image path.
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Overflow menu on navigation item no longer opens on hover.
- Added the slds-indicator-container class to be used whenever tabs and menu items have unread or unsaved indicators.
- The slds-indicator_unsaved abbreviation and/or the slds-indicator_unsaved span should always be contained within a <span> with class slds-indicator-container.
- This class preserves spacing between the indicators and the tab/menu text when no icon is present by adding a margin-right.
- If the indicator container is empty, no margin-right is added.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- HTML validation error on tabbed navigation indicators, swapped a div for a span
Icons
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Icons can now be filled with the success text color by adding slds-icon-text-success.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed issue #228, which was causing x-small and xx-small circular icons to appear as ovals. Contribution made by @geebru.
Illustration
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added example for large illustrations
List Builder
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added examples for list builders with disabled items and items selected by default.
- Added an example of a list builder with a headless table
Changed
class=”site-text-heading_small slds-m-top_none”>
- List Builder now requires aria-multiselectable="true" applied to the table element.
- Each row now requires aria-selected to be set to false on every row that is not selected
Map
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added a standalone map example that lives outside of a modal
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Replaced inline styles from iframe and placed them within the component styling
- Improved the color contrast of links inside of selected items in the locations list
Page Headers
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-page-header_record-home class to be used within a record home page. This class utilizes variable font tokens to respond to a user’s densification setting.
- Made Related Lists Page Header visible, so you can see it. Yay! ?
- Added the following classes:
- For layout:
- slds-page-header__row, slds-page-header__row_gutters, slds-page-header__col-title, slds-page-header__col-actions, slds-page-header__col-meta, slds-page-header__col-controls, slds-page-header__col-details
- For the page name:
- slds-page-header__name, slds-page-header__name-title, slds-page-header__name-switcher, slds-page-header__name-meta, slds-page-header__meta-text
- For header controls
- slds-page-header__controls, slds-page-header__control,
- For record home
- slds-page-header_record-home
- For record home details
- slds-page-header__detail-row, slds-page-header__detail-block
- For vertical record home list
- slds-page-header__detail-list, slds-page-header__detail-item
- For layout:
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
- Changed dimension of slds-page-header__icon to be 36×36
- Pretty much all of it in a sizable refactor of the markup
- Made it easier to componentize the page headers and share code between the different variants
- Made page headers less reliant on utility classes
- Please see above for added class names
Deprecated
class=”site-text-heading_small slds-m-top_none”>
- Deprecated page header specific spacing tokens
- PAGE_HEADER_SPACING_MARGIN
- PAGE_HEADER_SPACING_PADDING
- PAGE_HEADER_SPACING_ROW
Panels
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated panel headers to have left aligned text by default. To center the header title, use the class slds-panel__header_align-center.
- Updated slds-panel_body padding to be 0.75rem around instead of 1rem.
- Updated our documentation to reflect that panels always have a close button, but may also have a back button if panel was invoked by drilling in.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Forced panel buttons to keep their square shape by preventing flex-shrink.
Path
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-path_has-coaching hook on the slds-path container element, to add support for spacing differences between coaching and non-coaching.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Modified the appearance of the Path container.
- Revised the colors used on the active and curent Path steps, introducing support for borders.
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting.
- Changed the direction of the coaching arrow to point to the right / down, instead of up / down. To take advantage of this change, remove the slds-flip_vertical class on the open state for slds-path__trigger, and instead use our new class slds-path__trigger_open to set the direction of the open state on the button arrow.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed text centering issue with first and last Path steps
- Fixed rotation transition on Path coaching toggle button
Popovers
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-nubbin_*-corner modifier classes to place nubbin elements at the corner of a Popover.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed a bug where long strings of text would overflow the popover boundary. Popover body, header, and footer now include word-wrap: break-word.
- Increased the contrast for focused links and buttons in our inversed popovers, Walkthrough and Feature.
- Fixed a bug that allowed slds-popover_small to grow larger than its expected width.
- Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden.
Progress Bar
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Updated the documentation for vertical progress bars. Now you can actually see it, yay!
Progress Ring
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added an example of a progress ring that fills rather than drains, meaning the colored portion of the ring increases clockwise.
Publishers
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Made the publisher label visible to screen readers in the collapsed state of a publisher, by removing the use of display: none
Radio Group
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added an example of a checked-and-disabled radio button.
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed incorrect border-radius in text area.
- Fixed a bug where child input elements were unintentionally affected when the Rich Text Editor was in an error state.
Changed
class=”site-text-heading_small slds-m-top_none”>
- New markup that moves the error message outside of Rich Text Editor, and adds a slds-form-element__control element to enable left align labels.
Scoped Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-tabs_medium and slds-tabs_large to modify the font-size and spacing of the tab items
- Added slds-tabs_scoped__overflow-button to tabs with overflow so the Button Menu component can be slotted inside the tab item
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
- Changed the color of a tab item when a tab is active
- Changed HTML on Tabs with Overflow example so a Button Menu component is the trigger for the overflow menu
Setup Assistant
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated the setup assistant steps to use the new filling progress ring.
Slider
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Fixed a bug that prevented Slider background from appearing in IE11.
Split View
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
Tabs
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-tabs_medium and slds-tabs_large to modify the font-size and spacing of the tab items
- Added animation when activating a tab item
- Added slds-tabs_default__overflow-button to tabs with overflow so the Button Menu component can be slotted inside the tab item
- Extended the documentation for mobile tabs to include panels
- When drilling into a mobile tab, a panel slides in displaying that tab’s content
- Check out the Tabs On Mobile section for more details
- Animations and transitions for :hover and slds-is-active states.
Changed
class=”site-text-heading_small slds-m-top_none”>
- Replaced spacing tokens with variable spacing tokens to respond to a user’s densification setting
- Removed title caps from tab items
- Removed letter spacing from tab items
- Increased height of bar when a tab is active
- Changed HTML on Tabs with Overflow example so a Button Menu component is the trigger for the overflow menu
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Updated slds-tabs-mobile to have a white background by default, instead of a transparent background.
- Improved the color contrast of the text of a subtab when it is in focus
- HTML validation error on subtab indicators, swapped a div for a span
Textarea
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Removed box-shadow added by Firefox for all required fields.
- By default, Firefox was adding a box-shadow to all fields marked required. This has now been normalized to match the styling in all other browsers.
Toast
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Swapped the role value of toasts from alert to status
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Increased contrast between the icons and the yellow background in warning toasts.
- Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden
Tree Grid
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Checkboxes in the left most column were added to multi select tree grids
- Multi select tree grids now require aria-multiselectable="true" applied to the table element.
- Multi select tree grids now require aria-selected to be set to false on every row that is not selected
- Single select tree grids were added as examples
- Headless tree grids were added
- Borderless tree grids were added
Changed
class=”site-text-heading_small slds-m-top_none”>
- Tree grid now aligns better with the lightning component, which is an extension of Advanced Data Table.
Trees
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Removed aria-selected from the examples since this is only necessary if the tree supports multi-select
- Removed role="application" from the top level tree
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Replaced the slds-size_1-of-1 surrounding the tree label with slds-has-flexi-truncate to prevent the label from overflowing the tree’s boundary
Trial Bar
class=”site-text-heading_medium slds-m-top_none”>
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden
Visual Picker
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated the disabled visual picker UI to be more apparent and a better match to the established conventions for disabled UI
Welcome Mat
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Updated the semantics of steps in a welcome mat to be list items within an unordered list. Check out the component documentation for the updated DOM structure
Utilities
class=”site-text-heading_large”>
Description List Utilities
class=”site-text-heading_medium slds-m-top_none”>
Changed
class=”site-text-heading_small slds-m-top_none”>
- Changed behavior of media query when slds-dl_horizontal and slds-dl_inline are located inside of slds-region_narrow
Grid
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added slds-gutters_direct for adding gutters to direct child columns of a grid.
- See the Direct Columns Only section for more info.
Fixed
class=”site-text-heading_small slds-m-top_none”>
- Updated slds-col_bump-bottom to accurately set margin-bottom, instead of margin-right, to auto.
Text Utility
class=”site-text-heading_medium slds-m-top_none”>
Added
class=”site-text-heading_small slds-m-top_none”>
- Added text color utility class, slds-text-color_destructive, for destructive actions
Release 2.6.2 – June 29, 2018
class=”site-text-heading_large”>
Fixes
class=”site-text-heading_large”>
Cards
class=”site-text-heading_medium slds-m-top_none”>
- Updated broken links within the Cards docs (7b48637)
Gulp Script Update
class=”site-text-heading_medium slds-m-top_none”>
- Fix path to gulp.js to resolve build error in Windows (2a78a47)
Input
class=”site-text-heading_medium slds-m-top_none”>
- Updated the Error with Icon example to use the new Error icon (35d90ba)
Margin
class=”site-text-heading_medium slds-m-top_none”>
- Added examples of using "none" on margin utilities (a3e9eb9)
- Updated broken links within the Margin docs (26a5eed)
Release 2.6.1 – May 18, 2018
class=”site-text-heading_large”>
Fixes
class=”site-text-heading_large”>
Form Element
class=”site-text-heading_medium slds-m-top_none”>
- Removed margin if compound field is found inside of a stacked form (0d3e752)
Grid
class=”site-text-heading_medium slds-m-top_none”>
- Adjusted docs to avoid confusion on columns and vertical alignment (1b17639)
Tabs
class=”site-text-heading_medium slds-m-top_none”>
- Fixed incorrect link to Vertical Tabs component in Tabs documentation (#548)
Release 2.6.0 – May 4, 2018
class=”site-text-heading_large”>
May the 4th be with you!
Big Impact
class=”site-text-heading_large”>
Component Blueprints
class=”site-text-heading_medium slds-m-top_none”>
- Renamed our ‘Components’ to ‘Component Blueprints’ to create distinction between our SLDS Components and (Lightning Components). 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.
Form Layout
class=”site-text-heading_medium slds-m-top_none”>
- Merged Form Layout into Form Element (f3c5b48)
Icon
class=”site-text-heading_medium slds-m-top_none”>
- Addressed 2 issues with the usage of Warning and Error icons. (cd98ab6)
- 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
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Deprecated slds-lookup and replaced with slds-combobox and slds-combobox-group (2dbe619)
Walkthrough -> Trial Bar
class=”site-text-heading_medium slds-m-top_none”>
- Renamed our Walkthrough component to Trial Bar (fe8cfc1)
New components:
class=”site-text-heading_large”>
Builder Header
class=”site-text-heading_medium slds-m-top_none”>
- Created new Builder Header component (3b6f741)
Illustration
class=”site-text-heading_medium slds-m-top_none”>
- Created new component for Empty States and other Illustrations (a1824e0)
Setup Assistant
class=”site-text-heading_medium slds-m-top_none”>
- Created new Setup Assistant component (26be78c)
Summary Detail
class=”site-text-heading_medium slds-m-top_none”>
- Created new Summary Detail component (245492e)
Welcome Mat
class=”site-text-heading_medium slds-m-top_none”>
- Created new Welcome Mat component (5d2d818)
Documentation Updates
class=”site-text-heading_large”>
Button
class=”site-text-heading_medium slds-m-top_none”>
- Updated examples to show disabled states of all variants (013b16d)
Combobox
class=”site-text-heading_medium slds-m-top_none”>
- Updated examples and documentation for Base, Autocomplete, Entity Autocomplete, and Grouped comboboxes (6c79edd)
- Added an example to show listbox styling options (3d4af71)
- Updated mouse and keyboard interaction documentation (04bde0c)
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Added an example detailing how to add a group label to a dueling picklist (b5e0083)
Form Element
class=”site-text-heading_medium slds-m-top_none”>
- Added an example to show Record Detail (73989b0)
Global Header
class=”site-text-heading_medium slds-m-top_none”>
- Updated documentation to show animated examples (399da9c)
Grid
class=”site-text-heading_medium slds-m-top_none”>
- Added examples and documentation for slds-col-bump_* classes (a095cba)
Icon
class=”site-text-heading_medium slds-m-top_none”>
- Added an example that uses slds-current-color (2ef3489)
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
- Updated examples to properly wrap the Rich Text Editor in slds-form-element (b6df0b0)
Features
class=”site-text-heading_large”>
Button
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-button_outline-brand modifier (0dec41e)
Chat
class=”site-text-heading_medium slds-m-top_none”>
- Added support for delivery failure and unsupported type messages (14aa268)
Combobox
class=”site-text-heading_medium slds-m-top_none”>
- Introduced grouped comboboxes with text and icon variants (6c79edd)
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Updated docs to add non-reorderable and view mode variants of dueling picklist to be used for multiple selection (c336057)
- Added slds-is-grabbed class
- Added slds-dueling-picklist__column_responsive to add responsiveness (4000150)
Global Header
class=”site-text-heading_medium slds-m-top_none”>
- Added support for branded skip links (789aa99)
Input
class=”site-text-heading_medium slds-m-top_none”>
- Added counter variant (0b20b85)
Panel
class=”site-text-heading_medium slds-m-top_none”>
- Added docked panel variant (e88713e)
Popover
class=”site-text-heading_medium slds-m-top_none”>
- Added warning and error variants (60a628d)
Progress Bar
class=”site-text-heading_medium slds-m-top_none”>
- Added an example of descriptive progress bar with label and progress percentage above bar (dbd0db1)
Progress Indicator
class=”site-text-heading_medium slds-m-top_none”>
- Added new vertical variant (118b520)
- Added slds-progress__marker_icon-success to indicate completed stage
Progress Ring
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-progress-ring_large modifier to make a 32x32px ring (26be78c)
- Added slds-progress-ring_active-step modifier to change color of progress ring
Spinner
class=”site-text-heading_medium slds-m-top_none”>
- Added new inline spinner variant (c05738f)
Tabs
class=”site-text-heading_medium slds-m-top_none”>
- Added new mobile stacked variant (9d7b861)
Text
class=”site-text-heading_medium slds-m-top_none”>
- Added new monospace font-family (7a41fd6)
Fixes
class=”site-text-heading_large”>
Avatar
class=”site-text-heading_medium slds-m-top_none”>
- Added text shadow to slds-avatar__initials for better contrast (3f43dfa)
- Added slds-avatar__initials_inverse for dark text initials on a light background
Button Group
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-dropdown_actions to button group overflow dropdown (8ab08fe)
Button Icon
class=”site-text-heading_medium slds-m-top_none”>
- Added selected stying to border inverse variant (2624d4f)
Card
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-card__footer-action to have footer link take up full width of card (89c6a28)
Chat
class=”site-text-heading_medium slds-m-top_none”>
- Changed slds-chat-message__text-sneak-peak to slds-chat-message__text-sneak-peek (cdaabbf)
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
- Updated examples to have unique value attributes (cdf72cd)
Compound Form
class=”site-text-heading_medium slds-m-top_none”>
- Fixed layout overflow bug (#530)
Data Table
class=”site-text-heading_medium slds-m-top_none”>
- Adjusted styling for edited and error cells when row is selected (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)
Datepicker
class=”site-text-heading_medium slds-m-top_none”>
- Prevented error border from applying to nested select component (0fa0165)
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Updated all examples to include a group label and form-element wrapper (8d1a1b4)
Form Element
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-form-element__legend_has-tooltip modifier to allow for tooltip icon next to legend (f3c5b48)
Global Header
class=”site-text-heading_medium slds-m-top_none”>
- Updated colors of global actions (58d68e1)
- Updated search to use new combobox group (9bddfde)
Input
class=”site-text-heading_medium slds-m-top_none”>
- Removed red box shadow from required inputs in firefox (069a3c8)
- Used aria-labelledby instead of aria-describedby for associating the prepended and appended fixed text to the input (25d51d7)
- Reordered slds-input:required styles to prevent overrides (ba3ac5b)
- Removed pointer event when icon is located on top of an input (84b650b)
- Added slds-input-has-icon_group-right to fix spacing issues for multiple icons on the right (9bddfde)
Modal
class=”site-text-heading_medium slds-m-top_none”>
- Changed width of medium modal to 70% (b2d9e1b)
Path
class=”site-text-heading_medium slds-m-top_none”>
- Added focus styling for completed stages (f197b4a)
- Reordered slds-is-active and slds-is-complete to prevent overrides
- Added min-width to action button (1b8e6b8)
Radio Group and Radio Button Group
class=”site-text-heading_medium slds-m-top_none”>
- Updated examples to have unique value attributes (cdf72cd)
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
- Added white background to error message with slds-form-element__help modifier (8033c22)
- Removed margin-bottom from slds-rich-text-editor__spacing-wrapper and added it to slds-rich-text-editor__select (bf907ed)
Trees
class=”site-text-heading_medium slds-m-top_none”>
- Added missing assistive text span for tree branch with metatext (a407e58)
Utilities
class=”site-text-heading_medium slds-m-top_none”>
- Added !important to visibility utilities slds-hide and slds-hidden (16bf902)
- Fixed error in Grid documentation around width and ordering class prefixes (f6a66d9)
Vertical Tabs
class=”site-text-heading_medium slds-m-top_none”>
- Removed outline when link has focus (72fcd6f)
Visual Picker
class=”site-text-heading_medium slds-m-top_none”>
- Added focus styling (cbd07e9)
Tokens
class=”site-text-heading_large”>
Text
class=”site-text-heading_medium slds-m-top_none”>
- Changed value of $color-text-success(97d13bb)
- Changed value of $color-text-link(9bc8b0d)
Release 2.5.4 – April 19, 2018
class=”site-text-heading_large”>
Fix
class=”site-text-heading_large”>
- Reordered Quill styles to apply indentation styles to the Rich Text Editor output class (0bbf51c)
Release 2.5.3 – March 13, 2018
class=”site-text-heading_large”>
Fix
class=”site-text-heading_large”>
- Remove Quill styles from the Rich Text Editor output class to fix properly nested lists (296afb3)
Release 2.5.2 – February 8, 2018
class=”site-text-heading_large”>
Fix
class=”site-text-heading_large”>
- Add warm/cool header contrast tokens (d6515ee)
- Set background image on Brand Band to not repeat (d843c97)
- Update bundle script to fix windows npm error (#523)
Release 2.5.1 – January 19, 2018
class=”site-text-heading_large”>
Fix
class=”site-text-heading_large”>
- Backport tokens for Path (1932e76)
Release 2.5.0 – January 9, 2018
class=”site-text-heading_large”>
Features
class=”site-text-heading_large”>
General Notes
class=”site-text-heading_medium slds-m-top_none”>
- 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:
class=”site-text-heading_medium slds-m-top_none”>
Activity Timeline
class=”site-text-heading_medium slds-m-top_none”>
- Updated behavior and styling of activity timeline by adding expandable sections (10cf834)
Brand Band
class=”site-text-heading_medium slds-m-top_none”>
- Added Brand Band component
Breadcrumbs
class=”site-text-heading_medium slds-m-top_none”>
- Added overflow menu button option for breadcrumbs (a69621c)
Button Icons
class=”site-text-heading_medium slds-m-top_none”>
- Added new branding variant
Cards
class=”site-text-heading_medium slds-m-top_none”>
- Added variant with Einstein branded header
Carousel
class=”site-text-heading_medium slds-m-top_none”>
- Added Carousel component
Chat
class=”site-text-heading_medium slds-m-top_none”>
- Added Chat component
Checkbox
class=”site-text-heading_medium slds-m-top_none”>
- Added a stacked variant
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
- Added icons to data table headers and cells (59c44b2)
- Added header menu buttons to table headers (33bd050)
- Added Product Listing example to advanced data tables
- Added Radio Group example to advanced data tables
Global Header
class=”site-text-heading_medium slds-m-top_none”>
- Updated styling to allow for rectangular logos (ea43705)
Grids
class=”site-text-heading_medium slds-m-top_none”>
- Added top level gutter classes: slds-gutters and slds-gutters_* for sizes (b6d7fd5)
Icons
class=”site-text-heading_medium slds-m-top_none”>
- Added utility class slds-current-color to set an icon to use current color (c9974d1)
Map
class=”site-text-heading_medium slds-m-top_none”>
- Added Map component
Menus
class=”site-text-heading_medium slds-m-top_none”>
- Added a variant for Menus with Submenus
Notifications
class=”site-text-heading_medium slds-m-top_none”>
- Updated multiple styling attributes for reminder notifications, including background color, border color, and spacing (9cbb18a)
Popovers
class=”site-text-heading_medium slds-m-top_none”>
- Added variant with Einstein branded header
- Added variant for Feature callout
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
- Moved Quill styles to rich text editor (402845b)
Spinners
class=”site-text-heading_medium slds-m-top_none”>
- Added class slds-spinner_delayed to apply a 300ms delay to the animation (fbaa8d4)
Trees
class=”site-text-heading_medium slds-m-top_none”>
- Added new ability to include metatext on tree items (754c9fe)
Utilities
class=”site-text-heading_medium slds-m-top_none”>
- Added utility class slds-size-xxx-small for sizing (69d0eb2)
- Added utility class slds-text-color-success for text (e744eb2)
Vertical Navigation
class=”site-text-heading_medium slds-m-top_none”>
- Added a variant of vertical nav that uses radio groups as underlying markup
Fixes
class=”site-text-heading_large”>
The following fixes are now available:
Accordion
class=”site-text-heading_medium slds-m-top_none”>
- Adjusted styling to only target first accordion child (9f8f601)
- Changed accordion focus styling from overall highlight to underline of header text (0658e13)
- Updated to hide content overflow when closed (7fb7cb0)
App Launcher
class=”site-text-heading_medium slds-m-top_none”>
- Added grab styling to match current use in product
- Changed to Dev Ready from prototype
Button Groups
class=”site-text-heading_medium slds-m-top_none”>
- Updated z-index for button group focus (259a6db)
Buttons
class=”site-text-heading_medium slds-m-top_none”>
- Stopped events from happening on disabled buttons (e661ee8)
Color Picker
class=”site-text-heading_medium slds-m-top_none”>
- Added spacing utility class to dropdown button icon between color and arrow (69839b2)
Combobox
class=”site-text-heading_medium slds-m-top_none”>
- 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)
- Added spacing utility class to dropdown button icon between icon and arrow (69839b2)
Data Tables
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-table_column-*-wrap to add column wrap support (b841961)
Date Picker
class=”site-text-heading_medium slds-m-top_none”>
- Fixed background color used when today’s date is selected (75f0f6a)
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Fixed accessibility of disabled list boxes (4ea5889)
- Renamed Required to Locked, switched to lock icon instead of red asterisk (3556b26)
- Updated background and border colors of disabled picklist (4ea5889)
Expandable Section
class=”site-text-heading_medium slds-m-top_none”>
- Updated to hide content overflow when closed (7fb7cb0)
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
- Changed global nav styling when subtabs are present with slds-has-sub-tabs (d99332b)
- Prevented icons from shrinking when long text is present (881da86)
Input
class=”site-text-heading_medium slds-m-top_none”>
- Updated size of search icon to be 14x14px from 16x16px (add0ba0)
- Fixed vertical alignment issues when using slds-input__icon (cb3fe60)
Lookups
class=”site-text-heading_medium slds-m-top_none”>
- Fixed icon alignment (9b3de3c)
Menus
class=”site-text-heading_medium slds-m-top_none”>
- Fixed disabled menu items to turn disabled icons gray
- Updated slds-dropdown_xx-small to use correct token (0569d6d)
Modal
class=”site-text-heading_medium slds-m-top_none”>
- Fixed modal background color (2f0ad5a)
- Removed hyphenation from modal body (9f70ae7)
Pills
class=”site-text-heading_medium slds-m-top_none”>
- Update icons and improve consistency among pill usage
Popovers
class=”site-text-heading_medium slds-m-top_none”>
- Updated background color of Walkthrough popovers (08b2aac)
- Added clouds to the header (08b2aac)
- Removed hyphenation from body text (9f70ae7)
Rich Text Editor
class=”site-text-heading_medium slds-m-top_none”>
- Fixed issue where selection dropdowns overlapped content on smaller screens (f1a7e8d)
- Updated to prevent hyperlinks from breaking mid word (4827702)
Tabs
class=”site-text-heading_medium slds-m-top_none”>
- Adjusted position of unsaved indicator on a tab when used with notifications (5916f2f)
Trees
class=”site-text-heading_medium slds-m-top_none”>
- Added missing ARIA role role=gridcell to tree grid TD elements (f94d3dd)
- Removed extra indentation spacing for base variant (e64cfc1)
Utilities
class=”site-text-heading_medium slds-m-top_none”>
- Added missing BEM syntax to slds-text-link_faux (#505)
Vertical Navigation
class=”site-text-heading_medium slds-m-top_none”>
- Changed active and hover background colors (ae7997c)
Tokens
class=”site-text-heading_large”>
Sizing
class=”site-text-heading_medium slds-m-top_none”>
- Added $size-xxx-small sizing token for UI components (69d0eb2)
Release 2.4.6 – November 22, 2017
class=”site-text-heading_large”>
Fixes
class=”site-text-heading_large”>
Colors
class=”site-text-heading_medium slds-m-top_none”>
- Modified tokens using gray-2 to use gray-3
Release 2.4.5 – November 14, 2017
class=”site-text-heading_large”>
Fixes
class=”site-text-heading_large”>
Buttons
class=”site-text-heading_medium slds-m-top_none”>
- Remove pointer-events from icons found within buttons
Release 2.4.4 – October 17, 2017
class=”site-text-heading_large”>
Fixes
class=”site-text-heading_large”>
Cards
class=”site-text-heading_medium slds-m-top_none”>
- Fixed padding-left and padding-right on nested slds-card__header and slds-card__footer with slds-card_boundary
Sizing
class=”site-text-heading_medium slds-m-top_none”>
- Fixed known IE11 bug when you have nested flex containers with flex-basis on children
Release 2.4.3 – September 19, 2017
class=”site-text-heading_large”>
Fixes
class=”site-text-heading_large”>
Buttons
class=”site-text-heading_medium slds-m-top_none”>
- Removed dark border on focus, fixing bug when buttons are found inside of a button group
Checkbox/Radio Button Group
class=”site-text-heading_medium slds-m-top_none”>
- Fixed issue when a selection is made then that selection is put into a disabled state
Modal
class=”site-text-heading_medium slds-m-top_none”>
- Update background color token to transparent value
Path
class=”site-text-heading_medium slds-m-top_none”>
- Use transform to properly align checkmark inside of path element
Release 2.4.1 – September 14, 2017
class=”site-text-heading_large”>
Big Impact
class=”site-text-heading_large”>
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?
class=”site-text-heading_medium slds-m-top_none”>
- 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
As a developer what do I need to know about the design changes in the Winter ‘18 release?
class=”site-text-heading_medium slds-m-top_none”>
- 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
Fixes
class=”site-text-heading_large”>
Cards
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-card_boundary class to provide card-like look when component is inside a tabset
Magnet
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_large”>
Features
class=”site-text-heading_large”>
The following are now available:
Badges
class=”site-text-heading_medium slds-m-top_none”>
- Added dark blue badge
- Added white badge with icon and normalized text
Dynamic Menu
class=”site-text-heading_medium slds-m-top_none”>
- Removed dynamic lists from combobox component and created new dynamic menu component
Progress Bar
class=”site-text-heading_medium slds-m-top_none”>
- Added green variant
Progress Ring
class=”site-text-heading_medium slds-m-top_none”>
- Added new Progress Ring component
Scoped Notification
class=”site-text-heading_medium slds-m-top_none”>
- Added scoped inline notifications component
Slider
class=”site-text-heading_medium slds-m-top_none”>
- Added two spans inside label to give the ability to visually hide one or both
Fixes
class=”site-text-heading_large”>
The following issues have now been resolved:
Alerts
class=”site-text-heading_medium slds-m-top_none”>
- Fixed grammatical errors in alerts documentation (aa8099a)
Button Group
class=”site-text-heading_medium slds-m-top_none”>
- Button menu uses filled button icon modifier by default (f9c2168)
Buttons
class=”site-text-heading_medium slds-m-top_none”>
- Added pointer-events:none to svg in button (cc9cd5f)
Cards
class=”site-text-heading_medium slds-m-top_none”>
- Removed card look when inside of a modal (f58c355)
- Removed card look when inside of a tabset
Color Picker
class=”site-text-heading_medium slds-m-top_none”>
- Added more descriptive assistive text and fixed tabindex on swatches (fc989c1)
- Added input error state ui and examples (b982bf7)
- Added focus state to color picker slider thumb (c29d368)
Combobox
class=”site-text-heading_medium slds-m-top_none”>
- Added role=none to div that wraps input (e695ae7)
- Removed title and assistive text from search icon
Date Picker
class=”site-text-heading_medium slds-m-top_none”>
- Added styles when adjacent month is selected within a week range (bab8e26)
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Added documentation on focus management
- Fixed syntax and grammatical errors in dueling picklist accessibility docs
- Removed double focus on ul (c231132)
File-selectors
class=”site-text-heading_medium slds-m-top_none”>
- Fixed file selector input labelling
Global Navigation
class=”site-text-heading_medium slds-m-top_none”>
- Added animation on active and when hovering on a global navigation list item (074771a)
Grids
class=”site-text-heading_medium slds-m-top_none”>
- Fix IE sizing issue by adding max-width (00a0e35)
Modals
class=”site-text-heading_medium slds-m-top_none”>
- Removed extra .slds-modal__header class from headless modal example
Normalize
class=”site-text-heading_medium slds-m-top_none”>
- Removed [hidden] { display: none; } to fix Visual Force charts disappearance when SLDS is added
Notifications
class=”site-text-heading_medium slds-m-top_none”>
- Updated assistive text for dismiss notification button and added event type to header and live region (d96535d)
- Updated styling to add bordercolor and darker drop shadow (f977ee6)
Path
class=”site-text-heading_medium slds-m-top_none”>
- Simplified and fix active tab focus styling across all stage states (3f9fbd4)
Responsive Tables
class=”site-text-heading_medium slds-m-top_none”>
- Examples for using responsive tables can now be found on the site again (d427148)
Tokens
class=”site-text-heading_large”>
Colors
class=”site-text-heading_medium slds-m-top_none”>
- Reduced and updated gray palettes to 12 total (ff582b0)
Design Changes
class=”site-text-heading_large”>
Cards
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Decreased row height for improved content density
Split View
class=”site-text-heading_medium slds-m-top_none”>
- Changed color of background
Static/Read Only Inputs
class=”site-text-heading_medium slds-m-top_none”>
- Updated font size, weight, and color (ce7b275)
Default Tabs
class=”site-text-heading_medium slds-m-top_none”>
- Tabs take on the look and feel of a card
Release 2.3.1 – May 25, 2017
class=”site-text-heading_large”>
Big Impact
class=”site-text-heading_large”>
BEM naming change
class=”site-text-heading_medium slds-m-top_none”>
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
class=”site-text-heading_large”>
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
Release 2.3.0 – May 15, 2017
class=”site-text-heading_large”>
Features
class=”site-text-heading_large”>
The following are now available:
Accordion
class=”site-text-heading_medium slds-m-top_none”>
- Added Accordion component — Accordion
Button
class=”site-text-heading_medium slds-m-top_none”>
- Added class slds-is-selected-clicked to handle click event on stateful button – Stateful Button
Combobox
class=”site-text-heading_medium slds-m-top_none”>
- Added Combobox component — Combobox
Docked Utility Bar
class=”site-text-heading_medium slds-m-top_none”>
- Added two line support for docked utility bar items
Dueling Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Re-named from Multi-select — Dueling Picklist
Dynamic Icons
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Added Expandable section component — Expandable Section
- Added non-collapsable example
Input
class=”site-text-heading_medium slds-m-top_none”>
- Added an example for Search input with loading spinner – Input with spinner
- Added slds-has-input-focus utility class to provide focus styles on an element
Lookups
class=”site-text-heading_medium slds-m-top_none”>
- Uses new combobox HTML
Menus
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Re-named from Process
Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Uses new combobox HTML
Pills
class=”site-text-heading_medium slds-m-top_none”>
- Added listbox of pill option variant — Listbox of Pill Options
Popover
class=”site-text-heading_medium slds-m-top_none”>
- Added slds-popover_walkthrough-alt to modify the background of a walkthrough popover – Walkthrough Popover
Progress Bar
class=”site-text-heading_medium slds-m-top_none”>
- Added Progress Bar component — Progress Bar
Rich text editor
class=”site-text-heading_medium slds-m-top_none”>
- Added bottom toolbar support – Bottom toolbar example
- Added long-form formatting support
Spinner
class=”site-text-heading_medium slds-m-top_none”>
- Xx-small Spinner variant — Spinner
Split View List
class=”site-text-heading_medium slds-m-top_none”>
- Added Split View component — Split View
Visual Picker
class=”site-text-heading_medium slds-m-top_none”>
- Added Visual Picker component — Visual Picker
Vertical Navigation
class=”site-text-heading_medium slds-m-top_none”>
- Added Vertical Navigation component — Vertical Navigation
- Deprecated Navigation component for this improved version
Visibility
class=”site-text-heading_medium slds-m-top_none”>
- Improved visibility classes for responsive design — #429 – Thanks @3den!
Fixes
class=”site-text-heading_large”>
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
class=”site-text-heading_large”>
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
Design
class=”site-text-heading_large”>
The following updates have been made to component designs:
- Touch components have been removed from the site
Dropdown Menus:
class=”site-text-heading_medium slds-m-top_none”>
- Sub-headings inside of dropdown menus should now be truncated
Docked Composer:
class=”site-text-heading_medium slds-m-top_none”>
- Added focus state around entire composer panel
- Title inside of composer panel header should truncate instead of wrap to two lines
Feeds:
class=”site-text-heading_medium slds-m-top_none”>
- 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:
class=”site-text-heading_medium slds-m-top_none”>
- Added example for no title
- Added example for loading state
- Updated location of the files action menu
Popovers
class=”site-text-heading_medium slds-m-top_none”>
- Always have a close button icon
Tokens
class=”site-text-heading_large”>
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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_large”>
The following changes have been made to make our product more accessible:
Activity Timeline
class=”site-text-heading_medium slds-m-top_none”>
- Added title attribute to item icons
- Changed the checkbox markup to match the new, "Explicit Label" markup pattern
App Launcher
class=”site-text-heading_medium slds-m-top_none”>
- 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 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
class=”site-text-heading_medium slds-m-top_none”>
- Added missing title attributes
Button
class=”site-text-heading_medium slds-m-top_none”>
- Fixed the color contrast issues on the Success Button
Card
class=”site-text-heading_medium slds-m-top_none”>
- Changed slds-card__footer to a <footer /> element
- Changed Tiles to be a list of slds-tile’s
Checkbox Button Group
class=”site-text-heading_medium slds-m-top_none”>
- Removed for attributes on wrapping span elements
Date Picker
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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 class=”site-text-heading_medium slds-m-top_none” />
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Fixed button text on "with errors" state from "Settings" to "Review the Following Errors"
Docked Utility Bar
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- Updated Checkbox and Radio Buttons to match newer "Explicit Label" pattern
Global Header
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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
class=”site-text-heading_medium slds-m-top_none”>
- 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" to slds-context-bar__icon-action’s button.
- Added assistive text to active item for Current page.
Global Navigation – Tab Bar
class=”site-text-heading_medium slds-m-top_none”>
- Fixed title attribute on the Split View Toggle Button
- Removed aria-haspopup from Split View Toggle Button
- Implemented a simple Expanding Section ARIA pattern on the Split View Toggle button
- Added `aria-expanded="true|false" to reflect state
- Added aria-controls="id_of_expanding_section" to associate the button to the content it controls
- Added aria-controls to each role="tab"
- Created a tabpanel for each tab
- Added a unique ID to each which matches corresponding aria-controls attribute
- Added aria-labelledby to each which matches corresponding tab ID
- Updated the "New Tab" button text to match its function
- Updated the "New Tab" button title attribute
- Removed aria-haspopup attribute from "New Tab" button
- Added aria-label to the New Tab dialog
- Removed focusable hidden remove buttons in Pinned Tabs
Input – Field Level Help
class=”site-text-heading_medium slds-m-top_none”>
- Moved aria-describedby from the input to the Tooltip Trigger <button />
- Removed aria-live from the Tooltip
List Builder
class=”site-text-heading_medium slds-m-top_none”>
- Changed the role="dialog" element to be a <section />
- Changed slds-modal__header to be a <header /> element
- Changed slds-modal__footer to be a <footer /> element
- Replaced selected Pills to be the new Listbox of Pills component
- Updated Lookup mark-up to match new structure. See Lookup notes
Lookup
class=”site-text-heading_medium slds-m-top_none”>
- Upgrade the ARIA Combobox markup to ARIA 1.1 Specification
- Moved role="combobox" attribute from the input element to slds-lookup root element
- Moved aria-expanded="true|false" attribute from the input element to slds-lookup root element
- Added aria-haspopup="listbox" attribute to slds-lookup root element
- Added autocomplete="off" to the input element
- Added aria-controls="" to the input element which points to the ID of the listbox
- Added role="textbox" to the input element
- Removed aria-owns attribute from the input element as the listbox is not a child of the combobox role
- Changed type attribute on the input element to be text
- Upgraded listbox markup to include option group headings being accessible, to match Picklist
- Moved role="listbox" attribute from the ul element to the slds-lookup__menu root element
- When a listbox has option groups (a slds-lookup__item_label)
- ul element has role="group" with an aria-label of the same text as the slds-lookup__item_label text
- slds-lookup__item_label, becomes a presentational list item by placing it inside an li[role="presentation"] and being a child of the ul, as the aria-label on the group replaces its function
- When a listbox has no option groups (no slds-lookup__item_label)
- ul element has role="presentation" and no aria-label
- Fixed Listbox option’s markup to not wrap div elements in span elements
Menus
class=”site-text-heading_medium slds-m-top_none”>
- Added aria-checked to Menu items with role="menuitemcheckbox" in all cases. Shouldn’t just be added when true, setting false is important to communicate
Modals
class=”site-text-heading_medium slds-m-top_none”>
- Added aria-describedby to the slds-modal element. This points to ID of slds-modal__content
- Added aria-label to Header Empty example, in the absence of a header with a heading tag
Panels – Details
class=”site-text-heading_medium slds-m-top_none”>
- Updated the checkbox mark-up to be the new "explicit label" version
- Added aria-haspopup="true" to "More Actions" button in the Panel header
- Changed "Follow up on ’15 contact" to be an <h2 class=”site-text-heading_large” /> element
- Changed the list of fields to be a list <ul />
- Switched the DOM order of the field and edit pencil, so the edit action comes after the field
Panels – Filtering
class=”site-text-heading_medium slds-m-top_none”>
- Changed the footer actions to be <button /> elements instead of links
- Changed "Matching all these filters" to a heading for better hierarchy
- Changed the filters to be <button /> elements instead of links.
- Locked filters are now disabled, which is possible with the change in element used, to be a <button />
- Each filter button now includes additional assistive text to better describe the action: "Edit filter: "
- Improved repetitive button text for the remove filter buttons. Now follows the format of "Remove Filter: ${name_of_filter}" instead of just "Remove"
- Panel error message converted from aria-live to be role="alert", which is implicitly "live"
- Inline error messages are now associated to the invalid filter button with aria-describedby being placed on the offending button
Path
class=”site-text-heading_medium slds-m-top_none”>
- Fixed focus so that only one stage is focusable at a time
- Fixed focus styling on stages
- Removed aria-live from stages
- Added non-visual indicator of "Current Stage" by adding "Current Stage:" assistive text
- Updated semantics when no coaching available
- Swapped tabset to listbox
- Swapped tab to option
- Added aria-orientation="horizontal"
- Update aria-controls on each tab to match a unique ID
- Updates to expandable coaching tab panels
- Update button text on coaching expand/collapse toggle button so it’s clear
- Add aria-expanded="false" by default to the slds-tabs_path__link which have role="tab"
- When the tabpanel is expanded, aria-expanded="true" is set on the currently selected tab
- Change the "edit" link to be a <button /> in the coaching panels
Picklist
class=”site-text-heading_medium slds-m-top_none”>
- Upgrade the ARIA Combobox markup to ARIA 1.1 Specification
- Moved role="combobox" attribute from the input element to slds-picklist root element
- Moved aria-expanded="true|false" attribute from the input element to slds-picklist root element
- Added aria-haspopup="listbox" attribute to slds-picklist root element
- Added autocomplete="off" to the input element
- Added aria-controls="" to the input element which points to the ID of the listbox
- Added role="textbox" to the input element
- Removed aria-owns attribute from the input element as the listbox is not a child of the combobox role
- Changed type attribute on the input element to be text
- Changed the expand trigger button title attribute to match button text
- Moved the ID from slds-dropdown__list to slds-dropdown with role="listbox"
- Implemented Listbox of Pills component on Multi Select states
Pills
class=”site-text-heading_medium slds-m-top_none”>
- Add title attributes to all icons or avatars in a Pill
Popovers
class=”site-text-heading_medium slds-m-top_none”>
- Popovers without headers get aria-label applied to the dialog
- "Tesla Motors" Panel heading changed to h2 class=”site-text-heading_large”
- Add a close button to all Popovers that don’t have any
- Updated implementation guidelines
Progress Indicator
class=”site-text-heading_medium slds-m-top_none”>
- Only apply aria-describedby to markers when a tooltip is shown
- In the Modal example, DOM order is fixed to follow visual order
- Updates to slds-progress-bar
- Added role="progressbar"
- Added aria-valuemin="0"
- Added aria-valuemax="100" to essentially make the progress bar a percentage
- Added aria-valuenow to track current progress
Prompt
class=”site-text-heading_medium slds-m-top_none”>
- Added an ID to slds-modal__content for aria-describedby to work on the alertdialog
Publisher
class=”site-text-heading_medium slds-m-top_none”>
- Made the "To: My Followers" definition list be part of the comment box label as a string, to create a better label
- Made the Publisher Actions not focusable when hidden
Select
class=”site-text-heading_medium slds-m-top_none”>
- Added missing required attribute to Required and Error states
Tabs
class=”site-text-heading_medium slds-m-top_none”>
- Fixed Sub Tabs tabpanels ID typos
Vertical Navigation
class=”site-text-heading_medium slds-m-top_none”>
- Now uses a <nav /> element as its parent
- Added aria-label to the nav element so it’s easily identifiable from other navigation regions on the same page
- Added aria-current="page" to the "active" link
Utilities – List
class=”site-text-heading_medium slds-m-top_none”>
- Name Value Pairs changed to definition lists
Release 2.2.2 – March 8th, 2017
class=”site-text-heading_large”>
ADDED
class=”site-text-heading_medium slds-m-top_none”>
The following classes are now available:
- Added slds-table_resizable-cols as a modifier to slds-table. Should be used if your table supports resizable columns.
FIXES
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- slds-table_fixed-layout can now be used with the basic table – #396
February 24, 2017
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
- Updated iOS implementation documentation
NEW IOS RELEASE (3.0.0)
class=”site-text-heading_medium slds-m-top_none”>
- Substantial script rewrite to handle future token changes
- You can now use design tokens in Swift
- Updated tokens to Spring ’17
- See detailed release notes for design-system-ios
February 3, 2017
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
- New and improved Messaging Guidelines
Release 2.2.1 – January 9, 2017
class=”site-text-heading_large”>
NEW COMPONENTS AND VARIANTS
class=”site-text-heading_medium slds-m-top_none”>
The following components are now available:
- Added a toast for small columns – Small Column Toast
Release 2.2.0 – January 6, 2017
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
The following site enhancements are now available:
NEW COMPONENTS AND VARIANTS
class=”site-text-heading_medium slds-m-top_none”>
The following components are now available:
- Added Global Navigation Tab bar (Workspace Tabs) – Global Navigation Tab bar
- Added Checkbox Add Button – Checkbox Add Button
- Added Button Group List – Button Group List – the new recommended way to mark up button groups.
- Added Rich Text Editor – Rich Text Editor
- Added Global Header Notifications – Global Header Notifications
- Added Popover Header – Popover Header
- Added Popover Footer – Popover Footer
- Added Progress Indicator – Progress Indicator
- Added Walkthrough Popovers – Walkthrough Popovers
- Added Walkthrough Header – Walkthrough Header
- Added Success Button – Success Button
- Added Sub Tabs – Sub Tabs
- Added Dynamic Lists Dropdown – Dynamic Lists
ADDED
class=”site-text-heading_medium slds-m-top_none”>
The following classes are now available:
- Added slds-float_none utility – Utilities › Floats › Float None
- Added slds-button_icon-container-more modifier – Button Icons › Button Icon with Dropdown
- Added slds-button_icon-more-filled for more buttons that require a background.
- Added slds-text-color_inverse utility – Utilities › Text › Color
- Added slds-text-color_inverse-weak utility – Utilities › Text › Color
- Added slds-is-absolute utility for overriding a components default positioning – Utilities › Position › Absolute
- Added additional spacing support for normalizing padding on a grid region
- Added slds-border_bottom utility Utilities › Borders › Border Bottom
- Added slds-border_left utility Utilities › Borders › Border Left
- Added slds-border_right utility Utilities › Borders › Border Right
- Added slds-border_top utility Utilities › Borders › Border Top
- Added slds-box_xx-small utility Utilities › Themes › Box
- Added support for dark backgrounds on slds-dropdown by adding modifier slds-dropdown_inverse
- Added support for narrow region on feeds.
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
The following changes have been made in this release:
- Global actions icon on global header updated to have a background color
- Changed global header icon’s color and size
- Changed background color of docked panels
- Docked Utility Panel – Docked Utility Panel
- Docked Composer Panel – Docked Composer Panel
- Cards are now responsive – Cards
- Improvements made to slds-type-focus utility – Utilities › Interactions
- Avatars now support initials.
- Stateful icon buttons are now compatible with slds-button_icon-container
- Spacing adjustments made to lookup items
- Spacing adjustments made to feeds
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Accessibility improvement – Picklists changed to a read-only combobox with a listbox.
- Add collapsable margin to slds-card__body to account for white space when the footer is empty
- Data Table › Inline edit now has full support
- Icon inside of an input field now uses the correct token
- Modal content properly wraps and hyphenates longform text
- Fixed flex issue on docked composer that made popout example stretch the height of the viewport
DEPRECATED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being marked as deprecated in this release and will be removed in three releases:
- Process › Wizard – Please use the new Progress Indicator instead Progress Indicator
REMOVED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being removed in this release:
- $css-prefix is no longer available to change the prefix of slds- class names to something of your choice. As an alternative, please use this PostCSS plugin to customize class name prefixes: postcss-slds-prefix.
- Removed custom styled scrollbar mixin from slds–scrollable- helpers
- Deleted legacy font-files for older, unsupported browsers (*.eot, *.svg)
TOKENS
class=”site-text-heading_medium slds-m-top_none”>
Tokens are now part of the Lightning Design System.
Token files previously available from the @salesforce-ux/design-tokens npm package are now available in design-tokens/dist in the @salesforce-ux/design-system package (the same applies for the zip download).
The following tokens have been add/removed/deprecated in this release:
- Added force-base/fill.json
- Added token: FILL_HEADER_BUTTON
- Added token: FILL_HEADER_BUTTON_HOVER
- Added force-base/text-transform.json
- Added token: TEXT_TRANSFORM
- Added token: FONT_FAMILY_TEXT
- Added token: FONT_FAMILY_HEADING
- Added token: Z_INDEX_STICKY
- Added token: FONT_FAMILY_TEXT
- Added token: FONT_FAMILY_HEADING
- Added token: PROGRESS_COLOR_BACKGROUND
- Added token: PROGRESS_COLOR_BACKGROUND_SHADE
- Added token: PROGRESS_COLOR_BORDER
- Added token: PROGRESS_COLOR_BORDER_SHADE
- Added token: PROGRESS_COLOR_BORDER_HOVER
- Added token: PROGRESS_COLOR_BORDER_ACTIVE
- Added token: PROGRESS_BAR_HEIGHT
- Added token: PROGRESS_BAR_COLOR_BACKGROUND
- Added token: PROGRESS_BAR_COLOR_BACKGROUND_FILL
- Added token: COLOR_STROKE_BRAND
- Added token: COLOR_STROKE_BRAND_HOVER
- Added token: COLOR_STROKE_BRAND_ACTIVE
- Added token: COLOR_STROKE_DISABLED
- Added token: COLOR_STROKE_HEADER_BUTTON
- Added token: FILL_BRAND
- Added token: FILL_BRAND_HOVER
- Added token: FILL_BRAND_ACTIVE
- Added token: BORDER_STROKE_WIDTH_THIN
- Added token: BORDER_STROKE_WIDTH_THICK
- Added token: COLOR_BACKGROUND_BUTTON_SUCCESS
- Added token: COLOR_BACKGROUND_BUTTON_SUCCESS_HOVER
- Added token: COLOR_BACKGROUND_BUTTON_SUCCESS_ACTIVE
- Added token: COLOR_TEXT_SUCCESS_INVERSE
- Added token: CUSTOM_101
- Added token: CUSTOM_102
- Added token: CUSTOM_103
- Added token: CUSTOM_104
- Added token: CUSTOM_105
- Added token: CUSTOM_106
- Added token: CUSTOM_107
- Added token: CUSTOM_108
- Added token: CUSTOM_109
- Added token: CUSTOM_110
- Added token: CUSTOM_111
- Added token: CUSTOM_112
- Added token: CUSTOM_113
- Added token: CUSTOM_NOTIFICATION
- Added token: DATADOTCOM
- Added token: RTC_PRESENCE
- Added token: PRODUCT_CONSUMED
- Added token: PRODUCT_TRANSFER
- Added token: PRODUCT_ITEM
- Added token: PRODUCT_ITEM_TRANSACTION
- Added token: LOCATION
- Added token: ADDRESS
- Added token: CAROUSEL
- Added token: ASSIGNED_RESOURCE
- Added token: OPERATING_HOURS
- Added token: PRODUCT_REQUIRED
- Added token: RESOURCE_ABSENCE
- Added token: RESOURCE_CAPACITY
- Added token: RESOURCE_PREFERENCE
- Added token: RESOURCE_SKILL
- Added token: SERVICE_TERRITORY_MEMBER
- Added token: SERVICE_APPOINTMENT
- Added token: SERVICE_REPORT
- Added token: SERVICE_RESOURCE
- Added token: SERVICE_TERRITORY
- Added token: SKILL
- Added token: SKILL_REQUIREMENT
- Added token: TIMESLOT
- Added token: WORK_TYPE
- Added alias: SANS_SERIF
- Added alias: MALIBU
- Added alias: SANS_SERIF
- Added alias: EBONY_CLAY
- Added alias: OXFORD_BLUE
- Added alias: RIVER_BED
- Deprecated FONT_FAMILY
Release 2.1.4 – November 7, 2016
class=”site-text-heading_large”>
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Title attributes were added to all button icons and truncated text for accessibility
- Added line-height fix for .slds-button—icon-border-inverse
- Amended .slds-button_icon documentation
- Removed unnecessary .slds-not-selected class from stateful .slds-button_icon markup and adjusted documentation
Release 2.1.3 – September 21, 2016
class=”site-text-heading_large”>
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Included the logo SVG asset used in the Global header
- Use @support for progressive enhancement of mix-blend-mode for active/hover states in Global Navigation
- Removed the demo style .slds-text-align_center from .slds-card__body
DEPRECATED
class=”site-text-heading_medium slds-m-top_none”>
Customizing the CSS class names by customizing $css-prefix is deprecated and will be removed in version 2.2.
As an alternative, please use this PostCSS plugin to customize class name prefixes: postcss-slds-prefix.
Release 2.1.2 – September 6, 2016
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
The following site enhancements are now available:
- Moved Archives section up on Downloads page, and added a link to the section on the homepage, for better visibility.
- New Checkbox Toggle guidelines under Data Entry section.
- New "Touch" section under "Components", where you’ll find patterns especially optimized for touch
- Link to Styling with Design Tokens on the platform added on Design Tokens, Lightning Components, and Downloads pages.
- Button Icon component has been moved out of Buttons and into its own category Button Icon
- Picklist component has been moved out of Menus and into its own category Picklist
NEW COMPONENTS AND VARIANTS
class=”site-text-heading_medium slds-m-top_none”>
The following components are now available:
- App Launcher – App Launcher Component
- Global Navigation – Standard context bar – Global Navigation Component
- Global Header – Global Header Component
- Docked Utility Bar – Docked Utility Bar Component
- Filtering panel – Filtering Panel Component
- Files – File Components
- File selector – File Selector
- Feed v2 – Feeds Component
- Indeterminate checkbox – Indeterminate checkbox component
- Button Icon Inverse – Bordered – Button Icon Inverse with Border
- Button Icon Inverse – Hint Hover – Button Icon with Hint Hover
- Button Icon Error – Button Icon Error
- Image Cards – Figure Card Component
- Image Ratios – Figure Ratio Component
- Vertical Navigation color variation – Vertical Navigation
ADDED
class=”site-text-heading_medium slds-m-top_none”>
The following classes are now available:
- Text color helpers – Utilities › Text › Color
- Text title utility – .slds-text-title – Utilities › Text › Text Title
- Text link utility – Made text inside of .slds-text-link_reset appear as a link – Utilities › Interactions › Text Link
- Truncation containers Utilities › Truncation
- Absolute sizes utility classes: .slds-size_xx-small, .slds-size_x-small, .slds-size_medium, .slds-size_large, .slds-size_x-large, .slds-size_xx-large and their responsive equivalents – in Utilities › Sizing
- Hyphenation utility for non-truncated headings in narrow containers – Utilities › Hyphenation
- Position utilities – Utilities › Position
- Table column borders – Added vertical column borders on a table by applying .slds-table_col-bordered
- Name/Value pair lists – 3 variations – horizontal, inline and stacked – Utilities › Lists › Name Value Pair
- Generated grid column spans 1, 2, 3, 4, 5, 6, 7, 8, and 12 for all breakpoints
- Added archives for previous versions of the site for customers that can’t upgrade yet. These site archives are currently available at the bottom of the Downloads page
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
The following changes have been made in this release:
- Docked Form Footer popover tooltip naming changed to popover.
- CSS Scoping Tool is now only necessary when building components to be included in Visualforce
- Using SLDS in Lightning has been updated to include information about Lightning Out, Lightning Components for Visualforce, and Lightning Applications.
- Nubbins on Popovers have been moved .5rem/8px closer to the respective edge of the popover to match the spec
- Pills have been updated with a more accessible DOM. They are no longer made from an anchor, but instead contain the anchor. Documentation is updated. (Old pills will not break)
- Checkbox Toggle has an updated design with the ability to add custom words below the toggle
- Checkbox and Radios have been updated with a new, more accessible than ever DOM structure. (Your old DOM will not break.)
- Brightened yellow background on mark element.
- Text selected with your mouse is light blue.
- Renamed "slide-out" panel to "details" – Detail Panel Component
- Renamed "Base" data table to "Basic" data table – Data Table Component
- Abstracted complex data table features into a variant named "Advanced" data table – Data Table Component
- Improvements made to .slds-text-link_reset – Utilities › Interactions › Text Link Reset
- Removed light font-weight from the text utility .slds-text-heading_small – Utilities › Text › Text Heading Small
- Removed position: relative from .slds-grid
- Feeds are now responsive
- Added close button to error popover so a screen reader can access popover
- Added animated waffle icon to Global Navigation Global Navigation
- Feeds:
- Changed post’s comment metric labels to lowercase
- Added hint-hover to post’s comment action overflow icon
- Changed post’s comment "link" text to use .slds-color-link_weak
- Removed dotted line separator from post’s attachment payload
- Moved URL of post’s attachment to the bottom of the content ordering
- Removed truncation from preamble
- Reduced white space between feed items
- Updated Activity Timeline Email example to show the to and from with truncation
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Recorded home vertical accessibility fixes
- Added aria-haspopup="true" to action overflow buttons
- Added assistive text for icon
- Removed unnecessary aria roles from action overflow buttons
- Improved assistive text verbiage
- Made multiple value field entirely clickable to invoke dropdown
- Global header accessibility fixes
- Modified tab order of global header actions
- Added title attribute to global header actions
- Changed avatar wrapper from anchor to a button
- Allowed .slds-assistive-text to become visible on focus if .slds-assistive-text_focus is used
- Added aria roles to global search input
- Changed global search listbox options to be non-actionable
- Moved "click enter to search" and "go to" options back into <ul> so they can be discovered by screen readers
- Added .slds-has-focus to apply focus state on listbox options when keyboard interactions are used
- Moved clear button to the right of the input to visually match tab order
- Lookup/Global Header Search accessibility fixes
- Improved semantics of dropdown menus
- Applied role=separator to dropdown menu list items that do not have an actionable element
- Applied role=presentation to dropdown menu list items
- Changed <p> wrapping dropdown menu items text to <span>
- Dropdown menu items have a default tabindex="-1", tab focused items changed to a tabindex="0"
- Utility bar accessibility fixes
- Added landmark role="footer" to utility bar
- Added aria-label="Utility Bar" description to utility bar
- Added hidden heading to utility bar
- Added aria role=dialog and aria-labelledby to utility bar panel
- Changed panel header text to be wrapped in a heading with a id to reference the aria-labelledby
- Placed utility bar buttons inside <ul>
- Files accessibility fixes
- Fixed invalid markup by moving button group outside of anchor
- Image overlay is now enabled by adding an extra html element before the image and adding the class .slds-image_overlay
- Card accessibility fixes
- Moved <header> element to only contain the card header text, rather than the text and overflow menu
- Changed <p> tags with truncation in related list markup to <span> tags
- Made primary labels of compound fields capital
- Dropdowns appear on icon focus within Global Navigation
- Labeled the dialog with the heading of the modal using aria-labelledby="id_of_heading" in the app launcher component
- Tables accessibility fixes: all tables now use the same truncation method when text is too long in a cell and show the full text when truncated text is hovered
- Accessibility fixes for list builder
- Fixed an issue where examples contained the same ID multiple times
- Feeds accessibility fixes
- Comments are now list items in an unordered list structure
- The browser shows a focus ring when avatars are focused
- Accessibility fixes to Menus and Picklist, including Menus used in composite SLDS components
- Removed of aria-expanded on containers
- role="presentation" added on list items to remove them from the accessibility tree
- Corrected use of menuitemcheckbox for selectable menu items, with the use of aria-checked instead of aria-selected
- Corrected sub heading menus which was split across multiple un-ordered lists
- Included line separators and sub-heading separators into the accessibility tree with role="separator"
- Added aria-describedby on textarea element to show error message ID
- Added aria-live attribute to the stateful icon button
- Added aria-describedby on select element to show error message ID
- Added aria-haspopup on Activity Timeline menu buttons, and updated each list item to use an <h3 class=”site-text-heading_medium slds-m-top_none”> tag
- Added hyphenation code to popovers so that long words will break and wrap
DEPRECATED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being marked as deprecated in this release and will be removed in three releases:
- Feeds v1 – Design has changed to v2 – Feeds v2 Component
- Text heading label utility – Use Text title utilities instead – Utilities › Text › Text Title
REMOVED
class=”site-text-heading_medium slds-m-top_none”>
The following features or demos are being removed in this release:
- Removed inverse and state themes from examples to provide clarity of usage.
Release 2.0.3 – August 1, 2016
class=”site-text-heading_large”>
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Card a11y fixes
- Card semantically changed to an article
- Card header semantically changed to a header
- Added aria-haspopup="true" to action overflow button since it invokes a dropdown menu
- Wrapped card header text in an <h2 class=”site-text-heading_large”>
- Fixed label for / textarea id mismatch in form textarea example
- Fixed modal close button styling so the focus halo no longer overlaps with the modal body
- Labeled the dialog with the heading of the modal using aria-labelledby="id_of_heading" and removed aria-hidden="false" from modal
- Added an example usage of slds-table_striped in the basic data table example
- Reverted modal components for the touch devices to prototype status while a fix for using them in Salesforce1 is found
- Added a title attribute to the truncation example
- Changed status of single-line truncation to dev-ready
- Fixed an issue where <legend> were bold in visual force – Fixes #216
- Added aria-describedby attribute on Tooltip component trigger
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- The Sass file architecture was reorganized for better maintainability – see commit de2dc7f for a full breakdown of changes
Release 2.0.2 – June 16, 2016
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
- Revamped "Getting Started" section.
- Renamed "Design" section to "Guidelines"
- Moved "Accessibility" and "Voice & Tone" sections to Guidelines
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
The following changes have been made in this release:
- Pills now reference a token that allow for consistent heights in all context
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Text inputs are referencing the correct 32px tall token – fixes https://github.com/salesforce-ux/design-system/issues/150
- Resolve issue where <th> stayed white on striped row when slds-table_striped is applied – fixes https://github.com/salesforce-ux/design-system/issues/232
- Toggle checkboxes are now aligned vertically with their label (slds-form-element__label m-bottom– › slds-form-element__label slds-m-bottom_none) — Checkbox Toggle variant
REMOVED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being removed in this release:
- Removed incorrect spec for lookups with active selection(s)
Release 2.0.1 – June 6, 2016
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
The following site enhancements are now available:
- Grid system moved to utilities and renamed to "Grid"
- Media object moved to utilities
- New states added for button-groups showing overflow dropdown
- Cards variant navigation has been improved
- Data table variant navigation has been improved
- Lookup variant navigation has been improved
- List variant navigation has been improved
NEW COMPONENTS AND VARIANTS
class=”site-text-heading_medium slds-m-top_none”>
The following components are now available:
- Checkbox Toggle – Checkbox toggle component
- Checkbox Alternate – Checkbox alternate component
- Card – Related list with tiles – Related list card with tiles component
- Data Table – Basic and Advanced – Data table component
- Detail Panel with Inline Edit Form – Detail panel component
- Docked Composer – Voice Integration – Voice docked composer component
- Modal with no header and/or no footer – Modal component
- Lookups spec updated – Single and Polymorphic – Lookup component
- Page headers spec updated – Page Header component
- Vertical Navigation for in-page navigation – Vertical navigation component
- Radio Group Alternate – Radio group alternate component
- Tree Grid – Tree grid component
ADDED
class=”site-text-heading_medium slds-m-top_none”>
The following classes are now available:
- Alignment utility – Absolute Center – Alignment – Absolute center utility
- Interaction utilities – Link reset – Interaction Utilities
- Text Utility – Heading label normal – Heading label normal
- Theme Utility – Light version theme texture – Theme texture
- Position input icons on both sides of the input container – Input
- Position utilities – Relative and Static – Position Utilities
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
The following changes have been made in this release:
- Overall, things will appear visually tighter
- Added additional space between buttons in the modal footer
- Font sizes have been reduced
- Page Headers are visually smaller
- Page Header details are now on white and align to the left
- Modals are visually tighter
- All buttons are visually smaller
- Form Elements are visually smaller
- Activity timeline sizing & spacing is reduced
- Visual density changes in cards
- Visual density changes in popovers
- "View all" links in cards and popover panels are now aligned to the right
- slds-modal_content should use the additive class of slds-p-vertical_large and slds-p-horizontal_x-large, instead of slds-p-around_medium.
- Removed first and last cell padding from Data Tables to allow nesting. New
class .slds-table_cell-buffer can be added to the table or .slds-cell-buffer_left and .slds-cell-buffer_right for individual cell application. - Field level help icon moved to the right of the input label
- Removed over-reaching a:focus styles due to a recent FFOX visual change
- Data table sortable headings now have actionable area so they can be focusable
- Improved interactions for resize element on data tables
- Docked Composer has improved markup, focusing on semantic structure and identifying the component correctly to Assistive Technology as a labelled dialog.
- Datepicker has improved markup, focusing on semantic structure and identifying proper aria roles for dates.
- Resolved semantic bug by making Pill container a <span>. <a> moved inside and adjacent to the close button.
- Notification Prompt has improved accessibility in better identifying the component to screen readers using aria-role="alertdialog", aria-labelledby and
aria-describedby. The redundant slds-modal__close button has also been removed.
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Truncation class is added to headings in the Edit Form for Touch
- Removed max-height and animation on .slds-section__content to prevent collision with JavaScript implementations
- Fixed IE11 page header truncation bug
DEPRECATED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being marked as deprecated in this release and will be removed in three releases:
- Lookups have been updated. Version 1.0.0 has been deprecated. Will continue to work but please update to new markup – Lookup component
- Page headers have been updated. Version 1.0.0 has been deprecated. Will continue to work but please update to new markup – Page Header component
- .slds-toggle-visibility is no longer needed in button-groups. The final button will no longer disappear if it is a button-icon, but instead will gray down like a normal disabled button.
- .slds-button-space-left is no longer supported. Please use spacing utilities instead.
- .slds-button_icon-bare is no longer needed. Please use .slds-button_icon instead.
- .slds-card_empty is no longer needed. Please use .slds-text-align_center utility class instead.
- .slds-button inside of .slds-is-sortable is no longer needed. The entire cell is hyperlinked now, no need for the button.
- .slds-form-element__helper is no longer supported.
- .slds-input__icon no longer supports a color by default. Please use .slds-icon-text-default on the SVG icon instead.
- .slds-icon__container is no longer supported. Please use .slds-icon_container instead.
- .slds-icon-custom-XX is no longer supported. Please use .slds-icon-custom-customXX instead.
- .slds-dropdown_nubbin-top is no longer supported. Please use .slds-nubbin_top instead.
- .slds-has-icon_left, .slds-has-icon_right, and .slds-has-icon_left-right within dropdowns are no longer needed. Icons can be placed within the flow of a .slds-dropdown__item.
- .slds-modal-backdrop is no longer supported. Please use .slds-backdrop instead.
- .slds-notify-container is no longer supported. Please use .slds-notify_container instead.
- .slds-pill-container and .slds-pill__container are no longer supported. Please use .slds-pill_container instead.
- .slds-pill__container_bare is no longer supported. Please use .slds-pill_container_bare instead.
- .slds-tabs__item is no longer supported. Please use specific element selectors instead, such as .slds-tabs_default__item or .slds-tabs_scoped__item.
- .slds-tooltip and .slds-tooltip__body are no longer supported. Please use .slds-popover and .slds-popover__body instead.
- .slds-tree-container is no longer supported, please use .slds-tree_container instead.
- .slds-col-rule_left, .slds-col-rule_right, .slds-col-rule_top, and .slds-col-rule_bottom are no longer supported. Please use .slds-col_rule-left, .slds-col_rule-right, .slds-col_rule-top, and .slds-col_rule-bottom instead.
- .slds-nowrap_small, .slds-nowrap_medium, and .slds-nowrap_large are no longer supported. Please use .slds-small-nowrap, .slds-medium-nowrap, and .slds-large-nowrap instead.
- .slds-align-content-center is no longer supported. Please use .slds-align_absolute-center instead.
- .slds-has-dividers is no longer supported. Please use .slds-has-dividers_{position} instead.
- .slds-has-divider is no longer supported. Please use .slds-has-divider_{position} instead.
- .slds-has-cards is no longer supported. Please use .slds-has-divider_around instead.
- .slds-has-cards_space is no longer supported. Please use .slds-has-divider_around-space instead.
- .slds-section-title is no longer supported. Please use .slds-section__title instead.
- .slds-collapsed is no longer supported. Please use .slds-is-collapsed instead.
- .slds-expanded is no longer supported. Please use .slds-is-expanded instead.
- The rule that hides the close button in Notification Prompt .slds-modal_prompt .slds-modal__close is no longer needed as the HTML should be removed. Please remove the button from the dialog header.
REMOVED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being removed in this release:
- Removed the $static-icon-path configuration variable, since it wasn’t used anywhere in the codebase
- Removed slds-button_small, since it’s the same as the new default button size
- Removed slds-input_small, since it’s the same as the new default input size
- Removed slds-tile__title, since it didn’t apply any styles
? Notes About Scoped CSS files, the Unmanaged Package, Visualforce and Lightning Components
class=”site-text-heading_medium slds-m-top_none”>
The Lightning Design System CSS is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application (via app.css). It is no longer necessary to add a static resource for Lightning Components running within these environments.
Starting in 2.0.x, the Lightning Design System is no longer available as an unmanaged package. Also, the scoped CSS files (salesforce-lightning-design-system-vf.css and salesforce-lightning-design-system-ltng.css) are no longer distributed as part of the Design System zip file (available in the Downloads page). As an alternative, you may now generate your own scoped Design System zip file using the new CSS Scoping Tool and upload it as a static resource as documented on the tool’s page. However, we strongly recommend that you do not install SLDS as a static resource when building for Lightning.
Resources:
- CSS Scoping Tool
- Using SLDS in Lightning
- Using SLDS in Visualforce
Release 1.0.5 – May 26, 2016
class=”site-text-heading_large”>
- Adding a background color to icons from the custom set is now done using the slds-icon-custom-customXX class (e.g. slds-icon-custom-custom25), instead of slds-icon-custom-XX (deprecated). This change addresses #203
- Improved accessibility of the breadcrumbs component
- The Design System now allows developers to load Salesforce webfonts using their preferred method instead of the default @font-face rules. To disable the default font loading method, set $slds-load-webfonts: false; before importing the Design System Sass file.
- The project is now compatible with Node.js 6
- Search! You can now get faster to components and the deepest parts of the documentation using the search field at the top of the navigation
Release 1.0.4 – May 18, 2016
class=”site-text-heading_large”>
- Added title attributes to icon containers, noticeably improving accessibility for users of pointing devices such as mice and trackpads
- Improved the structure of the icon component section, making it easier for you to discover how to decorate your Lightning apps with our beautiful icons
- Fixed the standard call icon, which gets its fancy yellow background back, instead of a purple one that had been assigned to it for obscure reasons (we’ve put our best designers on the case!)
- Fixed an issue where npm install would fail on Windows – which is only fair to our developer friends who are on PCs
Release 1.0.3 – April 26, 2016
class=”site-text-heading_large”>
- Fixed Sass build issue for npm module
Release 1.0.2 – April 8, 2016
class=”site-text-heading_large”>
- Added a link to an archive of v1.0.0, so you can access the documentation and downloads for that previous version
- Generated the unmanaged package for the 1.0.2 patch release
- Fixed the application’s version number in the Sass configuration
Release 1.0.1 – April 8, 2016
class=”site-text-heading_large”>
Happy birthday! The Lightning Design System turns 1…
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
The following changes have been made in this release:
- Improved accessibility in the record home variant of the page header component (remove multiple <dl> elements, and use a single <ul> instead) – Page Headers
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Use relative paths to point to assets, fixes a bug where running SLDS in certain environments would fail to load assets – Fixes design-system/issues/83
- Form element breakpoints now fire at small breakpoint rather than large breakpoint – Fixes design-system/162
- Fixed a bug in the Tree component that occurred in the scoped version of SLDS and prevented nested branches from being properly indented – Fixes design-system/issues/91 and design-system/issues/164
- Fixed the file naming structure so that standard Sass implementations can watch the entire project and compile the framework correct files on the fly.
- Fixed a bug where compilation would fail when using Ruby Sass – Fixes design-system/issues/173
Release 1.0.0 – March 2, 2016
class=”site-text-heading_large”>
SITE IA/ENHANCEMENTS
class=”site-text-heading_medium slds-m-top_none”>
The following site enhancements are now available:
- Components and their variants can now be built with states and will show up in the component variant & states navigation on the right, when available
- Improved Component Overview tables for more narrow readability
- Improved status labels. Now associated with colors and contain more information
- Markup and Style guidelines with BEM information – Markup and Style Guidelines
- Resources Information – Resource Links
- Updated documentation and accessibility information for tabs – Tabs
- Improved Grid System documentation – Grid System
- Copy updates on components to represent Voice & Tone Guidelines
NEW COMPONENTS AND VARIANTS
class=”site-text-heading_medium slds-m-top_none”>
The following components are now available:
- Docked Composer – Docked Composer component
- Picklist Multi Select menu – Picklist Multi Select component
- Fixed text with inputs Input component state
- Inline Level Help – Inline Level Help component
- Sales Path – Sales Path component
- Setup Wizard – Wizard component
- Added an elegant way to add spacing between specific grid items — auto functionality in flexbox. Alignment Item Bump Variant
- Popover color themes added – Popover Theme Variant
- Tree Tree Base Component – Tree was completely rebuilt and is now a new component
Mobile:
- Dialog Menus for small form factor Prompts for Touch
- Action overflow for touch – Action Overflow component
- Added Edit dialog form for touch devices – Edit Dialog for Touch component
- Page Header – Page Header component
ADDED
class=”site-text-heading_medium slds-m-top_none”>
The following classes are now available:
- Added max-width sizing utilities – Max Width sizing
- Added zero spacing utility classes – Spacing utilities
- Additional Grid System classes:
- Added .slds-grid_align-end for horizontal alignment on main grid axis
- Added .slds-grid_vertical-align-end and .slds-grid_vertical-align-center for vertical alignment on grid cross axis
- Added .slds-grid_stretch for multi-row vertical stretch support
- Added .slds-grid_reverse and .slds-grid_vertical-reverse to reverse the direction of the grid
- Added .slds-text-error for use on icons for validation errors
- Added color to user selection to force good contrast on dark backgrounds
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
The following changes have been made in this release:
- Removed Spinner gifs and refactored as CSS – Spinner component
- Source order of both Reversed and Double Media Objects changed. They are no longer reordered using flexbox’ order property. Media Objects component
- Activity Timeline reflects Media Object changes. Also removed dl with single dt & dd pairs and replaced with spans.
- Field-level help popover background color token update – Popover colors
- Switched media queries to use em instead of px
- Removed icon color from .slds-input__icon so an icon color class is now additionally required
- Reordered tokens so large form factor has priority
- Moved Page Header theme from Utilities to its top-level component category Page Header component
- Removed .slds-m-top_x-small in the page header and replaced with a new class .slds-page-header__info
- Vertical spacing adjusted on small viewport for .slds-form_stacked, .slds-form_horizontal and .slds-form_inline
- Widths of the Grid container change to 480px for small, 768px for medium, 1024px for large and 1280px for x-large.
- The last element inside .slds-text-longform now retains the bottom margin.
FIXED
class=”site-text-heading_medium slds-m-top_none”>
The following issues have now been resolved:
- Fixed #106 Fix for scoping issue with tabs and active state – bug. Increased active tab state specificity
- Fixed #61 Fixed #51 Updated lists > description horizontal to use flexbox. No class change required. dt and dd can now accept sizing utilities. Change margin to padding
- Fixed accessibility bug with required form elements
- Some tokens that were unable to be overridden by not having a !default flag have been resolved
- Compound fields markup has been updated that was causing display issues Compound Fields
- Fixed inverse button-group icon bug
DEPRECATED
class=”site-text-heading_medium slds-m-top_none”>
The following features are being marked as deprecated in this release and will be removed in three releases:
- Deprecated .slds-card_empty. Use .slds-text-align_center instead. – Card component
- Deprecated .slds-section-title. Use .slds-section__title instead – Section Title for full details
- Deprecated .slds-button_icon-bare. Use .slds-button_icon instead – Button Icon
- Deprecated tabs descendant selectors Tabs component:
- .slds-tabs_default > slds-tabs__item use .slds-tabs_default__item instead.
- .slds-tabs_default > slds-tabs__content use .slds-tabs_default__content instead.
- .slds-tabs_default > a use .slds-tabs_default__link instead.
- .slds-tabs_scoped > slds-tabs__item use .slds-tabs_scoped__item instead.
- .slds-tabs_scoped > slds-tabs__content use .slds-tabs_scoped__content instead.
- .slds-tabs_scoped > a use .slds-tabs_scoped__link instead.
- Deprecated .slds–tooltip. Use .slds-popover_tooltip instead.
- Deprecated responsive .slds-nowrap_{size} classes due to inconsistent naming. Use .slds-{size}_nowrap instead.
- Deprecated .slds-modal-backdrop and .slds-modal-backdrop_open in favor of .slds-backdrop and .slds-backdrop_open to reuse in other components.
- Deprecated .slds-col-rule_{position} classes due to inconsistent naming. Use .slds-col_rule-{position} instead.
Release 0.12.2 – February 8, 2016
class=”site-text-heading_large”>
SITE IA
class=”site-text-heading_medium slds-m-top_none”>
- Add Getting Started > Markup and Style guidelines with BEM information
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- Copy updates on components to represent Voice & Tone Guidelines
- Some tokens that were unable to be overridden by not having a !default flag has been resolved
- Reordered tokens so large form factor has priority
- Fix for scoping issue with tabs and active state – bug #106
- Increased active tab state specificity
Release 0.12.1 – December 16, 2015
class=”site-text-heading_large”>
SITE IA
class=”site-text-heading_medium slds-m-top_none”>
- Improve status labels. Now associated with colors and contain more information
- Improve Component Overview tables for more narrow readability
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- Apply proper accessibility requirements (aria-labelledby) to tabs (fixes https://github.com/salesforce-ux/design-system/issues/107). Updated documentation to reflect previous refactoring.
- Fix for inverse button-group icon bug
- Make .slds-text-body_small inherit theme color (fixes https://github.com/salesforce-ux/design-system/issues/123)
- Mark all list utilities "dev-ready" – /components/utilities/lists
- Field-level help popover background color token update
- Fix truncation on Sales Path (fixes https://github.com/salesforce-ux/design-system/issues/135)
- Fix chevron alignment on Sales Path – /components/tabs#sales-path
- Updated demo on buttons > neutral icon to demonstrate "mutton" – /components/buttons#neutral-icon
- Updated lists > description horizontal to use flexbox. No class change required. dt and dd can now accept sizing utilities. Change margin to padding.
NEW COMPONENTS
class=”site-text-heading_medium slds-m-top_none”>
- Custom Select container added, normalizes the <select> appearance in various browsers (fixes https://github.com/salesforce-ux/design-system/issues/122)
Release 0.12.0 – November 18, 2015
class=”site-text-heading_large”>
SITE IA
class=”site-text-heading_medium slds-m-top_none”>
- Added Resources > Links
- Changed tabs to use new refactored tab classes (deprecated)
BREAKING CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- Removed default horizontal spacing from buttons in favor of new spacing utilities (deprecated, see New Components below).
- Tabs have been refactored, changing descendent selectors to BEM syntax (deprecated)
- Changed source order of Media Objects > Reversed and Media Objects > Double (No longer reordering using flexbox order property)
- Adjusted Activity Timline > Base to reflect Media Object changes. Removed dl with single dt & dd pairs. Replaced with spans.
- slds-modal-backdrop and slds-modal-backdrop_open is deprecated in favor of slds-backdrop and slds-backdrop_open since it is used in other components.
- Removed icon color from .slds-input__icon so that an icon color class is required in addition
CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- Switched sizing utility media queries to use em instead of px
- Updated demo for icons > color and added slds-text-error for validation errors
NEW COMPONENTS
class=”site-text-heading_medium slds-m-top_none”>
- Added initial state of tabs > sales path /components/tabs#sales-path
- Added max-width sizing utilities /components/utilities/sizing
- Added button spacing utilities for stacked and horizontal sets of buttons (both a single class and a wrapper class) /components/buttons#overview
- Added stretched button utilities for full-width buttons on small form factors /components/buttons#overview
- Dialog Menus for small form factor
- Action overflow for touch /components/menus#action-overflow-for-touch
- Added Edit dialog form for touch devices /components/forms#edit-dialog-for-touch
DEPRECATED
class=”site-text-heading_medium slds-m-top_none”>
- Buttons no longer have default horizontal spacing and require a class or wrapper to provide space
- Name change: Responsive button changed to Horizontal button
- slds-modal-backdrop and slds-modal-backdrop_open deprecated in version 0.12.0, use slds-backdrop and slds-backdrop_open instead
- Descendant selectors on tabs were changed to BEM syntax
- slds-tabs_default > slds-tabs__item deprecated in version 0.12.0, use slds-tabs_default__item instead
- slds-tabs_default > slds-tabs__content deprecated in version 0.12.0, use slds-tabs_default__content instead
- slds-tabs_default > a deprecated in version 0.12.0, use slds-tabs_default__link instead
- slds-tabs_scoped > slds-tabs__item deprecated in version 0.12.0, use slds-tabs_scoped__item instead
- slds-tabs_scoped > slds-tabs__content deprecated in version 0.12.0, use slds-tabs_scoped__content instead
- slds-tabs_scoped > a deprecated in version 0.12.0, use slds-tabs_scoped__link instead
- Descendant selector on .slds-input__icon fill color deprecated in version 0.12.0, use slds-icon-text-default (or any icon color class) on the icon in addition to the original class
Release 0.11.0 – October 29, 2015
class=”site-text-heading_large”>
- Changed notifications > modal to notifications > modal-toast
- Modals > Taglines no longer has a slds-modal__header p selector. Instead, slds-m-top_x-small is placed on the p itself.
- Stateful button has a [disabled] state
- If button-groups need their final down icon to hide when [disabled], the .slds-toggle-visibility should be added to the icon. (This affects all page headers, and cards > base.)
- Nubbins shadows now have proper light source
- Removed interactive dropdowns from page header examples
- Added Google Analytics
SITE IA
class=”site-text-heading_medium slds-m-top_none”>
- Moved tooltips to popovers, deprecated tooltip section /components/popovers#tooltips
- Moved Dropdowns into Menus, deprecated dropdowns sectio /components/menus
- Moved Picklist Dropdown Menu into Menus /components/menus#picklist
- Moved Multi-Select Picklist into Forms /components/forms#multi-select
- Menus component variants are now more explicit
- Dropdown
- Dropdown with Icons
- Dropdown Positioning
- Picklist
- Action Overflow
- Search Overflow
BREAKING CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- Changed .slds-tooltip to .slds-popover_tooltip, .slds-tooltip will become deprecated (*).
- Deprecated .slds-has-divider (*), now requires a top or bottom direction appened, e.g. .slds-has-divider_top, .slds-has-divider_bottom
- Deprecated "Menu with Icons" dropdown variant
- No longer depends on class names that deal with icon positioning
- .slds-dropdown__item are set to display: flex with justify-content: space-between by default now. This allows for icon + text to be left aligned and a single icon to be positioned on the same axis to the right hand side. The icon + text that is positioned to the left requires an HTML element, like a <p> with the class .slds-truncate applied.
- .slds-has-icon, .slds-has-icon_left, .slds-has-icon_right and children classes .slds-icon_left, .slds-icon_right have been deprecated but will persist in code base (*)
- If user invokes selection on a dropdown item and wants feedback such a a checkmark, that SVG now requires a class of .slds-icon_selected
- <em> (*) Code is still in codebase but will be deprecated, TBD but preliminary removal of release 0.20.0</em>
NEW COMPONENTS
class=”site-text-heading_medium slds-m-top_none”>
- Added notifications > prompt (modal-style alert) /components/notifications#prompt
- Added Preview Panel Popovers /components/popovers#panels
- More directional support for popover nubbins /components/popovers#nubbins
Release 0.10.2 – October 29, 2015
class=”site-text-heading_large”>
- Updated Icons to version 3.2.0
- Dropdown menus now have bottom positioning support, with accommodating nubbin support /components/menus#dropdown-positioning
- Added Google Analytics
Release 0.10.1 – October 21, 2015
class=”site-text-heading_large”>
- Hot fix for picklist width on datepicker
- .slds-is-required and .slds-has-error on form elements are now properly scoped within the -vf, -ltng and -scoped compiled css files
- Font size on datepicker properly displays within scoped compiled css files
Release 0.10.0 – October 20, 2015
class=”site-text-heading_large”>
- Changed .slds-button__icon fill colors to use currentColor value to match text color changes
- Updated .slds-button_icon-* demo and fixed class name typo
- Added new button variant: .slds-button_destructive
- Removed max-width (960px) from Modals > Large
- Added new notification state in modals Notifications > Modal
- Added .slds-no-flex to SVG in Notifications > Toast (needed for modal application)
- Changed picklist label and selection list to fixed width. Applied a 5 option max-height with overflow on list.
- Upgraded @salesforce-ux/design-tokens to 1.3.1
- @salesforce-ux/design-system package now includes /assets/icons and /assets/images
BREAKING CHANGES
class=”site-text-heading_medium slds-m-top_none”>
- Changed .slds-button_icon-border-small to .slds-button_icon-x-small. This aligns with our other icon names which separate sizing from style
- Brought inverse close icons into alignment with the other icon buttons. Class on .slds-button has an added .slds-button_icon-inverse. The class .slds-button__icon_inverse was removed from the SVG within.
BUG FIXES
class=”site-text-heading_medium slds-m-top_none”>
- .slds-button_icon-* can be placed on an a and aligns to the center
- :hover, :focus state added for .slds-button_icon-bare
- fixed line-height in .slds-button_icon-border-small and .slds-button_icon-bare
- Added overflow: auto; to the options container for a Multi Select picklist
NEW COMPONENTS
class=”site-text-heading_medium slds-m-top_none”>
- Full-width button variant for small form factors
- Feed and Comment components have been added
- Publisher component has been added
SASS UPDATES
class=”site-text-heading_medium slds-m-top_none”>
- Abstracted form states into own mixins
- Abstracted feed vertical rule into own mixin
Site Update – October 20, 2015
class=”site-text-heading_large”>
- Fixed issues when installing with npm 3
- Updated Voice and Tone guidelines
Site Update – October 5th, 2015
class=”site-text-heading_large”>
- Clicking anchor links will position the anchor on the page a bit lower than the top of the window now
- Added typography documentation to design section
- Added examples for a checkbox fieldset and radio fieldset within the horizontal form modifier
Release 0.9.2 – October 5th, 2015
class=”site-text-heading_large”>
- Updated package.json to point to README for licensing information
- Upgrade icons to v3.1.0
- Updated small input styles
- Applied styles to fix the height of a select element when used [size] attribute is applied
- Forced stacking of checkbox and radio elements when inside a horizontal form modifier
- Updated picklist, font weight on item select, fixed time select dropdown
Site Update – September 25th, 2015
class=”site-text-heading_large”>
- Doc changes
- Internal SVG icon helper can use <use xlink:href="…"></use> now
- Miscellaneous typo fixes
Release 0.9.1 — September 24th, 2015
class=”site-text-heading_large”>
- Fixed issue with npm module dependencies
- Fixes issue that caused deprecated design tokens to display
Release 0.9.0 — September 9th, 2015
class=”site-text-heading_large”>
- Open Sourced: github.com/salesforce-ux/design-system
- CSS files scoped in .slds have been added/updated for the following:
- Visualforce (-vf)
- Lightning Platform (-ltng)
- General Use (Most likely in conjunction with other frameworks) (-scoped)
Site
class=”site-text-heading_medium slds-m-top_none”>
- Content
- Getting Started
- Heroku Added
- Design
- Overview Added
- Colour Added
- Data Entry Added
- Displaying Data Added
- Messaging Added
- Voice & Tone Added
- Native -> iOS – Use our iOS integration to style your native iOS applications
- Getting Started
Components
class=”site-text-heading_medium slds-m-top_none”>
Many accessibility updates
class=”site-text-heading_medium slds-m-top_none”>
-
Changed components to dev-ready: Button Groups, Cards, Tiles, Icons
-
Lookups:
- Accessibility Requirements added
- Multi-Select Design and Markup updated
- Multi-Scope Design and Markup updated
- .slds-lookup__control has been deprecated, now uses .slds-form-element__control
-
Pill Container Added .slds-pill-container
- Can contain one or many pills, used on .slds-lookup
-
Data-Tables
- Row Selection (.slds-is-selected) and row selection hovers have been fixed
-
Tabs
- Updated tabs to have aria-controls with the same ID in the tab content container
-
Tiles > Author and with-icon have empty alt added
-
Datepickers > multi-select and Forms > compound-form have small element changed to span
-
Card > All variants have DOM changed (header, section, footer changed to div)
-
Data-tables > All variants have accessibility upgrades for th role="row"
-
Forms > validation state now has additional errors surfaced for radio and checkbox
-
Datepickers > All variants
- Removed role="button" aria-labelledby="bn_prev-label"
- Changed div#month to h2 class=”site-text-heading_large” and removed role="heading"
- Removed all tabindex
- Removed span#bn_prev-label and span#bn_next-label
-
Dropdowns > All variants have aria-haspopup="true" moved to the button (actionable element)
-
Page headers > All variants have role="banner" added
-
Picklists > Quickfind temporarily removed until DOM is updated
Utilities
class=”site-text-heading_medium slds-m-top_none”>
- Text > Faux Links has added cursor:pointer
Lots of bug fixes and TLC.