[euiHeaderAffordForFixed] Don't apply offset styles to EuiOverlayMask or EuiFlyout when EuiDataGrid is full screen

[MichaelMarcialis]

Summary

It was recently noticed in Kibana that EuiOverlayMask and EuiFlyout components were still accounting for the presence of EuiHeader components, even when EuiDataGrid is in full screen mode. This was due to the EUI mixin euiHeaderAffordForFixed.

This PR changes the mixin to now avoid applying these offset styles (top, height) when EuiDataGrid is in full screen (via the :not(.euiDataGrid__restrictBody) selector).

Additionally, while adding examples of EuiModal and EuiFlyout being triggered from within an EuiDataGrid (per @cchaos 's suggestion), it was discovered that the EuiModal and EuiFlyout components had a z-index that caused them to appear below EuiDataGrid components when in full screen mode (outside Kibana). A fix for this is also included in this PR (thanks to @cchaos for the direction).

Closes elastic/kibana#108681.
Closes elastic/kibana#108896.

CCing @snide, @ryankeairns, @XavierM.

Before:

After:

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] 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

[kibanamachine]

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

[cchaos]

💟 Thanks for the PR @MichaelMarcialis !!

I'm wondering if we should also specifically add in some examples to our docs that trigger flyouts and modals so we might better keep track of those things. Would you be up for doing that?

[MichaelMarcialis]

I'm wondering if we should also specifically add in some examples to our docs that trigger flyouts and modals so we might better keep track of those things. Would you be up for doing that?

@cchaos: Sure, I can see about adding an example of an EuiDataGrid with flyout and modal triggers. Do you think this new example would make sense as part of the "Data grid styling and control" page? Also, should it be a separate PR or part of this one?

[cchaos]

You can build it directly into this PR. It'll also make it easier to test this PR to have an example to look at.

How about just updating the action items in the first/initial example which has kind of become our Kitchen sink of sorts.

If you need help with content, just shout.

[kibanamachine]

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

[kibanamachine]

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

[snide]

Fantastic work. Thank you for taking this so quickly. I left some small suggestions, but I think it's OK to merge after addressing them.

@chandlerprall @thompsongl I'd like to backport this one as a patch because it's causing breaks in Kibana. Might be a good opportunity to show @breehall and @constancecchen how we do those. I'll make an issue for an upcoming patch.

[cchaos]

I think this one is worth testing a local build with Kibana to make sure this solves the problem. I'm going to spin that up so it'll be a couple hours before I review 😬

[kibanamachine]

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

[cchaos]

I love the docs info you put into the modal and flyout examples! 💯 Checked in FF, Safari, and Chrome. I checked this in Kibana too, looks like it's working!

But it looks like we'll need to adjust the full screen data grid placement when there are banners in Kibana.

[MichaelMarcialis]

But it looks like we'll need to adjust the full screen data grid placement when there are banners in Kibana.

Interesting. Looks like it's a z-indexing issue with the banner showing above the data grid. I'll merge this in and take a peek at that after, as that's likely on the Kibana side.