[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
elastic · Aug 20, 2021 · 6e1774e · 6e1774e
1 parent ed83754
commit 6e1774e
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 50 deletions.
diff --git 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
@@ -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 = (
+          <EuiModal onClose={closeModal} style={{ width: 500 }}>
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>
+                <h2>A typical modal</h2>
+              </EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>
+              <EuiText>
+                <p>
+                  <Link to="/layout/modal">
+                    <strong>EuiModal</strong>
+                  </Link>{' '}
+                  components have a higher <EuiCode>z-index</EuiCode> than{' '}
+                  <strong>EuiDataGrid</strong> components, even in full screen
+                  mode. This ensures that modals will never appear behind the
+                  data grid.
+                </p>
+              </EuiText>
+            </EuiModalBody>
+
+            <EuiModalFooter>
+              <EuiButton onClick={closeModal} fill>
+                Close
+              </EuiButton>
+            </EuiModalFooter>
+          </EuiModal>
+        );
+      }
+
+      const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+      const closeFlyout = () => setIsFlyoutVisible(false);
+      const showFlyout = () => {
+        closePopover();
+        setIsFlyoutVisible(true);
+      };
+
+      let flyout;
+
+      if (isFlyoutVisible) {
+        flyout = (
+          <EuiFlyout
+            aria-labelledby="flyoutTitle"
+            onClose={closeFlyout}
+            ownFocus
+            size="s">
+            <EuiFlyoutHeader hasBorder>
+              <EuiTitle size="m">
+                <h2 id="flyoutTitle">A typical flyout</h2>
+              </EuiTitle>
+            </EuiFlyoutHeader>
+
+            <EuiFlyoutBody>
+              <EuiText>
+                <p>
+                  <Link to="/layout/flyout">
+                    <strong>EuiFlyout</strong>
+                  </Link>{' '}
+                  components have a higher <EuiCode>z-index</EuiCode> than{' '}
+                  <strong>EuiDataGrid</strong> components, even in full screen
+                  mode. This ensures that flyouts will never appear behind the
+                  data grid.
+                </p>
+
+                <p>
+                  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.
+                </p>
+              </EuiText>
+            </EuiFlyoutBody>
+
+            <EuiFlyoutFooter>
+              <EuiButtonEmpty
+                flush="left"
+                iconType="cross"
+                onClick={closeFlyout}>
+                Close
+              </EuiButtonEmpty>
+            </EuiFlyoutFooter>
+          </EuiFlyout>
+        );
+      }
+
+      const actions = [
+        <EuiContextMenuItem icon="apmTrace" key="modal" onClick={showModal}>
+          Modal example
+        </EuiContextMenuItem>,
+        <EuiContextMenuItem
+          icon="tableOfContents"
+          key="flyout"
+          onClick={showFlyout}>
+          Flyout example
+        </EuiContextMenuItem>,
+      ];
+
       return (
-        <div>
+        <>
           <EuiPopover
-            isOpen={isPopoverOpen}
-            panelPaddingSize="s"
+            isOpen={isPopoverVisible}
+            panelPaddingSize="none"
             anchorPosition="upCenter"
             button={
               <EuiButtonIcon
-                aria-label="show actions"
+                aria-label="Show actions"
                 iconType="boxesHorizontal"
                 color="text"
-                onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                onClick={() => setIsPopoverVisible(!isPopoverVisible)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}>
-            <EuiPopoverTitle>Actions</EuiPopoverTitle>
-            <div style={{ width: 150 }}>
-              <button onClick={() => {}}>
-                <EuiFlexGroup
-                  alignItems="center"
-                  component="span"
-                  gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      aria-label="Pin selected items"
-                      iconType="pin"
-                      color="text"
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem>Pin</EuiFlexItem>
-                </EuiFlexGroup>
-              </button>
-              <EuiSpacer size="s" />
-              <button onClick={() => {}}>
-                <EuiFlexGroup
-                  alignItems="center"
-                  component="span"
-                  gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      aria-label="Delete selected items"
-                      iconType="trash"
-                      color="text"
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem>Delete</EuiFlexItem>
-                </EuiFlexGroup>
-              </button>
-            </div>
+            closePopover={closePopover}>
+            <EuiContextMenuPanel items={actions} size="s" title="Actions" />
           </EuiPopover>
-        </div>
+
+          {modal}
+
+          {flyout}
+        </>
       );
     },
   },

diff --git 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
@@ -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
@@ -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};
     }
   }