design-system-react

Release 0.8.15

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 to package.json's module 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.
• Modal: No longer jumps 50% down the page.
• 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 with overflowBoundaryElement and align=right use max-width instead of inherited children width.

Maintenance

• Require iconCategory if iconName 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 to xml2js 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.

Release 0.8.14

Minor features

• Tooltip: "Learn more" variant added. Deprecation notice added for variant: info || error. Please use theme prop going forward instead.

Bug fix

• Data Table: Remove console warning about focusable when DataTableColumn sortable is true.
• Combobox: Trigger onOpen callback when menu opens
• Datepicker: Focus input if menu was actually open and not just requested to close

Release 0.8.13

Major features

• Add SLDS Slider

Minor features

• Allow importing Lookup [deprecated] subcomponents in CommonJS modules

Release 0.8.12

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.

Release 0.8.11

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

Release 0.8.10

Minor features

• Combobox supports error state and messaging.

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.

Release 0.8.9

Minor features

• Combobox menu supports subheadings and line separators.
• UX pattern created for Combobox autocomplete that limits subheadings to those that have "child" matching items.

0.8.0-0.8.9 are not compatible with the latest versions of Create React App.

Release 0.8.8

Bugfix

• Export canUseDOM correctly to enable focus trap. This bug is present in 0.8.0 - 0.8.7 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Maintenance

• Replace Airbnb shape props with PropTypes.shape
• 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

Release 0.8.7

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

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.8.6

This release has a severe Modal bug. Do not use.

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
• Loosen SLDS peer dependency version

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.8.5

Major features

• Add SplitView component

Bugfix

• Remove timeout/setState warning on Modal
• Polyfill Combobox with lodash.findIndex
• Fix getDefaultProps warning in Tree

Maintenance

• Add Babel preset

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.8.4

Bugfix

• Fix Lookup required prop issue due to Dialog upgrade to PopperJS.
• Icon not present in NPM module due to gitignore's EMACS settings.

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.8.2

Maintenance

• Update Babel settings and publish to NPM.

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.8.1

Major features

• Add Pill Component

Bugfix

• Removed setState call when handling click to set active property. This was causing some setState issues on when unmounting Button.
• Add title attribute to truncated Tree nodes

Maintenance

• Introduction of npm run format command to run prettier and ESlint. Update to ESlint settings.

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.8.0

Please note: All menus, tooltips and popovers should work just as before, but the positioning engine has changed to allow server-side rendering and easier testing. It is recommended that you check your menus, tooltips and popovers to confirm they are positioned as you want them after upgrading.

Major features

• Remove Tether/drop and replace with PopperJS. All components should be compatible with server-side rendering. For more details, see #1140. Menu, tooltip and popover position can now be:
  • relative: all CSS, no JS variant
  • absolute: Uses PopperJS inline variant [DEFAULT]
  • overflowBoundaryElement: Use a Portal with PopperJS.
• hasStaticAlignment is now the standard to prevent a flipping menu.
• Add Progress Ring Component
• Make icons settings webpack friendly. Allows sprite file strings to be imported.

Maintenance

• Group like files: Moved all component files into same folder to make library more modular
• Remove node engine version from published package
• Improve documentation: Usage with webpack

This version does not have "focus trap" for Popover. This bug is present in >=0.8.0 versions. Upgrading to 0.8.8 is recommended for Popover and other components to be accessible.

Release 0.7.3

Minor features

• Custom menu items renders are available with menuItem prop for Combobox.

Release 0.7.2

Major features

• Add Accordion component
• Add Alert component
• Add Toast component

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 and sortDirection 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

Release 0.7.1

• 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 with classnameContainer on TextArea container
• Clarify test readme

Release 0.7.0

Breaking Changes

1. 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 added design-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.

2. All direct CommonJS's module.exports have been removed. All components use ES6 which is component.default in CommonJS.

3. 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

• Some initial compatibility testing with React 16 has been completed, but library is not fully tested.
• Added type="button" to Button 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 to aria-disabled on role="option". Pass it down through options like so:

   <MenuDropdown
   	options={[
   		{ disabled: true, label: 'Option A', value: 'A0' },
   		{ label: 'Option B', value: 'B0' },
   		{ label: 'Custom Class', className: 'custom-item-class', value: 'custom0' }
   	]}
   	...
   />
  

Major release

• All CommonJS's module.exports have been removed.
• Icon JS objects have been removed except for the original design-system-react.js bundle. An additional bundle has been added design-system-react-components.js without bundled icons. See readme (in 0.7.x branch) for use of <IconSettings/> to set icon context.
• Some initial compatibility testing with React 16 has been completed, but library is not fully tested.
• Add type="button" to Button as default (markup change)