🔥 Remove convoluted mixin

- in favor of passing condition/setting conditional styling logic directly in the cell actions component
elastic · Oct 4, 2023 · ad6894b · ad6894b
1 parent 362d480
commit ad6894b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 32 deletions.
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -141,18 +141,18 @@
 }
 
 // Cell actions
-.euiDataGridRowCell__expandActions {
+.euiDataGridRowCell__actions {
   display: flex;
 }
-@include euiDataGridRowCellActions($definedHeight: false) {
+.euiDataGridRowCell__actions--flex {
   flex-grow: 0;
 }
-@include euiDataGridRowCellActions($definedHeight: true) {
-  background-color: $euiColorEmptyShade;
+.euiDataGridRowCell__actions--overlay {
   position: absolute;
   right: 0;
   top: 0;
   padding: $euiDataGridCellPaddingM 0;
+  background-color: $euiColorEmptyShade;
 }
 
 .euiDataGridRowCell__actionButtonIcon {
@@ -171,20 +171,20 @@
 // Row stripes
 @include euiDataGridStyles(stripes) {
   .euiDataGridRow--striped {
-    @include euiDataGridRowCellActions($definedHeight: true) {
+    &,
+    .euiDataGridRowCell__actions--overlay {
       background-color: $euiColorLightestShade;
     }
-    background-color: $euiColorLightestShade;
   }
 }
 
 // Row highlights
 @include euiDataGridStyles(rowHoverHighlight) {
   .euiDataGridRow:hover {
-    @include euiDataGridRowCellActions($definedHeight: true) {
+    &,
+    .euiDataGridRowCell__actions--overlay {
       background-color: $euiColorHighlight;
     }
-    background-color: $euiColorHighlight;
   }
 }
 
@@ -230,10 +230,11 @@
 
 // Compressed density grids - height tweaks
 @include euiDataGridStyles(fontSizeSmall, paddingSmall) {
-  @include euiDataGridRowCellActions($definedHeight: true) {
+  .euiDataGridRowCell__actions--overlay {
     padding: ($euiDataGridCellPaddingS / 2) 0;
   }
-  @include euiDataGridRowCellActions($definedHeight: false) {
+
+  .euiDataGridRowCell__actions--flex {
     transform: translateY(1px);
   }
 }

diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
@@ -82,18 +82,3 @@ $euiDataGridStyles: (
     @content;
   }
 }
-
-@mixin euiDataGridRowCellActions($definedHeight: false) {
-  @if $definedHeight {
-    // Defined heights are cells with row heights of auto, lineCount, or a static height
-    // that set the __contentByHeight class
-    .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
-      @content;
-    }
-  } @else {
-    // Otherwise, an undefined height (single flex row) will set __expandContent
-    .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
-      @content;
-    }
-  }
-}
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -678,6 +678,13 @@ export class EuiDataGridCell extends Component<
       rowHeightsOptions
     );
 
+    const rowHeightOption = rowHeightUtils?.getRowHeightOption(
+      rowIndex,
+      rowHeightsOptions
+    );
+    const cellHeightType =
+      rowHeightUtils?.getHeightType(rowHeightOption) || 'default';
+
     const cellContentProps = {
       ...rest,
       setCellProps: this.setCellProps,
@@ -729,6 +736,7 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               colIndex={colIndex}
               column={column}
+              cellHeightType={cellHeightType}
               onExpandClick={() => {
                 if (popoverIsOpen) {
                   closeCellPopover();

diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { render } from '../../../test/rtl';
 
 import { EuiDataGridColumnCellAction } from '../data_grid_types';
 import {
@@ -24,14 +25,15 @@ describe('EuiDataGridCellActions', () => {
     onExpandClick: jest.fn(),
     rowIndex: 0,
     colIndex: 0,
+    cellHeightType: 'default',
   };
 
   it('renders an expand button', () => {
     const component = shallow(<EuiDataGridCellActions {...requiredProps} />);
 
     expect(component).toMatchInlineSnapshot(`
       <div
-        className="euiDataGridRowCell__expandActions"
+        className="euiDataGridRowCell__actions euiDataGridRowCell__actions--flex"
       >
         <EuiI18n
           default="Click or hit enter to interact with cell content"
@@ -88,7 +90,7 @@ describe('EuiDataGridCellActions', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <div
-        className="euiDataGridRowCell__expandActions"
+        className="euiDataGridRowCell__actions euiDataGridRowCell__actions--flex"
       >
         <MockAction
           Component={[Function]}
@@ -109,6 +111,17 @@ describe('EuiDataGridCellActions', () => {
     `);
   });
 
+  it('renders with overlay positioning for non default height cells', () => {
+    const { container } = render(
+      <EuiDataGridCellActions {...requiredProps} cellHeightType="auto" />
+    );
+
+    // TODO: Switch to `.toHaveStyle({ position: 'absolute' })` once on Emotion
+    expect(container.firstChild).toHaveClass(
+      'euiDataGridRowCell__actions--overlay'
+    );
+  });
+
   describe('visible cell actions limit', () => {
     it('by default, does not render more than the first two primary cell actions', () => {
       const component = shallow(

diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -18,17 +18,20 @@ import { EuiButtonIcon, EuiButtonIconProps } from '../../button/button_icon';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
+import classNames from 'classnames';
 
 export const EuiDataGridCellActions = ({
   onExpandClick,
   column,
   rowIndex,
   colIndex,
+  cellHeightType,
 }: {
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
   colIndex: number;
+  cellHeightType: string;
 }) => {
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
@@ -91,11 +94,12 @@ export const EuiDataGridCellActions = ({
     );
   }, [column, colIndex, rowIndex]);
 
-  return (
-    <div className="euiDataGridRowCell__expandActions">
-      {[...additionalButtons, expandButton]}
-    </div>
-  );
+  const classes = classNames('euiDataGridRowCell__actions', {
+    'euiDataGridRowCell__actions--flex': cellHeightType === 'default',
+    'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default',
+  });
+
+  return <div className={classes}>{[...additionalButtons, expandButton]}</div>;
 };
 
 export const EuiDataGridCellPopoverActions = ({