SITE IA
- Add Getting Started > Markup and Style guidelines with BEM information
CHANGES
- 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
SITE IA
- Improve status labels. Now associated with colors and contain more information
- Improve Component Overview tables for more narrow readability
CHANGES
- Apply proper accessibility requirements (aria-labelledby) to tabs (fixes salesforce-ux#107). Updated documentation to reflect previous refactoring.
- Fix for inverse button-group icon bug
- Make
.slds-text-body--small
inherit theme color (fixes salesforce-ux#123) - Mark all list utilities "dev-ready" - [www.lightningdesignsystem.com/utilities/lists]
- Field-level help popover background color token update
- Fix truncation on Sales Path (fixes salesforce-ux#135)
- Fix chevron alignment on Sales Path - [www.lightningdesignsystem.com/components/tabs#sales-path]
- Updated demo on buttons > neutral icon to demonstrate "mutton" - [www.lightningdesignsystem.com/components/buttons#neutral-icon]
- Updated lists > description horizontal to use flexbox. No class change required.
dt
anddd
can now accept sizing utilities. Change margin to padding.
NEW COMPONENTS
- Custom Select container added, normalizes the
<select>
appearance in various browsers (fixes salesforce-ux#122)
SITE IA
- Added Resources > Links
- Changed tabs to use new refactored tab classes (deprecated)
BREAKING CHANGES
- 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 singledt
&dd
pairs. Replaced withspan
s. slds-modal-backdrop
andslds-modal-backdrop--open
is deprecated in favor ofslds-backdrop
andslds-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
- Switched sizing utility media queries to use
em
instead ofpx
- Updated demo for icons > color and added
slds-text-error
for validation errors
NEW COMPONENTS
- Added initial state of tabs > sales path www.lightningdesignsystem.com/components/tabs#sales-path
- Added max-width sizing utilities www.lightningdesignsystem.com/utilities/sizing
- Added button spacing utilities for stacked and horizontal sets of buttons (both a single class and a wrapper class) www.lightningdesignsystem.com/components/buttons#overview
- Added stretched button utilities for full-width buttons on small form factors www.lightningdesignsystem.com/components/buttons#overview
- Dialog Menus for small form factor
- Action overflow for touch www.lightningdesignsystem.com/components/menus#action-overflow-for-touch
- Added Edit dialog form for touch devices www.lightningdesignsystem.com/components/forms#edit-dialog-for-touch
DEPRECATED
- 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
andslds-modal-backdrop--open
deprecated in version 0.12.0, useslds-backdrop
andslds-backdrop--open
instead- Descendant selectors on tabs were changed to BEM syntax
slds-tabs--default > slds-tabs__item
deprecated in version 0.12.0, useslds-tabs--default__item
insteadslds-tabs--default > slds-tabs__content
deprecated in version 0.12.0, useslds-tabs--default__content
insteadslds-tabs--default > a
deprecated in version 0.12.0, useslds-tabs--default__link
insteadslds-tabs--scoped > slds-tabs__item
deprecated in version 0.12.0, useslds-tabs--scoped__item
insteadslds-tabs--scoped > slds-tabs__content
deprecated in version 0.12.0, useslds-tabs--scoped__content
insteadslds-tabs--scoped > a
deprecated in version 0.12.0, useslds-tabs--scoped__link
instead
- Decendent selector on
.slds-input__icon
fill color deprecated in version 0.12.0, useslds-icon-text-default
(or any icon color class) on the icon in addition to the original class
- 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 thep
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
- Moved tooltips to popovers, deprecated tooltip section www.lightningdesignsystem.com/components/popovers#tooltips
- Moved Dropdowns into Menus, deprecated dropdowns sectio www.lightningdesignsystem.com/components/menus
- Moved Picklist Dropdown Menu into Menus www.lightningdesignsystem.com/components/menus#picklist
- Moved Multi-Select Picklist into Forms www.lightningdesignsystem.com/components/forms#multi-select
- Menus component variants are now more explicit
- Dropdown
- Dropdown with Icons
- Dropdown Positioning
- Picklist
- Action Overflow
- Search Overflow
BREAKING CHANGES
- 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 todisplay: flex
withjustify-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
- (*) Code is still in codebase but will be deprecated, TBD but preliminary removal of release 0.20.0
NEW COMPONENTS
- Added notifications > prompt (modal-style alert) www.lightningdesignsystem.com/components/notifications#prompt
- Added Preview Panel Popovers www.lightningdesignsystem.com/components/popovers#panels
- More directional support for popover nubbins www.lightningdesignsystem.com/components/popovers#nubbins
- Updated Icons to version 3.2.0
- Dropdown menus now have bottom positioning support, with accommodating nubbin support www.lightningdesignsystem.com/components/menus#dropdown-positioning
- Added Google Analytics
- 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
- 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
- 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
.slds-button--icon-*
can be placed on ana
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
- Full-width button variant for small form factors www.lightningdesignsystem.com/components/buttons#responsive
- Feed and Comment components have been added www.lightningdesignsystem.com/components/feeds
- Publisher component has been added www.lightningdesignsystem.com/components/publishers
SASS UPDATES
- Abstracted form states into own mixins
- Abstracted feed vertical rule into own mixin
- Fixed issues when installing with NPM 3
- Updated Voice and Tone guidelines
- 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
- 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
- Doc changes
- Internal SVG icon helper can now use now
- Miscellaneous typo fixes
- Fixed issue with npm module dependencies
- Fixes issue that caused deprecated design tokens to display
- 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 conjuction with other frameworks) (
-scoped
)
- CSS files scoped in
- 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
Many accessibility updates
-
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
- Can contain one or many pills, used on
-
Data-Tables
- Row Selection (
.slds-is-selected
) and row selection hovers have been fixed
- Row Selection (
-
Tabs
- Updated tabs to have
aria-controls
with the same ID in the tab content container
- Updated tabs to have
-
Tiles > Author and with-icon have empty alt added
-
Datepickers > multi-select and Forms > compound-form have
small
element changed tospan
-
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
toH2
and removedrole="heading"
- Removed all tabindex
- Removed
span#bn_prev-label
andspan#bn_next-label
- Removed
-
Dropdowns > All variants have
aria-haspopup="true"
moved to thebutton
(actionable element) -
Page headers > All variants have
role="banner"
added -
Picklists > Quickfind temporarily removed until DOM is updated
- Text > Faux Links has added cursor:pointer
Lots of bug fixes and TLC.