From b65581420b510b91e2ea2de46aa7a99c5e0e6550 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 28 Feb 2020 11:47:05 -0800 Subject: [PATCH 1/9] Another shot at sticky headers for data grid --- src/components/datagrid/_data_grid_header_row.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss index 79702d44a64..f68fbd12a56 100644 --- a/src/components/datagrid/_data_grid_header_row.scss +++ b/src/components/datagrid/_data_grid_header_row.scss @@ -1,6 +1,10 @@ .euiDataGridHeader { display: inline-flex; min-width: 100%; // Needed to prevent wraps. Inline flex is tricky + position: sticky; // In IE11 this does not work, but doesn't cause a break. + z-index: 3; // Needs to sit above the content and focused cells + top: 0; + background: $euiColorLightestShade; } @include euiDataGridHeaderCell { @@ -47,6 +51,12 @@ // Header alternates // Often these need extra specificity because they need to gracefully clash with the border settings +@include euiDataGridStyles(bordersNone, bordersHorizontal) { + .euiDataGridHeader { + background: $euiColorEmptyShade; + } +} + @include euiDataGridStyles(headerUnderline) { @include euiDataGridHeaderCell { border-top: none; From e829558082c63d2253410264fb1761aa3806bb93 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 2 Mar 2020 09:56:47 -0800 Subject: [PATCH 2/9] JS + CSS tricks for sticky headers --- src/components/datagrid/_data_grid.scss | 4 +- .../datagrid/_data_grid_header_row.scss | 4 +- src/components/datagrid/data_grid.tsx | 21 +++++++++ .../flyout/__snapshots__/flyout.test.tsx.snap | 43 +++++++++++++++++++ 4 files changed, 67 insertions(+), 5 deletions(-) diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss index 314140b5393..f1201e3f125 100644 --- a/src/components/datagrid/_data_grid.scss +++ b/src/components/datagrid/_data_grid.scss @@ -25,12 +25,10 @@ .euiDataGrid__content { @include euiScrollBar; - @include euiScrollBar; height: 100%; - overflow-y: auto; + overflow: auto; font-feature-settings: 'tnum' 1; // Tabular numbers - overflow-x: auto; scroll-padding: 0; max-width: 100%; width: 100%; diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss index f68fbd12a56..50a42407649 100644 --- a/src/components/datagrid/_data_grid_header_row.scss +++ b/src/components/datagrid/_data_grid_header_row.scss @@ -1,10 +1,10 @@ .euiDataGridHeader { display: inline-flex; min-width: 100%; // Needed to prevent wraps. Inline flex is tricky - position: sticky; // In IE11 this does not work, but doesn't cause a break. z-index: 3; // Needs to sit above the content and focused cells - top: 0; background: $euiColorLightestShade; + position: sticky; // In IE11 this does not work, but doesn't cause a break. + top: 0; } @include euiDataGridHeaderCell { diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 598ff5786fc..b57662018e9 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -8,6 +8,7 @@ import React, { Fragment, ReactChild, useMemo, + useRef, Dispatch, SetStateAction, } from 'react'; @@ -623,6 +624,22 @@ export const EuiDataGrid: FunctionComponent = props => { orderedVisibleColumns ); + const hasStickyHeader = false; + + const contentRef = useRef(null); + + if (focusedCell !== undefined && focusedCell[1] === 0) { + if (contentRef.current != null) { + contentRef.current.scrollTop = 0; + } + } + + /* if (focusedCell !== undefined) { */ + /* if (contentRef.current != null) { */ + /* console.log(contentRef.current.scrollTop); */ + /* } */ + /* } */ + const classes = classNames( 'euiDataGrid', fontSizesToClassMap[gridStyles.fontSize!], @@ -639,6 +656,9 @@ export const EuiDataGrid: FunctionComponent = props => { { 'euiDataGrid--noControls': !toolbarVisibility, }, + { + 'euiDataGrid-hasStickyHeader': hasStickyHeader, + }, className ); @@ -842,6 +862,7 @@ export const EuiDataGrid: FunctionComponent = props => { /> ) : null}
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap index 769a9174016..047a7510a83 100644 --- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap +++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap @@ -172,6 +172,49 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
`; +exports[`EuiFlyout props accepts div props 1`] = ` +
+
+
+
+ +
+
+
+`; + exports[`EuiFlyout props close button is not rendered 1`] = `
Date: Mon, 2 Mar 2020 09:59:38 -0800 Subject: [PATCH 3/9] comments --- src/components/datagrid/data_grid.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index b57662018e9..a966f75a8e5 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -624,22 +624,16 @@ export const EuiDataGrid: FunctionComponent = props => { orderedVisibleColumns ); - const hasStickyHeader = false; - const contentRef = useRef(null); + // Because of a weird bug with position:sticky css items and focus, we force scrolling to the top + // if the item is in the first row. This prevents the cell from ever being under the sticky header. if (focusedCell !== undefined && focusedCell[1] === 0) { if (contentRef.current != null) { contentRef.current.scrollTop = 0; } } - /* if (focusedCell !== undefined) { */ - /* if (contentRef.current != null) { */ - /* console.log(contentRef.current.scrollTop); */ - /* } */ - /* } */ - const classes = classNames( 'euiDataGrid', fontSizesToClassMap[gridStyles.fontSize!], @@ -656,9 +650,6 @@ export const EuiDataGrid: FunctionComponent = props => { { 'euiDataGrid--noControls': !toolbarVisibility, }, - { - 'euiDataGrid-hasStickyHeader': hasStickyHeader, - }, className ); From 52f81b5c3c6117817b6df722a0eb29120553e251 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 2 Mar 2020 13:43:11 -0800 Subject: [PATCH 4/9] cl --- CHANGELOG.md | 2 ++ src/components/datagrid/data_grid_cell.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3319cfae43..bd0c317c844 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,11 +10,13 @@ - Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914)) - Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935)) - Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935)) +- Adjusted the header on `EuiDataGrid` to fix within constrained containers and full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) **Bug fixes** - Fixed `EuiTitle` not rendering child classes ([#2925](https://github.com/elastic/eui/pull/2925)) - Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914)) +Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) **Theme: Amsterdam** diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 26f3f6140cf..a36b4e4a4d2 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -368,7 +368,7 @@ export class EuiDataGridCell extends Component< isOpen={this.state.popoverIsOpen} ownFocus panelClassName="euiDataGridRowCell__popover" - zIndex={2000} + zIndex={8001} display="block" closePopover={() => this.setState({ popoverIsOpen: false })} onTrapDeactivation={this.updateFocus}> From 967cfba69931004e57b96826c9c92cee6619466e Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 2 Mar 2020 13:57:47 -0800 Subject: [PATCH 5/9] docs better on mobile --- src-docs/src/views/datagrid/datagrid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index 62864d99fce..7d88c67a5f4 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -26,7 +26,7 @@ const columns = [ id: 'email', display: ( // This is an example of an icon next to a title that still respects text truncate - +
email
 From fce7db2bbe256211a210da1cfc991703bda57522 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 3 Mar 2020 13:38:55 -0800 Subject: [PATCH 6/9] fix scroll in firefox with zindex --- src/components/datagrid/_data_grid.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss index f1201e3f125..8ec1cf6a8f0 100644 --- a/src/components/datagrid/_data_grid.scss +++ b/src/components/datagrid/_data_grid.scss @@ -32,12 +32,13 @@ scroll-padding: 0; max-width: 100%; width: 100%; + z-index: 2; } .euiDataGrid__controls { background: $euiPageBackgroundColor; position: relative; - z-index: 2; + z-index: 3; border: $euiBorderThin; padding: $euiSizeXS; flex-grow: 0; From c7bf5edf926a2d9691c86a18ba592121d2bde1dc Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 5 Mar 2020 13:16:52 -0700 Subject: [PATCH 7/9] Wrapped side effect in a useEffect --- src/components/datagrid/data_grid.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index a966f75a8e5..d2a952bd1ca 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -624,15 +624,17 @@ export const EuiDataGrid: FunctionComponent = props => { orderedVisibleColumns ); - const contentRef = useRef(null); + const contentRef = useRef(null); - // Because of a weird bug with position:sticky css items and focus, we force scrolling to the top + // Because of a weird Chrome bug with position:sticky css items and focus, we force scrolling to the top // if the item is in the first row. This prevents the cell from ever being under the sticky header. - if (focusedCell !== undefined && focusedCell[1] === 0) { - if (contentRef.current != null) { - contentRef.current.scrollTop = 0; + useEffect(() => { + if (focusedCell !== undefined && focusedCell[1] === 0) { + if (contentRef.current != null) { + contentRef.current.scrollTop = 0; + } } - } + }, [focusedCell]); const classes = classNames( 'euiDataGrid', From e942635194cdb35126d4dba05ed68b39488776f8 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 5 Mar 2020 12:43:07 -0800 Subject: [PATCH 8/9] better comments for z-indexs --- src/components/datagrid/_data_grid.scss | 4 ++-- src/components/datagrid/_data_grid_column_resizer.scss | 2 +- src/components/datagrid/_data_grid_data_row.scss | 3 +-- src/components/datagrid/_data_grid_header_row.scss | 3 +-- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss index 8ec1cf6a8f0..85a95cc8355 100644 --- a/src/components/datagrid/_data_grid.scss +++ b/src/components/datagrid/_data_grid.scss @@ -32,13 +32,13 @@ scroll-padding: 0; max-width: 100%; width: 100%; - z-index: 2; + z-index: 2; // Sits above the pagination below it, but below the controls above it } .euiDataGrid__controls { background: $euiPageBackgroundColor; position: relative; - z-index: 3; + z-index: 3; // Needs to sit above the content blow that sits below it border: $euiBorderThin; padding: $euiSizeXS; flex-grow: 0; diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss index f46bce3d618..09ab4287586 100644 --- a/src/components/datagrid/_data_grid_column_resizer.scss +++ b/src/components/datagrid/_data_grid_column_resizer.scss @@ -7,7 +7,7 @@ width: $euiSize; cursor: ew-resize; opacity: 0; - z-index: 2; + z-index: 2; // Needs to be a level above the cells themselves in case of overlaps // Center a vertical line within the button above &:after { diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 98b7cb2000e..3a8b038e936 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -34,8 +34,7 @@ margin-top: -1px; box-shadow: 0 0 0 2px $euiFocusRingColor; border-radius: 1px; - // Needed so it sits above potential striping in the next row - z-index: 2; + z-index: 2; // Needed so it sits above potential striping in the next row .euiDataGridRowCell__expandButton { margin-left: $euiDataGridCellPaddingM; diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss index 50a42407649..658ec05c6ae 100644 --- a/src/components/datagrid/_data_grid_header_row.scss +++ b/src/components/datagrid/_data_grid_header_row.scss @@ -34,8 +34,7 @@ border: 1px solid transparent; box-shadow: 0 0 0 2px $euiFocusRingColor; border-radius: 1px; - // Needed so it sits above the other rows - z-index: 2; + z-index: 2; // Needed so the focus ring sits above the other row below it. } // We only truncate if the cell is not a control column. From 9f7c29edeb8940e480bf8055e51964b9bc3f87a5 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 5 Mar 2020 15:03:12 -0800 Subject: [PATCH 9/9] cl --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 53a4de60ea9..f3d1dabacd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ - Fixed `EuiDataGrid`'s sort popover to behave properly on mobile screens ([#2979](https://github.com/elastic/eui/pull/2979)) - Fixed `EuiButton` and other textual components' disabled contrast ([#2874](https://github.com/elastic/eui/pull/2874)) +- Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) +- Adjusted the header on `EuiDataGrid` to fix to the top within constrained containers and full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) **Breaking changes** @@ -35,14 +37,12 @@ - Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914)) - Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935)) - Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935)) -- Adjusted the header on `EuiDataGrid` to fix within constrained containers and full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) **Bug fixes** - Fixed `EuiDataGrid` breaking if invalid schema passed ([#2955](https://github.com/elastic/eui/pull/2955)) - Fixed `EuiTitle` not rendering child classes ([#2925](https://github.com/elastic/eui/pull/2925)) - Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914)) -- Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) - Fixed popover positioning service to be more lenient when positioning 0-width or 0-height content ([#2948](https://github.com/elastic/eui/pull/2948)) **Theme: Amsterdam**