Merges master

README.md

@@ -15,11 +15,13 @@ $ npm install @salesforce-ux/design-system @salesforce/design-system-react
 Welcome to the project! :wave: This library is the [React](https://facebook.github.io/react/) implementation of the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/). This library has a peer dependency on `@salesforce-ux/design-system`, `react`, and `react-dom`. It has been tested with React >=15.4.1 <16 and is stable despite its version number. Please polyfill this library in order to meet your target environment needs.
 
 * [Usage](#usage)
-* [Getting Started](https://react.lightningdesignsystem.com/getting-started/)
+* [Getting started](https://react.lightningdesignsystem.com/getting-started/)
 * [Documentation and interactive examples](https://react.lightningdesignsystem.com)
 * [Contributing](CONTRIBUTING.md)
-* [Codebase Overview](docs/codebase-overview.md)
+* [Codebase overview](docs/codebase-overview.md)
+* [Browser compatiblity and polyfills](docs/browser-compatibility.md)
 * [Usage with Webpack](docs/webpack.md)
+* [Open Sourcing Design System React](https://engineering.salesforce.com/open-sourcing-design-system-react-9be45b8bb127) - Medium article
 
 ## Usage
 

RELEASENOTES.md

@@ -31,11 +31,49 @@ These are changes that have backwards-compatible solutions present and that comp
 
 ### Latest Release
 
+## 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 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.
+
 ## Release 0.8.9
 
 **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.
 
 ## Release 0.8.8

components/button-group/__tests__/__snapshots__/button-group.snapshot-test.jsx.snap

@@ -24,6 +24,7 @@ exports[`Button Group Checkbox DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleMon"
           name={undefined}
@@ -57,6 +58,7 @@ exports[`Button Group Checkbox DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleTue"
           name={undefined}
@@ -90,6 +92,7 @@ exports[`Button Group Checkbox DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleWed"
           name={undefined}
@@ -123,6 +126,7 @@ exports[`Button Group Checkbox DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleThu"
           name={undefined}
@@ -156,6 +160,7 @@ exports[`Button Group Checkbox DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleFri"
           name={undefined}
@@ -209,6 +214,7 @@ exports[`Button Group Checkbox Error DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleMon"
           name={undefined}
@@ -242,6 +248,7 @@ exports[`Button Group Checkbox Error DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleTue"
           name={undefined}
@@ -275,6 +282,7 @@ exports[`Button Group Checkbox Error DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleWed"
           name={undefined}
@@ -308,6 +316,7 @@ exports[`Button Group Checkbox Error DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleThu"
           name={undefined}
@@ -341,6 +350,7 @@ exports[`Button Group Checkbox Error DOM Snapshot 1`] = `
           aria-owns={undefined}
           aria-required={undefined}
           checked={undefined}
+          defaultChecked={undefined}
           disabled={undefined}
           id="ButtonGroupExampleFri"
           name={undefined}

components/combobox/__docs__/site-stories.js

@@ -12,6 +12,7 @@ const siteStories = [
 	require('raw-loader!@salesforce/design-system-react/components/combobox/__examples__/inline-single.jsx'),
 	require('raw-loader!@salesforce/design-system-react/components/combobox/__examples__/readonly-single.jsx'),
 	require('raw-loader!@salesforce/design-system-react/components/combobox/__examples__/readonly-multiple.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/combobox/__examples__/required-input-error-state.jsx'),
 ];
 
 module.exports = siteStories;

components/combobox/__docs__/storybook-stories.jsx

@@ -7,6 +7,7 @@ import Base from '../__examples__/base';
 import BaseMenuSubHeader from '../__examples__/base-menu-subheader';
 import BaseMenuSeparator from '../__examples__/base-menu-separator';
 import BaseInheritMenuWidth from '../__examples__/base-inherit-menu-width.jsx';
+import RequiredInputErrorState from '../__examples__/required-input-error-state';
 import PredefinedOptionsOnly from '../__examples__/base-predefined-options-only';
 import InlineSingle from '../__examples__/inline-single';
 import InlineMultiple from '../__examples__/inline-multiple';
@@ -30,6 +31,7 @@ import SnapshotReadonlyMultipleSelection from '../__examples__/snapshot/readonly
 import SnapshotReadonlyMultipleSelectionSingleItemSelected from '../__examples__/snapshot/readonly-multiple-selection-single-item-selected';
 import SnapshotReadonlyMultipleSelectionMultipleItemsSelected from '../__examples__/snapshot/readonly-multiple-selection-multiple-items-selected';
 import SnapshotReadonlySingleSelectionCustomMenuItemOpen from '../__examples__/snapshot/readonly-single-selection-custom-menu-item';
+import SnapshotBaseLabelRequired from '../__examples__/snapshot/base-label-required';
 
 storiesOf(COMBOBOX, module)
 	.addDecorator((getStory) => (
@@ -54,11 +56,17 @@ storiesOf(COMBOBOX, module)
 	.add('Readonly Single Selection Custom Menu Item', () => (
 		<ReadOnlySingleSelectionCustomMenuItem action={action} />
 	))
+	.add('Required Input in Error State', () => (
+		<RequiredInputErrorState action={action} />
+	))
 	.add('Snapshot Base Open', () => <SnapshotBaseOpen action={action} />)
 	.add('Snapshot Base Custom Menu Item Open', () => (
 		<SnapshotBaseCustomMenuItemOpen action={action} />
 	))
 	.add('Snapshot Base Selected', () => <SnapshotBaseSelected action={action} />)
+	.add('Snapshot Base Label Required', () => (
+		<SnapshotBaseLabelRequired action={action} />
+	))
 	.add('Snapshot Base Open Menu Sub Header Separator', () => (
 		<SnapshotBaseOpenMenuSubHeaderSeparator action={action} />
 	))

components/combobox/__examples__/required-input-error-state.jsx

@@ -0,0 +1,152 @@
+/* eslint-disable no-console, react/prop-types */
+import React from 'react';
+import Combobox from '~/components/combobox';
+import Icon from '~/components/icon';
+import comboboxFilterAndLimit from '~/components/combobox/filter';
+import IconSettings from '~/components/icon-settings';
+
+const accounts = [
+	{
+		id: '1',
+		label: 'Acme',
+		subTitle: 'Account • San Francisco',
+		type: 'account',
+	},
+	{
+		id: '2',
+		label: 'Salesforce.com, Inc.',
+		subTitle: 'Account • San Francisco',
+		type: 'account',
+	},
+	{
+		id: '3',
+		label: "Paddy's Pub",
+		subTitle: 'Account • Boston, MA',
+		type: 'account',
+	},
+	{
+		id: '4',
+		label: 'Tyrell Corp',
+		subTitle: 'Account • San Francisco, CA',
+		type: 'account',
+	},
+	{
+		id: '5',
+		label: 'Paper St. Soap Company',
+		subTitle: 'Account • Beloit, WI',
+		type: 'account',
+	},
+	{
+		id: '6',
+		label: 'Nakatomi Investments',
+		subTitle: 'Account • Chicago, IL',
+		type: 'account',
+	},
+	{ id: '7', label: 'Acme Landscaping', subTitle: '\u00A0', type: 'account' },
+	{
+		id: '8',
+		label: 'Acme Construction',
+		subTitle: 'Account • Grand Marais, MN',
+		type: 'account',
+	},
+];
+
+const accountsWithIcon = accounts.map((elem) =>
+	Object.assign(elem, {
+		icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
+	})
+);
+
+class Example extends React.Component {
+	constructor (props) {
+		super(props);
+
+		this.state = {
+			inputValue: '',
+			selection: [],
+		};
+	}
+
+	render () {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<Combobox
+					aria-describedby="description-unique-id"
+					id="combobox-unique-id"
+					disabled={this.props.disabled}
+					events={{
+						onChange: (event, { value }) => {
+							if (this.props.action) {
+								this.props.action('onChange')(event, value);
+							} else if (console) {
+								console.log('onChange', event, value);
+							}
+							this.setState({ inputValue: value });
+						},
+						onRequestRemoveSelectedOption: (event, data) => {
+							this.setState({
+								inputValue: '',
+								selection: data.selection,
+							});
+						},
+						onSubmit: (event, { value }) => {
+							if (this.props.action) {
+								this.props.action('onChange')(event, value);
+							} else if (console) {
+								console.log('onChange', event, value);
+							}
+							this.setState({
+								inputValue: 'input not found',
+								selection: [
+									...this.state.selection,
+									{
+										label: value,
+										icon: (
+											<Icon
+												assistiveText="Account"
+												category="standard"
+												name="account"
+											/>
+										),
+									},
+								],
+							});
+						},
+						onSelect: (event, data) => {
+							if (this.props.action) {
+								this.props.action('onSelect')(
+									event,
+									...Object.keys(data).map((key) => data[key])
+								);
+							} else if (console) {
+								console.log('onSelect', event, data);
+							}
+							this.setState({
+								inputValue: '',
+								selection: data.selection,
+							});
+						},
+					}}
+					errorText="This field is required"
+					labels={{
+						label: 'Search',
+						placeholder: 'Search Salesforce',
+					}}
+					multiple
+					options={comboboxFilterAndLimit({
+						inputValue: this.state.inputValue,
+						limit: 10,
+						options: accountsWithIcon,
+						selection: this.state.selection,
+					})}
+					required
+					selection={this.state.selection}
+					value={this.state.inputValue}
+				/>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'ComboboxExample';
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/combobox/__examples__/snapshot/base-label-required.jsx

@@ -0,0 +1,12 @@
+/* eslint-disable no-console, react/prop-types */
+import React from 'react';
+import RequiredInputErrorStateComponent from '../required-input-error-state';
+
+class Example extends React.Component {
+	render () {
+		return <RequiredInputErrorStateComponent />;
+	}
+}
+
+Example.displayName = 'ComboboxExample';
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime