From ab6b2a81f2cabbc7f455205854f45bf3a12914ed Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 8 Mar 2022 14:23:27 -0500
Subject: [PATCH] Dont expand empty buttons

---
 .../data_grid_cell.test.tsx.snap              | 70 ++++++++++---------
 .../body/data_grid_cell_actions.test.tsx      | 65 +++++++++--------
 .../datagrid/body/data_grid_cell_actions.tsx  | 20 +++---
 3 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
index f44c7d44ea89..e8f2afac7be9 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
+Array [
+  <div
+    class="euiText euiText--medium"
+  >
+    <div>
+      <button
+        data-datagrid-interactable="true"
+      >
+        hello
+      </button>
+      <button
+        data-datagrid-interactable="true"
+      >
+        world
+      </button>
+    </div>
+  </div>,
+  <div
+    class="euiPopoverFooter"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--wrap"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <div>
+          <button />
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`EuiDataGridCell renders 1`] = `
 <EuiDataGridCell
   colIndex={0}
@@ -168,37 +204,3 @@ exports[`EuiDataGridCell renders 1`] = `
   </div>
 </EuiDataGridCell>
 `;
-
-exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
-Array [
-  <div
-    class="euiText euiText--medium"
-  >
-    <div>
-      <button
-        data-datagrid-interactable="true"
-      >
-        hello
-      </button>
-      <button
-        data-datagrid-interactable="true"
-      >
-        world
-      </button>
-    </div>
-  </div>,
-  <div
-    class="euiPopoverFooter"
-  >
-    <div
-      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--wrap"
-    >
-      <div
-        class="euiFlexItem"
-      >
-        <button />
-      </div>
-    </div>
-  </div>,
-]
-`;
diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
index c07fa9b7d931..325299892c5e 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -147,13 +147,15 @@ describe('EuiDataGridCellPopoverActions', () => {
             <EuiFlexItem
               key="0"
             >
-              <MockAction
-                Component={[Function]}
-                colIndex={0}
-                columnId="someId"
-                isExpanded={true}
-                rowIndex={0}
-              />
+              <div>
+                <MockAction
+                  Component={[Function]}
+                  colIndex={0}
+                  columnId="someId"
+                  isExpanded={true}
+                  rowIndex={0}
+                />
+              </div>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPopoverFooter>
@@ -193,42 +195,49 @@ describe('EuiDataGridCellPopoverActions', () => {
             <EuiFlexItem
               key="0"
             >
-              <MockAction
-                Component={[Function]}
-                colIndex={0}
-                columnId="someId"
-                isExpanded={true}
-                rowIndex={0}
-              />
+              <div>
+                <MockAction
+                  Component={[Function]}
+                  colIndex={0}
+                  columnId="someId"
+                  isExpanded={true}
+                  rowIndex={0}
+                />
+              </div>
             </EuiFlexItem>
             <EuiFlexItem
               key="1"
             >
-              <MockAction
-                Component={[Function]}
-                colIndex={0}
-                columnId="someId"
-                isExpanded={true}
-                rowIndex={0}
-              />
+              <div>
+                <MockAction
+                  Component={[Function]}
+                  colIndex={0}
+                  columnId="someId"
+                  isExpanded={true}
+                  rowIndex={0}
+                />
+              </div>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPopoverFooter>
         <EuiPopoverFooter>
           <EuiFlexGroup
+            alignItems="flexStart"
             direction="column"
             gutterSize="s"
           >
             <EuiFlexItem
               key="0"
             >
-              <MockAction
-                Component={[Function]}
-                colIndex={0}
-                columnId="someId"
-                isExpanded={true}
-                rowIndex={0}
-              />
+              <div>
+                <MockAction
+                  Component={[Function]}
+                  colIndex={0}
+                  columnId="someId"
+                  isExpanded={true}
+                  rowIndex={0}
+                />
+              </div>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPopoverFooter>
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index fc0e1aee23ba..8773b1c519d5 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -119,15 +119,17 @@ export const EuiDataGridCellPopoverActions = ({
       >;
       return (
         <EuiFlexItem key={idx}>
-          <ActionButtonElement
-            rowIndex={rowIndex}
-            colIndex={colIndex}
-            columnId={column!.id}
-            Component={(props: EuiButtonEmptyProps) => (
-              <EuiButtonEmpty {...props} size="s" />
-            )}
-            isExpanded={true}
-          />
+          <div>
+            <ActionButtonElement
+              rowIndex={rowIndex}
+              colIndex={colIndex}
+              columnId={column!.id}
+              Component={(props: EuiButtonEmptyProps) => (
+                <EuiButtonEmpty {...props} size="s" />
+              )}
+              isExpanded={true}
+            />
+          </div>
         </EuiFlexItem>
       );
     },