From 123f45bee4485877265a82d4443beff5476bfdf7 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 20 Jan 2022 10:36:38 -0800
Subject: [PATCH 01/12] Rename CellButtons to CellActions

- to be more specific and intentional about what we're referring to
---
 .../datagrid/body/data_grid_cell.test.tsx     | 10 ++++-----
 .../datagrid/body/data_grid_cell.tsx          | 18 +++++++--------
 ...st.tsx => data_grid_cell_actions.test.tsx} | 22 +++++++++----------
 ...buttons.tsx => data_grid_cell_actions.tsx} | 14 ++++++------
 4 files changed, 32 insertions(+), 32 deletions(-)
 rename src/components/datagrid/body/{data_grid_cell_buttons.test.tsx => data_grid_cell_actions.test.tsx} (88%)
 rename src/components/datagrid/body/{data_grid_cell_buttons.tsx => data_grid_cell_actions.tsx} (91%)

diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx
index 07e6bb5474c..2019b7c16ef 100644
--- a/src/components/datagrid/body/data_grid_cell.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell.test.tsx
@@ -64,11 +64,11 @@ describe('EuiDataGridCell', () => {
     );
     component.setState({ enableInteractions: true });
 
-    const getCellButtons = () => component.find('EuiDataGridCellButtons');
-    expect(getCellButtons()).toHaveLength(1);
+    const getCellActions = () => component.find('EuiDataGridCellActions');
+    expect(getCellActions()).toHaveLength(1);
 
     // Should handle opening the popover
-    (getCellButtons().prop('onExpandClick') as Function)();
+    (getCellActions().prop('onExpandClick') as Function)();
     expect(mockPopoverContext.openCellPopover).toHaveBeenCalled();
 
     // Should handle closing the popover
@@ -76,9 +76,9 @@ describe('EuiDataGridCell', () => {
       isExpandable: true,
       popoverContext: { ...mockPopoverContext, popoverIsOpen: true },
     });
-    (getCellButtons().prop('onExpandClick') as Function)();
+    (getCellActions().prop('onExpandClick') as Function)();
     expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(1);
-    (getCellButtons().prop('closePopover') as Function)();
+    (getCellActions().prop('closePopover') as Function)();
     expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(2);
   });
 
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index 7985ab91d61..b638dc8b4ec 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -33,9 +33,9 @@ import {
   EuiDataGridCellValueProps,
 } from '../data_grid_types';
 import {
-  EuiDataGridCellButtons,
-  EuiDataGridCellPopoverButtons,
-} from './data_grid_cell_buttons';
+  EuiDataGridCellActions,
+  EuiDataGridCellPopoverActions,
+} from './data_grid_cell_actions';
 import { IS_JEST_ENVIRONMENT } from '../../../test';
 
 const EuiDataGridCellContent: FunctionComponent<
@@ -465,7 +465,7 @@ export class EuiDataGridCell extends Component<
               isDetails={true}
             />
           </PopoverContent>
-          <EuiDataGridCellPopoverButtons
+          <EuiDataGridCellPopoverActions
             rowIndex={rowIndex}
             colIndex={colIndex}
             column={column}
@@ -495,8 +495,8 @@ export class EuiDataGridCell extends Component<
     const { rowIndex, visibleRowIndex, colIndex } = rest;
 
     const popoverIsOpen = this.isPopoverOpen();
-    const hasCellButtons = isExpandable || column?.cellActions;
-    const showCellButtons =
+    const hasCellActions = isExpandable || column?.cellActions;
+    const showCellActions =
       this.state.isFocused ||
       this.state.isEntered ||
       this.state.enableInteractions ||
@@ -626,14 +626,14 @@ export class EuiDataGridCell extends Component<
       </EuiFocusTrap>
     );
 
