[Docs] Replace Static HTML Element IDs Generated IDs (Nav Section) (#…

…5224) * Revised element IDs within the Accordion section of src/docs to use IDs generated the htmlIdGenerator utility function * Revised element IDs within the Accordion section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Flyout section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Modal section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Test commit * Revised element IDs within the Resizable Panel section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Resizable Panel section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Button section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Button section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Collapsible Nav section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Context Menu section of src/docs to use the useGeneratedHtmlId utility function * Revisions from PR * Revised element IDs within the Keypad and Tabs sections of src/docs to use the useGeneratedHtmlId utility function
elastic · Oct 14, 2021 · c92914a · c92914a
1 parent d976877
commit c92914a
Show file tree

Hide file tree

Showing 14 changed files with 290 additions and 167 deletions.
diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
@@ -6,61 +6,72 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
-
-const idPrefix = htmlIdGenerator()();
-const idPrefix2 = htmlIdGenerator()();
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
+  const basicButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'basicButtonGroup',
+  });
+  const multiSelectButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'multiSelectButtonGroup',
+  });
+  const disabledButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'disabledButtonGroup',
+  });
+
   const toggleButtons = [
     {
-      id: `${idPrefix}0`,
+      id: `${basicButtonGroupPrefix}__0`,
       label: 'Option one',
     },
     {
-      id: `${idPrefix}1`,
+      id: `${basicButtonGroupPrefix}__1`,
       label: 'Option two is selected by default',
     },
     {
-      id: `${idPrefix}2`,
+      id: `${basicButtonGroupPrefix}__2`,
       label: 'Option three',
     },
   ];
 
   const toggleButtonsDisabled = [
     {
-      id: `${idPrefix}3`,
+      id: `${disabledButtonGroupPrefix}__0`,
       label: 'Option one',
     },
     {
-      id: `${idPrefix}4`,
+      id: `${disabledButtonGroupPrefix}__1`,
       label: 'Option two is selected by default',
     },
     {
-      id: `${idPrefix}5`,
+      id: `${disabledButtonGroupPrefix}__2`,
       label: 'Option three',
     },
   ];
 
   const toggleButtonsMulti = [
     {
-      id: `${idPrefix2}0`,
+      id: `${multiSelectButtonGroupPrefix}__0`,
       label: 'Option 1',
     },
     {
-      id: `${idPrefix2}1`,
+      id: `${multiSelectButtonGroupPrefix}__1`,
       label: 'Option 2 is selected by default',
     },
     {
-      id: `${idPrefix2}2`,
+      id: `${multiSelectButtonGroupPrefix}__2`,
       label: 'Option 3',
     },
   ];
 
-  const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}1`);
-  const [toggleIdDisabled, setToggleIdDisabled] = useState(`${idPrefix}4`);
+  const [toggleIdSelected, setToggleIdSelected] = useState(
+    `${basicButtonGroupPrefix}__1`
+  );
+  const [toggleIdDisabled, setToggleIdDisabled] = useState(
+    `${disabledButtonGroupPrefix}__1`
+  );
   const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({
-    [`${idPrefix2}1`]: true,
+    [`${multiSelectButtonGroupPrefix}__1`]: true,
   });
 
   const onChange = (optionId) => {

diff --git a/src-docs/src/views/button/button_group_compressed.js b/src-docs/src/views/button/button_group_compressed.js
@@ -6,49 +6,53 @@ import {
   EuiPanel,
 } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
-
-const idPrefix2 = htmlIdGenerator()();
-const idPrefix3 = htmlIdGenerator()();
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
+  const compressedToggleButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'compressedToggleButtonGroup',
+  });
+  const multiSelectButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'multiSelectButtonGroup',
+  });
+
   const toggleButtonsCompressed = [
     {
-      id: `${idPrefix2}3`,
+      id: `${compressedToggleButtonGroupPrefix}__0`,
       label: 'fine',
     },
     {
-      id: `${idPrefix2}4`,
+      id: `${compressedToggleButtonGroupPrefix}__1`,
       label: 'rough',
     },
     {
-      id: `${idPrefix2}5`,
+      id: `${compressedToggleButtonGroupPrefix}__2`,
       label: 'coarse',
     },
   ];
 
   const toggleButtonsIconsMulti = [
     {
-      id: `${idPrefix3}3`,
+      id: `${multiSelectButtonGroupPrefix}__0`,
       label: 'Bold',
       name: 'bold',
       iconType: 'editorBold',
     },
     {
-      id: `${idPrefix3}4`,
+      id: `${multiSelectButtonGroupPrefix}__1`,
       label: 'Italic',
       name: 'italic',
       iconType: 'editorItalic',
       isDisabled: true,
     },
     {
-      id: `${idPrefix3}5`,
+      id: `${multiSelectButtonGroupPrefix}__2`,
       label: 'Underline',
       name: 'underline',
       iconType: 'editorUnderline',
     },
     {
-      id: `${idPrefix3}6`,
+      id: `${multiSelectButtonGroupPrefix}__3`,
       label: 'Strikethrough',
       name: 'strikethrough',
       iconType: 'editorStrike',
@@ -60,7 +64,7 @@ export default () => {
     setToggleIconIdToSelectedMapIcon,
   ] = useState({});
   const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(
-    `${idPrefix2}4`
+    `${compressedToggleButtonGroupPrefix}__1`
   );
 
   const onChangeCompressed = (optionId) => {

diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js
@@ -9,9 +9,13 @@ import {
   EuiContextMenuItem,
   EuiPopover,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const splitButtonPopoverId = useGeneratedHtmlId({
+    prefix: 'splitButtonPopover',
+  });
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -43,7 +47,7 @@ export default () => {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="splitButtonExamplePopover"
+            id={splitButtonPopoverId}
             button={
               <EuiButtonIcon
                 display="base"