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

…e IDs generated by the htmlIdGenerator utility function
elastic · Aug 31, 2021 · 8d7349e · 8d7349e
1 parent a1ed276
commit 8d7349e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js
@@ -6,8 +6,11 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -29,7 +32,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contentPanel"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -10,8 +10,13 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const switchID__1 = htmlIdGenerator('switch')();
+  const switchID__2 = htmlIdGenerator('switch')();
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -108,7 +113,7 @@ export default () => {
           <EuiFormRow label="Generate a public snapshot?" hasChildLabel={false}>
             <EuiSwitch
               name="switch"
-              id="asdf"
+              id={switchID__1}
               label="Snapshot data"
               checked={true}
               onChange={() => {}}
@@ -119,7 +124,7 @@ export default () => {
             hasChildLabel={false}>
             <EuiSwitch
               name="switch"
-              id="asdf2"
+              id={switchID__2}
               label="Current time range"
               checked={true}
               onChange={() => {}}
@@ -140,7 +145,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contextMenuExample"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}

diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js
@@ -10,6 +10,7 @@ import {
 } from '../../../../src/components';
 
 import EuiTabsExample from '../tabs/tabbed_content';
+import { htmlIdGenerator } from '../../../../src/services';
 
 function flattenPanelTree(tree, array = []) {
   array.push(tree);
@@ -29,6 +30,8 @@ function flattenPanelTree(tree, array = []) {
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [isDynamicPopoverOpen, setDynamicPopover] = useState(false);
+  const popoverID__1 = htmlIdGenerator('popover')();
+  const popoverID__2 = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -111,7 +114,7 @@ export default () => {
   return (
     <React.Fragment>
       <EuiPopover
-        id="contextMenuNormal"
+        id={popoverID__1}
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
@@ -123,7 +126,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiPopover
-        id="contextMenuDynamic"
+        id={popoverID__2}
         button={dynamicButton}
         isOpen={isDynamicPopoverOpen}
         closePopover={closeDynamicPopover}

diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js
@@ -7,9 +7,12 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [rowSize, setRowSize] = useState(50);
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -74,7 +77,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="singlePanel"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}

diff --git a/src-docs/src/views/context_menu/small.js b/src-docs/src/views/context_menu/small.js
@@ -7,8 +7,11 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -38,7 +41,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="smallContextMenuExample"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}