(Trying to) Fix z-indexes with header and flyouts & adding more EuiHeader docs #3655

cchaos · 2020-06-24T20:55:47Z

Z-index

This diagram shows the extend to which we needed more stringent attention to our z-index levels (and yet simplify at the same time).

EuiOverlayMask

This is the main component that needed more flexibility to change it's z-index. Consumers can always pass in a custom class or style prop to override the default z-index, but I also wanted to provide a quick way for flyouts associated with the header to get the correct z-index.

So I added the prop headerZindexLocation?: 'above' | 'below'. By default all masks will stay "above" the header, but by passing "below", we adjust the z-index to be 1 level below the header: z-index: $euiZHeader - 1.

Flyouts & EuiCollapsibleNav

All flyouts with ownFocus that include the overlay mask now apply the headerZindexLocation="below" prop by default. Though consumers can still adjust this with the new maskProps prop.

In SASS I added a $euiZFlyout var set to 3000 (above header, but below mask default). So if consumers do change the headerZindexLocation prop, they will also need to manually change the z-index of flyouts, but that is a very rare need.

EuiHeader fixed

I removed any additional z-indexing for when the head is fixed since it's no longer necessary to bump it up.

Docs

I added a few new docs sections as well for some of these new props/patterns.

Overlay mask with header

Portal content in the header

I changed the EuiHeaderAlert example to talk more specifically about using popover vs flyout. In a follow-up I will create a new page for EuiHEaderAlert specifically which is lacking in docs at the moment.

The Elastic navigation pattern

At the bottom of the Header page I've added a "final" pattern with all the bits needed to display our Elastic global headers. The contents of the flyouts and popovers redirect users to that specific component as the upkeep to keep them in sync but separate is too much. I also made sure that the CodeSandbox link would render and optimized for it though CSB is broken again because of icons.

Other fixes

Moved the clip-path of the flyout from being Amsterdam specific to being applied to all themes
Fixed Amsterdam header breadcrumb border-radius and overall height
Fixed EuiHeaderLink item margins to account for any type of children
Fixed EuiBreadcrumb support for onClick
Fixed EuiBadge support for any valid chroma.js color string. While it always displayed correctly, the console warning wasn't.

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Safari and Firefox and Kibana
Props have proper autodocs
Added documentation
Checked Code Sandbox works for the any docs examples
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~ 🎉 😆
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

…ed on EuiHeader

- By default EuiFlyout’s mask will always display below the header, but this can be adjusted by with `maskProps`

…ing `maskProps` to allow customization

And font-weight fix for amsterdam header breadcrumbs

cchaos · 2020-06-24T20:57:41Z

This should probably be tested locally against Kibana before merging as well. But is at least ready for a review from the code and docs side.

kibanamachine · 2020-06-24T21:17:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3655/

chandlerprall · 2020-06-29T17:05:53Z

What are you thoughts on creating a specific z-index concerns/customizations/practices page in the docs?

cchaos · 2020-06-29T20:27:33Z

Probably a good idea at some point but don't want to hold up Kibana updates for docs.

thompsongl

Code LGTM. Just a couple docs edits

src-docs/src/views/header/header_example.js

src-docs/src/views/overlay_mask/overlay_mask_example.js

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

kibanamachine · 2020-06-30T23:14:47Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3655/

snide

LGTM. I clicked around in the usual places in Kibana / EUI. One small opinion, but feel free to merge! Nice work.

snide · 2020-07-01T02:14:05Z

src/components/overlay_mask/overlay_mask.tsx

@@ -50,6 +57,7 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
  className,
  children,
  onClick,
+  headerAdjacent = 'above',


I kind of like this propname, and kind of don't :D. Adjacent doesn't really grok with the normal language, which I think would be something like sibling. headerZindexLocation might be a little more obvious to someone looking for this or trying to figure out what it does.

It's a nit, because the doc describes it well enough.

Yeah I struggled with the name on that one. I'll change.

snide · 2020-07-01T02:20:04Z

src/global_styling/variables/_z_index.scss

@@ -27,6 +27,7 @@ $euiZLevel9:          9000;
 $euiZContent:         $euiZLevel0;
 $euiZHeader:          $euiZLevel1;
 $euiZContentMenu:     $euiZLevel2;
+$euiZFlyout:          $euiZLevel3;


Were we really this lucky with the numbering?

Apparently! 😏

…x/z-indexes

kibanamachine · 2020-07-01T14:47:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3655/

kibanamachine · 2020-07-01T15:55:54Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3655/

cchaos added 15 commits June 24, 2020 16:13

[EuiOverlayMask] Added headerAdjacent prop for altering z-index bas…

aa75d10

…ed on EuiHeader

[EuiFlyout] Adjusts mask for header and add maskProps

86b8440

