Revised element IDs within the Key Pad Menu section of src/docs to us…

…e IDs generated by the htmlIdGenerator utility function
elastic · Aug 30, 2021 · e5b4bdc · e5b4bdc
1 parent 2e0b0cd
commit e5b4bdc
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js
@@ -6,40 +6,44 @@ import {
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
+  const [keypadButtonID__1] = useState(htmlIdGenerator('keypad-button')());
+  const [keypadButtonID__2] = useState(htmlIdGenerator('keypad-button')());
+  const [keypadButtonID__3] = useState(htmlIdGenerator('keypad-button')());
+
   const radioGroupName = 'singleKeypadSelect';
-  const [singleSelectedID, setSingleSelectedID] = useState(
-    'singleKeypadSelect1'
-  );
+  const [singleSelectedID, setSingleSelectedID] = useState(keypadButtonID__1);
 
   return (
     <EuiKeyPadMenu checkable={{ ariaLegend: 'Single select as radios' }}>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect1"
+        id={keypadButtonID__1}
         label="Radio one"
         onChange={(id) => {
           setSingleSelectedID(id);
         }}
-        isSelected={singleSelectedID === 'singleKeypadSelect1'}>
+        isSelected={singleSelectedID === keypadButtonID__1}>
         <EuiIcon type="faceHappy" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect2"
+        id={keypadButtonID__2}
         label="Radio two"
         onChange={(id) => {
           setSingleSelectedID(id);
         }}
-        isSelected={singleSelectedID === 'singleKeypadSelect2'}>
+        isSelected={singleSelectedID === keypadButtonID__2}>
         <EuiIcon type="faceNeutral" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect3"
+        id={keypadButtonID__3}
         label="Disabled"
         isDisabled>
         <EuiIcon type="faceSad" size="l" />

diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js
@@ -6,14 +6,21 @@ import {
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [multiSelect1isSelected, setmultiSelect1isSelected] = useState(true);
   const [multiSelect3isSelected, setmultiSelect2isSelected] = useState(false);
 
+  const keypadButtonID__1 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__2 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__3 = htmlIdGenerator('keypad-button')();
+
   return (
     <EuiKeyPadMenu checkable={{ legend: 'Multi select as checkboxes' }}>
       <EuiKeyPadMenuItem
         checkable="multi"
+        id={keypadButtonID__1}
         isSelected={multiSelect1isSelected}
         label="Check one"
         onChange={() => {
@@ -24,7 +31,7 @@ export default () => {
       <EuiKeyPadMenuItem
         checkable="multi"
         isSelected={multiSelect3isSelected}
-        id="multiKeypadSelect2a"
+        id={keypadButtonID__2}
         label="Check two"
         onChange={() => {
           setmultiSelect2isSelected((selected) => !selected);
@@ -33,7 +40,7 @@ export default () => {
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="multi"
-        id="multiKeypadSelect3a"
+        id={keypadButtonID__3}
         label="Disabled"
         isDisabled>
         <EuiIcon type="faceSad" size="l" />

diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js b/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js
@@ -5,50 +5,57 @@ import {
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
-  const [selectedID, setSelectedID] = useState('keypadButton6');
+  const keypadButtonID__1 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__2 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__3 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__4 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__5 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__6 = htmlIdGenerator('keypad-button')();
+  const [selectedID, setSelectedID] = useState(keypadButtonID__6);
 
   return (
     <EuiKeyPadMenu>
       <EuiKeyPadMenuItem
-        id="keypadButton1"
+        id={keypadButtonID__1}
         label="Button"
-        isSelected={selectedID === 'keypadButton1'}
-        onClick={() => setSelectedID('keypadButton1')}>
+        isSelected={selectedID === keypadButtonID__1}
+        onClick={() => setSelectedID(keypadButtonID__1)}>
         <EuiIcon type="grid" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton3"
+        id={keypadButtonID__2}
         label="Button"
-        isSelected={selectedID === 'keypadButton3'}
-        onClick={() => setSelectedID('keypadButton3')}>
+        isSelected={selectedID === keypadButtonID__2}
+        onClick={() => setSelectedID(keypadButtonID__2)}>
         <EuiIcon type="grid" size="l" />
       </EuiKeyPadMenuItem>
-      <EuiKeyPadMenuItem id="keypadButton2" label="Disabled" isDisabled>
+      <EuiKeyPadMenuItem id={keypadButtonID__3} label="Disabled" isDisabled>
         <EuiIcon type="grid" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton4"
+        id={keypadButtonID__4}
         label="Link"
         href="#/navigation/key-pad-menu"
-        isSelected={selectedID === 'keypadButton4'}
-        onClick={() => setSelectedID('keypadButton4')}>
+        isSelected={selectedID === keypadButtonID__4}
+        onClick={() => setSelectedID(keypadButtonID__4)}>
         <EuiIcon type="link" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton5"
+        id={keypadButtonID__5}
         label="Link"
         href="#/navigation/key-pad-menu"
-        isSelected={selectedID === 'keypadButton5'}
-        onClick={() => setSelectedID('keypadButton5')}>
+        isSelected={selectedID === keypadButtonID__5}
+        onClick={() => setSelectedID(keypadButtonID__5)}>
         <EuiIcon type="link" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton6"
+        id={keypadButtonID__6}
         label="Disabled"
         isDisabled
-        isSelected={selectedID === 'keypadButton6'}>
+        isSelected={selectedID === keypadButtonID__6}>
         <EuiIcon type="link" size="l" />
       </EuiKeyPadMenuItem>
     </EuiKeyPadMenu>