Merge branch 'master' of github.com:salesforce-ux/design-system-react into GH-626---checkbox-needs-an-indeterminate-state-21

Author: interactivellama

.babelrc

@@ -1,3 +1,11 @@
 {
-  "presets": ["react", "es2015", "stage-1"]
+  "presets": ["react", "es2015", "stage-1"],
+  "env": {
+      "amd": {
+        "plugins": ["import-noop"]
+      },
+      "commonjs": {
+        "plugins": ["import-noop"]
+      }
+    }
 }

.eslintrc

@@ -1,5 +1,5 @@
 {
-    "extends": "eslint-config-slds",
-    "parser": "babel-eslint",
+	"extends": "eslint-config-slds",
+	"parser": "babel-eslint",
     "rules": {}
-}
+}

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "4.4"
+  - "5.6"
 install:
   - npm install npm -g
   - npm install

CONTRIBUTING.md

@@ -35,6 +35,7 @@ We'll review your code, suggest any needed changes, and merge it in. Thank you.
 - <a name="boolean-prop-prefix" href="#boolean-prop-prefix">#</a> If a prop is a boolean, please prefix with `is` or `can` or suffix it with `-able`. Never default a prop to `true`.
 - <a name="use-checkprops" href="#use-checkprops">#</a> Add as many prop checking tests that will _only run in development_ as needed via `checkProp`. If the test can become an independent module and work in multiple components, add it to the `utilities` folder.
 - <a name="all-text-can-be-internationalized" href="#all-text-can-be-internationalized">#</a> Any text the user can read (including text for screenreaders) should be able to be set via a prop for internationalization.
+- <a name="avoid-css" href="#avoid-css">#</a> Avoid use of inline styles and additional CSS classes not present in SLDS.
 - <a name="different-react-component-hierarchy" href="#different-react-component-hierarchy">#</a> React component hierarchy doesn't always mean HTML tag hierarchy. Sometimes children become the wrapping component.
 - <a name="classnames" href="#classnames">#</a> This library makes extensive use of the [classnames](https://github.com/JedWatson/classnames) library for feeding conditional CSS classes into `className` attributes and allows a variety of types such as `string`, `object`, and `arrays`. Please review the libary's API.
 - <a name="props-in-get-initial-state" href="#props-in-get-initial-state">#</a> [Props in getInitialState is an anti-pattern.](https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)
