From 91368b5affc6314c4f6e866ae53d4b19f16094df Mon Sep 17 00:00:00 2001 From: Constance Date: Thu, 10 Feb 2022 13:01:12 -0800 Subject: [PATCH] [EuiDataGrid] Fix open cell popovers causing auto height rows to bug out + misc cleanup (#5622) * Fix auto height rows breaking when cell popover opens The `flex` display on the parent `.euiDataGridRowCell` is unnecessary, and what's causing this bug * [cleanup] Remove unnecessary position relative on .euiDataGridRowCell - it's being overridden by react-window's absolute positioning in any case * [cleanup] Remove unnecessary `euiDataGridRowCell__expand` class from the popover anchor wrapper - as far as I can tell, it's not doing anything * [cleanup] Focus trap/popover hacks - the width properties aren't doing anything, so remove them - the height property is doing something but is superfluous with the inline height: 100%, so remove the inline style - add an overflow hidden to preserve overflowing content being correctly cropped by the cell padding when the popover is open (the EuiWrappingPopover adds extra div wrappers) * [misc cleanup] DRY out showCellActions if statement - can be conditional JSX instead of repeating EuiDataGridCellContent again * Add changelog entry * Revert popover cutoff change, it's introducing too many side effects + was already in place in main since 40.0.0 * Fix broken focus cell positioning on footer cells - footer cells aren't virtualized and don't have absolute positioning inline * Fix more footer issues + move footer-specific CSS that virtualized data grid cells don't need to the footer row file --- CHANGELOG.md | 1 + .../datagrid/_data_grid_data_row.scss | 15 +---------- .../datagrid/body/_data_grid_footer_row.scss | 6 +++++ .../datagrid/body/data_grid_cell.tsx | 27 +++++++------------ .../body/data_grid_cell_popover.test.tsx | 1 - .../datagrid/body/data_grid_cell_popover.tsx | 1 - 6 files changed, 17 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69e531b19f5..c90f929a6f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - 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)) +- Fixed `EuiDataGrid` auto row heights bugging out when cell popovers are opened ([#5622](https://github.com/elastic/eui/pull/5622)) **Breaking changes** diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 673aa58ec6f..dd1a5265883 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -1,6 +1,4 @@ .euiDataGridRow { - // needed for footer cells to correctly position - display: flex; background-color: $euiColorEmptyShade; } @@ -10,16 +8,10 @@ padding: $euiDataGridCellPaddingM; border-right: $euiDataGridVerticalBorder; border-bottom: $euiBorderThin; - flex: 0 0 auto; - position: relative; - align-items: center; - display: flex; overflow: hidden; - // Hack to allow for all the focus guard stuff + // Hack to allow focus trap to still stretch to full row height on defined heights > * { - max-width: 100%; - width: 100%; height: 100%; } @@ -114,11 +106,6 @@ z-index: $euiZDataGridCellPopover !important; } -.euiDataGridRowCell__expand { - width: 100%; - max-width: 100%; -} - .euiDataGridRowCell__expandFlex { position: relative; // for positioning expand button display: flex; diff --git a/src/components/datagrid/body/_data_grid_footer_row.scss b/src/components/datagrid/body/_data_grid_footer_row.scss index 46bd9f072cd..c7864889dbc 100644 --- a/src/components/datagrid/body/_data_grid_footer_row.scss +++ b/src/components/datagrid/body/_data_grid_footer_row.scss @@ -1,4 +1,10 @@ +.euiDataGridFooter { + display: flex; +} + @include euiDataGridFooterCell { + flex: 0 0 auto; + position: relative; font-weight: $euiFontWeightBold; } diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 1337ef0a773..6bab64e6610 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -616,7 +616,6 @@ export class EuiDataGridCell extends Component< onDeactivation={() => { this.setState({ isEntered: false }, this.preventTabbing); }} - style={isDefinedHeight ? { height: '100%' } : {}} clickOutsideDisables={true} >
@@ -628,12 +627,12 @@ export class EuiDataGridCell extends Component< ); if (hasCellActions) { - if (showCellActions) { - innerContent = ( -
-
- -
+ innerContent = ( +
+
+ +
+ {showCellActions && ( -
- ); - } else { - innerContent = ( -
-
- -
-
- ); - } + )} +
+ ); } const content = ( diff --git a/src/components/datagrid/body/data_grid_cell_popover.test.tsx b/src/components/datagrid/body/data_grid_cell_popover.test.tsx index 740dc90fde7..ddd535a3e43 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.test.tsx @@ -95,7 +95,6 @@ describe('useCellPopover', () => { populateCellPopover(cellPopoverContext); expect(getUpdatedState().cellPopover).toMatchInlineSnapshot(` } closePopover={[Function]} display="block" diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx index df5adff09fa..f1a446d9c0c 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.tsx @@ -71,7 +71,6 @@ export const useCellPopover = (): { const cellPopover = popoverIsOpen && popoverAnchor && (