From 7717a3872349f2ff0109e0c88c50423ca7ee56e6 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 9 Dec 2021 12:40:56 -0800 Subject: [PATCH 1/3] Lower the hard-coded z-index of cell popovers --- src/components/datagrid/_data_grid_data_row.scss | 1 + src/components/datagrid/_variables.scss | 1 + src/components/datagrid/body/data_grid_cell_popover.test.tsx | 2 -- src/components/datagrid/body/data_grid_cell_popover.tsx | 1 - 4 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 88498aeaa5d..9ab28257c3f 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -130,6 +130,7 @@ // sass-lint:disable-block no-important max-width: 400px !important; max-height: 400px !important; + z-index: $euiZDataGridCellPopover !important; } .euiDataGridRowCell__expand { diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss index 157b9579e86..aea5b342131 100644 --- a/src/components/datagrid/_variables.scss +++ b/src/components/datagrid/_variables.scss @@ -1,5 +1,6 @@ $euiZDataGrid: $euiZHeader - 1; $euiZHeaderBelowDataGrid: $euiZHeader - 2; +$euiZDataGridCellPopover: $euiZHeader; $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border $euiDataGridPopoverMaxHeight: $euiSize * 25; 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 8dbb3602575..0d528cf3ce7 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.test.tsx @@ -50,7 +50,6 @@ describe('EuiDataGridCellPopover', () => { panelClassName="euiDataGridRowCell__popover" panelPaddingSize="s" panelRef={[Function]} - zIndex={8001} > } @@ -91,7 +90,6 @@ describe('EuiDataGridCellPopover', () => { panelClassName="euiDataGridRowCell__popover" panelPaddingSize="s" panelRef={[Function]} - zIndex={8001} > } diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx index 07a2b4315e4..aea6935a639 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.tsx @@ -41,7 +41,6 @@ export function EuiDataGridCellPopover({ panelRef={panelRefFn} panelClassName="euiDataGridRowCell__popover" panelPaddingSize="s" - zIndex={8001} display="block" closePopover={closePopover} onKeyDown={(event) => { From dbfe4ea49b1232bd4aa68dfceb25b9adbcff806a Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 9 Dec 2021 12:50:31 -0800 Subject: [PATCH 2/3] Add changelog entry --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a1a34db50c0..e2267e7222a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ - Added `magnifyWithExclamation` icon ([#5455](https://github.com/elastic/eui/pull/5455)) +**Bug fixes** + +- Fixed `EUiDataGrid`'s cell popover overlapping with modals and flyouts ([#5461](https://github.com/elastic/eui/pull/5461)) + ## [`43.0.0`](https://github.com/elastic/eui/tree/v43.0.0) - Updated the organization of `EuiDataGrid`'s toolbar/grid controls ([#5334](https://github.com/elastic/eui/pull/5334)) From 6eae1c65ce023233c650037be7cb480fb9c3151a Mon Sep 17 00:00:00 2001 From: Constance Date: Tue, 14 Dec 2021 08:58:46 -0800 Subject: [PATCH 3/3] [PR feedback] Z-index comment --- src/components/datagrid/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss index aea5b342131..3e95b6a68ee 100644 --- a/src/components/datagrid/_variables.scss +++ b/src/components/datagrid/_variables.scss @@ -1,6 +1,6 @@ $euiZDataGrid: $euiZHeader - 1; $euiZHeaderBelowDataGrid: $euiZHeader - 2; -$euiZDataGridCellPopover: $euiZHeader; +$euiZDataGridCellPopover: $euiZHeader; // Same z-index as EuiFlyout mask overlays - cell popovers should be under both modal and flyout overlays $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border $euiDataGridPopoverMaxHeight: $euiSize * 25;