From 8d7349e873c427647c0e38bcdd4bb3d229a6ae9f Mon Sep 17 00:00:00 2001
From: Brianna Hall <briannahall@Briannas-MacBook-Pro.local>
Date: Tue, 31 Aug 2021 11:05:53 -0400
Subject: [PATCH] Revised element IDs within the Context Menu section of
 src/docs to use IDs generated by the htmlIdGenerator utility function

---
 src-docs/src/views/context_menu/content_panel.js      |  5 ++++-
 src-docs/src/views/context_menu/context_menu.js       | 11 ++++++++---
 .../views/context_menu/context_menu_with_content.js   |  7 +++++--
 src-docs/src/views/context_menu/single_panel.js       |  5 ++++-
 src-docs/src/views/context_menu/small.js              |  5 ++++-
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js
index 268ccc8440e..665c2f6d93d 100644
--- 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
index 90ce0f2f9f9..c3dfb816324 100644
--- 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
index 421639ef39c..97cda71942c 100644
--- 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
index bec8d6b933b..5beaf7a5806 100644
--- 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
index 782d403afef..920f277c6ff 100644
--- 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}