Generate unique IDs (#347)

* Replaces uniqueId with shortid on Input

* Replaces uniqueId with shortid in DataTable

* Replaces uniqueId with shortid on Checkbox

* Replaces uniqueId with shortid on Menu Dropdown

There is enough linting to be done in this file that it warrants it's own PR

* adds shortid to card component

* removes commented test

* generate shortid on button

* Update to the latest SLDS beta

Author: iowillhoit

components/button/index.jsx

@@ -17,6 +17,11 @@ import omit from 'lodash.omit';
 
 import { BUTTON } from '../../utilities/constants';
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 const displayName = BUTTON;
 const propTypes = {
 	/**
@@ -65,6 +70,7 @@ const propTypes = {
 	variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon', 'inverse', 'icon-inverse'])
 };
 const defaultProps = {
+	id: shortid.generate(),
 	disabled: false,
 	hint: false,
 	iconSize: 'medium',

components/card/index.jsx

@@ -32,6 +32,11 @@ import Empty from './empty';
 // Removes the need for `PropTypes`.
 const { PropTypes } = React;
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 import { CARD } from '../../utilities/constants';
 
 // Allow for predicatable DOM queries with `querySelectorAll(cssClasses.base)`
@@ -84,11 +89,12 @@ const Card = React.createClass({
 		/**
 		 * Set the HTML `id` of the card. This also sets the `id` of the filter and the header actions.
 		 */
-		id: PropTypes.string.isRequired
+		id: PropTypes.string
 	},
 
 	getDefaultProps () {
 		return {
+			id: shortid.generate(),
 			heading: 'Related Items'
 		};
 	},

components/data-table/index.jsx

@@ -18,6 +18,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 // ### React
 import React from 'react';
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 // ### classNames
 import classNames from 'classnames';
 
@@ -33,9 +38,6 @@ import isFunction from 'lodash.isfunction';
 // ### reject
 import reject from 'lodash.reject';
 
-// ### uniqueId
-import uniqueId from 'lodash.uniqueid';
-
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
@@ -86,12 +88,15 @@ const DataTable = React.createClass({
 		 * Class names to be added to the table.
 		 */
 		className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+		/**
+		 * A unique ID is needed in order to support keyboard navigation and ARIA support.
+		 */
 		id: PropTypes.string,
-    /**
+		/**
  		 * The collection of items to render in the table.
  		 */
 		items: PropTypes.array.isRequired,
-    /**
+		/**
 		 * This function fires when the selection of rows changes.
 		 */
 		onChange: PropTypes.func,
@@ -124,7 +129,7 @@ const DataTable = React.createClass({
 	getDefaultProps () {
 		return {
 			bordered: false,
-			id: uniqueId(`${DATA_TABLE}-`),
+			id: shortid.generate(),
 			selection: [],
 			selectRows: false,
 			stacked: false,

components/forms/checkbox/index.jsx

@@ -19,8 +19,10 @@ import React from 'react';
 // ### isFunction
 import isFunction from 'lodash.isfunction';
 
-// ### uniqueId
-import uniqueId from 'lodash.uniqueid';
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
 
 // ### Event Helpers
 import { KEYS, EventUtil } from '../../../utilities';
@@ -68,6 +70,9 @@ const Checkbox = React.createClass({
 		 * Message to display when the Checkbox is in an error state. When this is present, also visually highlights the component as in error.
 		 */
 		errorText: React.PropTypes.string,
+		/**
+		 * A unique ID is needed in order to support keyboard navigation and ARIA support.
+		 */
 		id: PropTypes.string,
 		/**
 		 * An optional label for the Checkbox.
@@ -85,7 +90,7 @@ const Checkbox = React.createClass({
 
 	getDefaultProps () {
 		return {
-			id: uniqueId(`${FORMS_CHECKBOX}-`)
+			id: shortid.generate()
 		};
 	},
 

components/forms/input/index.jsx

@@ -17,6 +17,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 // React is an external dependency of the project.
 import React from 'react';
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 // ### classNames
 // [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
 // This project uses `classnames`, "a simple javascript utility for conditionally
@@ -99,7 +104,7 @@ const Input = React.createClass({
 		/**
 		 * Every input must have a unique ID in order to support keyboard navigation and ARIA support.
 		 */
-		id: PropTypes.string.isRequired,
+		id: PropTypes.string,
 		/**
 		 * This label appears above the input.
 		 */
@@ -160,6 +165,7 @@ const Input = React.createClass({
 
 	getDefaultProps () {
 		return {
+			id: shortid.generate(),
 			iconPosition: 'left',
 			type: 'text'
 		};

components/forms/input/inline.jsx

@@ -194,7 +194,7 @@ const InlineEdit = React.createClass({
 
 	handleBlur () {
 		if (!this.willSave) {
-			this.willSave = setTimeout(this.saveEdits, 100);
+			this.willSave = setTimeout(this.saveEdits, 200);
 		}
 	},
 

components/menu-dropdown/index.jsx

@@ -18,8 +18,10 @@ import ListItemLabel from "../menu-list/list-item-label";
 
 import { MENU_DROPDOWN } from '../../utilities/constants';
 
-// ### uniqueId
-import uniqueId from 'lodash.uniqueid';
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
 
 const displayName = MENU_DROPDOWN;
 const propTypes = {
@@ -43,6 +45,9 @@ const propTypes = {
    * Delay on menu closing.
    */
   hoverCloseDelay: React.PropTypes.number,
+  /**
+  * A unique ID is needed in order to support keyboard navigation and ARIA support.
+  */
   id: React.PropTypes.string,
   label: React.PropTypes.string,
   /**
@@ -74,7 +79,7 @@ const defaultProps = {
   checkmark: false,
   disabled: false,
   hoverCloseDelay: 300,
-  id: uniqueId(`${MENU_DROPDOWN}-`),
+  id: shortid.generate(),
   openOn: "click",
   modal: true,
 };

package.json

@@ -58,13 +58,14 @@
     "react-highlighter": "^0.3.2",
     "react-modal": "^0.6.1",
     "react-onclickoutside": "^4.5.0",
+    "shortid": "^2.2.6",
     "tether": "1.1.0",
     "tether-drop": "1.2.2",
     "warning": "^2.1.0"
   },
   "devDependencies": {
     "@kadira/storybook": "^1.27.0",
-    "@salesforce-ux/design-system": "git+ssh://[email protected]/salesforce-ux/design-system-internal.git#v2.1.0-beta.2-dist",
+    "@salesforce-ux/design-system": "git+ssh://[email protected]/salesforce-ux/design-system-internal.git#v2.1.0-beta.3-dist",
     "@salesforce-ux/icons": "4.0.0",
     "async": "^2.0.0-rc.5",
     "babel": "^6.5.2",

stories/forms/input/index.jsx

@@ -10,21 +10,18 @@ storiesOf(FORMS_INPUT, module)
 	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
 	.add('Standard Input', () => (
 		<Input
-			id="unique-id-1"
 			label="Input Label"
 			placeholder="Placeholder Text"
 		/>
 	))
 	.add('Assistive Text, No Label', () => (
 		<Input
-			id="unique-id-1"
 			assistiveText="Assistive Text"
 			placeholder="Placeholder Text"
 		/>
 	))
 	.add('Input with Clickable Icon', () => (
 		<Input
-			id="unique-id-2"
 			label="Input Label"
 			iconName="close"
 			iconCategory="utility"
@@ -35,15 +32,13 @@ storiesOf(FORMS_INPUT, module)
 	))
 	.add('Read Only Input', () => (
 		<Input
-			id="unique-id-3"
 			label="Input Label"
 			readOnly
 			value="Read Only Value"
 		/>
 	))
 	.add('Required Input in Error State', () => (
 		<Input
-			id="unique-id-4"
 			label="Input Label"
 			required
 			errorText="Error Message"

tests/input/input.test.jsx

@@ -17,7 +17,6 @@ const {
 
 describe('SLDS INPUT **************************************************', () => {
 	const defaultProps = {
-		id: 'unique-id-2',
 		placeholder: 'Placeholder Text'
 	};
 
@@ -148,28 +147,4 @@ describe('SLDS INPUT **************************************************', () =>
 			expect(error.textContent).to.equal('Error Message');
 		});
 	});
-
-
-	// describe('Input with Clickable Icon', () => {
-	// 	let component;
-	// 	let input;
-	// 	let label;
-	// 	let icon;
-
-	// 	beforeEach(() => {
-	// 		component = getInput({ label: 'Input Label' });
-	// 		input = findRenderedDOMComponentWithTag(component, 'input');
-	// 		inputWrapper = findRenderedDOMComponentWithClass(component, 'slds-form-element__control');
-	// 		label = findRenderedDOMComponentWithClass(component, 'slds-form-element__label');
-	// 		icon = findRenderedDOMComponentWithTag(component, 'svg');
-	// 	});
-
-	// 	afterEach(() => {
-	// 		removeInput();
-	// 	});
-
-	// 	// input wrapper has class "slds-input-has-icon"
-	// 	// icon has class "slds-input__icon"
-	// 	// icon can be clicked (Simulate)
-	// });
 });