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