shifting makeId to htmlIdGenerator

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129))
+
+**Bug Fixes**
+
 - Fixed the `img` element in `EuiIcon` using custom SVGs to have an `alt` attribute with an empty string, rather than no `alt` attribute at all ([#3245](https://github.com/elastic/eui/pull/3245))
 
 ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0)

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 = [
  {

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_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_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/range/levels.js

@@ -7,7 +7,7 @@ import {
  EuiDualRange,
 } 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) {
@@ -48,7 +48,7 @@ export default class extends Component {
  return (
  <Fragment>
  <EuiRange
- id={makeId()}
+ id={htmlIdGenerator()()}
  value={this.state.value}
  onChange={this.onChange}
  showTicks
@@ -64,7 +64,7 @@ export default class extends Component {
  <EuiSpacer size="xl" />
 
  <EuiDualRange
- id={makeId()}
+ id={htmlIdGenerator()()}
  value={this.state.dualValue}
  onChange={this.onDualChange}
  showTicks

src-docs/src/views/tables/auto/auto.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { createDataStore } from '../data_store';
 
-import makeId from '../../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../../src/services';
 
 import {
  EuiBasicTable,
@@ -138,7 +138,7 @@ const getCellProps = (item, column) => {
  };
 };
 
-const idPrefix = makeId();
+const idPrefix = htmlIdGenerator()();
 
 const toggleButtons = [
  {

src/components/basic_table/basic_table.tsx

@@ -42,7 +42,8 @@ import { EuiIcon } from '../icon';
 import { EuiKeyboardAccessible, EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
-import makeId from '../form/form_row/make_id';
+
+import { htmlIdGenerator } from '../../services/accessibility';
 import { Action } from './action_types';
 import {
  EuiTableActionsColumnType,
@@ -617,7 +618,7 @@ export class EuiBasicTable<T = any> extends Component<
  <EuiI18n token="euiBasicTable.selectAllRows" default="Select all rows">
  {(selectAllRows: string) => (
  <EuiCheckbox
- id={`_selection_column-checkbox_${makeId()}`}
+ id={`_selection_column-checkbox_${htmlIdGenerator()()}`}
  type={isMobile ? undefined : 'inList'}
  checked={checked}
  disabled={disabled}

src/components/card/card.test.tsx

@@ -6,7 +6,9 @@ import { EuiCard } from './card';
 
 import { EuiIcon } from '../icon';
 
-jest.mock('./../form/form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../services/accessibility', () => ({
+ htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiCard', () => {
  test('is rendered', () => {

src/components/card/card.tsx

@@ -12,7 +12,7 @@ import {
  EuiCardSelectProps,
  euiCardSelectableColor,
 } from './card_select';
-import makeId from '../form/form_row/make_id';
+import { htmlIdGenerator } from '../../services/accessibility';
 
 type CardAlignment = 'left' | 'center' | 'right';
 
@@ -202,7 +202,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
  className
  );
 
- const ariaId = makeId();
+ const ariaId = htmlIdGenerator()();
 
  /**
  * Top area containing image, icon or both

src/components/combo_box/combo_box_input/combo_box_input.tsx

@@ -23,8 +23,6 @@ import {
 } from '../types';
 import { CommonProps } from '../../common';
 
-const makeId = htmlIdGenerator();
-
 export interface EuiComboBoxInputProps<T> extends CommonProps {
  autoSizeInputRef?: RefCallback<AutosizeInput & HTMLInputElement>;
  compressed: boolean;
@@ -189,7 +187,7 @@ export class EuiComboBoxInput<T> extends Component<
  }Combo box input. ${readPlaceholder} Type some text or, to display a list of choices, press Down Arrow. ` +
  'To exit the list of choices, press Escape.';
 
- removeOptionMessageId = makeId();
+ removeOptionMessageId = htmlIdGenerator()();
 
  // aria-live="assertive" will read this message aloud immediately once it enters the DOM.
  // We'll render to the DOM when the input gains focus and remove it when the input loses focus.

src/components/form/described_form_group/described_form_group.test.tsx

@@ -5,7 +5,9 @@ import { requiredProps } from '../../../test';
 import { EuiFormRow } from '../form_row';
 import { EuiDescribedFormGroup } from './described_form_group';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+ htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiDescribedFormGroup', () => {
  const props = {

src/components/form/form_row/form_row.test.tsx

@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test';
 
 import { EuiFormRow, DISPLAYS } from './form_row';
 
-jest.mock('./make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+ htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiFormRow', () => {
  test('is rendered', () => {

src/components/form/form_row/form_row.tsx

@@ -15,7 +15,7 @@ import { EuiFormHelpText } from '../form_help_text';
 import { EuiFormErrorText } from '../form_error_text';
 import { EuiFormLabel } from '../form_label';
 
-import makeId from './make_id';
+import { htmlIdGenerator } from '../../../services/accessibility';
 
 const displayToClassNameMap = {
  row: null,
@@ -110,7 +110,7 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
 
  state: EuiFormRowState = {
  isFocused: false,
- id: this.props.id || makeId(),
+ id: this.props.id || htmlIdGenerator()(),
  };
 
  onFocus = (...args: any[]) => {

src/components/form/form_row/make_id.test.ts

@@ -1,6 +1,24 @@
 import makeId from './make_id';
 
 describe('makeId', () => {
+ const _consoleLog = console.log;
+ beforeAll(() => {
+ const _consoleLog = console.log;
+ console.log = (...args: any[]) => {
+ // swallow the deprecation warning
+ if (
+ args[0] ===
+ 'WARNING: makeId is deprecated. Use htmlIdGenerator from @elastic/eui instead.'
+ )
+ return;
+ _consoleLog.call(console, args);
+ };
+ });
+
+ afterAll(() => {
+ console.log = _consoleLog;
+ });
+
  let ids: Map<string, boolean>;
  beforeEach(() => {
  ids = new Map<string, boolean>();

src/components/form/form_row/make_id.ts

@@ -1,6 +1,9 @@
 // Generate statistically almost-certainly-unique `id`s for associating form
 // inputs with their labels and other descriptive text elements.
 function makeId(): string {
+ console.log(
+ 'WARNING: makeId is deprecated. Use htmlIdGenerator from @elastic/eui instead.'
+ );
  return Math.random()
  .toString(36)
  .slice(-8);

src/components/form/range/dual_range.test.tsx

@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiDualRange } from './dual_range';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+ htmlIdGenerator: () => () => 'generated-id',
+}));
 
 const props = {
  onChange: () => {},

src/components/form/range/dual_range.tsx

@@ -8,7 +8,8 @@ import {
  EuiFormControlLayoutDelimited,
  EuiFormControlLayoutProps,
 } from '../form_control_layout';
-import makeId from '../form_row/make_id';
+
+import { htmlIdGenerator } from '../../../services/accessibility';
 
 import { EuiRangeProps } from './range';
 import { EuiRangeHighlight } from './range_highlight';
@@ -102,7 +103,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
  };
 
  state = {
- id: this.props.id || makeId(),
+ id: this.props.id || htmlIdGenerator()(),
  hasFocus: false,
  rangeSliderRefAvailable: false,
  isPopoverOpen: false,