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
'sonChange
now receivesevent, { checked: [boolean], indeterminate: [boolean] }
. Previously,checked
was the first parameter.TabsPane
has been replaced withTabsPanel
.Input
's props:iconPosition
,iconAssistiveText
,iconCategory
,iconName
,onIconClick
are deprecated. AnIcon
component should be used instead.DataTable
'scollection
,onSelect
,onDeselect
are deprecated.- Remove
openByDefault
fromPopoverTooltip
. - 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 now 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]}
.
Bugfixes
Carousel
:Button
import path was incorrect. Resulting in aError: Can't resolve '../../../../components/button'
message
Maintainance
Carousel
: AddisPrototype
warningDropdown
: AddsunsetProperty
fortooltip
prop
It has been more than a year since the release of React 16. With the release of v0.10, React 16.3 or later is required to consume this library. Features are present in the library now that are React v16 only.
Major Features
Carousel
: In addition, to the SLDS one-panel blueprint. This component adds a non-SLDS three-item panel option for use on product home pages to aid in user on-boarding.Combobox
: Adds Dialog variant. This allows “custom menus” such as checkboxes and other form elements to determine the input value.Popover
: Walkthrough and Walkthrough Action variants were added. Along with this, Popover now allows custom targets which is helpful in feature highlighting and other user engagement stories. UseonRequestTargetElement
to set a custom target.- `GlobalHeader``: Align markup and latest UX pattern to SLDS
- Remove all caps text from all components
- Progress Indicator: Add vertical orientation
Minor Features
Tooltip
: Add dialogclassName
propButton
: Addoutline-brand
variantAvatar
: Addinverse
variantCard
: AddhasNoHeader
prop to remove headerPillContainer
: Return null if options is emptySpinner
: AddsisDelayed
prop to component
Bugfixes
Combobox
: Cancel mouseDown bubble from listbox div tag in order to help not trigger onBlur when uses clicks menu scrollbarPopover
: Change ARIA role todialog
ButtonStateful
: Use prevState to update state in componentInput
: Remove always true condition, 'props.hasSpinner'Input
: Update error icon from warning icon to error iconTree
: Adds unneededaria-hidden=true
to closer align with SLDS markupPopover
: Change ARIArole
todialog
ProgressRing
: Fixe examples pageAppLauncher
: Fixes arrow direction in Sections
Maintainance
- Require React >16.3
- Add snapshot update npm command
Toast
: Use role='status'- Add instructions to set up LDSR with Create React App 2.x
- Removed propTypes which are not used from different components
Modal
: Replacedismissible
withdisableClose
inButton
: Fix assistive text in small icon hint inverse exampleAlert
: Add ability for example to closeCombobox
: UpdatemenuItem
toonRenderMenuItem
Vertical Navigation
: Removeshade
variant- Move storyshot DOM snapshots to individual files
- Remove unused variables from tests
- Support React fragment syntax
- Update to SLDS 2.8.x
- Improve docs for codebase-overview.md and CONTRIBUTING.md
Button
Examples: Update function call for "Outline brand button" storyGlobalNavigationBar
: Remove overlapping items from exampleLookup
: Add visual deprecation heading to component
It has been more than a year since the release of React 16. With the release of v0.10, React 16.3 or later is required to consume this library. Features are present in the library now that are React v16 only.
Major Features
Carousel
: In addition, to the SLDS one-panel blueprint. This component adds a non-SLDS three-item panel option for use on product home pages to aid in user on-boarding.Combobox
: Adds Dialog variant. This allows “custom menus” such as checkboxes and other form elements to determine the input value.Popover
: Walkthrough and Walkthrough Action variants were added. Along with this, Popover now allows custom targets which is helpful in feature highlighting and other user engagement stories. UseonRequestTargetElement
to set a custom target.- `GlobalHeader``: Align markup and latest UX pattern to SLDS
- Remove all caps text from all components
ProgressIndicator
: Add vertical orientation
Minor Features
Tooltip
: Add dialogclassName
propButton
: Addoutline-brand
variantAvatar
: Addinverse
variantCard
: AddhasNoHeader
prop to remove headerPillContainer
: Return null if options is emptySpinner
: AddsisDelayed
prop to component
Bugfixes
Combobox
: Cancel mouseDown bubble from listbox div tag in order to help not trigger onBlur when uses clicks menu scrollbarPopover
: Change ARIA role todialog
ButtonStateful
: Use prevState to update state in componentInput
: Remove always true condition, 'props.hasSpinner'Input
: Update error icon from warning icon to error iconTree
: Adds unneededaria-hidden=true
to closer align with SLDS markupPopover
: Change ARIArole
todialog
ProgressRing
: Fixe examples pageAppLauncher
: Fixes arrow direction in Sections
Maintainance
- Require React >16.3
- Add snapshot update npm command
Toast
: Use role='status'- Add instructions to set up LDSR with Create React App 2.x
- Removed propTypes which are not used from different components
Modal
: Replacedismissible
withdisableClose
inButton
: Fix assistive text in small icon hint inverse exampleAlert
: Add ability for example to closeCombobox
: UpdatemenuItem
toonRenderMenuItem
Vertical Navigation
: Removeshade
variant- Move storyshot DOM snapshots to individual files
- Remove unused variables from tests
- Support React fragment syntax
- Update to SLDS 2.8.x
- Improve docs for codebase-overview.md and CONTRIBUTING.md
Button
Examples: Update function call for "Outline brand button" storyGlobalNavigationBar
: Remove overlapping items from exampleLookup
: Add visual deprecation heading to component
Minor Features
Popover
: Adderror
andwarning
variantsDataTable
: AddisDefaultSortDescending
prop to allow descending as first time sort directionCombobox
: Adddisabled
prop to readonly and inline-listbox variantsPillContainer
: Return null if options is emptyInput
: AddautoComplete
prop. (Newer versions of Chrome browser ignoreautocomplete="off"
).Combobox
: AddInput
prop on in order to expose allInput
props withinCombobox
Bugfixes
BrandBand
: Lightning Theme Fix - Styles were intermittently applied beforeDataTable
: Add missing top gray border to fixed header tablesIconSettings
: Add additional inheritance of context foroverflowBoundaryElement
Dialog position which uses portals.Input
: Update error icon from warning icon to error iconInput
: PreventPropTypes
warning informs/private/label
whenlabel
prop contains a Reactnode
Maintainance
- Update Brand Band documentation: Depending on your server settings, you may get this error due to stye injection and may want to directly add styles to your CSS file.
- Update
README.md
to run install command in right directory - Datepicker: Clarify MomentJS usage in props/docs
- Add ESLINT skipBlankLines/skipComments max lines rule
- Combobox: Give each Storybook example a unique ID
- Define pull request expectations in more detail
- Document how to release a tag on a fork
- Add how to release a tag to 1st time PR bot
- Correct Typos in Contributor's Guidelines
- Improve docs for codebase-overview.md and CONTRIBUTING.md
- Remove non-breaking text from Tooltip Storybook examples
- Contributing docs: Add mention of adding new components to
package.json
Minor Features
- Combobox: Allow disabled menu items and disabled menu items with Tooltips
- Input: Add
styleContainer
prop - ProgressIndicator:
tooltipPosition
prop added to allow additional positioning logic - Dropdown:
length
prop now allows numbers
Bugfixes
- BrandBand: Lightning Theme CSS injection was intermittantly working.
- Dropdown: Adds
aria-checked
and role="menuitemcheckbox" for selectable menus with checkmarks
Maintainance
- Warnings removed from snapshot tests and 404s from browser Mocha tests. "CI is now prettier."
- Add first time contributor survey to allow additional feedback to library maintainers.
- Imports additional examples from doc site examples that did not exist in Storybook
Minor Features
PageHeader
: Allow actions in Base variant with support ofnavRight
Combobox
: Add field-level tooltip withfieldLevelHelpTooltip
prop oninput
prop. DeprecateCombobox
'sassistiveText.fieldLevelHelpButton
in favor of usinginput
prop's prop. See #1689 for more details. You will see a console warning if you are doing it wrong.Tooltip
: RequireonClickTrigger
for learn more pattern- If
learnMore
Tooltip variant is used withoutonClickTrigger
, then the “no click” basic info icon tooltip will be used with a “disabled” button. - If
onClickTrigger
is defined, a link will be rendered (this is the current behavior for learn more tooltips).
- If
- Add
AppLauncher
Tile
andSection
components to main module export to allow use in CommonJS build.
Bugfixes
DataTable
: A UX pattern of Radio Group / Single Select with a Fixed Header works now.
Documentation
Combobox
: Site examples now have unique id's- Re-organize Codebase Overview
- Add maximum lines in a file lint rule of 500
Bugfixes
DataTable
: Adds event listeners to listen for window resize by default. This creates a behavior that truncates horizontal cells and is similar to how aDataTable
on the Salesforce Platform works.
Major Features
DataTable
supports fixed headers and this allows the table headings to be visible while the table vertically scrolls.
Notes
- Tree
nodes
are now compared with nodeid
key instead of object compare when using keyboard events - Testing suite runs on Windows now to enable contributions from Windows users. Use
git-bash
, please--no Powershell.
Major Features
- Pill Container: Add Listbox of Pill Options component. Previously
Pill
components used in a group were not accessible. This component creates a pillbox or group option. IsoloatedPill
component is still present, but should not be used for user input/selection. - Input Counter: Add Counter Example. This is useful for number input.
Minor Features
- Combobox (Read-Only / Picklist): Add "press a letter to scroll to an option" (similar to HTML
select
behavior) - Combobox (Read-Only / Picklist): Add auto-scroll behavior on keyboard menu item selection (similar to HTML
select
behavior) - Combobox filter): Make combobox filtering more performant by not creating RegExp in a loop
- Combobox (filter): Remove selected options based on
option.id
only - Input Counter: Disable increment/decrement buttons when min/max is hit
- Datepicker: Add
input
render prop for Input customization
Bugfixes
- Tree: Compare cached flattened nodes with id key
- Illustration: Remove
<title>
- Input:
inlineHelpText
can benode
as well asstring
proptype update. - Combobox/PillContainer: Pill aria-selected state is always true
- Combobox/PillContainer: Tab propagation bug introduced with menu letter jump feature
- DataTable: Update
stackedHorizontal
class name - Tooltip: Do not console error
isTriggerTabbable
if no children of tooltip. - Toast: Clear duration timeout in
componentWillUnmount()
to avoid memory leaks - DataTable: Generates row
id
if none is present
Maintenance
- Contributor Productivity: Enable test suite on Windows and run tests concurrently by default. This update allows entire testing suite (500+ browser tests, 320+ snapshot DOM/images, prop comment validation, Prettier style, ESlint code quality) to run in less than 2 minute on most machines. This pull request also aligns npm script names. Please use
npm run
to view new names. - Contributor Productivity: Replace PhantomJS with Headless Chrome (also speeds up browser tests slightly)
Major Features
- Update CSS class names so that they align with the modified-BEM structure that Salesforce Lightning Design System switched to in June 2017. These changes are were promised to be backwards compatible for 18 months.** . (In short, the
className
contains--
instead of_
now).
Minor Features
- Input: Add
styleInput
prop - Radio: Add
ref
,data
attribute, andclassName
props - Toast: Add
style
prop - Alert: Add
style
prop - Tooltip: Align "learn more" variant with SLDS
- Allow SLDS Token import for inline styles
- Allow Storybook (
npm start
) on Windows 10 - Vertical Navigation: Update SLDS markup/classes
Bugfixes
- Popover (all dialogs): Prevent scroll to bottom on focus in dialogs
- DataTable: Update
stackedHorizontal
class name - Dialog: Remove isNaN gaurds since ‘inherit’ is not a number
- Page header: Details not truncating
- Page header: Align Media Objects and header text
- Adding missing
docs.json
to some components
Maintenance and Documentation
- Clarify new component contribution section
- Convert
createReactClass
components to ES6 Classes - Move keyboard navigate mixin into picklist (deprecated)
- Remove some unneeded dependencies
- Fix typo in
Spinner
example - Update prettier CI command to fail on style issues
- Fix lint errors
Major Features
- Adds Color Picker
This version reverts CSS class changes in 0.8.26 that align with the modified-BEM structure that Salesforce Lightning Design System switched to in June 2017. These changes are were promised to be backwards compatible for 18 months.** .
Please use the upcoming 0.9.x for components that use the modified BEM (that is the className
contains --
instead of _
).
Bugfixes
-
Fixes DataTable fixed layout width prop issue
-
Do not dismiss combobox lookup menu when clicking on menu scrollbar
Minor Features
- Adds additional helpful instruction for the pr template
Maintenance
-
Converts Dropdown to ES6 class
-
Removes find dom node from Dropdown
-
Creates local ESLint plugin and rule to disallow double-dash (
--
) modifier class names -
Makes eslint plugin for SLDS external
-
Removes Mocha console errors
Minor Features
onRequestIconPath
added toIconSettings
to allow developers to return a custom icon path--for instance, on the same page with a local anchor (#down
). This is helpful for when there are Cross-Origin Resource Sharing (CORS) issues with SVGs that are located on another domain such as a CDN.
Bugfixes
- Brand Band not exported in CJS/ESM packages
Bugfixes
- Missing
docs.json
for each component added to build. Component meta data is now stored with each component folder indocs.json
. This library's release script was not copying the new file which makes all components imports fail.
Do not use 0.8.23.
Major Features
- Adds new
BrandBrand
component
Minor Features
- Adds new
style
prop toButton
component - Allows passing node as avatar in
GlobalHeaderProfile
Bugfixes
- Fixes popper position when its props update in
Dialog
components - Replaces
Tooltip
withPopoverTooltip
internally
Maintenance
- Removes
prettier-eslint
- Allows linking to doc site from dev console warning messages
- Improves instructions on adding a new component to DSR
Bugfixes
- Fixes v0.8.21 CommonJS/ES6 module versions of this library which had an undefined error that is a high priority blocker. See 0.8.21 release tag for more details on the bug.
- DataTable's
onChange
replaced withonRowChange
.onChange
's parameters are(selectedArrayOfItems, event)
.onRowChange
standardizes the parameters with the rest of the library withevent, { selection:[array] }
.
Minor Features
- Input: Add Field Level Help and Inline Help variants
- Icon: Add Warning, error, light color options
- Modal: Add additional warning when
Settings.setAppElement
is not set. - AppLauncher: Add to CommonJS and ES6 module library export
- Add Spinner to doc site
Bugfixes
- Progress Indicator: Improved assistive tech user experience
- DatePicker: Fixing issue where year picker doesn't show years correctly
- GlobalHeaderButton: Invalid markup fixed when used within GlobalHeaderTrigger
- Tree: Allow label to be a React node (more lenient proptypes)
- Positioning behavior of Dialog components that use nubbins has changed. This applies to
Popover
,Tooltip
,Datepicker
,Dropdown
. Previously the nubbin would be misaligned due to hardcoded margins that would get added onto the dialog component. It will now instead calculate the offsets and include them in the positioning logic and add/subtract from the left and top. - Dialogs that use nubbins would previously have the nubbins point at the location on the reference trigger component (i.e.
Button
). Details:- If a Popover had an align of
top left
, that meant the nubbin would point at the top left hand side of theButton
. - The behavior now is that the nubbin will always position the Dialog element as needed to ensure it points at the center of the desired side.
- In the case of a
top left
align the left will only designate the location of the nubbin on the Dialog. - We may decide to bring back the ability to control both the nubbin location on the Dialog, but also the location at which it points to on the reference element. Much of the logic surrounding nubbins has been broken at the seams and edge cases for a long time. This change has been done in order to provide a more robust and dependable solution.
- Any dialog that uses an
offset
prop will need to be manually readjusted. - Deprecate
offset
prop forDropdown
andPopover
. The manual setting of positional offset of dialog components has been deemed unreliable. Position logic has been re-written to deliver better and more reliable positioning. Please create an issue if you have an edge case not covered by the built-in logic.
- If a Popover had an align of
Maintenance and documenation
- Move
Navigation
toVerticalNavigation
to align with SLDS. - Dropdown: Document that default menu height is 5
- Datepicker: Increase default years, 5 to 10 years
- Add warnings to
bread-crumb
,forms/input
,forms/radio
,forms/textarea
,navigation
,popover-tooltip
to show that they have been moved. Warning only occurs when using source code filesimport [COMPONENT] from
design-system-react/components/[COMPONENT]` - Modal: Deprecate rarely used Trigger Portal found at
/components/modal/trigger
- Combobox: Clarify prop docs
- Update react-doc-gen version
- Tree: Move to one render function and proptype object per file
- Add url-slug to package.json components, Makes prompt easier to find
- Update SLDS site URLs for doc site
- Add NPM babel preset
package.json
- Prefer object spread instead of
object.assign
eslint rule - Revert to
npm install
fromnpm ci
due to TravisCI issues
Bugfixes
- Fix bug in
Dropdown
component where getIndexByValue() needs to look at nextProps.options when componentWillreceiveProps() is called. - Datepicker: Make year Combobox menu width match the width of its input/button.
Maintenance
- Documentation update on how to use Design System React within Create React App.
- Consolidate assistiveText props under one object for the following:
DataTable
,Icon
,Search
,PanelFilterGroup
,Spinner
,Tree
,TextArea
.
Major Features
- Add Illustration Component
Bugfixes
- Make
Slider
a controlled component. Usevalue
andonChange
props. Combobox
: Allow PopperJS to position menu correctly when menu hits the screen or overflow ancestor boundary.- Update
Tree
branch and item to use latest SLDS HTML tags - Update
Alert
error icon
Maintenance
- Add
getting-started.md
to NPM module - Document copying over SLDS fonts to public for Create React App
- Update
Radio
component examples - Remove
Object.assign()
from codebase and replace with spread - Consolidate
assistiveText
props under one object. This is going to deprecate many props, but will make props more consistent across all the components.AppLauncherSection
Avatar
Breadcrumb
ButtonStateful
Button
GlobalHeader
GlobalNavigationBarDropdown
Bugfixes
Icon
uses new values forname
andcategory
when changed.- Fixes console error that appears when using keyboard navigation to navigate the tree.
Maintenance
url-exists
utility usesfetch
instead ofxmlHttpRequest
.
Bugfixes
- REVERT Change inline edit for accessibility. It will not be updated. There is a new View/Edit Record Input pattern that uses the Docked Former Footer component and this should be used instead of the Inline Edit Input in the future.
Minor features
dropdown
prop added toDataTableRowActions
to increase customization of the dropdown menutabIndex
added toMenuDropdown
componentPicklist
has been removed from examples. Please use a Combobox instead.
Deprecation
TL:DR; If you use the source code directly, update your form component paths and the parameters in onChange
. All others stay the same for now.
- Moves
Input
,Checkbox
, andTextarea
out ofcomponent/forms
and directly intocomponent/
. Old paths such ascomponent/forms/input
will still work, but include a console warning as deprecated. components/input
,components/checkbox
, andcomponents/textarea
pass different parameters into theonChange
callback.onChange
now passes inevent, { checked }
if the new paths are used. The parameters used to bechecked, event, { checked }
. If you use the new paths such ascomponents/input
, please update your parameter variables. This aligns the callback's parameters with the rest of the library's callback functions.- If you consume the library with named imports
{[component]} from '@salesforce/design-system-react'
, you will recieve the warning and will need to use the old parameter order until the next breaking change. - For more information, please review #1350.
Minor features
- Update
Tree
example to be hashmap in order to promote immutability. Please reviewTree
example on documentation site in order to understand flattened tree data. - Add
tabIndex
prop toMenuDropdown
- Update SLDS version to 2.6.0 and test
Bug fix
- Dialog components such as Dropdown when used with
menuPosition='overflowBoundaryElement'
now respectmax-width
instead of inherited children width - Remove duplicate logo in
GlobalHeader
Maintenance
- Upgrade Babel to v7 and Jest to v23
Documentation
- Remove deprecated Picklist from code base and examples
Modals are now at z-index: 8000
. If there are items on the main page with a higher z-index
, they will appear in front of the modal. This setting aligns with the prescribed z-index in SLDS for $z-index-overlay
.
Require iconCategory
if iconName
is set. utility
used to be the default icon category. iconCategory
is now required.
Major features
@salesforce/design-system-react/module
now contains tree-shaking compatible ES6 modules (Tested with Webpack 4). This should work out of the box (due topackage.json
'smodule
field) and replace CommonJS module usage in Webpack 3 and 4. See pull request for more details.- Tree is now a production component and supports single selection keyboard navigation.
Minor features
- DataTable: Align header markup with SLDS to fix alignment issues. Remove error for non-boolean attribute
focusable
. - Upgrade React Modal to 3.4.4. This is a dependency of
Modal
. - Modal: Adds
assistiveText.dialogLabel
to define modal label when there is no header. - DataTable: Adds
noHint
prop to actions and makes hints an optional field.
Bug fix
- Request icons (console warning) with HTTP GET, so Create React App's webpack dev server doesn't 404
- Modal no longer jumps to 50% of page.
- Documentation: Align button group example on site with SLDS example
- Documentation site examples are more accessible (Page Headers and Stateful Buttons)
- Datepicker: Change the year picklist initial focus to currently selected year
- Datepicker: Focus input only if menu was previously open and not just requested to close
- Inline Edit UX pattern updated for keyboard: New pattern is that it'll tab to the close button, and if you're focused on the close button and tab again, it'll blur the field.
Dropdown
withoverflowBoundaryElement
andalign=right
use max-width instead of inherited children width.
Maintenance
- Require
iconCategory
ificonName
is set.utility
used to be the default icon category.iconCategory
is now required. - App Launcher -
assistiveText
is now an object with keys. Please update your component props. - Popover -
assistiveText
is now an object with keys. Please update your component props. - Modal -
assistiveText
is now an object with keys. Please update your component props. - NPM scripts update: “build-storybook" -> static:build, “build-storybook-for-tests” -> storyshots:build, “storybook” -> static:start
- Switch
xml2json
toxml2js
in tooling to make more compatible with Windows
Adds new script storyshots:start that allows interactive viewing of what is being tested with image snapshots to allow debugging.
Minor features
- Tooltip: "Learn more" variant added. Deprecation notice added for
variant: info || error
. Please usetheme
prop going forward instead.
Bug fix
- Data Table: Remove console warning when DataTableColumn
sortable
istrue
. - Combobox: Trigger onOpen callback when menu opens
- Datepicker: Focus input if menu was actually open and not just requested to close
Major features
- Add SLDS Slider
Minor features
- Allow importing Lookup [deprecated] subcomponents in CommonJS modules
Minor features
- Affix position of Dialogs with
hasStaticAlignment
prop. Allows greater control of Tooltip, Popover, and dialog components. - Set Datepicker's initial year dropdown menu highlight selection to current selected date.
Minor features
- Allow
input
label of combobox to show as required - Input, Checkbox, and Radio support initial state (uncontrolled) in order to support applications with server-side form submission that are transitioning to atomic state.
Maintenance
- Lint warnings from a third-party package have been removed from CI tests.
Documentation
- Prop doc typos:
- replaced rendered input block to code block
- fixed broken link to source of Inline Edit Inputs
Minor features
- Combobox supports error messages.
Outside SLDS pattern added
- Multiple selection Combobox error messages should be placed after pillboxes with an additional
slds-has-error
wrapping div.
Maintenance
- Update Dropdown Menu children description
- Update SLDS peer dependency to allow 2.6.0-alphas
- Remove plus-plus (
var++
) instances from library for clarity
Notice
package.module
has been removed from the NPM module until a transpiled ES6 module build can be published to support it. The current package.module
is considered broken already for Create React Apps--for instance, so this is not considered a breaking change. Your module bundler will just use the CommonJS build unless you are already transpiling the source code, so no changes should be need to be made.
Minor features
- Combobox menu supports subheadings and line separators.
Outside SLDS pattern added
- UX pattern created for Combobox autocomplete that limits subheadings to those that have "child" matching items.
Bugfix
- Export
canUseDOM
correctly to enable focus trap. This bug is present in>=0.8.0
versions. Upgrading to0.8.8
is recommended forPopover
and other components to be accessible.
Maintenance
- Replace Airbnb shape props with 1PropTypes.shape1
- Add Prettier linting to JSON, Add JSON parser plugin to eslint
- Converts
package.json
to tabs - Troubleshoots
npm run lint:fix
- Implement Import first ESlint rule to increase code consistency
Documentatation
- Add missing documentation site component descriptions
- Document child nodes of
IconSettings
- Update
Modal
footer prop description
Bugfix
- Revert Modal CSS class
slds-fade-in-open
Maintenance
- Add NPM package-lock
- Clarify lint scripts
- Kabob-case filename check
- Fix typos in webpack docs
- Remove JSX curly braces when not needed
- Add Trailing comma to iterables
- Updates dev node engine version to 8.x
Major features
- Add automated image and DOM snapshots with story-based automatic unit test creation
Bugfix
- Remove MenuDropdown console error
Maintenance
- Run React codemod transform component to ES6 classes
- Improve dev experience by removing pre-commit hooks, loosening ESlint rules until issues can be fixed, audit and add clarity to npm tasks, adding clarity to test scripts
Major features
- Add
SplitView
component
Bugfix
- Remove timeout/setState warning on
Modal
- Polyfill
Combobox
withlodash.findIndex
- Fix getDefaultProps warning in
Tree
Maintenance
- Add Babel preset
Bugfix
Icon
not present in NPM module due to gitignore's EMACS settings.
Bugfix
- Fix Lookup due to
Dialog
upgrade to PopperJS.
Maintenance
- Update Babel settings and publish to NPM.
Major features
- Add Pill Component
Bugfix
- Removed
setState
call when handling click to setactive
property. This was causing somesetState
issues on when unmountingButton
. - Add
title
attribute to truncatedTree
nodes
Maintenance
- Introduction of
npm run format
command 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
menuItem
prop 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.
isSorted
andsortDirection
are 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
li
tag.
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
forceUpdate
from Tree example - Update Modal examples
- Add
parentSelector
use description to Modal - Add HTML avatar snapshots
- Fix combobox example use of
placeholderReadOnly
- Allow inline icons and
icon
prop data passed directly in to work properly again. - Rename internal constant bugs having to do with component names
- Pass
assistiveText
from MenuDropdown to trigger button - Replace
classname
withclassnameContainer
on 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.js
bundle. An additional bundle has been addeddesign-system-react-components.js
without 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/icons
OR 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.exports
have been removed. - Some initial compatibility testing with React 16 has been completed, but library is not fully tested.
- Added
type="button"
toButton
as default (markup change). - Added SLDS Avatar
- Lookup Prop
- Added new props isOpen, onRequestOpen, and onRequestClose to Lookup.
- Dropdown Prop
- Added new prop
disabled
to Menu Item which gets passed toaria-disabled
onrole="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
onFocus
callback - Notification: Add icon category prop
Bugfix Changes
- Update Webpack loader for Tab CSS
- Notification:
ref
to 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
displayName
instead of type/function compare.
Bugfix Changes
- DataTable: Change child component validation to use
displayName
instead 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
node
in 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 toparentSelector
prop - 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
Checkbox
Toggle variant added
Minor Changes
MenuPicklist
: Add inline error state similar toInput
Input
: correct spelling and usage ofaria-labelledby
Minor Changes
- Fix focus transfer on close of "modal"
Picklist
- Remove title attribute on column header if
DataTable
column label is not a string - Pass
iconPosition
prop fromDropdown
to a custom trigger - Add
onClick
callback prop toFilter
- Add
DataTable
width prop to column header - Add
className
prop toFilter
Minor Changes
Datepicker
has adateDisabled
callback to allow disabling of arbitrary dates.Filter
has apopover
prop that allows custom props to be passed in and allows theFilter
's popover to be controlled by the developer instead of theFilter
.Lookup
has an additional item compare to see if it should update its internal state. This is a temporary hack until state can be removed fromLookup
and it can directly use props.- Inline icons are now v7.7.0. Version was just updated in a prior release.
- Add
DataTable
width to table headers
Major Changes
- Filtering
Panel
component added with variants New, Error, and Locked.- Filters component added.
- Forward looking statement:
FilterGroup
may be broken out ofPanel
and 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
undefined
variable inTabs
removed.
Major Changes
BreadCrumb
component is nowBreadcrumb
with a backwards compatible alias.- ElementS are now allowed within Tab's
label
prop. DataTable
- Markup updates to SLDS 2.2.1
- If you are using
id
attributes, to query the DOM (tsk, tsk), theid
s have changed format. DataTable
is 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
DataTable
Columnlabel
can be a node.DataTable
column sort arrow issues resolved, including ARIA issues.
- Icons are now v7.7.0.
- Added
closeButtonAssistiveText
to 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 default
in 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
className
now is added to the node withslds-datepicker
class within the dialog. UsetriggerClassName
for 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),
portalMount
prop for testing React root nodes, more alignment with other menu/dialog components - Additional accessiblity and testing
- See Date Picker documentation for full set of changes
id
on GlobalNav Link move to list item instead ofa
[BREAKING CHANGE]- In Button,
aria-*
props now use hyphen instead of camelCase. Usearia-expanded
and 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
disabled
prop to Lookup. - Popover's
onRequestClose
andonClose
now fire once when Dialog component closes. - Popover spacing from target/trigger is correct.
checkProp
'soneOfComponent
parsesdisplayName
properly
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
examples
folder has been added to the-es
tagged package to be used by the doc site.
DOCUMENTATION
- Adds mention of setting
AppElement
forModal
andAppLauncher
to component documentation, so that the entirebody
is not hidden for assistive technology users.
MINOR FEATURES
- Add
portalClassName
to 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
, withinoptions
prop.
MINOR FEATURE
- App Launcher has a
modalClassName
that will be added to theModal
when rendered.
BUG FIX
- Tabs'
Panel
changed toTabsPanel
to 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'
Pane
toPanel
- Removes prototype status from Tabs
BUG FIX
- Fixes bugs in allowing parent to control state of dropdown.
BREAKING CHANGES
- Replaces
modal
withisInline
for 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
, anonSearch
callback has been added toSearch
.
MAJOR CHANGES
- Allow icon on the left and right of inputs.
- Search can be
clearable
now with right clear icon. - Input now uses
iconRight
andiconLeft
and accepts anInputIcon
component. Use ofonClick
makes it clickable. - The wrapping span has been removed from
ButtonIcon
.ButtonIcon
is just a CSS customization ofUtilityIcon
now. - Be sure to check inputs for deprecation notices.
- Remove top divider as default of
MenuDropdown
list menu heading items. - Adds
divider
key with valuestop
andbottom
toMenuDropdown
options 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
onClick
prop - Add Dropdown wrapping
div
to 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
onCLick
prop is passed down to all custom content children, so that they can close the menu.
MAJOR CHANGES
- Adds
hybrid
toopenOn
options. 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
href
to 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
style
andbodyClassName
props to Card to allow overflow on Card body. - Add
length
prop to GlobalNavigationMenuDropdown. It can be set tonull
to 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
onSearch
andsearchPlaceholderText
- Popover
openByDefault
has been replaced withisOpen
MAJOR CHANGES
- Adds special support for Global Header icons
MAJOR CHANGES
- Add
toggleable
prop toAppLauncherSection
- Add
GlobalNavBarLabel
child component - Make
GlobalHeader
search to use left side icon - Correct letter spacing of
AppLauncherTile
sub-heading
OTHER
- Adds 'tile' and 'section' imports to
AppLauncher
for site
MAJOR CHANGES
- Bugfixes and documentation for AppLauncher
MAJOR CHANGES
- Add Modal
header
andheaderClassName
props 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
header
prop - Remove
id
generator from button component (let parent generate it, if needed)
BREAKING CHANGES
- Updates the GlobalNavigationBarLink to pass
{ href }
as the second parameter
MAJOR CHANGES
- Remove
trapEvent
from GlobalNavigationBarLink and replace withpreventDefault
to 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
inverse
prop 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:
inverse
andicon-inverse
are 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