shifting makeId to htmlIdGenerator

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 - Added `title` to headers of `EuiTable` in case of truncation ([#3094](https://github.com/elastic/eui/pull/3094))
 - Added i18n to `EuiTableHeaderCell` ([#3094](https://github.com/elastic/eui/pull/3094))
+- Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator
 - Added `number` and `string` to `size` type of `EuiImage` for setting custom sizes ([#3012](https://github.com/elastic/eui/pull/3012))
 
 **Bug Fixes**

src-docs/src/views/button/button_group.js

@@ -6,16 +6,16 @@ import {
  EuiTitle,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 import { EuiPanel } from '../../../../src/components/panel/panel';
 
 export default class extends Component {
  constructor(props) {
  super(props);
 
- const idPrefix = makeId();
- const idPrefix2 = makeId();
- const idPrefix3 = makeId();
+ const idPrefix = htmlIdGenerator()();
+ const idPrefix2 = htmlIdGenerator()();
+ const idPrefix3 = htmlIdGenerator()();
 
  this.toggleButtons = [
  {
@@ -209,7 +209,7 @@ export default class extends Component {
  />
  <EuiSpacer size="m" />
  <EuiTitle size="xxs">
- <h3>Primary &amp; multi select</h3>
+ <h3> Primary & amp; multi select </h3>
  </EuiTitle>
  <EuiSpacer size="s" />
  <EuiButtonGroup
@@ -223,7 +223,7 @@ export default class extends Component {
  />
  <EuiSpacer size="m" />
  <EuiTitle size="xxs">
- <h3>Disabled &amp; full width</h3>
+ <h3> Disabled & amp; full width </h3>
  </EuiTitle>
  <EuiSpacer size="s" />
  <EuiButtonGroup
@@ -238,7 +238,7 @@ export default class extends Component {
  />
  <EuiSpacer size="m" />
  <EuiTitle size="xxs">
- <h3>Icons only</h3>
+ <h3> Icons only </h3>
  </EuiTitle>
  <EuiSpacer size="s" />
  <EuiButtonGroup
@@ -249,7 +249,7 @@ export default class extends Component {
  onChange={this.onChangeIcons}
  isIconOnly
  />
- &nbsp;&nbsp;
+ &nbsp; &nbsp;
  <EuiButtonGroup
  legend="Text style"
  options={this.toggleButtonsIconsMulti}
@@ -259,11 +259,14 @@ export default class extends Component {
  isIconOnly
  />
  <EuiSpacer />
- <EuiPanel style={{ maxWidth: 300 }}>
+ <EuiPanel
+ style={{
+ maxWidth: 300,
+ }}>
  <EuiTitle size="xxxs">
  <h3>
  Compressed groups should always be fullWidth so they line up
- nicely in their small container.
+ nicely in their small container.{' '}
  </h3>
  </EuiTitle>
  <EuiSpacer size="s" />
@@ -278,7 +281,7 @@ export default class extends Component {
  />
  <EuiSpacer />
  <EuiTitle size="xxxs">
- <h3>Unless they are icon only</h3>
+ <h3> Unless they are icon only </h3>
  </EuiTitle>
  <EuiSpacer size="s" />
  <EuiButtonGroup

src-docs/src/views/card/card_checkable.js

@@ -8,11 +8,11 @@ import {
  EuiFormFieldset,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  state = {
- radioName: makeId(),
+ radioName: htmlIdGenerator()(),
  radio: 'radio2',
  nestedRadio: 'nestedRadio1',
  checkbox: false,
@@ -47,7 +47,7 @@ export default class extends Component {
  ),
  }}>
  <EuiCheckableCard
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="Option one"
  name={radioName}
  value="radio1"
@@ -58,7 +58,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiCheckableCard
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="Option two"
  name={radioName}
  value="radio2"
@@ -75,7 +75,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiCheckableCard
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="Option three (disabled)"
  name={radioName}
  value="radio3"
@@ -88,7 +88,7 @@ export default class extends Component {
  <EuiSpacer size="xl" />
 
  <EuiCheckableCard
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a checkbox"
  checkableType="checkbox"
  value="checkbox1"

src-docs/src/views/form_compressed/complex_example.js

@@ -22,14 +22,14 @@ import {
  EuiSuperSelect,
  EuiToolTip,
 } from '../../../../src/components';
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
  super(props);
- const idPrefix = makeId;
- const idPrefix2 = makeId;
- const idPrefix3 = makeId;
+ const idPrefix = htmlIdGenerator();
+ const idPrefix2 = htmlIdGenerator();
+ const idPrefix3 = htmlIdGenerator();
 
  this.toggleButtons = [
  {

src-docs/src/views/form_compressed/form_compressed.js

@@ -13,13 +13,13 @@ import {
  EuiSpacer,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
  super(props);
 
- const idPrefix = makeId();
+ const idPrefix = htmlIdGenerator()();
 
  this.state = {
  isSwitchChecked: false,

src-docs/src/views/form_controls/checkbox.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import { EuiCheckbox, EuiSpacer } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
@@ -30,7 +30,7 @@ export default class extends Component {
  return (
  <Fragment>
  <EuiCheckbox
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a checkbox"
  checked={this.state.checked}
  onChange={this.onChange}
@@ -39,7 +39,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiCheckbox
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am an indeterminate checkbox"
  indeterminate={this.state.indeterminate}
  onChange={this.onChangeIndeterminate}
@@ -48,7 +48,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiCheckbox
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a disabled checkbox"
  checked={this.state.checked}
  onChange={this.onChange}
@@ -58,7 +58,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiCheckbox
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a compressed checkbox"
  checked={this.state.checked}
  onChange={this.onChange}

src-docs/src/views/form_controls/checkbox_group.js

@@ -3,13 +3,13 @@ import React, { Component } from 'react';
 import { EuiCheckboxGroup } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
  super(props);
 
- const idPrefix = makeId();
+ const idPrefix = htmlIdGenerator()();
 
  this.checkboxes = [
  {

src-docs/src/views/form_controls/radio.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import { EuiRadio, EuiSpacer } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
@@ -23,7 +23,7 @@ export default class extends Component {
  return (
  <Fragment>
  <EuiRadio
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a radio"
  checked={this.state.checked}
  onChange={this.onChange}
@@ -32,7 +32,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiRadio
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a disabled radio"
  checked={this.state.checked}
  onChange={this.onChange}
@@ -42,7 +42,7 @@ export default class extends Component {
  <EuiSpacer size="m" />
 
  <EuiRadio
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="I am a compressed radio"
  checked={this.state.checked}
  onChange={this.onChange}

src-docs/src/views/form_controls/radio_group.js

@@ -2,14 +2,14 @@ import React, { Component } from 'react';
 
 import { EuiRadioGroup } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 import { DisplayToggles } from './display_toggles';
 
 export default class extends Component {
  constructor(props) {
  super(props);
 
- const idPrefix = makeId();
+ const idPrefix = htmlIdGenerator()();
 
  this.radios = [
  {

src-docs/src/views/form_layouts/described_form_group.js

@@ -13,13 +13,13 @@ import {
  EuiLink,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
  super(props);
 
- const idPrefix = makeId();
+ const idPrefix = htmlIdGenerator()();
 
  this.state = {
  isSwitchChecked: false,

src-docs/src/views/form_layouts/form_rows.js

@@ -15,13 +15,13 @@ import {
  EuiText,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services/accessibility';
 
 export default class extends Component {
  constructor(props) {
  super(props);
 
- const idPrefix = makeId();
+ const idPrefix = htmlIdGenerator()();
 
  this.state = {
  isSwitchChecked: false,

src-docs/src/views/form_layouts/inline_popover.js

@@ -14,7 +14,7 @@ import {
  EuiSwitch,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
  constructor(props) {
@@ -111,7 +111,7 @@ export default class extends Component {
  <EuiForm>
  <EuiFormRow>
  <EuiSwitch
- id={makeId()}
+ id={htmlIdGenerator()()}
  name="popswitch"
  label="Isn't this popover form cool?"
  checked={this.state.isSwitch2Checked}

src-docs/src/views/guidelines/writing.js

@@ -30,7 +30,7 @@ import {
  EuiTab,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const GuideRuleWriting = ({ children, className, ...rest }) => {
  const classes = classNames(className);
@@ -615,7 +615,7 @@ export default () => (
  <EuiFormRow>
  <EuiCheckbox
  onChange={() => {}}
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="Combine values in other bucket"
  />
  </EuiFormRow>
@@ -627,7 +627,7 @@ export default () => (
  <EuiFormRow>
  <EuiCheckbox
  onChange={() => {}}
- id={makeId()}
+ id={htmlIdGenerator()()}
  label="Combine other"
  />
  </EuiFormRow>

src-docs/src/views/modal/modal.js

@@ -20,7 +20,7 @@ import {
 
 import SuperSelectComplexExample from '../super_select/super_select_complex';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export class Modal extends Component {
  constructor(props) {
@@ -54,7 +54,7 @@ export class Modal extends Component {
  <EuiForm>
  <EuiFormRow>
  <EuiSwitch
- id={makeId()}
+ id={htmlIdGenerator()()}
  name="popswitch"
  label="Isn't this modal form cool?"
  checked={this.state.isSwitchChecked}