@@ -349,9 +350,9 @@ from the [Planning Center](https://github.com/planningcenter/react-patterns)
 
 
 # Releasing
-1. [Add to release notes](https://github.com/salesforce-ux/design-system-react/blob/master/RELEASENOTES.md).
+1. [Write the release notes](https://github.com/salesforce-ux/design-system-react/blob/master/RELEASENOTES.md) that cover everything that has changed since the last release. You don't have to commit your release notes changes though. The following script will do that for you.
 1. Run `npm prune` and `npm install` to clean up node modules in preparation for build.
-1. **Choose one**: `npm run release-patch` or `npm run release-minor` This script pulls from upstream, bumps the version, commits changes, and publishes tags to your upstream repo (that is this repo).
+1. **Choose one**: `npm run release-patch` or `npm run release-minor` This script pulls from upstream, bumps the version, commits changes, and publishes tags to your `upstream` repository (that is this repo).
 1. Copy and paste your release notes into the [Github Draft Release UI](https://github.com/salesforce-ux/design-system-react/releases) and publish.
 
 _If you are timid about releasing or need your pull request in review "pre-released," you can publish to origin (your fork) with `npm run publish-to-git` and then test and review the tag on your fork. This is just the publish step though, any other tasks you will need to do manually to test publishing._

README.md

@@ -1,4 +1,5 @@
-### Salesforce Design System: Interactive accessible components for React
+# Salesforce Design System
+### Interactive and accessible components for React
 
 [![Build Status](https://travis-ci.com/salesforce-ux/design-system-react.svg?token=BMXxPFKR5GZuYsqAFsEf&branch=master)](https://travis-ci.com/salesforce-ux/design-system-react)
 
@@ -8,7 +9,7 @@ Please visit [Design System React](https://react.lightningdesignsystem.com/) for
 The Design System React library is the [React](https://facebook.github.io/react/) implementation of the [Lightning Design System](https://www.lightningdesignsystem.com/). Each Design System React component is a specific variant of a component from Lightning Design System. For example, `SLDSMenuDropdown` represents [Lightning Design System Menu > Dropdown](http://www.lightningdesignsystem.com/components/menus/#dropdown),
 and `SLDSLookup` represents [Lightning Design System Lookup > Base](http://www.lightningdesignsystem.com/components/lookups/#base).
 
-If you are using the ECMAScript 6 source files in `./components/`, you will need to enable your ES5 transpiler to allow [stage-1 and higher proposed features](https://babeljs.io/docs/plugins/preset-stage-1/). If you are using Babel, it may be helpful to install the [NPM module](https://www.npmjs.com/package/babel-preset-stage-1) `babel-preset-stage-1` into your project and review the `.babelrc` file in this project.
+_It is highly recommended that you `npm install` the `-es` suffixed package tag and import the individual [ECMAScript 6](https://github.com/lukehoban/es6features/blob/master/README.md) source files in `./components/`._ If you do this, you will need to enable your ES5 transpiler to allow [stage-1 and higher proposed features](https://babeljs.io/docs/plugins/preset-stage-1/). If you are using Babel, it may be helpful to install the [NPM module](https://www.npmjs.com/package/babel-preset-stage-1) `babel-preset-stage-1` into your project and review the `.babelrc` file in this project. If you are looking for a a [CommonJS](https://nodejs.org/docs/latest/api/modules.html)-compatible package, use the package tag that does not have a suffix. 
 
 ### Run local development and testing server
 
@@ -33,7 +34,7 @@ npm run dist
 
 ## Getting Started
 
-Note: `design-system-react` is optimized for React 0.14.x and uses Lightning Design System 2.1.0-rc.4. You can find a more complete [getting started guide](https://react.lightningdesignsystem.com/getting-started) on the documentation site.
+Note: `design-system-react` is optimized for React 0.14.x and uses Lightning Design System 2.1.3. You can find a more complete [getting started guide](https://react.lightningdesignsystem.com/getting-started) on the documentation site.
 
 ### New to React?
 

RELEASENOTES.md

@@ -1,56 +1,112 @@
-  # Salesforce Lightning Design System
-# React Components: design-system-react
 # Release notes
+_Salesforce Lightning Design System :: React Components :: design-system-react_
+
+## Future Breaking Changes
+
+These are changes that have backwards-compatible solutions present and that compatibiity will be removed at a breaking change release in the future.
+
+- `TabsPane` has be replaced with `TabsPanel`.
+- `Input`'s props: `iconPosition`, `iconAssistiveText`, `iconCategory`, `iconName`, `onIconClick` are deprecated. An `Icon` component should be used instead.
+- `DataTable`'s' `collection`, `onSelect`, `onDeselect` are deprecated.
+- The prop `modal` in `DatePicker`, `Lookup`, `MenuDropdown`, `MenuPicklist`, `TimePicker` is deprecated
+- Remove `openByDefault` from `PopoverTooltip`.
+
+---
+
+## Release 0.4.4
+
+**BUG FIX**
+
+- Tabs' `Panel` changed to `TabsPanel` to align with other component names.
+
+## Release 0.4.3
+
+**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` to `Panel`
+- Removes prototype status from Tabs
+
+## Release 0.4.1
+
+**BUG FIX**
+
+- Fixes bugs in allowing parent to control state of dropdown.
+
+
+## Release 0.4.0
+
+**BREAKING CHANGES**
+
+- Replaces `modal` with `isInline` 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.
+
 
 ## Release 0.3.16
 
 **BUG FIX**
 
 - Due to deprecations in v0.3.15 of `Input`'s `onIconClick`, an `onSearch` callback has been added to `Search`.
 
+
 ## Release 0.3.15
 
 **MAJOR CHANGES**
 
-- Allow icon on the left and right of inputs. 
+- Allow icon on the left and right of inputs.
 - Search can be `clearable` now with right clear icon.
 - Input now uses `iconRight` and `iconLeft` and [accepts](https://github.com/salesforce-ux/design-system-react/blob/master/stories/forms/input/index.jsx#L36) an `InputIcon` component. Use of `onClick` [makes it clickable](https://github.com/salesforce-ux/design-system-react/blob/master/stories/forms/input/index.jsx#L11).
 - The wrapping span has been removed from `ButtonIcon`. `ButtonIcon` is just a CSS customization of `UtilityIcon` now.
 - Be sure to check inputs for deprecation notices.
 
+
 ## Release 0.3.14
 
 - Remove top divider as default of `MenuDropdown` list menu heading items.
-- Adds `divider` key with values `top` and `bottom` to `MenuDropdown` options to allow for a divider to be added to a heading. 
+- Adds `divider` key with values `top` and `bottom` to `MenuDropdown` options to allow for a divider to be added to a heading.
+
 
 ## Release 0.3.13
 
 **BUG FIX**
 - In App Launcher, Tile Truncate utility uses new props to prevent UI state from being out-of-sync with props.
 
+
 ## Release 0.3.12
 
 **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"
 
+
 ## Release 0.3.11
 
 **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.
 
+
 ## Release 0.3.10
 
 **MAJOR CHANGES**
 - Adds `hybrid` to `openOn` 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.
 
+
 ## Release 0.3.9
 
 **Bug Fix**
 - Prevent Global Nav menus from flipping up at small screen heights
 
+
 ## Release 0.3.8
 
 **Bug Fix**
@@ -59,9 +115,10 @@
 - Make DatePicker and TimePicker value prop the source of future state
 
 **Documentation**
-- Add mention of classnames library to `contributing.md` 
+- Add mention of classnames library to `contributing.md`
 - Add test coverage comments, surfacing in-browser tests
 
+
 ## Release 0.3.7
 
 **MAJOR CHANGES**
@@ -74,6 +131,7 @@
 - Sends correct `href` to App Launcher Tile click callback
 - Corrects markup for menu separators and headers in Global Navigation
 
+
 ## Release 0.3.6
 
 **MAJOR CHANGES**
@@ -83,12 +141,14 @@
 **Bug Fix**
 - Detect PageHeader detail field truncation on update instead of mount.
 
+
 ## Release 0.3.5
 
 **MAJOR CHANGES**
 - Add `style` and `bodyClassName` props to Card to allow overflow on Card body.
 - Add `length` prop to GlobalNavigationMenuDropdown. It can be set to `null` to remove scrolling.
 
+
 ## Release 0.3.4
 
 **MAJOR CHANGES - SLDSPageHeader**
@@ -101,6 +161,7 @@
 - No longer renders a close button if modal type is prompt.
 - Lookup search icon default should be on right side.
 
+
 ## Release 0.3.2
 
 **MAJOR CHANGES**

components/app-launcher/index.jsx

@@ -80,17 +80,21 @@ const AppLauncher = React.createClass({
 		 */
 		isOpen: PropTypes.bool,
 		/**
-		 * Button that exists in the upper right hand corner of the App Launcher modal
+		 * CSS classes to be added to App Launcher Modal.
 		 */
-		modalHeaderButton: PropTypes.node,
+		modalClassName: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
 		/**
-		 * Callback when the App Launcher Modal is closed
+		 * Button that exists in the upper right hand corner of the App Launcher modal
 		 */
-		onClose: PropTypes.func,
+		modalHeaderButton: PropTypes.node,
 		/**
 		 * Allows longer application names without truncating them.
 		 */
 		noTruncate: PropTypes.bool,
+		/**
+		 * Callback when the App Launcher Modal is closed
+		 */
+		onClose: PropTypes.func,
 		/**
 		 * Search bar for the Modal's header. Will typically be an instance of `design-system-react/forms/input/search`
 		 */
@@ -230,7 +234,7 @@ const AppLauncher = React.createClass({
 					contentStyle={{ minHeight: modalContentStaticHeight }}
 					isOpen={isOpen}
 					onRequestClose={this.closeAppLauncher}
-					containerClassName="app-launcher"
+					containerClassName={classNames('app-launcher', this.props.modalClassName)}
 					size="large"
 					header={customModalHeader}
 					headerClassName="slds-app-launcher__header"

components/data-table/column.jsx

@@ -28,6 +28,26 @@ const DataTableColumn = React.createClass({
 
 	// ### Prop Types
 	propTypes: {
+		/**
+		 * Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.
+     * ```
+     * import DataTableCell from 'design-system-react/data-table/cell';
+     * const CustomDataTableCell = ({ children, ...props }) => (
+     *   <DataTableCell {...props} >
+     *     <a href="javascript:void(0);">{children}</a>
+     *   </DataTableCell>
+     * );
+     * CustomDataTableCell.displayName = DataTableCell.displayName;
+     *
+     * <DataTable>
+     *   <DataTableColumn />
+     *   <DataTableColumn>
+     *     <DataTableCustomCell />
+     *   </DataTableColumn>
+     *   <DataTableRowActions />
+     * </DataTable>
+     * ```
+     */
 		children: React.PropTypes.element,
 		/**
 		 * The column label.

components/data-table/index.jsx

@@ -76,8 +76,16 @@ const DataTable = React.createClass({
 		 */
 		buffered: PropTypes.bool,
 		/**
-		 * Provide children of the type `<DataTableColumn />` to define the structure of the data being represented and children of the type `<DataTableRowActions />` to define a menu which will be rendered for each item in the grid. Custom `<DataTableCell />` implementations may also be passed in to override cell rendering.
+		 * Provide children of the type `<DataTableColumn />` to define the structure of the data being represented and children of the type `<DataTableRowActions />` to define a menu which will be rendered for each item in the grid. Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.
 		 * ```
+		 * import DataTableCell from 'design-system-react/data-table/cell';
+     * const CustomDataTableCell = ({ children, ...props }) => (
+     *   <DataTableCell {...props} >
+     *     <a href="javascript:void(0);">{children}</a>
+     *   </DataTableCell>
+     * );
+     * CustomDataTableCell.displayName = DataTableCell.displayName;
+     *
 		 * <DataTable>
 		 *   <DataTableColumn />
 		 *   <DataTableColumn>

components/forms/input/index.jsx

@@ -216,7 +216,7 @@ const Input = React.createClass({
 			// Using [object destructuring](https://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx) to pass on any properties which are not explicitly defined.
 			...props
 		} = this.props;
-		
+
 		const labelText = label || assistiveText; // One of these is required to pass accessibility tests
 
 		// this is a hack to make left the default prop unless overwritten by `iconPosition="right"`

components/index.js

@@ -120,5 +120,16 @@ export Spinner from './spinner';
 export SLDSTimepicker from './time-picker';
 export Timepicker from './time-picker';
 
+export SLDSTabs from './tabs';
+export Tabs from './tabs';
+export SLDSTabsPanel from './tabs/panel';
+export TabsPanel from './tabs/panel';
+
+// This is just an alias, Sydney Bristow. Remove at next breaking release.
+export SLDSPanel from './tabs/panel';
+export Panel from './tabs/panel';
+export SLDSPane from './tabs/panel';
+export Pane from './tabs/panel';
+
 export SLDSUtilityIcon from './utilities/utility-icon';
 export UtilityIcon from './utilities/utility-icon';

components/menu-dropdown/button-trigger.jsx

@@ -55,6 +55,10 @@ const Trigger = React.createClass({
 		* A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button. This is provided by the `MenuDropdown`. Please use `MenuDropdown` to set.
 		*/
 		id: PropTypes.string,
+		/**
+		 * Renders menu within the wrapping trigger as a sibling of the button. By default, you will have an absolutely positioned container at an elevated z-index.
+		 */
+		isInline: PropTypes.bool,
 		/**
 		 * Informs the trigger on the open/close state of the dropdown menu
 		 */
@@ -108,6 +112,7 @@ const Trigger = React.createClass({
 			children,	// eslint-disable-line no-unused-vars
 			className,
 			id,
+			isInline, // eslint-disable-line no-unused-vars
 			isOpen,
 			onBlur,
 			menu,
@@ -118,6 +123,7 @@ const Trigger = React.createClass({
 			onMouseEnter,
 			onMouseLeave,
 			openOn,
+			triggerRef,
 			...deprecatedPropsFromMenuDropdown
 		} = this.props;
 
@@ -155,7 +161,7 @@ const Trigger = React.createClass({
 					aria-haspopup="true"
 					{...deprecatedPropsFromMenuDropdown}
 					{...propsFromGrandchildButton}
-					ref={this.props.triggerRef}
+					ref={triggerRef}
 				/>
 				{menu}
 			</div>