From 6b587ad618911f4d2d71039bd4f20aae64030f3e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 09:18:20 -0800 Subject: [PATCH 1/9] Fix auto height rows breaking when cell popover opens The `flex` display on the parent `.euiDataGridRowCell` is unnecessary, and what's causing this bug --- src/components/datagrid/_data_grid_data_row.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 63b11d90019..117618ba80f 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -9,11 +9,8 @@ padding: $euiDataGridCellPaddingM; border-right: $euiDataGridVerticalBorder; border-bottom: $euiBorderThin; - flex: 0 0 auto; background: $euiColorEmptyShade; position: relative; - align-items: center; - display: flex; overflow: hidden; // Hack to allow for all the focus guard stuff From 7745f89a3155351553ae880f47777a9e5612e504 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 09:32:27 -0800 Subject: [PATCH 2/9] [cleanup] Remove unnecessary position relative on .euiDataGridRowCell - it's being overridden by react-window's absolute positioning in any case --- src/components/datagrid/_data_grid_data_row.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 117618ba80f..3733591a148 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -10,7 +10,6 @@ border-right: $euiDataGridVerticalBorder; border-bottom: $euiBorderThin; background: $euiColorEmptyShade; - position: relative; overflow: hidden; // Hack to allow for all the focus guard stuff From d3deba6d298a2933100f4a6c834f4ac304747fe5 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 09:22:05 -0800 Subject: [PATCH 3/9] [cleanup] Remove unnecessary `euiDataGridRowCell__expand` class from the popover anchor wrapper - as far as I can tell, it's not doing anything --- src/components/datagrid/_data_grid_data_row.scss | 5 ----- src/components/datagrid/body/data_grid_cell_popover.test.tsx | 1 - src/components/datagrid/body/data_grid_cell_popover.tsx | 1 - 3 files changed, 7 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 3733591a148..cca4243a952 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -110,11 +110,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_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 && ( Date: Thu, 10 Feb 2022 09:31:35 -0800 Subject: [PATCH 4/9] [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) --- src/components/datagrid/_data_grid_data_row.scss | 6 ++---- src/components/datagrid/body/data_grid_cell.tsx | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index cca4243a952..ad8ec08b1ea 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -12,11 +12,9 @@ background: $euiColorEmptyShade; overflow: hidden; - // Hack to allow for all the focus guard stuff > * { - max-width: 100%; - width: 100%; - height: 100%; + height: 100%; // Hack to allow for focus trap to still stretch to full row height on defined heights + overflow: hidden; // Maintain cutting off content past the cell padding when popover is open } &.euiDataGridRowCell--firstColumn { diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index eff79dc47f6..e749d03eefe 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -615,7 +615,6 @@ export class EuiDataGridCell extends Component< onDeactivation={() => { this.setState({ isEntered: false }, this.preventTabbing); }} - style={isDefinedHeight ? { height: '100%' } : {}} clickOutsideDisables={true} >
From c671dcaf8f1d47e1ee59984827f8756bc6556b9d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 9 Feb 2022 18:18:19 -0800 Subject: [PATCH 5/9] [misc cleanup] DRY out showCellActions if statement - can be conditional JSX instead of repeating EuiDataGridCellContent again --- .../datagrid/body/data_grid_cell.tsx | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index e749d03eefe..153254a8a3a 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -626,12 +626,12 @@ export class EuiDataGridCell extends Component< ); if (hasCellActions) { - if (showCellActions) { - innerContent = ( -
-
- -
+ innerContent = ( +
+
+ +
+ {showCellActions && ( -
- ); - } else { - innerContent = ( -
-
- -
-
- ); - } + )} +
+ ); } const content = ( From 0cf792cf9c2d0fe060b9fb585565474be94be184 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 09:53:23 -0800 Subject: [PATCH 6/9] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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** From 384d41ebf48c9ec36f3d4f91016e0e0fff980e42 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 11:35:13 -0800 Subject: [PATCH 7/9] Revert popover cutoff change, it's introducing too many side effects + was already in place in main since 40.0.0 --- src/components/datagrid/_data_grid_data_row.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 988cd2a40dd..a60c8c512b5 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -11,9 +11,9 @@ border-bottom: $euiBorderThin; overflow: hidden; + // Hack to allow focus trap to still stretch to full row height on defined heights > * { - height: 100%; // Hack to allow for focus trap to still stretch to full row height on defined heights - overflow: hidden; // Maintain cutting off content past the cell padding when popover is open + height: 100%; } &.euiDataGridRowCell--firstColumn { From e527ceb4a6b255c8684944ff39062a8749ee4a73 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 11:40:45 -0800 Subject: [PATCH 8/9] Fix broken focus cell positioning on footer cells - footer cells aren't virtualized and don't have absolute positioning inline --- src/components/datagrid/body/_data_grid_footer_row.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/datagrid/body/_data_grid_footer_row.scss b/src/components/datagrid/body/_data_grid_footer_row.scss index 46bd9f072cd..79feb7fbc90 100644 --- a/src/components/datagrid/body/_data_grid_footer_row.scss +++ b/src/components/datagrid/body/_data_grid_footer_row.scss @@ -1,4 +1,5 @@ @include euiDataGridFooterCell { + position: relative; font-weight: $euiFontWeightBold; } From fd4672f6ca3cc5935de386f4caf211d8860d74af Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 10 Feb 2022 12:07:15 -0800 Subject: [PATCH 9/9] Fix more footer issues + move footer-specific CSS that virtualized data grid cells don't need to the footer row file --- src/components/datagrid/_data_grid_data_row.scss | 1 - src/components/datagrid/body/_data_grid_footer_row.scss | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index a60c8c512b5..dd1a5265883 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -1,5 +1,4 @@ .euiDataGridRow { - display: flex; // Needed for footer cells to correctly position background-color: $euiColorEmptyShade; } diff --git a/src/components/datagrid/body/_data_grid_footer_row.scss b/src/components/datagrid/body/_data_grid_footer_row.scss index 79feb7fbc90..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,9 @@ +.euiDataGridFooter { + display: flex; +} + @include euiDataGridFooterCell { + flex: 0 0 auto; position: relative; font-weight: $euiFontWeightBold; }