fix(ui-utils): Generated element ids can't start with a number

junyper · junyper · commit c6e159eba5d7 · 2018-04-05T02:58:58.000Z
fixes INSTUI-1130 Test plan: - Verify that component examples render in IE/Edge Change-Id: Ic3716f61bdd55ea954262f92be3f615e72dc93d5 Reviewed-on: https://gerrit.instructure.com/145992 Reviewed-by: Clay Diffrient <cdiffrient@instructure.com> Product-Review: Jennifer Stern <jstern@instructure.com> QA-Review: Jennifer Stern <jstern@instructure.com> Tested-by: Jenkins
diff --git a/packages/media-capture/src/components/VideoPlayer/index.js b/packages/media-capture/src/components/VideoPlayer/index.js
@@ -24,7 +24,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import themeable from '@instructure/ui-themeable'
-import generate from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import VideoPlayerControls from './VideoPlayerControls'
 import Loading from '../MediaCapture/Loading'
@@ -84,7 +84,7 @@ class VideoPlayer extends Component {
       state: PAUSED,
       loadingSrc: true,
       showControls: true,
-      videoId: generate()
+      videoId: generateElementId('VideoPlayer')
     }
   }
 
diff --git a/packages/ui-alerts/src/components/Alert/index.js b/packages/ui-alerts/src/components/Alert/index.js
@@ -43,7 +43,7 @@ import themeable from '@instructure/ui-themeable'
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
 import deprecated from '@instructure/ui-utils/lib/react/deprecated'
 import warning from '@instructure/ui-utils/lib/warning'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -219,7 +219,7 @@ export default class Alert extends Component {
   createScreenreaderAlert () {
     const liveRegion = this.getLiveRegion()
     if (liveRegion) {
-      this.srid = uid()
+      this.srid = generateElementId('Alert')
 
       const div = document.createElement('div')
       div.setAttribute('id', this.srid)
diff --git a/packages/ui-code-editor/src/components/CodeEditor/index.js b/packages/ui-code-editor/src/components/CodeEditor/index.js
@@ -28,7 +28,7 @@ import classnames from 'classnames'
 
 import themeable from '@instructure/ui-themeable'
 import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import deprecated from '@instructure/ui-utils/lib/react/deprecated'
 
@@ -84,7 +84,7 @@ export default class CodeEditor extends Component {
 
   constructor (props) {
     super()
-    this._id = `CodeEditor__${uid()}`
+    this._id = generateElementId('CodeEditor')
 
     if (props.value === undefined) {
       this.state = {
diff --git a/packages/ui-core/src/components/PopoverMenu/index.js b/packages/ui-core/src/components/PopoverMenu/index.js
@@ -27,7 +27,7 @@ import PropTypes from 'prop-types'
 
 import Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover'
 
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import LayoutPropTypes from '@instructure/ui-layout/lib/utils/LayoutPropTypes'
 import { pickProps } from '@instructure/ui-utils/lib/react/passthroughProps'
@@ -113,7 +113,7 @@ export default class PopoverMenu extends Component {
       this.state.show = props.defaultShow
     }
 
-    this.labelId = `PopoverMenu__${uid()}`
+    this.labelId = generateElementId('PopoverMenu')
     this.raf = []
   }
 
diff --git a/packages/ui-core/src/components/Select/index.js b/packages/ui-core/src/components/Select/index.js
@@ -32,7 +32,7 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
 import IconArrowOpenDown from '@instructure/ui-icons/lib/Solid/IconArrowOpenDown'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import deprecated, { changedPackageWarning } from '@instructure/ui-utils/lib/react/deprecated'
 
 import FormField from '@instructure/ui-forms/lib/components/FormField'
@@ -101,7 +101,7 @@ class Select extends Component {
   constructor (props) {
     super()
 
-    this._defaultId = `Select__${uid()}`
+    this._defaultId = generateElementId('Select')
   }
 
   get id () {
diff --git a/packages/ui-elements/src/components/Badge/index.js b/packages/ui-elements/src/components/Badge/index.js
@@ -31,7 +31,7 @@ import themeable from '@instructure/ui-themeable'
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
 import LayoutPropTypes from '@instructure/ui-layout/lib/utils/LayoutPropTypes'
 import safeCloneElement from '@instructure/ui-utils/lib/react/safeCloneElement'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -94,7 +94,7 @@ class Badge extends Component {
 
   constructor (props) {
     super(props)
-    this._defaultId = `Badge__${uid()}`
+    this._defaultId = generateElementId('Badge')
   }
 
   countOverflow () {
diff --git a/packages/ui-elements/src/components/Spinner/index.js b/packages/ui-elements/src/components/Spinner/index.js
@@ -30,7 +30,7 @@ import Container from '@instructure/ui-container/lib/components/Container'
 import themeable from '@instructure/ui-themeable'
 import Browser from '@instructure/ui-utils/lib/Browser'
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -71,7 +71,7 @@ export default class Spinner extends Component {
   constructor (props) {
     super()
 
-    this.titleId = `Spinner__${uid()}`
+    this.titleId = generateElementId('Spinner')
   }
 
   radius () {
diff --git a/packages/ui-forms/src/components/Checkbox/index.js b/packages/ui-forms/src/components/Checkbox/index.js
@@ -32,7 +32,7 @@ import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction'
 import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
 import themeable from '@instructure/ui-themeable'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import { FormFieldMessages } from '../FormField'
 import FormPropTypes from '../../utils/FormPropTypes'
@@ -107,7 +107,7 @@ class Checkbox extends Component {
       this.state.checked = !!props.defaultChecked
     }
 
-    this._defaultId = `Checkbox__${uid()}`
+    this._defaultId = generateElementId('Checkbox')
   }
 
   handleChange = (e) => {
diff --git a/packages/ui-forms/src/components/CheckboxGroup/index.js b/packages/ui-forms/src/components/CheckboxGroup/index.js
@@ -25,7 +25,7 @@
 import React, { Children, Component } from 'react'
 import PropTypes from 'prop-types'
 
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import safeCloneElement from '@instructure/ui-utils/lib/react/safeCloneElement'
 import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
@@ -93,7 +93,7 @@ export default class CheckboxGroup extends Component {
       }
     }
 
-    this._messagesId = `CheckboxGroup__messages-${uid()}`
+    this._messagesId = generateElementId('CheckboxGroup-messages')
   }
 
   get hasMessages () {
diff --git a/packages/ui-forms/src/components/FileDrop/index.js b/packages/ui-forms/src/components/FileDrop/index.js
@@ -29,7 +29,7 @@ import classnames from 'classnames'
 import Container from '@instructure/ui-container/lib/components/Container'
 import themeable from '@instructure/ui-themeable'
 import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import FormPropTypes from '../../utils/FormPropTypes'
 import FormFieldMessages from '../FormField/FormFieldMessages'
@@ -186,8 +186,8 @@ export default class FileDrop extends Component {
   constructor (props) {
     super(props)
 
-    this.defaultId = `FileDrop__${uid()}`
-    this.messagesId = `FileDrop__messages-${uid()}`
+    this.defaultId = generateElementId('FileDrop')
+    this.messagesId = generateElementId('FileDrop-messages')
   }
 
   state = {
diff --git a/packages/ui-forms/src/components/FormField/FormFieldLayout/index.js b/packages/ui-forms/src/components/FormField/FormFieldLayout/index.js
@@ -35,7 +35,7 @@ import warning from '@instructure/ui-utils/lib/warning'
 import themeable from '@instructure/ui-themeable'
 import { omitProps, pickProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import getElementType from '@instructure/ui-utils/lib/react/getElementType'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import hasVisibleChildren from '@instructure/ui-a11y/lib/utils/hasVisibleChildren'
 
@@ -92,7 +92,7 @@ class FormFieldLayout extends Component {
   constructor (props) {
     super()
 
-    this._messagesId = props.messagesId || `FormFieldLayout__messages-${uid()}`
+    this._messagesId = props.messagesId || generateElementId('FormFieldLayout-messages')
 
     if (props.inline && props.layout === 'inline') {
       warning(
diff --git a/packages/ui-forms/src/components/NumberInput/index.js b/packages/ui-forms/src/components/NumberInput/index.js
@@ -36,7 +36,7 @@ import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroug
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import transformSelection from '@instructure/ui-utils/lib/dom/transformSelection'
 import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import themeable from '@instructure/ui-themeable'
 
@@ -135,7 +135,7 @@ class NumberInput extends Component {
 
   constructor (props) {
     super()
-    this._defaultId = `NumberInput_${uid()}`
+    this._defaultId = generateElementId('NumberInput')
   }
 
   _input = null
diff --git a/packages/ui-forms/src/components/RadioInput/index.js b/packages/ui-forms/src/components/RadioInput/index.js
@@ -26,7 +26,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import themeable from '@instructure/ui-themeable'
 import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
@@ -80,7 +80,7 @@ class RadioInput extends Component {
       this.state.checked = false
     }
 
-    this._defaultId = `RadioInput__${uid()}`
+    this._defaultId = generateElementId('RadioInput')
   }
 
   handleClick = (e) => {
diff --git a/packages/ui-forms/src/components/RadioInputGroup/index.js b/packages/ui-forms/src/components/RadioInputGroup/index.js
@@ -29,7 +29,7 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import safeCloneElement from '@instructure/ui-utils/lib/react/safeCloneElement'
 import matchComponentTypes from '@instructure/ui-utils/lib/react/matchComponentTypes'
 import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import RadioInput from '../RadioInput'
 
@@ -106,7 +106,7 @@ export default class RadioInputGroup extends Component {
       }
     }
 
-    this._messagesId = `RadioInputGroup__messages-${uid()}`
+    this._messagesId = generateElementId('RadioInputGroup-messages')
   }
 
   get hasMessages () {
diff --git a/packages/ui-forms/src/components/RangeInput/index.js b/packages/ui-forms/src/components/RangeInput/index.js
@@ -32,7 +32,7 @@ import themeable from '@instructure/ui-themeable'
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import addEventListener from '@instructure/ui-utils/lib/dom/addEventListener'
 import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import FormField from '../FormField'
 import FormPropTypes from '../../utils/FormPropTypes'
@@ -99,7 +99,7 @@ class RangeInput extends Component {
       }
     }
 
-    this.defaultId = `RangeInput_${uid()}`
+    this.defaultId = generateElementId('RangeInput')
   }
 
   /* workaround for https://github.com/facebook/react/issues/554 */
diff --git a/packages/ui-forms/src/components/Select/SelectField/index.js b/packages/ui-forms/src/components/Select/SelectField/index.js
@@ -34,7 +34,7 @@ import { omitProps, pickProps } from '@instructure/ui-utils/lib/react/passthroug
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction'
 import containsActiveElement from '@instructure/ui-utils/lib/dom/containsActiveElement'
 import findDOMNode from '@instructure/ui-utils/lib/dom/findDOMNode'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import Position, { PositionContent } from '@instructure/ui-layout/lib/components/Position'
 import FormField from '../../FormField'
@@ -218,9 +218,9 @@ class SelectField extends Component {
   constructor () {
     super(...arguments)
 
-    this._defaultId = `Select__${uid()}`
-    this._optionsId = `Select_Options_${uid()}`
-    this._assistId = `Select__assistiveText-${uid()}`
+    this._defaultId = generateElementId('Select')
+    this._optionsId = generateElementId('Select-Options')
+    this._assistId = generateElementId('Select-assistiveText')
   }
 
   _menu = null
diff --git a/packages/ui-forms/src/components/TextArea/index.js b/packages/ui-forms/src/components/TextArea/index.js
@@ -35,7 +35,7 @@ import requestAnimationFrame from '@instructure/ui-utils/lib/dom/requestAnimatio
 import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
 import px from '@instructure/ui-utils/lib/px'
 import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -126,7 +126,7 @@ class TextArea extends Component {
   constructor () {
     super()
 
-    this._defaultId = `TextArea__${uid()}`
+    this._defaultId = generateElementId('TextArea')
   }
 
   componentDidMount () {
diff --git a/packages/ui-forms/src/components/TextInput/index.js b/packages/ui-forms/src/components/TextInput/index.js
@@ -30,7 +30,7 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import themeable from '@instructure/ui-themeable'
 import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
 import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -100,8 +100,8 @@ class TextInput extends Component {
   constructor (props) {
     super()
 
-    this._defaultId = `TextInput_${uid()}`
-    this._messagesId = `TextInput__messages-${uid()}`
+    this._defaultId = generateElementId('TextInput')
+    this._messagesId = generateElementId('TextInput-messages')
   }
 
   /**
diff --git a/packages/ui-menu/src/components/Menu/MenuItemGroup/index.js b/packages/ui-menu/src/components/Menu/MenuItemGroup/index.js
@@ -30,7 +30,7 @@ import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import safeCloneElement from '@instructure/ui-utils/lib/react/safeCloneElement'
 import matchComponentTypes from '@instructure/ui-utils/lib/react/matchComponentTypes'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 
 import hasVisibleChildren from '@instructure/ui-a11y/lib/utils/hasVisibleChildren'
 
@@ -100,7 +100,7 @@ export default class MenuItemGroup extends Component {
       }
     }
 
-    this._labelId = `MenuItemGroup__${uid()}`
+    this._labelId = generateElementId('MenuItemGroup')
   }
 
   handleSelect = (e, value, selected, item) => {
diff --git a/packages/ui-menu/src/components/Menu/index.js b/packages/ui-menu/src/components/Menu/index.js
@@ -28,7 +28,7 @@ import keycode from 'keycode'
 
 import Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover'
 
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import deprecated from '@instructure/ui-utils/lib/react/deprecated'
 import LayoutPropTypes from '@instructure/ui-layout/lib/utils/LayoutPropTypes'
@@ -181,7 +181,7 @@ class Menu extends Component {
   _popover = null
   _trigger = null
   _menu = null
-  _labelId = `Menu__${uid()}`
+  _labelId = generateElementId('Menu')
   _activeSubMenu = null
 
   static childContextTypes = MenuContextTypes
diff --git a/packages/ui-overlays/src/components/Tooltip/index.js b/packages/ui-overlays/src/components/Tooltip/index.js
@@ -31,7 +31,7 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import LayoutPropTypes from '@instructure/ui-layout/lib/utils/LayoutPropTypes'
 import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import ensureSingleChild from '@instructure/ui-utils/lib/react/ensureSingleChild'
-import uid from '@instructure/ui-utils/lib/uid'
+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'
 import themeable from '@instructure/ui-themeable'
 
 import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
@@ -76,7 +76,7 @@ export default class Tooltip extends Component {
   constructor (props) {
     super()
 
-    this._id = `Tooltip__${uid()}`
+    this._id = generateElementId('Tooltip')
   }
 
   renderTrigger () {
diff --git a/packages/ui-pages/src/components/Pages/index.js b/packages/ui-pages/src/components/Pages/index.js
diff --git a/packages/ui-svg-images/src/components/InlineSVG/index.js b/packages/ui-svg-images/src/components/InlineSVG/index.js
diff --git a/packages/ui-tabs/src/components/TabList/index.js b/packages/ui-tabs/src/components/TabList/index.js
diff --git a/packages/ui-themeable/src/__tests__/themeable.test.js b/packages/ui-themeable/src/__tests__/themeable.test.js
diff --git a/packages/ui-themeable/src/themeable.js b/packages/ui-themeable/src/themeable.js
diff --git a/packages/ui-toggle-details/src/components/ToggleDetails/index.js b/packages/ui-toggle-details/src/components/ToggleDetails/index.js
diff --git a/packages/ui-utils/src/dom/__tests__/generateElementId.test.js b/packages/ui-utils/src/dom/__tests__/generateElementId.test.js
diff --git a/packages/ui-utils/src/dom/generateElementId.js b/packages/ui-utils/src/dom/generateElementId.js
diff --git a/packages/ui-utils/src/dom/index.js b/packages/ui-utils/src/dom/index.js
diff --git a/packages/ui-utils/src/uid.js b/packages/ui-utils/src/uid.js

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ import PropTypes from 'prop-types'`
`27`	`27`
`28`	`28`	`import Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover'`
`29`	`29`
`30`		`-import uid from '@instructure/ui-utils/lib/uid'`
	`30`	`+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'`
`31`	`31`	`import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'`
`32`	`32`	`import LayoutPropTypes from '@instructure/ui-layout/lib/utils/LayoutPropTypes'`
`33`	`33`	`import { pickProps } from '@instructure/ui-utils/lib/react/passthroughProps'`
`@@ -113,7 +113,7 @@ export default class PopoverMenu extends Component {`
`113`	`113`	`this.state.show = props.defaultShow`
`114`	`114`	`}`
`115`	`115`
`116`		- this.labelId = `PopoverMenu__${uid()}`
	`116`	`+ this.labelId = generateElementId('PopoverMenu')`
`117`	`117`	`this.raf = []`
`118`	`118`	`}`
`119`	`119`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'`
`32`	`32`	`import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction'`
`33`	`33`	`import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'`
`34`	`34`	`import themeable from '@instructure/ui-themeable'`
`35`		`-import uid from '@instructure/ui-utils/lib/uid'`
	`35`	`+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'`
`36`	`36`
`37`	`37`	`import { FormFieldMessages } from '../FormField'`
`38`	`38`	`import FormPropTypes from '../../utils/FormPropTypes'`
`@@ -107,7 +107,7 @@ class Checkbox extends Component {`
`107`	`107`	`this.state.checked = !!props.defaultChecked`
`108`	`108`	`}`
`109`	`109`
`110`		- this._defaultId = `Checkbox__${uid()}`
	`110`	`+ this._defaultId = generateElementId('Checkbox')`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`handleChange = (e) => {`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`import React, { Children, Component } from 'react'`
`26`	`26`	`import PropTypes from 'prop-types'`
`27`	`27`
`28`		`-import uid from '@instructure/ui-utils/lib/uid'`
	`28`	`+import generateElementId from '@instructure/ui-utils/lib/dom/generateElementId'`
`29`	`29`	`import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'`
`30`	`30`	`import safeCloneElement from '@instructure/ui-utils/lib/react/safeCloneElement'`
`31`	`31`	`import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'`
`@@ -93,7 +93,7 @@ export default class CheckboxGroup extends Component {`
`93`	`93`	`}`
`94`	`94`	`}`
`95`	`95`
`96`		- this._messagesId = `CheckboxGroup__messages-${uid()}`
	`96`	`+ this._messagesId = generateElementId('CheckboxGroup-messages')`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`get hasMessages () {`