Merge branch 'master' of github.com:salesforce/design-system-react into DanFerro-slider-value-fix

Author: interactivellama

RELEASENOTES.md

@@ -31,6 +31,15 @@ These are changes that have backwards-compatible solutions present and that comp
 
 ### Latest Release
 
+## 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**
@@ -140,7 +149,7 @@ Adds new script storyshots:start that allows interactive viewing of what is bein
 ## Release 0.8.10
 
 **Minor features**
-* Combobox supports error messages. 
+* 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.

components/alert/__examples__/error.jsx

@@ -10,7 +10,7 @@ class Example extends React.Component {
 			<IconSettings iconPath="/assets/icons">
 				<AlertContainer>
 					<Alert
-						icon={<Icon category="utility" name="ban" />}
+						icon={<Icon category="utility" name="error" />}
 						labels={{
 							heading:
 								'Your browser is currently not supported. Your Salesforce may be degraded.',

components/alert/__tests__/__snapshots__/alert.snapshot-test.jsx.snap

@@ -137,7 +137,7 @@ exports[`Alert Error DOM Snapshot 1`] = `
         className="slds-icon slds-icon--x-small"
       >
         <use
-          xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#ban"
+          xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#error"
         />
       </svg>
       
@@ -158,7 +158,7 @@ exports[`Alert Error DOM Snapshot 1`] = `
 
 exports[`Alert Error HTML Snapshot 1`] = `
 "<div class=\\"slds-notify-container\\">
-  <div class=\\"slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error\\" role=\\"alert\\"><span class=\\"slds-assistive-text\\">error</span><span class=\\"slds-m-right--x-small\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon slds-icon--x-small\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#ban\\"></use></svg></span>
+  <div class=\\"slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error\\" role=\\"alert\\"><span class=\\"slds-assistive-text\\">error</span><span class=\\"slds-m-right--x-small\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon slds-icon--x-small\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#error\\"></use></svg></span>
     <h2>Your browser is currently not supported. Your Salesforce may be degraded. <a href=\\"javascript:void(0);\\">More Information</a></h2>
   </div>
 </div>"

components/tree/private/branch.jsx

@@ -114,10 +114,7 @@ const handleKeyDownUp = (event, props) => {
 
 const handleKeyDownRight = (event, props) => {
 	if (props.node.expanded) {
-		if (
-			this.props.getNodes(props.node) &&
-			this.props.getNodes(props.node).length > 0
-		) {
+		if (props.getNodes(props.node) && props.getNodes(props.node).length > 0) {
 			handleKeyDownDown(event, props);
 		}
 	} else {
@@ -134,11 +131,14 @@ const handleKeyDownLeft = (event, props) => {
 		);
 		const index = nodes.indexOf(props.parent);
 		if (index !== -1) {
-			props.onExpand(event, {
-				node: props.parent,
-				select: true,
-				expand: !props.parent.expanded,
-				treeIndex: props.flattenedNodes[index].treeIndex,
+			props.onExpand({
+				event,
+				data: {
+					node: props.parent,
+					select: true,
+					expand: !props.parent.expanded,
+					treeIndex: props.flattenedNodes[index].treeIndex,
+				},
 			});
 		}
 	}

components/utilities/utility-icon/index.jsx

@@ -68,7 +68,7 @@ const UtilityIcon = (
 	return inlineData ? (
 		<Svg data={inlineData} name={name} {...rest} />
 	) : (
-		<svg {...rest}>
+		<svg key={`${name}_${category}`} {...rest}>
 			<use xlinkHref={modifiedPath} />
 		</svg>
 	);

docs/PULL_REQUEST_TEMPLATE.md

@@ -4,15 +4,26 @@ Fixes #
 
 ---
 
-### Pull Request Review checklist (do not remove)
+### CONTRIBUTOR checklist (do not remove)
+Please complete for every pull request
 
+* [ ] First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
 * [ ] `npm run lint:fix` has been run and linting passes.
 * [ ] Mocha, Jest (Storyshots), and `components/component-docs.json` CI tests pass (`npm test`).
 * [ ] Tests have been added for new props to prevent regressions in the future. See [readme](https://github.com/salesforce/design-system-react/blob/master/tests/README.md).
 * [ ] Review the appropriate Storybook stories. Open [http://localhost:9001/](http://localhost:9001/).
 * [ ] The Accessibility panel of each Storybook story has 0 violations (aXe). Open [http://localhost:9001/](http://localhost:9001/).
 * [ ] Review tests are passing in the browser. Open [http://localhost:8001/](http://localhost:8001/).
 * [ ] Review markup conforms to [SLDS](https://www.lightningdesignsystem.com/) by looking at [DOM snapshot strings](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
+
+### REVIEWER checklist (do not remove)
+
+* [ ] TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and `components/component-docs.json` tests.
+* [ ] Tests have been added for new props to prevent regressions in the future. See [readme](https://github.com/salesforce/design-system-react/blob/master/tests/README.md).
+* [ ] Review the appropriate Storybook stories. Open [http://localhost:9001/](http://localhost:9001/).
+* [ ] The Accessibility panel of each Storybook story has 0 violations (aXe). Open [http://localhost:9001/](http://localhost:9001/).
+* [ ] Review tests are passing in the browser. Open [http://localhost:8001/](http://localhost:8001/).
+* [ ] Review markup conforms to [SLDS](https://www.lightningdesignsystem.com/) by looking at [DOM snapshot strings](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
 * [ ] Add year-first date and commit SHA to `last-slds-markup-review` in `package.json` and push.
 * [ ] Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
 * [ ] Add year-first review date, and commit SHA, `last-accessibility-review`, to `package.json` and push.

docs/browser-compatibility.md

@@ -8,8 +8,9 @@ The eventual goal is to remove all polyfills (such as [lodash](https://lodash.co
 
 **Please add any additional polyfills that you need to the list below** when you discover them. This library uses the following ECMAScript features:
 
-* findIndex - use [core-js library](https://github.com/zloirock/core-js#commonjs)
-* classList - use [classList.js](https://github.com/eligrey/classList.js)
+* `Array.prototype.findIndex` - use [core-js library](https://github.com/zloirock/core-js#commonjs)
+* `Element.classList` - use [classList.js](https://github.com/eligrey/classList.js)
+* `Object.assign` - use [core-js library](https://github.com/zloirock/core-js#commonjs)
 
 ### Internet Explorer 11 Support
 

docs/codebase-overview.md

@@ -315,7 +315,7 @@ Some props accept an existing Design System React component such as the `dropdow
 
 In a way, this is "grandparent control" in that it surfaces the internal API of sub-components to the consuming developer in a way that the parent of the parent can control it. The parent component (such as `DataTableRowActions`) shallow merges the props from itself with the component props provided from the developer. The developers or the "grandparent" takes precedence and merges in last.
 
-This pattern creates a separation of concern and a more declarative approach that relies on child components with their own props instead of additional props on the parent component such as `<Button iconClassName />`. Passing in “<Dropdown options={} /> to a “dropdown” prop limits the aliasing of props for child components that already exist and reduces duplication of `PropType` documentation and increases library maintainability. 
+This pattern creates a separation of concern and a more declarative approach that relies on child components with their own props instead of additional props on the parent component such as `<Button iconClassName />`. Passing in `<Dropdown options={} />` to a `dropdown` prop limits the aliasing of props for child components that already exist and reduces duplication of `PropType` documentation and increases library maintainability. 
 
 ## Prefer Ternary to Sub-render
 

docs/create-react-app.md

@@ -12,6 +12,8 @@ The following tasks will help you get started using Design System React within C
     * `/node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css`
 1. Copy SLDS icons folder to `public` folder
     * `/node_modules/@salesforce-ux/design-system/assets/icons`
+1. Copy SLDS fonts folder to `public` folder
+    * `/node_modules/@salesforce-ux/design-system/assets/fonts`
 1. Add CSS file to `index.html`
     * `<link rel="stylesheet" type="text/css" href="/salesforce-lightning-design-system.min.css">`
 1. Copy examples from [Design System React website](https://react.lightningdesignsystem.com/) into `app.js`.

docs/getting-started.md

@@ -0,0 +1,112 @@
+# Getting Started
+
+## Install
+
+```
+$ npm install @salesforce-ux/design-system @salesforce/design-system-react
+```
+
+## Project Overview
+
+Design System React is an implementation of the [Lightning Design System](http://www.lightningdesignsystem.com/) where each Design System React component is a specific variant of a component from Lightning Design System. For example, [Combobox](components/comboboxes) represents [Lightning Design System Menu > Dropdown](http://www.lightningdesignsystem.com/components/combobox).
+
+If you are new to React or an application state container like Redux, please review the tips and tutorials on the [Resources](/resources/) page along with the Concepts and Best Practices section of the [Contributing](/contributing/) page.
+
+The easiest way to get started with Design System React is to click through to any of our [examples](/components) where you can play with it live.
+
+Design System React is currently optimized for React ${reactVersion} and Lightning Design System ${sldsVersion}.
+
+### Quick Setup (CommonJS)
+
+A CommonJS-compatible version has been included within the NPM package to allows usage without transpiling. Use the following named `import` syntax to access CommonJS components from `/lib/index.js`:
+
+```
+import { Button } from '@salesforce/design-system-react';
+
+<Button label="Hello Button" />
+```
+
+### Recommended Usage (ES6 modules)
+
+Recommended usage requires that your babel presets are set up correctly. `create-react-app` and environments that do not transpile code within `node_modules` are not compatible with the component import below. All the examples on the [documentation site](https://react.lightningdesignsystem.com/) use this syntax. You can use the Babel preset, `@salesforce/babel-preset-design-system-react`, to get started. [This preset](https://npmjs.com/package/@salesforce/babel-preset-design-system-react) will keep Babel compatible with Design System React and allow ES6 module benefits such as tree-shaking.
+
+```
+import Button from '@salesforce/design-system-react/components/button';
+
+<Button label="Hello Button" />
+```
+
+#### Transpile with `.babelrc` settings
+
+```json
+{
+  "presets": ["@salesforce/babel-preset-design-system-react"]
+}
+```
+
+Assuming you’re using the [babel loader for Webpack](https://github.com/babel/babel-loader), you’ll also want to tell the loader to go ahead and include the design-system-react folders in `node_modules`. Instead of excluding all of node_modules, which some tutorials have you do, we’d recommend explicitly including each directory where you have ES2015 code that you want Babel to process. Something like the following **Webpack v1** file:
+
+```js
+onst path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+	entry: {
+		bundle: './public/src/index.js'
+	},
+	resolve: {
+		extensions: [
+			'',
+			'.js',
+			'.jsx'
+		]
+	},
+	devtool: 'source-map',
+	output: {
+		path: path.join(__dirname, 'build'),
+		filename: '[name].js',
+		publicPath: '/'
+	},
+	module: {
+		loaders: [
+			{
+				test: /\.jsx?$/,
+				loaders: ['babel'],
+				include: [
+					path.join(__dirname, 'public/src'),
+					path.join(__dirname, 'node_modules/@salesforce/design-system-react'),
+				]
+			},
+			{
+				test: /\.css$/,
+				loader: ExtractTextPlugin.extract(
+					'style-loader',
+					'css-loader?url=false&outputStyle=expanded&sourceMap=true&sourceMapContents=true'
+				)
+			},
+			{
+				test: /\.(svg|gif|jpe?g|png)$/,
+				loader: 'url-loader?limit=10000'
+			},
+			{
+				test: /\.(eot|woff|woff2|ttf)$/,
+				loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
+			}
+		]
+	},
+	plugins: [
+		new webpack.DefinePlugin({
+			'process.env': { NODE_ENV: JSON.stringify('production') }
+		}),
+		new ExtractTextPlugin('[name].css')
+	]
+};```
+
+## CDN / Bundle
+
+A [bundled version of Design System React](https://github.com/salesforce/design-system-react/archive/v${dsrVersion}.zip) is available for download, but is not the recommended method for including the components in a project and should only be used for quick prototyping efforts.
+
+## Have fun!
+
+If you have support questions, please post a question to [StackOverflow](https://stackoverflow.com/questions/tagged/design-system-react) and tag with `design-system-react`. If you find any bugs, create a [GitHub Issue](https://github.com/salesforce/design-system-react/issues).

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "design-system-react",
-	"version": "0.8.17",
+	"version": "0.8.18",
 	"description": "Salesforce Lightning Design System for React",
 	"license": "SEE LICENSE IN README.md",
 	"engines": {

package.json

@@ -36,6 +36,7 @@ echo "## Cloning additional files"
 cp .gitignore .tmp/.gitignore
 cp LICENSE.txt .tmp/LICENSE.txt
 cp package.json .tmp/package.json
+cp -r docs .tmp/docs
 cp docs/README-dist.md .tmp/README.md
 
 echo "## Running JS steps"