[Docs] Replace Static HTML Element IDs Generated IDs (Display Section) (

#5270) * Update NPM version * Revised element IDs within the Card section of src/docs to use the IDs useGeneratedHtmlId utility function * Revised element IDs within the List Group section of src/docs to use the IDs useGeneratedHtmlId utility function * Revised element IDs within the Notification Event section of src/docs to use the IDs useGeneratedHtmlId utility function * Revised element IDs within the Tooltip section of src/docs to use the IDs useGeneratedHtmlId utility function * Delete package-lock.json * Update package.json * Update package.json * Update yarn.lock * Revised element IDs within the Tooltip section of src/docs to use the IDs useGeneratedHtmlId utility function
elastic · Oct 15, 2021 · 684b02d · 684b02d
1 parent 6cb6bf0
commit 684b02d
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 63 deletions.
diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.js
@@ -8,10 +8,10 @@ import {
   EuiFormFieldset,
 } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
-  const radioName = htmlIdGenerator()();
+  const radioGroupId = useGeneratedHtmlId({ prefix: 'radioGroup' });
   const [radio, setRadio] = useState('radio2');
   const [nestedRadio, setNestedRadio] = useState('nestedRadio1');
 
@@ -30,6 +30,19 @@ export default () => {
     },
   ];
 
+  const checkableCardId__1 = useGeneratedHtmlId({
+    prefix: 'checkableCard',
+    suffix: 'first',
+  });
+  const checkableCardId__2 = useGeneratedHtmlId({
+    prefix: 'checkableCard',
+    suffix: 'second',
+  });
+  const checkableCardId__3 = useGeneratedHtmlId({
+    prefix: 'checkableCard',
+    suffix: 'third',
+  });
+
   return (
     <Fragment>
       <EuiFormFieldset
@@ -42,9 +55,9 @@ export default () => {
         }}
       >
         <EuiCheckableCard
-          id={htmlIdGenerator()()}
+          id={checkableCardId__1}
           label="Option one"
-          name={radioName}
+          name={radioGroupId}
           value="radio1"
           checked={radio === 'radio1'}
           onChange={() => setRadio('radio1')}