- By default EuiFlyout’s mask will always display below the header, but this can be adjusted by with `maskProps`

Fix demo page setup script with folder location

594fc74

[EuiCollapsibleNav] Applying headerAdjacent="below” to mask and add…

0cdbe16

…ing `maskProps` to allow customization

[Docs] Fixing header examples (esp Alerts)

bf49a59

Tweak to Amsterdam EuiHeaderBreadcrumb sizing

0e77bd9

Fix demo page setup script with folder location (pt 2)

3eb4793

[EuiBreadcrumbs] Fix for allowing onClick

846a99b

And font-weight fix for amsterdam header breadcrumbs

[SASS] Fix flyout vs collapsible nav clip-path

9371948

[EuiBreadcrumbs] Fix for allowing onClick (SNAPS)

3ac309c

[Docs] Elastic Header Pattern (as TSX)

bd9b1a3

Convert example to JS and optimize for codesandbox

199a701

[EuiBadge] Allow any valid chroma.js color string

9baca91

[EuiHeaderLinks] Fix margins for any children

fbe7d84

Cleanup

90e173b

cchaos requested review from snide and thompsongl June 24, 2020 20:57

cchaos mentioned this pull request Jun 29, 2020

Add guidelines for z-index concerns/customizations/practices #3671

Closed

thompsongl approved these changes Jun 29, 2020

View reviewed changes

src-docs/src/views/header/header_example.js Outdated Show resolved Hide resolved

src-docs/src/views/overlay_mask/overlay_mask_example.js Outdated Show resolved Hide resolved

cchaos and others added 2 commits June 30, 2020 18:51

Update src-docs/src/views/header/header_example.js

3744e44

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

Update src-docs/src/views/overlay_mask/overlay_mask_example.js

c61245d

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

snide approved these changes Jul 1, 2020

View reviewed changes

cchaos added 3 commits July 1, 2020 09:30

Change headerAdjacent to headerZindexLocation

ba35c78

Merge branch 'fix/z-indexes' of https://github.com/cchaos/eui into fi…

6a342ce

…x/z-indexes

cl

8e78c12

cchaos and others added 2 commits July 1, 2020 10:24

cl

75e63ca

Merge branch 'master' into fix/z-indexes

e99dca9

Merge branch 'master' into fix/z-indexes

6bac69a

cchaos merged commit c19ca9f into elastic:master Jul 1, 2020

cchaos deleted the fix/z-indexes branch July 1, 2020 16:27

thompsongl mentioned this pull request Jul 2, 2020

Upgrade EUI to v26.3.1 elastic/kibana#70243

Merged

mmourafiq mentioned this pull request Jul 9, 2020

[EuiDataGrid & EuiFlyout] Z-Index of flyout is wrong in a full screen #3719

Closed

ryankeairns mentioned this pull request Sep 8, 2020

Decrease EuiBottomBar z-index #4020

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(Trying to) Fix z-indexes with header and flyouts & adding more EuiHeader docs #3655

(Trying to) Fix z-indexes with header and flyouts & adding more EuiHeader docs #3655

cchaos commented Jun 24, 2020 •

edited

Loading

cchaos commented Jun 24, 2020

kibanamachine commented Jun 24, 2020

chandlerprall commented Jun 29, 2020

cchaos commented Jun 29, 2020

thompsongl left a comment

kibanamachine commented Jun 30, 2020

snide left a comment

snide Jul 1, 2020

cchaos Jul 1, 2020

snide Jul 1, 2020

cchaos Jul 1, 2020

kibanamachine commented Jul 1, 2020

kibanamachine commented Jul 1, 2020

(Trying to) Fix z-indexes with header and flyouts & adding more EuiHeader docs #3655

(Trying to) Fix z-indexes with header and flyouts & adding more EuiHeader docs #3655

Conversation

cchaos commented Jun 24, 2020 • edited Loading

Z-index

EuiOverlayMask

Flyouts & EuiCollapsibleNav

EuiHeader fixed

Docs

Overlay mask with header

Portal content in the header

The Elastic navigation pattern

Other fixes

Checklist

cchaos commented Jun 24, 2020

kibanamachine commented Jun 24, 2020

chandlerprall commented Jun 29, 2020

cchaos commented Jun 29, 2020

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Jun 30, 2020

snide left a comment

Choose a reason for hiding this comment

snide Jul 1, 2020

Choose a reason for hiding this comment

cchaos Jul 1, 2020

Choose a reason for hiding this comment

snide Jul 1, 2020

Choose a reason for hiding this comment

cchaos Jul 1, 2020

Choose a reason for hiding this comment

kibanamachine commented Jul 1, 2020

kibanamachine commented Jul 1, 2020

cchaos commented Jun 24, 2020 •

edited

Loading