Fix ID generation to ensure it produces valid CSS identifiers (#3139)

* Move the logic of generating the ID into its own utility
  function.

* Ensure the utility function generates IDs that are valid
  CSS identifiers.

  `shortid.generate()` by itself will generates IDs that
  are not always valid¹ CSS identifiers (e.g. will start
  with a digit). So, when other parts of the codebase will
  use those IDs as a selector, a `SyntaxError`² will be thrown
  (i.e. `'#...' is not a valid selector`).

  The `slds-` prefix is used so to keep things simple.
  `shortid.characters()` requires "a string of all 64 unique
  characters"³, which means that in order to generate valid
  CSS identifiers a-z, A-Z, and some "ISO 10646 characters
  U+00A0 and higher"¹ will need to be included.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ From https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

 " In CSS, identifiers (including element names, classes, and IDs
   in selectors) can contain only the characters [a-zA-Z0-9] and
   ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and
   the underscore (_); they cannot start with a digit, two hyphens,
   or a hyphen followed by a digit. "

² https://dom.spec.whatwg.org/#selectors

³ https://github.com/dylang/shortid/blob/937ce2c8dd7001baec1785cb8dce6e6fe1bcf61f/README.md#shortidcharactersstring

Author: alrra

components/accordion/index.jsx

@@ -8,9 +8,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import shortid from 'shortid';
 
 import { ACCORDION } from '../../utilities/constants';
+import generateId from '../../utilities/generate-id';
 
 const propTypes = {
 	/**
@@ -49,7 +49,7 @@ class Accordion extends Component {
 		super(props);
 		this.state = { currButtonIndex: 0 };
 		this.summaryButtons = [];
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 	}
 
 	componentDidUpdate(prevProps, prevState) {

components/app-launcher/index.jsx

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import isFunction from 'lodash.isfunction';
-import shortid from 'shortid';
 
 // 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';
@@ -20,6 +19,7 @@ import componentDoc from './component.json';
 import Modal from '../modal';
 
 import { APP_LAUNCHER } from '../../utilities/constants';
+import generateId from '../../utilities/generate-id';
 
 const defaultProps = {
 	assistiveText: {
@@ -127,7 +127,7 @@ class AppLauncher extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 		this.state = {
 			isOpen: false,
 		};

components/badge/index.jsx

@@ -10,21 +10,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-// ### 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';
-
 // ## Constants
 import { BADGE } from '../../utilities/constants';
 
+import generateId from '../../utilities/generate-id';
+
 /**
  * Badges are labels which hold small amounts of information.
  */
 class Badge extends React.Component {
 	constructor(props) {
 		super(props);
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 	}
 
 	/**

components/brand-band/index.jsx

@@ -11,11 +11,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// ### 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)
 // A simple javascript utility for conditionally joining classNames together.
@@ -27,6 +22,8 @@ import checkProps from './check-props';
 // ## Constants
 import { BRAND_BAND } from '../../utilities/constants';
 
+import generateId from '../../utilities/generate-id';
+
 /**
  * The brand band provides theming capability that adds personality and improves information density and contrast.
  */
@@ -35,7 +32,7 @@ class BrandBand extends React.Component {
 		super(props);
 
 		checkProps(BRAND_BAND, this.props);
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 	}
 
 	getId() {

components/button-group/index.jsx

@@ -10,12 +10,8 @@ import classNames from 'classnames';
 
 import assign from 'lodash.assign';
 
-// ### 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 { BUTTON_GROUP } from '../../utilities/constants';
+import generateId from '../../utilities/generate-id';
 
 const propTypes = {
 	/**
@@ -66,7 +62,7 @@ const defaultProps = { labels: {} };
 class ButtonGroup extends React.Component {
 	constructor(props) {
 		super(props);
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 	}
 
 	getId() {

components/card/__docs__/storybook-stories.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import shortid from 'shortid';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import IconSettings from '../../icon-settings';
@@ -21,6 +20,8 @@ import InlineEdit from '../../forms/input/inline';
 
 import RelatedListWithTable from '../__examples__/related-list-with-table';
 
+import generateId from '../../../utilities/generate-id';
+
 const sampleItems = [
 	{ id: '0', name: 'Cloudhub' },
 	{ id: '1', name: 'Cloudhub + Anypoint Connectors' },
@@ -69,7 +70,7 @@ class DemoCard extends React.Component {
 		this.setState({
 			items: [
 				// eslint-disable-next-line no-plusplus
-				{ id: currentId++, name: `New item #${shortid.generate()}` },
+				{ id: currentId++, name: `New item #${generateId()}` },
 				...this.state.items,
 			],
 		});

components/carousel/index.jsx

@@ -9,13 +9,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-// ### 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 { CAROUSEL } from '../../utilities/constants';
 
+import generateId from '../../utilities/generate-id';
+
 import {
 	canUseDOM,
 	canUseEventListeners,
@@ -151,7 +148,7 @@ class Carousel extends React.Component {
 			translateX: -1000000,
 		};
 
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 	}
 
 	componentDidMount() {

components/checkbox/index.jsx

@@ -11,11 +11,6 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
-// ### 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 from '../../utilities/key-code';
 import EventUtil from '../../utilities/event';
@@ -28,6 +23,7 @@ import { CHECKBOX } from '../../utilities/constants';
 import Icon from '../icon';
 
 import getAriaProps from '../../utilities/get-aria-props';
+import generateId from '../../utilities/generate-id';
 
 const propTypes = {
 	/**
@@ -211,7 +207,7 @@ class Checkbox extends React.Component {
 		super(props);
 
 		checkProps(CHECKBOX, this.props, componentDoc);
-		this.generatedId = shortid.generate();
+		this.generatedId = generateId();
 	}
 
 	getId = () => this.props.id || this.generatedId;

components/color-picker/index.jsx

@@ -3,7 +3,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import shortid from 'shortid';
 import assign from 'lodash.assign';
 
 import checkProps from './check-props';
@@ -21,6 +20,7 @@ import Popover from '../popover';
 import ColorUtils from '../../utilities/color';
 
 import { COLOR_PICKER } from '../../utilities/constants';
+import generateId from '../../utilities/generate-id';
 
 import componentDoc from './component.json';
 
@@ -247,7 +247,7 @@ class ColorPicker extends React.Component {
 	constructor(props) {
 		super(props);
 
-		this.generatedId = props.id || shortid.generate();
+		this.generatedId = props.id || generateId();
 		const workingColor = ColorUtils.getNewColor(
 			{
 				hex: props.valueWorking || props.value,

components/combobox/combobox.jsx

@@ -16,8 +16,6 @@ import isFunction from 'lodash.isfunction';
 
 import classNames from 'classnames';
 
-import shortid from 'shortid';
-
 import Button from '../button';
 import Dialog from '../utilities/dialog';
 import InnerInput from '../../components/input/private/inner-input';
@@ -37,6 +35,7 @@ import menuItemSelectScroll from '../../utilities/menu-item-select-scroll';
 import checkProps from './check-props';
 
 import { COMBOBOX } from '../../utilities/constants';
+import generateId from '../../utilities/generate-id';
 import componentDoc from './component.json';
 import { IconSettingsContext } from '../icon-settings';
 
@@ -446,8 +445,8 @@ class Combobox extends React.Component {
 		// `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
 		checkProps(COMBOBOX, props, componentDoc);
 
-		this.generatedId = shortid.generate();
-		this.generatedErrorId = shortid.generate();
+		this.generatedId = generateId();
+		this.generatedErrorId = generateId();
 		this.deselectId = `${this.getId()}-deselect`;
 	}