From 6e1774e9c7053af176d79227e6b457316b3d769c Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Fri, 20 Aug 2021 13:10:51 -0400 Subject: [PATCH] [euiHeaderAffordForFixed] Don't apply offset styles to EuiOverlayMask or EuiFlyout when EuiDataGrid is full screen (#5054) * don't apply top/height styles when data grid is fs * update changelog * reduce data grid full screen z-index per caroline * add in-data-grid modal and flyout examples * move z-index vars * remove unneeded log entry --- CHANGELOG.md | 2 + src-docs/src/views/datagrid/datagrid.js | 189 ++++++++++++++++++------ src/components/datagrid/_data_grid.scss | 6 +- src/components/datagrid/_variables.scss | 3 + src/global_styling/mixins/_header.scss | 4 +- 5 files changed, 154 insertions(+), 50 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de7850acab1..e7d43e967fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ - Fixed bug in `EuiDataGrid` where a custom `className` was also being passed to the full screen button ([#5050](https://github.com/elastic/eui/pull/5050)) - Fixed rerender state issues in `PaginationButton` inside `EuiPagination` ([#5048](https://github.com/elastic/eui/pull/5048)) +- Fixed bug in `euiHeaderAffordForFixed` mixin that was not accounting for situations where `EuiDataGrid` was in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054)) +- Fixed `z-index` styles that were causing `EuiModal` and `EuiFlyout` components to appear behind `EuiDataGrid` when in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054)) **Theme: Amsterdam** diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index 3ee80026103..57155e3abf8 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -8,17 +8,30 @@ import React, { useContext, useRef, } from 'react'; +import { Link } from 'react-router-dom'; import { fake } from 'faker'; import { + EuiButton, + EuiButtonEmpty, + EuiButtonIcon, + EuiCode, + EuiContextMenuItem, + EuiContextMenuPanel, EuiDataGrid, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlyoutHeader, EuiLink, - EuiFlexGroup, - EuiFlexItem, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, EuiPopover, - EuiPopoverTitle, - EuiButtonIcon, - EuiSpacer, + EuiText, + EuiTitle, } from '../../../../src/components/'; const DataContext = createContext(); @@ -173,58 +186,140 @@ const trailingControlColumns = [ width: 40, headerCellRender: () => null, rowCellRender: function RowCellRender() { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [isPopoverVisible, setIsPopoverVisible] = useState(false); + const closePopover = () => setIsPopoverVisible(false); + + const [isModalVisible, setIsModalVisible] = useState(false); + const closeModal = () => setIsModalVisible(false); + const showModal = () => { + closePopover(); + setIsModalVisible(true); + }; + + let modal; + + if (isModalVisible) { + modal = ( + + + +

A typical modal

+ + + + + +

+ + EuiModal + {' '} + components have a higher z-index than{' '} + EuiDataGrid components, even in full screen + mode. This ensures that modals will never appear behind the + data grid. +

+ + + + + + Close + + + + ); + } + + const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); + const closeFlyout = () => setIsFlyoutVisible(false); + const showFlyout = () => { + closePopover(); + setIsFlyoutVisible(true); + }; + + let flyout; + + if (isFlyoutVisible) { + flyout = ( + + + +

A typical flyout

+ + + + + +

+ + EuiFlyout + {' '} + components have a higher z-index than{' '} + EuiDataGrid components, even in full screen + mode. This ensures that flyouts will never appear behind the + data grid. +

+ +

+ Flyouts are also styled with a vertical offset that accounts + for the presence of fixed headers. However, when the data grid + is in full screen mode, these offset styles are ignored to + allow the flyout to correctly appear at the top of the + viewport. +

+ + + + + + Close + + + + ); + } + + const actions = [ + + Modal example + , + + Flyout example + , + ]; + return ( -
+ <> setIsPopoverOpen(!isPopoverOpen)} + onClick={() => setIsPopoverVisible(!isPopoverVisible)} /> } - closePopover={() => setIsPopoverOpen(false)}> - Actions -
- - - -
+ closePopover={closePopover}> + -
+ + {modal} + + {flyout} + ); }, }, diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss index 083f17d7804..02ab0a26aba 100644 --- a/src/components/datagrid/_data_grid.scss +++ b/src/components/datagrid/_data_grid.scss @@ -13,7 +13,7 @@ left: 0; right: 0; bottom: 0; - z-index: $euiZModal; + z-index: $euiZDataGrid; background: $euiColorEmptyShade; .euiDataGrid__pagination { @@ -101,6 +101,10 @@ .euiDataGrid__restrictBody { height: 100vh; overflow: hidden; + + .euiHeader { + z-index: $euiZHeaderBelowDataGrid; + } } diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss index cf47d05fdc5..157b9579e86 100644 --- a/src/components/datagrid/_variables.scss +++ b/src/components/datagrid/_variables.scss @@ -1,3 +1,6 @@ +$euiZDataGrid: $euiZHeader - 1; +$euiZHeaderBelowDataGrid: $euiZHeader - 2; + $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border $euiDataGridPopoverMaxHeight: $euiSize * 25; diff --git a/src/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss index 7e2a616f45b..b80279132f3 100644 --- a/src/global_styling/mixins/_header.scss +++ b/src/global_styling/mixins/_header.scss @@ -7,7 +7,7 @@ padding-top: $headerHeight; // When the EuiHeader is fixed, we need to account for it in the position of the flyout - .euiFlyout, + &:not(.euiDataGrid__restrictBody) .euiFlyout, .euiCollapsibleNav { top: $headerHeight; height: calc(100% - #{$headerHeight}); @@ -20,7 +20,7 @@ } } - .euiOverlayMask--belowHeader { + &:not(.euiDataGrid__restrictBody) .euiOverlayMask--belowHeader { top: #{$headerHeight}; } }