Salesforce Lightning Design System :: React Components :: design-system-react All releases must use a level two heading.
These are changes that have backwards-compatible solutions present and that compatibility will be removed at a breaking change release in the future.
Checkbox'sonChangenow receivesevent, { checked: [boolean], indeterminate: [boolean] }. Previously,checkedwas the first parameter.TabsPanehas been replaced withTabsPanel.Input's props:iconPosition,iconAssistiveText,iconCategory,iconName,onIconClickare deprecated. AnIconcomponent should be used instead.DataTable'scollection,onSelect,onDeselectare deprecated.- Remove
openByDefaultfromPopoverTooltip. - Remove alias component files. Please update the following removed files to their new file name.
- tabs/pane
- SLDSSettings
- lookup/menu/
- lookup/menu/default-footer
- lookup/menu/default-header
- lookup/menu/default-section-divider
- lookup/menu/item/
- menu-list/list-item-label
- menu-list/list-item
- menu-list/list
- BreadCrumb is now Breadcrumb (bread-crumb -> breadcrumb)
- You can know check this library's dependency on SLDS to make sure you have the CSS that this library is being developed with. The NPM git URL can be found in the published
package.json.SLDS: { gitURL: [URL]}.
Major features
- Add
SplitViewcomponent
Bugfix
- Remove timeout/setState warning on
Modal - Polyfill
Comboboxwithlodash.findIndex - Fix getDefaultProps warning in
Tree
Maintenance
- Add Babel preset
Bugfix
Iconnot present in NPM module due to gitignore's EMACS settings.
Bugfix
- Fix Lookup due to
Dialogupgrade to PopperJS.
Maintenance
- Update Babel settings and publish to NPM.
Major features
- Add Pill Component
Bugfix
- Removed
setStatecall when handling click to setactiveproperty. This was causing somesetStateissues on when unmountingButton. - Add
titleattribute to truncatedTreenodes
Maintenance
- Introduction of
npm run formatcommand to run prettier and ESlint. Update to ESlint settings.
Major features
- Add Progress Ring Component
- Make icons settings webpack friendly. Allows sprite file strings to be imported.
Maintenance
- Group like files: Move all component files into same folder to make library more modular
- Remove node engine version from published package
- Improve documentation: Usage with webpack
Minor features
- Custom menu items renders are available with
menuItemprop for Combobox.
Major features
Bugfix Changes
- Initial state of DataTable sort is null, unless prop is passed. Before this fix, columns appear to be ascending and descending only and toggle between those two based on the previous direction. You can now have an unsorted third option, so you can go have an unsorted sortable column and go from unsorted -> asc -> desc.
isSortedandsortDirectionare both required if you are sorting a column. See #1163 for more background. - Removes the warnings that always show when using a Progress Indicator. Tooltip trigger is now on the button instead of the
litag.
Maintenance
- Lookup, Picklist, and Notification are deprecated. These are deprecated components with deprecation warnings. Deprecated components will be present for at least one major Salesforce release (not this library) after the current release cycle and may remain longer. Please refer to source code for prop descriptions in the future. Please transition:
- Lookup -> Autocomplete (base) Combobox
- Picklist -> Read-only (base) Combobox
- Notification -> Alert or Toast
- Removes
forceUpdatefrom Tree example - Update Modal examples
- Add
parentSelectoruse description to Modal - Add HTML avatar snapshots
- Fix combobox example use of
placeholderReadOnly
- Allow inline icons and
iconprop data passed directly in to work properly again. - Rename internal constant bugs having to do with component names
- Pass
assistiveTextfrom MenuDropdown to trigger button - Replace
classnamewithclassnameContaineron TextArea container - Clarify test readme
###Breaking Changes###
- Icons removed which brings DSR from 749KB down to somewhere around 430KB
- Icon JS objects have been removed except for the original
design-system-react.jsbundle. An additional bundle has been addeddesign-system-react-components.jswithout bundled icons. See readme for use of<IconSettings/>to set icon context. - Devs now need to do two things if they're not using DSR with icons: - You need to host your own icons (
npm install @salesforce-ux/iconsOR download them from SLDS website: https://core-210.lightningdesignsystem.com/downloads) - You'll need to use the<IconSettings />higher order component and pass in the path to where you are hosting your own icons. It might look something like this:
import IconSettings from 'design-system-react/components/icon-settings';
ReactDOM.render(
<IconSettings iconPath="/assets/icons">
<MyApp />
</IconSettings>,
document.getElementById('app')
)
# This component can be wrapped around the entire app and/or individual components using Icons.
- Removed disabled styles from Tabs however you can still disable the Tab, and aria-disabled still appears on the Tab
<a>. You'll just need to provide your own css for styling it.
###Other Changes###
- All CommonJS's
module.exportshave been removed. - Some initial compatibility testing with React 16 has been completed, but library is not fully tested.
- Added
type="button"toButtonas default (markup change). - Added SLDS Avatar
- Lookup Prop
- Added new props isOpen, onRequestOpen, and onRequestClose to Lookup.
- Dropdown Prop
- Added new prop
disabledto Menu Item which gets passed toaria-disabledonrole="option". Pass it down through options like so:
- Added new prop
<MenuDropdown
options={[
{ disabled: true, label: 'Option A', value: 'A0' },
{ label: 'Option B', value: 'B0' },
{ label: 'Custom Class', className: 'custom-item-class', value: 'custom0' }
]}
...
/>
Major features
- Add Combobox component
Major features
- Add RadioButtonGroup component
Minor features
- Picklist with multiselect: Add onPillRemove
- Inline edit: Add onEnterEditMode, onLeaveEditMode, onKeyUp (for input)
Bugfix
- Fix Popover focus trap
- Lookup: Close on tab and pass list ref with guard
Bugfix Changes
- Allow Button Icon to accept external path for Icon
Minor Changes
- Lookup: Add
onFocuscallback - Notification: Add icon category prop
Bugfix Changes
- Update Webpack loader for Tab CSS
- Notification:
refto the Button component returned an object and now returns DOM node. - Popover: Update close button style
Bugfix Changes
- DataTable: Change child component (action row) validation to use
displayNameinstead of type/function compare.
Bugfix Changes
- DataTable: Change child component validation to use
displayNameinstead of type/function compare.
Minor Changes
- Add Progress Indicator
Bugfix Changes
- Remove occurrence of assistiveText prop from ButtonIcon. ButtonStateful creates a ButtonIcon with assistiveText. Change this so that the assistiveText is put in this component.
- Allow variable type of
nodein dropdown menu label
Bugfix Changes
- Add react-onclickoutside events to Lookup to prevent scrollbar from closing the menu
Minor Changes
- Adds Multiselect Dropdown variant
Bugfix Changes
- Fix datepicker input value bug
Minor Changes
- Adds Textarea component
Bugfix Changes
- Fix icon when tree branch is expanded
Bugfix Changes
- Picklist child component Pill had a bad import that was only discoverable in production.
Minor Changes
- Add Multiselect Picklist variant (Pills paired with Picklist)
Maintenance
- Update package.json dependencies
- Switches to newest Heroku stack for deployment pipeline.
- Fixes missing icons on Heroku PR apps.
- Updates Jest and snapshots
- Updates sinon and sinon-chai
- Removes babel-eslint as a dependency
Minor Changes
- Update inline icons to v7.20.0
Minor Changes
- Move icons repository to looser major version. This should keep the SLDS website and the inline JS icons within this library in-sync with each other better.
- Fix app launcher button markup and testing code
- Allow non-strings in tree item labels (such as icons elements)
MAINTENANCE
- Release process updated
- Lint errors removed from production code
- Fix Lookup Item style bug
- Update test command to prevent false positives in TravisCI
Minor Changes
- Modal: Allow Modal footer prop to accept either an arry or node
- Modal: Allow Modal to be rendered inside of custom DOM node instead of
<body>tag. Pass function toparentSelectorprop - it should return the container DOM node (ie.return document.querySelector('#myModalContainer');).
New Components
- Checkbox button group
- Exported SLDSSearch (
forms/input/search) in bundled package
Minor Changes
- Started using assistiveText prop object instead of individual prop strings (Datepicker). Will follow suit in other components.
- Change React.PropTypes to prop-types in preparation for React upgrade
- Added a11y html markup to Filter
- Allow devs to pass in link to Icon for external icons
Bugs
- Fixed filter but where 'ESC' didn't close popover
Minor Changes
CheckboxToggle variant added
Minor Changes
MenuPicklist: Add inline error state similar toInputInput: correct spelling and usage ofaria-labelledby
Minor Changes
- Fix focus transfer on close of "modal"
Picklist - Remove title attribute on column header if
DataTablecolumn label is not a string - Pass
iconPositionprop fromDropdownto a custom trigger - Add
onClickcallback prop toFilter - Add
DataTablewidth prop to column header - Add
classNameprop toFilter
Minor Changes
Datepickerhas adateDisabledcallback to allow disabling of arbitary dates.Filterhas apopoverprop that allows custom props to be passed in and allows theFilter's popover to be controlled by the developer instead of theFilter.Lookuphas an additional item compare to see if it should update its internal state. This is a temporary hack until state can be removed fromLookupand it can directly use props.- Inline icons are now v7.7.0. Version was just updated in a prior release.
- Add
DataTablewidth to table headers
Major Changes
- Filtering
Panelcomponent added with variants New, Error, and Locked.- Filters component added.
- Forward looking statement:
FilterGroupmay be broken out ofPaneland into it's own component in the future so that it can be used outside of aPanel, but was not broken out in this release due to pattern not existing outside of Panel in SLDS.
MAINTENANCE
- Reference of
undefinedvariable inTabsremoved.
Major Changes
BreadCrumbcomponent is nowBreadcrumbwith a backwards compatible alias.- ElementS are now allowed within Tab's
labelprop. DataTable- Markup updates to SLDS 2.2.1
- If you are using
idattributes, to query the DOM (tsk, tsk), theids have changed format. DataTableis now bordered by default. This is a visual breaking change, but will not be considered one for semver, due to SLDS's change to bordered tables being the default style.- Advanced/Fixed Table supports "title" attribute for truncated cells
DataTableColumnlabelcan be a node.DataTablecolumn sort arrow issues resolved, including ARIA issues.
- Icons are now v7.7.0.
- Added
closeButtonAssistiveTextto Modal for i18n
MAINTENANCE
- Documentation build out now occurs on all pull requests to catch issue sooner.
- Internal components use ES6's
export default. Public components were not affected, but will be moved ES6'sexport defaultin the future. - ESlint issues reduced to less than 300.
- Added Greenkeeper for dependency management
Major Changes
- Added Navigation component
Minor Changes
- Markup updates to Modal, Button, Card, Input, and Page Header
- Documentation site updates. No production code changes in this release.
MAJOR CHANGES
- Datepicker updates
classNamenow is added to the node withslds-datepickerclass within the dialog. UsetriggerClassNamefor the outer wrappingdiv. [BREAKING CHANGE]onChange(formerly onDateChange) now provides callback with event and a data object in the shape:{date: [Date object], formattedDate: [string], timezoneOffset: [number]}- Many new props and features: calendar alignment, assistive text props, accepts custom input, supports ISO weekday (Monday first), new props to allow calendar to be controlled (onClose, onOpen, onRequestClose, onRequestOpen),
portalMountprop for testing React root nodes, more alignment with other menu/dialog components - Additional accessiblity and testing
- See Date Picker documentation for fullset of changes
idon GlobalNav Link move to list item instead ofa[BREAKING CHANGE]- In Button,
aria-*props now use hyphen instead of camelCase. Usearia-expandedand notariaExpanded. [BREAKING CHANGE]
MINOR CHANGES
- Picklist bugfix where the value might be available before the options object is. This would make the active item index be incorrect.
- Fix sort arrow bug in DataTable. Only one column can be actively sorted at a time. Column heading padding has also been updated.
- Add
disabledprop to Lookup. - Popover's
onRequestCloseandonClosenow fire once when Dialog component closes. - Popover spacing from target/trigger is correct.
checkProp'soneOfComponentparsesdisplayNameproperly
MINOR CHANGES
- Add icon/figure support to Page header (Object home variant)
- Correct dropdown trigger styling within a button group (e.g.- more button)
- Fix bug caused by DST and hours calculation in Datepicker.
DOCUMENTATION
- Moves stories into examples folder, doc site examples are now aligned with SLDS website. No production code changes in this release.
MINOR CHANGES
- React components that are really are just sub-renders and are not meant to be consumed by end-users of this project have been moved to
components/[COMPONENT_NAME]/private. Feel free to continue using components that are still incomponents/[COMPONENT_NAME]folder and consider them part of the public API. Hopefully, this adds clarity to what components can and should be used. - In order to automate more the documentation site, more components are listed in package.json and an
examplesfolder has been added to the-estagged package to be used by the doc site.
DOCUMENTATION
- Adds mention of setting
AppElementforModalandAppLauncherto component documenation, so that the entirebodyis not hidden for assistive technology users.
MINOR FEATURES
- Add
portalClassNameto Modal. - Tabs: Add scoped variant
BUG FIX
- Removed {...props} from DOM nodes in components to prevent non-valid ones from being passed on (ie.
<input myFunkyprop .. />). If users need specific props passed onto DOM nodes, please submit a Github issue. - Fix icons and alert texture in Notification
MINOR FEATURES
- Add indeterminate state support to
Checkbox. - Add indeterminate state support to selectable variant of
DataTable. - Export
InputIcon.
MINOR FEATURE
- Allow custom classes on menu list items with item object key,
classname, withinoptionsprop.
MINOR FEATURE
- App Launcher has a
modalClassNamethat will be added to theModalwhen rendered.
BUG FIX
- Tabs'
Panelchanged toTabsPanelto align with other component names.
BUG FIX
- Manages CSS imports better for ES6, CommonJS and AMD packages. Previously, CSS imports would fail if a CSS file imports were present in the ECMAScript. This will remove the CSS imports from CommonJS and AMD packages.
- Changes Tabs'
PanetoPanel - Removes prototype status from Tabs
BUG FIX
- Fixes bugs in allowing parent to control state of dropdown.
BREAKING CHANGES
- Replaces
modalwithisInlinefor all dropdown-like components.
MAJOR CHANGES
- Adds a Tabs component.
- Allow parent to control state of dropdown.
BUG FIX
- Tweaks the class names on dropdown trigger to match SLDS.
BUG FIX
- Due to deprecations in v0.3.15 of
Input'sonIconClick, anonSearchcallback has been added toSearch.
MAJOR CHANGES
- Allow icon on the left and right of inputs.
- Search can be
clearablenow with right clear icon. - Input now uses
iconRightandiconLeftand accepts anInputIconcomponent. Use ofonClickmakes it clickable. - The wrapping span has been removed from
ButtonIcon.ButtonIconis just a CSS customization ofUtilityIconnow. - Be sure to check inputs for deprecation notices.
- Remove top divider as default of
MenuDropdownlist menu heading items. - Adds
dividerkey with valuestopandbottomtoMenuDropdownoptions to allow for a divider to be added to a heading.
BUG FIX
- In App Launcher, Tile Truncate utility uses new props to prevent UI state from being out-of-sync with props.
BUG FIX
- In Picklist, pressing enter now triggers the
onClickprop - Add Dropdown wrapping
divto align with SLDS and allow menu nubbins to be positioned with default CSS. [DOM change] - Make Global Header dropdowns inline instead of "modal"
BUG FIX
- In Picklist, tabbing moves focus to the next tabbable DOM element, instead of opening the menu.
- In Dropdown, an
onCLickprop is passed down to all custom content children, so that they can close the menu.
MAJOR CHANGES
- Adds
hybridtoopenOnoptions. This allows a click to open and hover out to close in case one does not have control of the DOM outside of the navigation.
Bug Fix
- Prevent Global Nav menus from flipping up at small screen heights
Bug Fix
- Make App Launcher Tile More tooltip trigger a span tag
- Make inline input’s edit icon smaller
- Make DatePicker and TimePicker value prop the source of future state
Documentation
- Add mention of classnames library to
contributing.md - Add test coverage comments, surfacing in-browser tests
MAJOR CHANGES
- Global Navigation menus no longer are fixed to a height of
5. They're as high as their content. - Card heading can also be a node to allow full customization of a Card header
- Card control is now fully stateless to better match React patterns
Bug Fix
- Sets App Launcher modal to 90% height
- Sends correct
hrefto App Launcher Tile click callback - Corrects markup for menu separators and headers in Global Navigation
MAJOR CHANGES
- Add Tree as a prototype component. Tree is not accessible to assistive technology at this time.
- Add GlobalHeader to default library export.
Bug Fix
- Detect PageHeader detail field truncation on update instead of mount.
MAJOR CHANGES
- Add
styleandbodyClassNameprops to Card to allow overflow on Card body. - Add
lengthprop to GlobalNavigationMenuDropdown. It can be set tonullto remove scrolling.
MAJOR CHANGES - SLDSPageHeader
- Make field truncation optional.
- If field truncates, then show PopoverTooltip on hover/focus to view full field text.
Bug Fix
- Lookup component had a bug where updating the selectedItem prop did not work. Now it does. To clear the item, pass in -1.
- Focus on search input when App Launcher opens
- No longer renders a close button if modal type is prompt.
- Lookup search icon default should be on right side.
MAJOR CHANGES
- Add an AMD tag for users of Require.JS
- Makes the keyboard navigation logic less greedy
- Closes dropdown menu on second click of trigger
- Closes dropdown menu when another modal opens
- Closes dropdown menu when tabbed away from
- Opens hoverable dropdown menu on focus
- Provides a workaround for closing dropdown menus when clicking in another iframe
- Returns focus to the dropdown menu trigger when clicking escape
- Removes the default divider from the primary Global Navigation region when no secondary region is present
OTHER
- Remove SLDS media figure when no icon present in page header
- Adds a default iconPosition to Lookup
- Fixes modal Prompt heading style
MAJOR CHANGES
- Allow setting of active navigation bar item background color
OTHER
- Allows you to put the navigation bar right into the header if desired
BREAKING CHANGES
- AppLauncher now accepts a search node rather than
onSearchandsearchPlaceholderText - Popover
openByDefaulthas been replaced withisOpen
MAJOR CHANGES
- Adds special support for Global Header icons
MAJOR CHANGES
- Add
toggleableprop toAppLauncherSection - Add
GlobalNavBarLabelchild component - Make
GlobalHeadersearch to use left side icon - Correct letter spacing of
AppLauncherTilesub-heading
OTHER
- Adds 'tile' and 'section' imports to
AppLauncherfor site
MAJOR CHANGES
- Bugfixes and documentation for AppLauncher
MAJOR CHANGES
- Add Modal
headerandheaderClassNameprops to allow for custom headers
OTHER
- Update the truncation logic to account for AppLauncher's description headings
- Center AppLauncher search bar with CSS
- AppLauncher makes use of Modal's new
headerprop - Remove
idgenerator from button component (let parent generate it, if needed)
BREAKING CHANGES
- Updates the GlobalNavigationBarLink to pass
{ href }as the second parameter
MAJOR CHANGES
- Remove
trapEventfrom GlobalNavigationBarLink and replace withpreventDefaultto allow clicks to bubble up - Adds support for custom content to Global Header profile
- Cleans up the dividerPosition of Nav Region
OTHER
- Updates the icon script to lowercase names
- Makes the Nav Menu trigger use chevron icon
- Corrects check props for profile children
BREAKING CHANGES
- Changes to how the
inverseprop works for icons and removal of the default value oftrue - Button component: Inverse style of Button (white color to go on dark backgrounds) is now declared with a bool prop, inverse
- Button component:
inverseandicon-inverseare no longer supported in the variants prop
MAJOR CHANGES
- Add support for custom svg icons
- Update Icon to the latest markup
- Update Tooltip to the latest markup
- Allow custom styles to be passed to icons
OTHER
- Allow menus and buttons used in the Global Nav Bar to be marked as active
- Animates the App Launcher icon based on the latest SLDS markup
- Button component: when button icon had an iconVariant prop, the iconSize prop did not render. It is now fixed
- Timepicker wasn't working correctly after the menu updates in 0.1.1. It is now fixed
- Update the logo used in the Global Header story
MAJOR CHANGES
- Add the App Launcher component
- Add support for the title attribute for icons
OTHER
- Additional code cleanup
MAJOR CHANGES
- Add support for icons, headers, links, and dividers to Dropdown and Picklist menus
- Add support for custom content in Dropdown menus
- Update Lookup to the latest markup
- Update Picklist to the latest markup
OTHER
- Add name attributes to Checkbox and Input
- Add Button support to Global Navigation Bar
- Update the keyboard navigation logic used by menus
- Update profile icon used in the Global Header
BREAKING CHANGES
- Rename ContextBar to GlobalNavigationBar
MAJOR CHANGES
- Add the Global Header component
- Add a Search component
- Update BreadCrumb to the latest markup
- Update PageHeader to the latest markup
OTHER
- Begin counting versions from 0.1.0
- Add buffered option to DataTable
MAJOR CHANGES
- Reversed Flippable prop due to bug with Tether.js
- Use Popover component in Datepicker
- Add required and disabled props to Datepicker and Timepicker
BREAKING CHANGES
- Flippable prop on Timepicker and Datepicker used to default to true. Now, it defaults to false and you must explicitly add it.
MAJOR CHANGES
- Added new InlineEdit component
- Clickable Input icons now use Button
OTHER
- Remove unused Popover class on Picklist
- Additional code cleanup
- Added containerClassName prop to Spinner
MAJOR CHANGES
- Added new Spinner component
- Updated the ContextBar component
- Added a highlighting utility
- Added a custom cell type to DataTable using the highlighter
OTHER
- Remove isRequired for iconCategory in ButtonGroup
- Additional bug fixes and code cleanup
MAJOR CHANGES
- New release process
SITE AND DOCS
- Moved site to external repo
MAJOR CHANGES
- New Components:
- SLDSBreadCrumb
- SLDSDataTable
- SLDSGrid
- SLDSPageHeader
- Lookup component no longer requires icons for menu items
MAJOR CHANGES
- SLDSIcons.Icon refactored to SLDSIcon
- Picklist renamed to PicklistBase
- Dropdown renamed to DropdownBase
SITE AND DOCS
- New Getting Started and FAQ pages
OTHER
- custom_renderer code moved into demo/code_snippets
- new tests
- a multitude of bug fixes and TLC