Skip to content

Fix EuiFlyout z-index values for managed and unmanaged flyouts #9169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tkajtoch merged 4 commits into from
Nov 4, 2025
Merged

Fix EuiFlyout z-index values for managed and unmanaged flyouts #9169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce59e1a
fix: add mistakenly removed `headerZindexLocation="below"` to flyout …
tkajtoch Nov 4, 2025
e14ab4b
fix: unify z-index logic and ensure it's correct for all `isPushed` a…
tkajtoch Nov 4, 2025
798237f
test: cover the new zIndex argument in `composeFlyoutInlineStyles`
tkajtoch Nov 4, 2025
a78e797
test: update snapshots
tkajtoch Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiCollapsibleNav close button can be hidden 1`] = `
<div>
<div
class="css-yux95t-overlayMask"
class="css-w7myn3-getEuiFlyoutOverlayStyles"
/>
<div
data-focus-guard="true"
Expand All @@ -20,7 +20,7 @@ exports[`EuiCollapsibleNav close button can be hidden 1`] = `
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
tabindex="0"
>
<p
Expand Down Expand Up @@ -58,7 +58,7 @@ exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `<div />`;
exports[`EuiCollapsibleNav is rendered 1`] = `
<div>
<div
class="css-yux95t-overlayMask"
class="css-w7myn3-getEuiFlyoutOverlayStyles"
/>
<div
data-focus-guard="true"
Expand All @@ -77,7 +77,7 @@ exports[`EuiCollapsibleNav is rendered 1`] = `
data-test-subj="test subject string"
id="id"
role="dialog"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
tabindex="0"
>
<p
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 240px;"
style="inline-size: 240px; z-index: 6000;"
tabindex="0"
>
<p
Expand Down Expand Up @@ -168,7 +168,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
aria-pressed="true"
/>
<div
class="css-yux95t-overlayMask"
class="css-w7myn3-getEuiFlyoutOverlayStyles"
/>
<div
data-focus-guard="true"
Expand All @@ -185,7 +185,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
tabindex="0"
>
<p
Expand Down Expand Up @@ -221,7 +221,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
<div>
<div
class="css-yux95t-overlayMask"
class="css-w7myn3-getEuiFlyoutOverlayStyles"
/>
<div
data-focus-guard="true"
Expand All @@ -238,7 +238,7 @@ exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
tabindex="0"
>
<p
Expand Down Expand Up @@ -284,7 +284,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
<nav
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
id="id"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
/>
</div>
<div
Expand All @@ -298,7 +298,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
exports[`EuiCollapsibleNav props onClose 1`] = `
<div>
<div
class="css-yux95t-overlayMask"
class="css-w7myn3-getEuiFlyoutOverlayStyles"
/>
<div
data-focus-guard="true"
Expand All @@ -315,7 +315,7 @@ exports[`EuiCollapsibleNav props onClose 1`] = `
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
tabindex="0"
>
<p
Expand Down Expand Up @@ -366,7 +366,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
<nav
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
id="id"
style="inline-size: 320px;"
style="inline-size: 320px; z-index: 1000;"
/>
</div>
<div
Expand All @@ -380,7 +380,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
exports[`EuiCollapsibleNav props size 1`] = `
<div>
<div
class="css-yux95t-overlayMask"
class="css-w7myn3-getEuiFlyoutOverlayStyles"
/>
<div
data-focus-guard="true"
Expand All @@ -397,7 +397,7 @@ exports[`EuiCollapsibleNav props size 1`] = `
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 240px;"
style="inline-size: 240px; z-index: 1000;"
tabindex="0"
>
<p
Expand Down
4 changes: 2 additions & 2 deletions .../eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-isPush-left-euiTestCss"
data-test-subj="nav"
id="generated-id_euiCollapsibleNav"
style="inline-size: 248px;"
style="inline-size: 248px; z-index: 1000;"
>
Nav content
</nav>
Expand Down Expand Up @@ -92,7 +92,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-isPush-left-isPushCollapsed"
data-test-subj="nav"
id="generated-id_euiCollapsibleNav"
style="inline-size: 48px;"
style="inline-size: 48px; z-index: 1000;"
>
Nav content
</nav>
Expand Down
Loading