[Emotion] Convert EuiContextMenu, EuiContextMenuPanel, and EuiContext…

…MenuItem (#7312)
elastic · Oct 25, 2023 · ab6290d · ab6290d
1 parent ebba388
commit ab6290d
Show file tree

Hide file tree

Showing 31 changed files with 1,009 additions and 1,310 deletions.
diff --git a/src-docs/src/views/bottom_bar/bottom_bar.js b/src-docs/src/views/bottom_bar/bottom_bar.js
@@ -6,10 +6,15 @@ import {
   EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
+  EuiPopover,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
 } from '../../../../src/components';
 
 export default () => {
   const [showBar, setShowBar] = useState(false);
+  const [showBarPopover, setShowBarPopover] = useState(false);
+  const closePopover = () => setShowBarPopover(false);
 
   const button = (
     <EuiButton color="primary" onClick={() => setShowBar((show) => !show)}>
@@ -25,9 +30,33 @@ export default () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiButton color="text" size="s" iconType="help">
-                  Help
-                </EuiButton>
+                <EuiPopover
+                  isOpen={showBarPopover}
+                  closePopover={closePopover}
+                  button={
+                    <EuiButton
+                      color="text"
+                      size="s"
+                      iconType="help"
+                      onClick={() => setShowBarPopover(!showBarPopover)}
+                    >
+                      Help
+                    </EuiButton>
+                  }
+                  panelPaddingSize="none"
+                  repositionOnScroll
+                >
+                  <EuiContextMenuPanel
+                    items={[
+                      <EuiContextMenuItem icon="link" onClick={closePopover}>
+                        Link A
+                      </EuiContextMenuItem>,
+                      <EuiContextMenuItem icon="link" onClick={closePopover}>
+                        Link B
+                      </EuiContextMenuItem>,
+                    ]}
+                  />
+                </EuiPopover>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton color="text" size="s" iconType="user">

diff --git a/src-docs/src/views/context_menu/content_panel.tsx b/src-docs/src/views/context_menu/content_panel.tsx
@@ -65,10 +65,20 @@ export default () => {
       anchorPosition="downLeft"
     >
       <EuiContextMenuPanel>
-        <EuiContextMenuItem key="item-1" icon="indexOpen" size="s">
+        <EuiContextMenuItem
+          key="item-1"
+          icon="indexOpen"
+          size="s"
+          onClick={closePopover}
+        >
           Add a field to this data view
         </EuiContextMenuItem>
-        <EuiContextMenuItem key="item-2" icon="indexSettings" size="s">
+        <EuiContextMenuItem
+          key="item-2"
+          icon="indexSettings"
+          size="s"
+          onClick={closePopover}
+        >
           Manage this data view
         </EuiContextMenuItem>
 

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -43,9 +43,7 @@ export default () => {
         {
           name: 'Handle an onClick',
           icon: 'search',
-          onClick: () => {
-            closePopover();
-          },
+          onClick: closePopover,
         },
         {
           name: 'Go to a link',
@@ -64,27 +62,25 @@ export default () => {
           toolTipTitle: 'Optional tooltip',
           toolTipContent: 'Optional content for a tooltip',
           toolTipPosition: 'right',
-          onClick: () => {
-            closePopover();
-          },
+          onClick: closePopover,
         },
         {
           name: 'Use an app icon',
           icon: 'visualizeApp',
+          onClick: closePopover,
         },
         {
           name: 'Pass an icon as a component to customize it',
           icon: <EuiIcon type="trash" size="m" color="danger" />,
+          onClick: closePopover,
         },
         {
           name: 'Disabled option',
           icon: 'user',
           toolTipContent: 'For reasons, this item is disabled',
           toolTipPosition: 'right',
           disabled: true,
-          onClick: () => {
-            closePopover();
-          },
+          onClick: closePopover,
         },
       ],
     },
@@ -96,9 +92,7 @@ export default () => {
         {
           name: 'PDF reports',
           icon: 'user',
-          onClick: () => {
-            closePopover();
-          },
+          onClick: closePopover,
         },
         {
           name: 'Embed code',
@@ -108,9 +102,7 @@ export default () => {
         {
           name: 'Permalinks',
           icon: 'user',
-          onClick: () => {
-            closePopover();
-          },
+          onClick: 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
@@ -62,9 +62,7 @@ export default () => {
         {
           name: 'Show fullscreen',
           icon: <EuiIcon type="search" size="m" />,
-          onClick: () => {
-            closePopover();
-          },
+          onClick: closePopover,
         },
         {
           isSeparator: true,

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
   popoverRef={[Function]}
   repositionToCrossAxis={true}
 >
-  <EuiContextMenuPanel
+  <EuiContextMenuPanelClass
     items={
       Array [
         <EuiContextMenuItem