Merge branch 'master' of github.com:salesforce/design-system-react into react-16

# Conflicts:
#	package-lock.json

Author: interactivellama

RELEASENOTES.md

@@ -33,19 +33,46 @@ These are changes that have backwards-compatible solutions present and that comp
 
 ## 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
+* 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 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.
-    * In the future we may change the props on some of these Dialog components to ensure a more consistent positioning API with hopefully some less head-scratching in terms of how to use it. This may include deprecating certain props and introduction of other props.
-
+  * 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] 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` from `npm ci` due to TravisCI issues
 
 ## Release 0.8.20
 

components/component-docs.json

@@ -3248,10 +3248,19 @@
             },
             "items": {
                 "type": {
-                    "name": "array"
+                    "name": "arrayOf",
+                    "value": {
+                        "name": "shape",
+                        "value": {
+                            "id": {
+                                "name": "string",
+                                "required": true
+                            }
+                        }
+                    }
                 },
                 "required": true,
-                "description": "The collection of items to render in the table."
+                "description": "The collection of items to render in the table. This is an array of objects with each object having keys that correspond with the  `property` prop of each `DataTableColumn`."
             },
             "noRowHover": {
                 "type": {
@@ -3260,12 +3269,12 @@
                 "required": false,
                 "description": "A variant which removes hover style on rows"
             },
-            "onChange": {
+            "onRowChange": {
                 "type": {
                     "name": "func"
                 },
                 "required": false,
-                "description": "This function fires when the selection of rows changes."
+                "description": "This function fires when the selection of rows changes. This component passes in `event, { selection }` to the function. `selection` is an array of objects from the `items` prop.\n\nThis used to be `onChange` which is deprecated now, so that the parameters can be consistent with other components. `onChange` passed in the selection first and the event wtihout a data object."
             },
             "onSort": {
                 "type": {
@@ -3279,7 +3288,7 @@
                     "name": "array"
                 },
                 "required": false,
-                "description": "The selected rows.",
+                "description": "An array of objects of selected rows. See `items` prop for shape of objects.",
                 "defaultValue": {
                     "value": "[]",
                     "computed": false
@@ -4447,11 +4456,19 @@
                         "spinner": {
                             "name": "string",
                             "required": false
+                        },
+                        "fieldLevelHelpButton": {
+                            "name": "string",
+                            "required": false
                         }
                     }
                 },
                 "required": false,
-                "description": "**Assistive text for accessibility**\n* `label`: Visually hidden label but read out loud by screen readers.\n* `spinner`: Text for loading spinner icon."
+                "description": "**Assistive text for accessibility**\n* `label`: Visually hidden label but read out loud by screen readers.\n* `spinner`: Text for loading spinner icon.\n* `fieldLevelHelpButton`: The field level help button, by default an 'info' icon.",
+                "defaultValue": {
+                    "value": "{\n    fieldLevelHelpButton: 'Help',\n}",
+                    "computed": false
+                }
             },
             "children": {
                 "type": {
@@ -4507,6 +4524,13 @@
                 "required": false,
                 "description": "Message to display when the input is in an error state. When this is present, also visually highlights the component as in error."
             },
+            "fieldLevelHelpTooltip": {
+                "type": {
+                    "name": "node"
+                },
+                "required": false,
+                "description": "A [Tooltip](https://react.lightningdesignsystem.com/components/tooltips/) component that is displayed next to the label. The props from the component will be merged and override any default props."
+            },
             "fixedTextLeft": {
                 "type": {
                     "name": "union",
@@ -4565,6 +4589,21 @@
                 "required": false,
                 "description": "Every input must have a unique ID in order to support keyboard navigation and ARIA support."
             },
+            "inlineHelpText": {
+                "type": {
+                    "name": "union",
+                    "value": [
+                        {
+                            "name": "node"
+                        },
+                        {
+                            "name": "string"
+                        }
+                    ]
+                },
+                "required": false,
+                "description": "Displays help text under the input."
+            },
             "inputRef": {
                 "type": {
                     "name": "func"
@@ -12074,7 +12113,15 @@
                                         "required": true
                                     },
                                     "label": {
-                                        "name": "string",
+                                        "name": "union",
+                                        "value": [
+                                            {
+                                                "name": "node"
+                                            },
+                                            {
+                                                "name": "string"
+                                            }
+                                        ],
                                         "required": true
                                     },
                                     "type": {

components/date-picker/__tests__/__snapshots__/datepicker.snapshot-test.jsx.snap

@@ -75,6 +75,11 @@ exports[`Datepicker
       >
         <div
           className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+          style={
+            Object {
+              "flex": 1.75,
+            }
+          }
         >
           <div
             className="slds-align-middle"
