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 && (