design-system-react

Release 0.9.4

Minor Features

• PageHeader: Allow actions in Base variant with support of navRight
• Combobox: Add field-level tooltip with fieldLevelHelpTooltip prop on input prop. Deprecate Combobox's assistiveText.fieldLevelHelpButton in favor of using input prop's prop. See #1689 for more details. You will see a console warning if you are doing it wrong.
• Tooltip: Require onClickTrigger for learn more pattern
  • If learnMore Tooltip variant is used without onClickTrigger, 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).
• Add AppLauncher Tile and Section 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

Release 0.9.3

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 a DataTable on the Salesforce Platform works. Additional props onFixedHeaderResize and onToggleFixedHeaderListeners are useful if you'd like to attach the resize/realign event to something besides the window/document which is the default. Adding widths to the columns with props will make the table start scrolling to the right and hide information (“overflow-x:hidden”)--so it’s an all widths or no widths solution. No widths, will make the column headers optional truncate based on the browser decided HTML table column width (and this is what you see in the examples).

Release 0.9.2

Major Features

• DataTable supports fixed headers and this allows the table headings to be visible while the table vertically scrolls.
• DataTable has a required single select (Radio Group) pattern. selectRows specifies a row selection UX pattern. checkbox: Multiple row selection. radio: Required single row selection.

Release 0.8.30

BugFixes

• Brings in Color Picker accessiblility fixes from master branch

Release 0.9.1

Notes

• Tree nodes are now compared with node id 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. Isoloated Pill 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 be node as well as string 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)

Release 0.9.0

You should update your application unit tests if you are using class names in your DOM queries.

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, and className 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 opening and focus of 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

Release 0.8.29

BugFixes

• Fixes issues on color-picker component:
  1. Fixes bug where setting transparent ('') as prop value was not applied.
  2. Fixes warning message on Swatch color prop.
  3. Fixes bug where workingColor was not respecting outer color input.

Release 0.8.28

Major Features

• Adds Color Picker

Release 0.8.27

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 _).

Release 0.8.26

This release contains CSS class modifications that are compatible with Salesforce Lightning Design System, but may result in if consumers are reaching into components and querying the DOM for CSS classes. Please use 0.8.27 if you do not want these updates to align better with Salesforce Lightning Design System.

Bugfixes

• Fixes DataTable's fixed-layout column width not being applied
• Do not dismiss combobox lookup menu when clicking on menu scrollbar

Maintenance

• Adds additional helpful instruction for the pr template
• Converts Dropdown to ES6 class
• Removes findDomode from Dropdown
• Creates ESLint plugin and rule to disallow double-dash (--) modifier class names
• Removes Mocha console errors

Release 0.8.25

Minor Features

• onRequestIconPath added to IconSettings 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 now exported in CJS/ESM packages

Release 0.8.24

Bugfixes

• Missing docs.json for each component added to build. Component meta data is now stored with each component folder in docs.json. This library's release script was not copying the new file which makes all components imports fail.

Release 0.8.23

Do not use 0.8.23. Component meta data is now stored with each component folder in docs.json. This library's release script was not copying the new file which makes all components imports fail.

Major Features

• Adds new BrandBrand component

Minor Features

• Adds new style prop to Button component
• Allows passing node as avatar in GlobalHeaderProfile

Bugfixes

• Fixes popper position when its props update in Dialog component. popper.scheduleUpdate now runs within Dialog's componentWillUpdate lifecycle method.
• Replaces Tooltip with PopoverTooltip internally

Maintenance

• Removes prettier-eslint
• Allows linking to doc site from dev console warning messages
• Improves instructions on adding a new component to DSR

Release 0.8.22

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.

Documentation

• Input's assistiveText.label console warning fixed.

Version 0.8.21 CommonJS/ES6 module versions of this library have an error that is a blocker. Component display names of old locations (used by CommonJS/ES6 modules transpile export on NPM) of these components result in the following errors.
*'../../../utilities/constants' does not contain an export named 'INPUT'.
*'../../../utilities/constants' does not contain an export named 'NAVIGATION'.

Please use 0.8.22 (coming soon) if you use CommonJS/ES6 module versions (Create React App for instance).

Release 0.8.21

• DataTable's onChange replaced with onRowChange. onChange's parameters are (selectedArrayOfItems, event). onRowChange standardizes the parameters with the rest of the library with event, { 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
• Spinner: Add 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 the Button.
  • 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 for Dropdown and Popover. 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.

Maintenance and documenation

• Move Navigation to VerticalNavigation 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 files import [COMPONENT] fromdesign-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 from npm ci due to TravisCI issues

Release 0.8.20

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.

Release 0.8.19

Combobox menu may be in a different position now and flip up if there is not room and not always down. All components are moving to assistiveText being an object instead of a string. Please update eventually, but no plans to break the prop until v1.0 is released at this time.

Major Features

• Add Illustration Component. Only 3 SVGs are shipped with the library right now, but you can copy and paste SVG text out of SLDS and commit into your own repo and provide a path to it until SLDS decides on a path forward to remove copy and pasting from their website.

Bugfixes

• Make Slider a controlled component. Use value and onChange 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

Release 0.8.18

Bugfixes

• Icon uses new values for name and category when changed.
• Fixes console error that appears when using keyboard navigation to navigate the tree.

Maintenance

• url-exists utility uses fetch instead of xmlHttpRequest.

Release 0.8.17

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 InlineEdit Input in the future.

Minor features

• dropdown prop added to DataTableRowActions to increase customization of the dropdown menu
• tabIndex added to MenuDropdown component
• Picklist has been removed from examples. Please use a Combobox instead.

Release 0.8.16

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, and Textarea out of component/forms and directly into component/. Old paths such as component/forms/input will still work, but include a console warning as deprecated.
• components/input, components/checkbox, and components/textarea pass different parameters into the onChange callback. onChange now passes in event, { checked } if the new paths are used. The parameters used to be checked, event, { checked }. If you use the new paths such as components/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 review Tree example on documentation site in order to understand flattened tree data.
• Add tabIndex prop to MenuDropdown
• Update SLDS version to 2.6.0 and test

Bug fix

• Dialog components such as Dropdown when used with menuPosition='overflowBoundaryElement' now respect max-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