@@ -922,6 +927,11 @@ exports[`Datepicker
       >
         <div
           className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+          style={
+            Object {
+              "flex": 1.75,
+            }
+          }
         >
           <div
             className="slds-align-middle"
@@ -1767,6 +1777,11 @@ exports[`Datepicker Default DOM Snapshot 1`] = `
       >
         <div
           className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+          style={
+            Object {
+              "flex": 1.75,
+            }
+          }
         >
           <div
             className="slds-align-middle"
@@ -2560,7 +2575,7 @@ exports[`Datepicker Default HTML Snapshot 1`] = `
   <div class=\\"slds-datepicker slds-dropdown slds-dropdown--left\\">
     <div class=\\"\\" aria-hidden=\\"false\\" data-selection=\\"single\\">
       <div class=\\"slds-datepicker__filter slds-grid\\">
-        <div class=\\"slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow\\">
+        <div class=\\"slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow\\" style=\\"flex:1.75;\\">
           <div class=\\"slds-align-middle\\"><button class=\\"slds-button slds-button--icon-container\\" type=\\"button\\"><svg aria-hidden=\\"true\\" class=\\"slds-button__icon\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#left\\"></use></svg><span class=\\"slds-assistive-text\\">Previous month</span></button></div>
           <h2
             id=\\"sample-datepicker-month\\" class=\\"slds-align-middle\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\">July <span class=\\"slds-assistive-text\\">2014</span></h2>

components/date-picker/private/navigation.jsx

@@ -91,7 +91,10 @@ const DatepickerMonthNavigation = createReactClass({
 	render () {
 		return (
 			<div className="slds-datepicker__filter slds-grid">
-				<div className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow">
+				<div
+					className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+					style={{ flex: 1.75 }}
+				>
 					<div className="slds-align-middle">
 						<Button
 							assistiveText={{ icon: this.props.assistiveTextPreviousMonth }}

components/date-picker/private/year-picklist.jsx

@@ -43,7 +43,7 @@ const DatepickerYearSelector = createReactClass({
 		const opts = [];
 
 		for (let year = fromYear; year < toYear; year += 1) {
-			opts.push({ label: `${year}`, value: year, id: opts.length });
+			opts.push({ label: `${year}`, value: year, id: String(opts.length) });
 		}
 		return opts;
 	},
@@ -73,6 +73,7 @@ const DatepickerYearSelector = createReactClass({
 			<div className="slds-form-element slds-align-content-center">
 				<Combobox
 					className="slds-shrink-none"
+					classNameMenu="slds-datepicker"
 					events={{
 						onSelect: this.handleSelect,
 					}}

components/input/__docs__/site-stories.js

@@ -8,6 +8,8 @@ const siteStories = [
 	require('raw-loader!@salesforce/design-system-react/components/input/__examples__/icons.jsx'),
 	require('raw-loader!@salesforce/design-system-react/components/input/__examples__/error.jsx'),
 	require('raw-loader!@salesforce/design-system-react/components/input/__examples__/inactiveInputs.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/input/__examples__/inline-help.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/input/__examples__/field-level-help.jsx'),
 ];
 
 module.exports = siteStories;