-    if (hasCellButtons) {
-      if (showCellButtons) {
+    if (hasCellActions) {
+      if (showCellActions) {
         innerContent = (
           <div className={anchorClass} ref={this.popoverAnchorRef}>
             <div className={expandClass}>
               <EuiDataGridCellContent {...cellContentProps} />
             </div>
-            <EuiDataGridCellButtons
+            <EuiDataGridCellActions
               rowIndex={rowIndex}
               colIndex={colIndex}
               column={column}
diff --git a/src/components/datagrid/body/data_grid_cell_buttons.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
similarity index 88%
rename from src/components/datagrid/body/data_grid_cell_buttons.test.tsx
rename to src/components/datagrid/body/data_grid_cell_actions.test.tsx
index 7581742d35f..63b11f2a17c 100644
--- a/src/components/datagrid/body/data_grid_cell_buttons.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -10,11 +10,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import {
-  EuiDataGridCellButtons,
-  EuiDataGridCellPopoverButtons,
-} from './data_grid_cell_buttons';
+  EuiDataGridCellActions,
+  EuiDataGridCellPopoverActions,
+} from './data_grid_cell_actions';
 
-describe('EuiDataGridCellButtons', () => {
+describe('EuiDataGridCellActions', () => {
   const requiredProps = {
     popoverIsOpen: false,
     closePopover: jest.fn(),
@@ -24,7 +24,7 @@ describe('EuiDataGridCellButtons', () => {
   };
 
   it('renders an expand button', () => {
-    const component = shallow(<EuiDataGridCellButtons {...requiredProps} />);
+    const component = shallow(<EuiDataGridCellActions {...requiredProps} />);
 
     expect(component).toMatchInlineSnapshot(`
       <div
@@ -33,7 +33,7 @@ describe('EuiDataGridCellButtons', () => {
         <EuiI18n
           default="Click or hit enter to interact with cell content"
           key="expand"
-          token="euiDataGridCellButtons.expandButtonTitle"
+          token="euiDataGridCellActions.expandButtonTitle"
         >
           <Component />
         </EuiI18n>
@@ -57,7 +57,7 @@ describe('EuiDataGridCellButtons', () => {
 
   it('renders column cell actions as `EuiButtonIcon`s', () => {
     const component = shallow(
-      <EuiDataGridCellButtons
+      <EuiDataGridCellActions
         {...requiredProps}
         column={{ id: 'someId', cellActions: [() => <button />] }}
       />
@@ -79,7 +79,7 @@ describe('EuiDataGridCellButtons', () => {
         <EuiI18n
           default="Click or hit enter to interact with cell content"
           key="expand"
-          token="euiDataGridCellButtons.expandButtonTitle"
+          token="euiDataGridCellActions.expandButtonTitle"
         >
           <Component />
         </EuiI18n>
@@ -98,10 +98,10 @@ describe('EuiDataGridCellButtons', () => {
   });
 });
 
-describe('EuiDataGridCellPopoverButtons', () => {
+describe('EuiDataGridCellPopoverActions', () => {
   it('renders column cell actions as `EuiButtonEmpty`s', () => {
     const component = shallow(
-      <EuiDataGridCellPopoverButtons
+      <EuiDataGridCellPopoverActions
         colIndex={0}
         rowIndex={0}
         column={{ id: 'someId', cellActions: [() => <button />] }}
@@ -143,7 +143,7 @@ describe('EuiDataGridCellPopoverButtons', () => {
 
   it('does not render anything if the column has no cell actions', () => {
     const component = shallow(
-      <EuiDataGridCellPopoverButtons
+      <EuiDataGridCellPopoverActions
         colIndex={0}
         rowIndex={0}
         column={{ id: 'noActions' }}
diff --git a/src/components/datagrid/body/data_grid_cell_buttons.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
similarity index 91%
rename from src/components/datagrid/body/data_grid_cell_buttons.tsx
rename to src/components/datagrid/body/data_grid_cell_actions.tsx
index 666484abb4f..97159333872 100644
--- a/src/components/datagrid/body/data_grid_cell_buttons.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -20,7 +20,7 @@ import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
 
-export const EuiDataGridCellButtons = ({
+export const EuiDataGridCellActions = ({
   popoverIsOpen,
   closePopover,
   onExpandClick,
@@ -44,7 +44,7 @@ export const EuiDataGridCellButtons = ({
   const expandButton = (
     <EuiI18n
       key={'expand'}
-      token="euiDataGridCellButtons.expandButtonTitle"
+      token="euiDataGridCellActions.expandButtonTitle"
       default="Click or hit enter to interact with cell content"
     >
       {(expandButtonTitle: string) => (
@@ -74,11 +74,11 @@ export const EuiDataGridCellButtons = ({
       ? column.cellActions.map(
           (Action: EuiDataGridColumnCellAction, idx: number) => {
             // React is more permissible than the TS types indicate
-            const CellButtonElement = Action as JSXElementConstructor<
+            const ActionButtonElement = Action as JSXElementConstructor<
               EuiDataGridColumnCellActionProps
             >;
             return (
-              <CellButtonElement
+              <ActionButtonElement
                 key={idx}
                 rowIndex={rowIndex}
                 colIndex={colIndex}
@@ -98,7 +98,7 @@ export const EuiDataGridCellButtons = ({
   );
 };
 
-export const EuiDataGridCellPopoverButtons = ({
+export const EuiDataGridCellPopoverActions = ({
   rowIndex,
   colIndex,
   column,
@@ -114,12 +114,12 @@ export const EuiDataGridCellPopoverButtons = ({
       <EuiFlexGroup gutterSize="s">
         {column.cellActions.map(
           (Action: EuiDataGridColumnCellAction, idx: number) => {
-            const CellButtonElement = Action as JSXElementConstructor<
+            const ActionButtonElement = Action as JSXElementConstructor<
               EuiDataGridColumnCellActionProps
             >;
             return (
               <EuiFlexItem key={idx}>
-                <CellButtonElement
+                <ActionButtonElement
                   rowIndex={rowIndex}
                   colIndex={colIndex}
                   columnId={column.id}

From dc95fe9ca42c675ab1d9587467db490569546c7f Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 20 Jan 2022 10:45:09 -0800
Subject: [PATCH 02/12] Rename .euiDataGridRowCell__expandButton to
 .euiDataGridRowCell__expandActions

---
 src/components/datagrid/_data_grid_data_row.scss             | 4 +---
 src/components/datagrid/_mixins.scss                         | 4 ++--
 src/components/datagrid/body/data_grid_cell_actions.test.tsx | 4 ++--
 src/components/datagrid/body/data_grid_cell_actions.tsx      | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 9ab28257c3f..c4b4502b1ad 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -159,9 +159,7 @@
 }
 
 // Cell actions
-// Could probably be more precisely named than '__expandButton', since there can be multiple actions/buttons
-// TODO: Consider renaming this when working on https://github.com/elastic/eui/issues/5132
-.euiDataGridRowCell__expandButton {
+.euiDataGridRowCell__expandActions {
   display: flex;
 }
 @include euiDataGridRowCellActions($definedHeight: false) {
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index 87f53255081..4fbaeb8b319 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -87,12 +87,12 @@ $euiDataGridStyles: (
   @if $definedHeight {
     // Defined heights are cells with row heights of auto, lineCount, or a static height
     // that set the __contentByHeight class
-    .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton {
+    .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
       @content;
     }
   } @else {
     // Otherwise, an undefined height (single flex row) will set __expandContent
-    .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandButton {
+    .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
       @content;
     }
   }
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 63b11f2a17c..e3c3720dd92 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -28,7 +28,7 @@ describe('EuiDataGridCellActions', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <div
-        className="euiDataGridRowCell__expandButton"
+        className="euiDataGridRowCell__expandActions"
       >
         <EuiI18n
           default="Click or hit enter to interact with cell content"
@@ -65,7 +65,7 @@ describe('EuiDataGridCellActions', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <div
-        className="euiDataGridRowCell__expandButton"
+        className="euiDataGridRowCell__expandActions"
       >
         <Component
           Component={[Function]}
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index 97159333872..084f4d5b91d 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -38,7 +38,7 @@ export const EuiDataGridCellActions = ({
   const buttonIconClasses = classNames('euiDataGridRowCell__expandButtonIcon', {
     'euiDataGridRowCell__expandButtonIcon-isActive': popoverIsOpen,
   });
-  const buttonClasses = classNames('euiDataGridRowCell__expandButton', {
+  const buttonClasses = classNames('euiDataGridRowCell__expandActions', {
     'euiDataGridRowCell__expandButton-isActive': popoverIsOpen,
   });
   const expandButton = (

From 75d891170f5220350239b8b482a660f5c484c106 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 20 Jan 2022 11:11:18 -0800
Subject: [PATCH 03/12] .euiDataGridRowCell__expandButtonIcon cleanup

- `__expandButtonIcon` is redundant with `__actionButtonIcon` - DRY it out and have the expand popover action use `__actionButtonIcon`

- isActive CSS is no longer used whatsoever - remove conditional CSS and need for `popoverIsOpen` prop

- Rename animation / last cellButton reference to cellActions
---
 .../datagrid/_data_grid_data_row.scss         | 36 ++-----------------
 .../datagrid/body/data_grid_cell.tsx          |  1 -
 .../body/data_grid_cell_actions.test.tsx      |  3 +-
 .../datagrid/body/data_grid_cell_actions.tsx  | 15 +++-----
 4 files changed, 7 insertions(+), 48 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index c4b4502b1ad..450b3ba9fe1 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -38,17 +38,9 @@
   // Only add the transition effect on hover, so that it is instantaneous on focus
   // Long delays on hover to mitigate the accordion effect
   &:hover {
-    .euiDataGridRowCell__expandButtonIcon {
-      animation-duration: $euiAnimSpeedExtraFast;
-      animation-name: euiDataGridCellButtonSlideIn;
-      animation-iteration-count: 1;
-      animation-delay: $euiAnimSpeedNormal;
-      animation-fill-mode: forwards;
-    }
-
     .euiDataGridRowCell__actionButtonIcon {
       animation-duration: $euiAnimSpeedExtraFast;
-      animation-name: euiDataGridCellButtonSlideIn;
+      animation-name: euiDataGridCellActionsSlideIn;
       animation-iteration-count: 1;
       animation-delay: $euiAnimSpeedNormal;
       animation-fill-mode: forwards;
@@ -57,12 +49,6 @@
 
   &:not(:hover),
   &.euiDataGridRowCell--open {
-    .euiDataGridRowCell__expandButtonIcon {
-      animation: none;
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-    }
-
     .euiDataGridRowCell__actionButtonIcon {
       animation: none;
       margin-left: $euiDataGridCellPaddingM;
@@ -80,7 +66,6 @@
 
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
   &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
-    .euiDataGridRowCell__expandButtonIcon,
     .euiDataGridRowCell__actionButtonIcon {
       display: none;
     }
@@ -173,23 +158,6 @@
   padding: $euiDataGridCellPaddingM 0;
 }
 
-.euiDataGridRowCell__expandButtonIcon {
-  height: $euiSizeM;
-  border-radius: $euiBorderRadius / 2;
-  width: 0;
-  overflow: hidden;
-  transition: none; // Have to take out the generic transition so it is instaneous on focus
-  box-shadow: none !important; // sass-lint:disable-line no-important
-  // Remove default .euiButtonIcon--fill border
-  // This way we don't need to animate the border that is inexistent in Amsterdam and unnecessary for a fill button
-  border: none;
-
-  &-isActive {
-    margin-left: $euiDataGridCellPaddingM;
-    width: $euiSizeM;
-  }
-}
-
 .euiDataGridRowCell__actionButtonIcon {
   height: $euiSizeM;
   border-radius: $euiBorderRadius / 2;
@@ -277,7 +245,7 @@
   }
 }
 
-@keyframes euiDataGridCellButtonSlideIn {
+@keyframes euiDataGridCellActionsSlideIn {
   from {
     margin-left: 0;
     width: 0;
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index b638dc8b4ec..07ff143de0c 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -637,7 +637,6 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               colIndex={colIndex}
               column={column}
-              popoverIsOpen={popoverIsOpen}
               closePopover={closeCellPopover}
               onExpandClick={() => {
                 if (popoverIsOpen) {
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 e3c3720dd92..79f625f6453 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -16,7 +16,6 @@ import {
 
 describe('EuiDataGridCellActions', () => {
   const requiredProps = {
-    popoverIsOpen: false,
     closePopover: jest.fn(),
     onExpandClick: jest.fn(),
     rowIndex: 0,
@@ -44,7 +43,7 @@ describe('EuiDataGridCellActions', () => {
     expect(button('expandButtonTitle')).toMatchInlineSnapshot(`
       <EuiButtonIcon
         aria-hidden={true}
-        className="euiDataGridRowCell__expandButtonIcon"
+        className="euiDataGridRowCell__actionButtonIcon"
         color="primary"
         display="fill"
         iconSize="s"
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index 084f4d5b91d..4c490f3cfa8 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -12,7 +12,6 @@ import {
   EuiDataGridColumnCellAction,
   EuiDataGridColumnCellActionProps,
 } from '../data_grid_types';
-import classNames from 'classnames';
 
 import { EuiI18n } from '../../i18n';
 import { EuiButtonIcon, EuiButtonIconProps } from '../../button/button_icon';
@@ -21,26 +20,18 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
 
 export const EuiDataGridCellActions = ({
-  popoverIsOpen,
   closePopover,
   onExpandClick,
   column,
   rowIndex,
   colIndex,
 }: {
-  popoverIsOpen: boolean;
   closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
   colIndex: number;
 }) => {
-  const buttonIconClasses = classNames('euiDataGridRowCell__expandButtonIcon', {
-    'euiDataGridRowCell__expandButtonIcon-isActive': popoverIsOpen,
-  });
-  const buttonClasses = classNames('euiDataGridRowCell__expandActions', {
-    'euiDataGridRowCell__expandButton-isActive': popoverIsOpen,
-  });
   const expandButton = (
     <EuiI18n
       key={'expand'}
@@ -50,7 +41,7 @@ export const EuiDataGridCellActions = ({
       {(expandButtonTitle: string) => (
         <EuiButtonIcon
           display="fill"
-          className={buttonIconClasses}
+          className="euiDataGridRowCell__actionButtonIcon"
           color="primary"
           iconSize="s"
           iconType="expandMini"
@@ -94,7 +85,9 @@ export const EuiDataGridCellActions = ({
   }, [column, colIndex, rowIndex, closePopover]);
 
   return (
-    <div className={buttonClasses}>{[...additionalButtons, expandButton]}</div>
+    <div className="euiDataGridRowCell__expandActions">
+      {[...additionalButtons, expandButton]}
+    </div>
   );
 };
 

From c1f3ce8f04fea40dad7f6b4f0a3db3b8356c8514 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 20 Jan 2022 11:12:27 -0800
Subject: [PATCH 04/12] [REVERT ME] Test isExpandable bug/fix

---
 src-docs/src/views/datagrid/ref.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/datagrid/ref.tsx b/src-docs/src/views/datagrid/ref.tsx
index 267892df41e..5373a9df80d 100644
--- a/src-docs/src/views/datagrid/ref.tsx
+++ b/src-docs/src/views/datagrid/ref.tsx
@@ -72,13 +72,14 @@ export default () => {
       {
         id: 'name',
         displayAsText: 'Name',
-        cellActions: [openModalAction],
+        isExpandable: false,
       },
       {
         id: 'email',
         displayAsText: 'Email address',
         initialWidth: 130,
         cellActions: [openModalAction],
+        isExpandable: false,
       },
       {
         id: 'location',

From 8d1d0aa8683bc2b3b7fba2b1c2e1868bfa606b81 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 20 Jan 2022 11:08:05 -0800
Subject: [PATCH 05/12] [bugfix] Hide the expansion button if a cell has
 actions but is not expandable

---
 .../datagrid/body/data_grid_cell.tsx          |  1 +
 .../body/data_grid_cell_actions.test.tsx      | 47 +++++++++++++++----
 .../datagrid/body/data_grid_cell_actions.tsx  |  7 ++-
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index 07ff143de0c..c448371a775 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -637,6 +637,7 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               colIndex={colIndex}
               column={column}
+              isExpandable={isExpandable}
               closePopover={closeCellPopover}
               onExpandClick={() => {
                 if (popoverIsOpen) {
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 79f625f6453..fdd59e71058 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -23,7 +23,9 @@ describe('EuiDataGridCellActions', () => {
   };
 
   it('renders an expand button', () => {
-    const component = shallow(<EuiDataGridCellActions {...requiredProps} />);
+    const component = shallow(
+      <EuiDataGridCellActions {...requiredProps} isExpandable={true} />
+    );
 
     expect(component).toMatchInlineSnapshot(`
       <div
@@ -54,10 +56,11 @@ describe('EuiDataGridCellActions', () => {
     `);
   });
 
-  it('renders column cell actions as `EuiButtonIcon`s', () => {
+  it('renders cell actions as `EuiButtonIcon`s', () => {
     const component = shallow(
       <EuiDataGridCellActions
         {...requiredProps}
+        isExpandable={false}
         column={{ id: 'someId', cellActions: [() => <button />] }}
       />
     );
@@ -75,13 +78,6 @@ describe('EuiDataGridCellActions', () => {
           key="0"
           rowIndex={0}
         />
-        <EuiI18n
-          default="Click or hit enter to interact with cell content"
-          key="expand"
-          token="euiDataGridCellActions.expandButtonTitle"
-        >
-          <Component />
-        </EuiI18n>
       </div>
     `);
 
@@ -95,6 +91,39 @@ describe('EuiDataGridCellActions', () => {
       />
     `);
   });
+
+  it('renders both cell actions and expand button', () => {
+    const component = shallow(
+      <EuiDataGridCellActions
+        {...requiredProps}
+        isExpandable={true}
+        column={{ id: 'someId', cellActions: [() => <button />] }}
+      />
+    );
+
+    expect(component).toMatchInlineSnapshot(`
+      <div
+        className="euiDataGridRowCell__expandActions"
+      >
+        <Component
+          Component={[Function]}
+          closePopover={[MockFunction]}
+          colIndex={0}
+          columnId="someId"
+          isExpanded={false}
+          key="0"
+          rowIndex={0}
+        />
+        <EuiI18n
+          default="Click or hit enter to interact with cell content"
+          key="expand"
+          token="euiDataGridCellActions.expandButtonTitle"
+        >
+          <Component />
+        </EuiI18n>
+      </div>
+    `);
+  });
 });
 
 describe('EuiDataGridCellPopoverActions', () => {
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index 4c490f3cfa8..c7530faad5a 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -20,19 +20,21 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
 
 export const EuiDataGridCellActions = ({
+  isExpandable,
   closePopover,
   onExpandClick,
   column,
   rowIndex,
   colIndex,
 }: {
+  isExpandable: boolean;
   closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
   colIndex: number;
 }) => {
-  const expandButton = (
+  const expandButton = isExpandable ? (
     <EuiI18n
       key={'expand'}
       token="euiDataGridCellActions.expandButtonTitle"
@@ -51,7 +53,8 @@ export const EuiDataGridCellActions = ({
         />
       )}
     </EuiI18n>
-  );
+  ) : null;
+
   const additionalButtons = useMemo(() => {
     const ButtonComponent = (props: EuiButtonIconProps) => (
       <EuiButtonIcon

From 969e3a256e6dac66d73c69e2aa856cdd7d294e95 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 20 Jan 2022 13:04:10 -0800
Subject: [PATCH 06/12] [bugfix] Prevent cell action animation from restarting
 on targeted cell

---
 src/components/datagrid/_data_grid_data_row.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 450b3ba9fe1..1bbd781d7b6 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -37,7 +37,7 @@
 
   // Only add the transition effect on hover, so that it is instantaneous on focus
   // Long delays on hover to mitigate the accordion effect
-  &:hover {
+  &:hover:not(:focus) {
     .euiDataGridRowCell__actionButtonIcon {
       animation-duration: $euiAnimSpeedExtraFast;
       animation-name: euiDataGridCellActionsSlideIn;

From 82526f907089b9810fd239fb4dc6c73cf61b3282 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 2 Feb 2022 13:56:26 -0800
Subject: [PATCH 07/12] Add changelog entry

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0150fcadd80..b07cb92d965 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@
 **Bug fixes**
 
 - Fixed `EuiInMemoryTable`'s `onTableChange` callback not returning the correct `sort.field` value on pagination ([#5588](https://github.com/elastic/eui/pull/5588))
+- Fixed `EuiDataGrid` to correctly remove the cell expansion action button when a column sets both `cellActions` and `isExpandable` to false ([#5592](https://github.com/elastic/eui/pull/5592))
+- Fixed `EuiDataGrid` re-playing the cell actions animation when hovering over an already-focused cell ([#5592](https://github.com/elastic/eui/pull/5592))
 
 ## [`46.2.0`](https://github.com/elastic/eui/tree/v46.2.0)
 

From f8f127993d2f39f94bdc089d465054dc9ed82633 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 2 Feb 2022 15:34:53 -0800
Subject: [PATCH 08/12] [bugfix] Fix cell actions animation flickering issues

- remove `:hover:not(:focus)` in favor of simply having `:focus` disable animations, which lets us DRY out CSS with `.euiDataGridRowCell--open`

- add `:focus-within` catch that prevents flickering animation issue after cell popover expansion close

- (lint) remove unnecessary brackets around `euiDataGridRowCell--open` class
---
 src/components/datagrid/_data_grid_data_row.scss | 16 ++++++----------
 src/components/datagrid/body/data_grid_cell.tsx  |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 1bbd781d7b6..595ab50c7a6 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -37,7 +37,7 @@
 
   // Only add the transition effect on hover, so that it is instantaneous on focus
   // Long delays on hover to mitigate the accordion effect
-  &:hover:not(:focus) {
+  &:hover {
     .euiDataGridRowCell__actionButtonIcon {
       animation-duration: $euiAnimSpeedExtraFast;
       animation-name: euiDataGridCellActionsSlideIn;
@@ -47,7 +47,11 @@
     }
   }
 
-  &:not(:hover),
+  // On focus, directly show action buttons (without animation)
+  &:focus,
+  // Prevent the animation from flickering after cell popover close when focus is restored the expansion button
+  &:focus-within,
+  // Always make the cell actions visible when the cell popover is open
   &.euiDataGridRowCell--open {
     .euiDataGridRowCell__actionButtonIcon {
       animation: none;
@@ -56,14 +60,6 @@
     }
   }
 
-  // on focus, directly show action buttons (without animation), but still slide in the open popover button
-  &:focus {
-    .euiDataGridRowCell__actionButtonIcon {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-    }
-  }
-
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
   &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
     .euiDataGridRowCell__actionButtonIcon {
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index c448371a775..eff79dc47f6 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -506,7 +506,7 @@ export class EuiDataGridCell extends Component<
       'euiDataGridRowCell',
       {
         [`euiDataGridRowCell--${columnType}`]: columnType,
-        ['euiDataGridRowCell--open']: popoverIsOpen,
+        'euiDataGridRowCell--open': popoverIsOpen,
       },
       className
     );

From 455084b8657af830bfcc3739a1253e66f90ef159 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 2 Feb 2022 16:00:46 -0800
Subject: [PATCH 09/12] Restore removed action button CSS affecting legacy
 theme

`border` in particular was causing the cell slide in animation to look wonky

- this is worth applying to all cell action button icons, not just the cell expansion popover, since it will also fix issues for custom actions that have `display="fill"`
---
 src/components/datagrid/_data_grid_data_row.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 595ab50c7a6..63b11d90019 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -159,7 +159,12 @@
   border-radius: $euiBorderRadius / 2;
   width: 0;
   overflow: hidden;
-  transition: none; // Have to take out the generic transition so it is instaneous on focus
+  // Have to take out the generic transition so it is instaneous on focus
+  transition: none;
+  // Disable filled button box-shadows on legacy theme - they're unnecessary when this small in a datagrid
+  box-shadow: none !important; // sass-lint:disable-line no-important
+  // Remove filled button borders on legacy theme - this way we don't need to animate the border
+  border: none;
 }
 
 // Row highlights

From 43880d6c6d1cf6ee12cd25762060557b0d4016fc Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 2 Feb 2022 16:09:01 -0800
Subject: [PATCH 10/12] Improve mobile UI of cell actions in expansion popover

---
 .../datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap    | 2 +-
 src/components/datagrid/body/data_grid_cell_actions.test.tsx    | 2 ++
 src/components/datagrid/body/data_grid_cell_actions.tsx         | 2 +-
 3 files changed, 4 insertions(+), 2 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 c8489a5a6ee..e3b836053c9 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
@@ -191,7 +191,7 @@ Array [
     class="euiPopoverFooter"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--wrap"
     >
       <div
         class="euiFlexItem"
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 fdd59e71058..2e631714791 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -140,6 +140,8 @@ describe('EuiDataGridCellPopoverActions', () => {
       <EuiPopoverFooter>
         <EuiFlexGroup
           gutterSize="s"
+          responsive={false}
+          wrap={true}
         >
           <EuiFlexItem
             key="0"
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index c7530faad5a..1d56a31ffe2 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -107,7 +107,7 @@ export const EuiDataGridCellPopoverActions = ({
 
   return (
     <EuiPopoverFooter>
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGroup gutterSize="s" responsive={false} wrap>
         {column.cellActions.map(
           (Action: EuiDataGridColumnCellAction, idx: number) => {
             const ActionButtonElement = Action as JSXElementConstructor<

From 29cc4c2bba5c83719b48c5e27b1106e10b507ab3 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 8 Feb 2022 13:05:20 -0800
Subject: [PATCH 11/12] Revert "[REVERT ME] Test isExpandable bug/fix"

This reverts commit c1f3ce8f04fea40dad7f6b4f0a3db3b8356c8514.
---
 src-docs/src/views/datagrid/ref.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src-docs/src/views/datagrid/ref.tsx b/src-docs/src/views/datagrid/ref.tsx
index 5373a9df80d..267892df41e 100644
--- a/src-docs/src/views/datagrid/ref.tsx
+++ b/src-docs/src/views/datagrid/ref.tsx
@@ -72,14 +72,13 @@ export default () => {
       {
         id: 'name',
         displayAsText: 'Name',
-        isExpandable: false,
+        cellActions: [openModalAction],
       },
       {
         id: 'email',
         displayAsText: 'Email address',
         initialWidth: 130,
         cellActions: [openModalAction],
-        isExpandable: false,
       },
       {
         id: 'location',

From 2f297cdffd9df7d4eaab65d72d37cc681c4fbcab Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 8 Feb 2022 13:06:45 -0800
Subject: [PATCH 12/12] changelog merge went wrong

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 664e6779073..d8ef1a4f0e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,11 +18,13 @@
 **Bug fixes**
 
 - Fixed `EuiInMemoryTable`'s `onTableChange` callback not returning the correct `sort.field` value on pagination ([#5588](https://github.com/elastic/eui/pull/5588))
+- Fixed `EuiFilePicker` allowing files to be removed when `disabled` ([#5603](https://github.com/elastic/eui/pull/5603))
 
 **Breaking changes**
 
 - Upgraded TypeScript version to ~4.5.3 ([#5591](https://github.com/elastic/eui/pull/5591))
 
+## [`46.2.0`](https://github.com/elastic/eui/tree/v46.2.0)
 
 - Updated `EuiDataGrid`s with scrolling content to always have a border around the grid body and any scrollbars ([#5563](https://github.com/elastic/eui/pull/5563))
 - Updated `EuiDataGrid`'s body to a light gray background, which primarily shows when scrolling through virtualized content ([#5562](https://github.com/elastic/eui/pull/5562))