@@ -53,9 +66,9 @@ export default () => {
         <EuiSpacer size="m" />
 
         <EuiCheckableCard
-          id={htmlIdGenerator()()}
+          id={checkableCardId__2}
           label="Option two"
-          name={radioName}
+          name={radioGroupId}
           value="radio2"
           checked={radio === 'radio2'}
           onChange={() => setRadio('radio2')}
@@ -71,9 +84,9 @@ export default () => {
         <EuiSpacer size="m" />
 
         <EuiCheckableCard
-          id={htmlIdGenerator()()}
+          id={checkableCardId__3}
           label="Option three (disabled)"
-          name={radioName}
+          name={radioGroupId}
           value="radio3"
           checked={radio === 'radio3'}
           onChange={() => setRadio('radio3')}

diff --git a/src-docs/src/views/card/card_checkable_checkbox.js b/src-docs/src/views/card/card_checkable_checkbox.js
@@ -2,14 +2,15 @@ import React, { useState } from 'react';
 
 import { EuiCheckableCard } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [checkbox, setCheckbox] = useState(false);
+  const checkboxCardId = useGeneratedHtmlId({ prefix: 'checkboxCard' });
 
   return (
     <EuiCheckableCard
-      id={htmlIdGenerator()()}
+      id={checkboxCardId}
       label="I am a checkbox"
       checkableType="checkbox"
       value="checkbox1"

diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js
@@ -1,13 +1,35 @@
 import React, { useState } from 'react';
 
 import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [favorite1, setFavorite1] = useState(undefined);
   const [favorite2, setFavorite2] = useState('link2');
   const [favorite3, setFavorite3] = useState(undefined);
   const [favorite4, setFavorite4] = useState(undefined);
 
+  const listGroupLinkId__1 = useGeneratedHtmlId({
+    prefix: 'listGroupLink',
+    suffix: 'first',
+  });
+  const listGroupLinkId__2 = useGeneratedHtmlId({
+    prefix: 'listGroupLink',
+    suffix: 'second',
+  });
+  const listGroupLinkId__3 = useGeneratedHtmlId({
+    prefix: 'listGroupLink',
+    suffix: 'third',
+  });
+  const listGroupLinkId__4 = useGeneratedHtmlId({
+    prefix: 'listGroupLink',
+    suffix: 'fourth',
+  });
+  const listGroupLinkId__5 = useGeneratedHtmlId({
+    prefix: 'listGroupLink',
+    suffix: 'fifth',
+  });
+
   const link1Clicked = () => {
     setFavorite1(favorite1 === 'link1' ? undefined : 'link1');
     if (favorite1 === undefined) {
@@ -39,7 +61,7 @@ export default () => {
   return (
     <EuiListGroup maxWidth={288}>
       <EuiListGroupItem
-        id="link1"
+        id={listGroupLinkId__1}
         iconType="bullseye"
         label="EUI button link"
         onClick={() => {}}
@@ -55,7 +77,7 @@ export default () => {
       />
 
       <EuiListGroupItem
-        id="link2"
+        id={listGroupLinkId__2}
         iconType="visualizeApp"
         onClick={() => {}}
         label="EUI button link"
@@ -70,7 +92,7 @@ export default () => {
       />
 
       <EuiListGroupItem
-        id="link3"
+        id={listGroupLinkId__3}
         iconType="lensApp"
         iconProps={{ color: 'default' }}
         onClick={() => {}}
@@ -86,7 +108,7 @@ export default () => {
       />
 
       <EuiListGroupItem
-        id="link4"
+        id={listGroupLinkId__4}
         onClick={() => {}}
         iconType="broom"
         label="EUI button link"
@@ -102,7 +124,7 @@ export default () => {
       />
 
       <EuiListGroupItem
-        id="link5"
+        id={listGroupLinkId__5}
         iconType="brush"
         isDisabled
         label="EUI button link"

diff --git a/src-docs/src/views/notification_event/notification_event.js b/src-docs/src/views/notification_event/notification_event.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { EuiPanel } from '../../../../src/components/panel';
 import { EuiContextMenuItem } from '../../../../src/components/context_menu';
 import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isRead, setIsRead] = useState(false);
@@ -10,6 +11,10 @@ export default () => {
     setIsRead(!isRead);
   };
 
+  const reportNotificationEventId = useGeneratedHtmlId({
+    prefix: 'reportNotificationEvent',
+  });
+
   const onOpenContextMenu = (id) => {
     return [
       <EuiContextMenuItem
@@ -32,7 +37,7 @@ export default () => {
   return (
     <EuiPanel paddingSize="none" hasShadow={true} style={{ maxWidth: '540px' }}>
       <EuiNotificationEvent
-        id="report"
+        id={reportNotificationEventId}
         type="Report"
         iconType="logoKibana"
         iconAriaLabel="Kibana"

diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-
 import {
   EuiCheckbox,
   EuiFlexGroup,
@@ -9,55 +8,62 @@ import {
   EuiText,
   EuiCode,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+export default () => {
+  const explainedCheckboxId = useGeneratedHtmlId({
+    prefix: 'explainedCheckbox',
+  });
 
-export default () => (
-  <Fragment>
-    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-      <EuiFlexItem grow={false}>
-        <EuiCheckbox
-          id="explainedCheckbox"
-          label="Use source maps"
-          onChange={() => {}}
-        />
-      </EuiFlexItem>
+  return (
+    <Fragment>
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiCheckbox
+            id={explainedCheckboxId}
+            label="Use source maps"
+            onChange={() => {}}
+          />
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiIconTip
-          content="Source maps allow browser dev tools to map minified code to the original source code"
-          position="right"
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiIconTip
+            content="Source maps allow browser dev tools to map minified code to the original source code"
+            position="right"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
 
-    <EuiSpacer />
+      <EuiSpacer />
 
-    <EuiIconTip
-      aria-label="Warning"
-      size="xl"
-      type="alert"
-      color="warning"
-      content="I do not think it means what you think it means"
-    />
+      <EuiIconTip
+        aria-label="Warning"
+        size="xl"
+        type="alert"
+        color="warning"
+        content="I do not think it means what you think it means"
+      />
 
-    <EuiSpacer />
+      <EuiSpacer />
 
-    <EuiText>
-      <p>
-        Pass a position utility class via <EuiCode>iconProps</EuiCode> to shift
-        for better alignment.
-        <EuiIconTip
-          type="iInCircle"
-          color="subdued"
-          content={
-            <span>
-              This was passed <EuiCode>.eui-alignTop</EuiCode>
-            </span>
-          }
-          iconProps={{
-            className: 'eui-alignTop',
-          }}
-        />
-      </p>
-    </EuiText>
-  </Fragment>
-);
+      <EuiText>
+        <p>
+          Pass a position utility class via <EuiCode>iconProps</EuiCode> to
+          shift for better alignment.
+          <EuiIconTip
+            type="iInCircle"
+            color="subdued"
+            content={
+              <span>
+                This was passed <EuiCode>.eui-alignTop</EuiCode>
+              </span>
+            }
+            iconProps={{
+              className: 'eui-alignTop',
+            }}
+          />
+        </p>
+      </EuiText>
+    </Fragment>
+  );
+};