.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
elastic · Feb 2, 2022 · 75d8911 · 75d8911
1 parent dc95fe9
commit 75d8911
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };