Upgrade EUI to v111.0.0 by tkajtoch · Pull Request #245515 · elastic/kibana

tkajtoch · 2025-12-08T12:00:15Z

Summary

This EUI upgrade brings the new Flyout System. While all of the changes we made are opt-in, we did have to update the DOM nesting in EuiFlyout and EuiFlyoutResizable. This change includes making overlay masks a sibling of flyouts, rather than wrapping the flyouts as children, which required internal changes to the mask's z-index value. Following @tsullivan request, please run through your UIs and make sure the flyouts render as expected, especially in the areas where you override EuiFlyout styles.

Dependency updates

@elastic/eui: v110.0.0 ⏩ v111.0.0
@elastic/eui-theme-borealis: v5.1.0 ⏩ v5.2.0

Changes

Removed z-index overrides from various places across Kibana. The updated EuiFlyout logic calculates z-index values dynamically based on the order of opening flyouts, making the manual overrides unnecessary.
Updated types of refs passed to EuiFlyout and EuiFlyoutResizable

Package updates

`@elastic/eui` v111.0.0

Added an opt-in EuiFlyout session management for creating flyout compositions and journeys effortlessly. Session management handles side-by-side flyout rendering based on parent-child grouping, simple flyout transitions with history, state sharing, and more. (#9202)
- EuiFlyout session management is an optional feature that can be enabled by adding session="start" to EuiFlyout. Check out the documentation to learn more.
Added a new hasChildBackground boolean prop (defaults to false) to EuiFlyout (#9056)
Updated EuiFlyout with new onActive callback and enable stack managed history controls. (#9003)
Updated EuiFlyoutMenu with new prop historyItems and refactored props for back button. (#9003)
Added a new optional resizable (boolean) prop to EuiFlyout. Resizability can now be controlled dynamically without the need to use EuiFlyoutResizable. (#8999)
Flyout system menu bar: require tile, support custom actions (#8897)
Added a new EuiFlyoutMenu component that provides a standardized top menu bar for flyouts. (#8851)

Breaking changes

Changed the way EuiFlyout renders overlay masks to decouple the overlay mask from the flyout itself. Now, the overlay mask is a separate portalled element. (#9202)
- This change does not modify the functionality or behavior of flyout overlays but might affect some custom usages when your application relies on the specific element nesting within EuiFlyout.

`@elastic/eui-theme-borealis` v5.2.0

Updated parameters used for euiAnimSlightResistance for a smoother animation (#9202)

…/solution_nav/jest.config.js

…ib/jest.config.js

…t.config.js

elasticmachine · 2025-12-08T12:00:21Z

Pinging @elastic/eui-team (EUI)

elasticmachine · 2025-12-08T12:00:22Z

Pinging @elastic/fleet (Team:Fleet)

cnasikas · 2025-12-09T11:40:05Z

We found the following inconsistency with the export flyout that is owned by the @elastic/appex-sharedux team. See: #244911 (comment)

cc @tsullivan

tkajtoch · 2025-12-09T12:47:14Z

/oblt-deploy

rmyz

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/flyout/hooks/use_flyout_a11y.tsx change LGTM

tsullivan · 2025-12-10T15:00:25Z

We found the following inconsistency with the export flyout that is owned by the @elastic/appex-sharedux team. See: #244911 (comment)

Filed #245851 for the SharedUX backlog

tkajtoch · 2025-12-10T16:21:01Z

@elasticmachine merge upstream

criamico · 2025-12-10T16:25:42Z

...public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx

+      onClose={() => onClose()}
+      {...restOfProps}
+      maxWidth={MAX_FLYOUT_WIDTH}
+      ref={null}


I have a couple questions regarding this:

I'm curious, why is it still necessary to keep the higher z-index? i saw it's being removed elsewhere.

I think we're (slowly) moving away from styled components. Would it make sense to update the component to use emotion rather than doing this?

Great catch! It's probably not necessary at this point - when I was refactoring this file, I was focused on getting the ref fixed and, at that time, we still haven't had the dynamic z-index calculation implemented. I'll update it

afharo

Translations LGTM

criamico

Tested locally, LGTM for Fleet

christineweng

x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx changes LGTM

nkhristinin

DE change LGTM.

Tested that exceptions flyout work above timeline

nikitaindik

Tested Rule Management team owned flyouts locally:

rule flyout on prebuilt rules installation page
rule flyout on the Upgrade tab of the rules table
rule upgrade flyout on Rule Details page

Works as expected.

…uts to render incorrectly

elasticmachine · 2025-12-16T01:20:38Z

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #50 / Agent Builder agents Edit agent should edit agent name
[job] [logs] FTR Configs #90 / serverless observability UI - Cases and Rules Serverless Observability Cases Cases list row actions Severity to low

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`canvas`	1.0MB	1.0MB	-60.0B
`cases`	1.4MB	1.4MB	-96.0B
`discover`	1.3MB	1.3MB	-20.0B
`eventAnnotationListing`	206.8KB	206.8KB	-24.0B
`fleet`	2.1MB	2.1MB	+9.0B
`lens`	1.9MB	1.9MB	-24.0B
`maps`	3.1MB	3.1MB	-36.0B
`osquery`	1.1MB	1.1MB	-141.0B
`securitySolution`	10.8MB	10.8MB	-566.0B
`slo`	995.1KB	995.1KB	-24.0B
`unifiedDocViewer`	370.5KB	370.5KB	+4.0B
total			-978.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	496.2KB	496.5KB	+296.0B
`dataViewEditor`	7.2KB	7.1KB	-34.0B
`dataViewFieldEditor`	23.5KB	23.4KB	-81.0B
`elasticAssistant`	312.5KB	312.3KB	-210.0B
`kbnUiSharedDeps-npmDll`	6.4MB	6.4MB	+24.9KB
total			+24.8KB

History

💛 Build #373547 was flaky effc35d
💔 Build #372099 failed c59cd2e
💚 Build #371273 succeeded 2f082e3
💚 Build #370188 succeeded c59b0af
💔 Build #370162 failed 8d50ca0

cc @tkajtoch

…3806) ~~Depends on elastic/eui#8982 ~~Depends on elastic/eui#9202 ~~Depends on #245515 This PR enhances the core UX offerings in Kibana with `core.overlays.openSystemFlyout`. ### `core.overlays.openSystemFlyout` Opens a system flyout that integrates with the EUI Flyout Manager. Using a mount point would break the context propogation of the EUI Flyout Manager, so this method accepts React elements directly rather than `toMountPoint`. ```typescript import React, { useRef } from 'react'; import { EuiFlyoutBody, EuiFlyoutFooter, EuiText, EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { OverlayRef } from '@kbn/core-mount-utils-browser'; // Create a component or function that opens the system flyout const openMySystemFlyout = (overlays) => { const flyoutRef = useRef<OverlayRef | null>(null); const handleClose = () => { if (flyoutRef.current) { flyoutRef.current.close(); } }; const FlyoutContent = () => ( <> <EuiFlyoutBody> <EuiText> This is a system flyout that integrates with EUI Flyout Manager. The header is automatically created from the title option. </EuiText> </EuiFlyoutBody> <EuiFlyoutFooter> <EuiFlexGroup justifyContent="spaceBetween"> <EuiFlexItem grow={false}> <EuiButtonEmpty onClick={handleClose}> Cancel </EuiButtonEmpty> </EuiFlexItem> <EuiFlexItem grow={false}> <EuiButton onClick={() => console.log('Save')} fill> Save </EuiButton> </EuiFlexItem> </EuiFlexGroup> </EuiFlyoutFooter> </> ); flyoutRef.current = overlays.openSystemFlyout(<FlyoutContent />, { title: 'My System Flyout', type: 'overlay', size: 'm', maxWidth: 600, ownFocus: false, onClose: () => { console.log('System flyout closed'); flyoutRef.current = null; }, onActive: () => { console.log('System flyout became active'); }, }); return flyoutRef.current; }; // Open the flyout const flyoutRef = openMySystemFlyout(overlays); // Close the flyout programmatically from outside flyoutRef.close(); ``` The developer README for the Flyout System is [here](https://github.com/elastic/eui/blob/feat/flyout-system/packages/eui/src/components/flyout/README.md). ### Example plugin Along with the new service and documentation changes, a new example plugin for developers is provided that shows different integration patterns for the EUI flyout system. **Screenshot of example plugin:** <img width="1327" height="836" alt="image" src="https://github.com/user-attachments/assets/9664f0cb-f793-4a8c-8a96-c46d069756dd" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Ania Kowalska <ania.kowalska@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

…stic#233806) ~~Depends on elastic/eui#8982 ~~Depends on elastic/eui#9202 ~~Depends on elastic#245515 This PR enhances the core UX offerings in Kibana with `core.overlays.openSystemFlyout`. ### `core.overlays.openSystemFlyout` Opens a system flyout that integrates with the EUI Flyout Manager. Using a mount point would break the context propogation of the EUI Flyout Manager, so this method accepts React elements directly rather than `toMountPoint`. ```typescript import React, { useRef } from 'react'; import { EuiFlyoutBody, EuiFlyoutFooter, EuiText, EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { OverlayRef } from '@kbn/core-mount-utils-browser'; // Create a component or function that opens the system flyout const openMySystemFlyout = (overlays) => { const flyoutRef = useRef<OverlayRef | null>(null); const handleClose = () => { if (flyoutRef.current) { flyoutRef.current.close(); } }; const FlyoutContent = () => ( <> <EuiFlyoutBody> <EuiText> This is a system flyout that integrates with EUI Flyout Manager. The header is automatically created from the title option. </EuiText> </EuiFlyoutBody> <EuiFlyoutFooter> <EuiFlexGroup justifyContent="spaceBetween"> <EuiFlexItem grow={false}> <EuiButtonEmpty onClick={handleClose}> Cancel </EuiButtonEmpty> </EuiFlexItem> <EuiFlexItem grow={false}> <EuiButton onClick={() => console.log('Save')} fill> Save </EuiButton> </EuiFlexItem> </EuiFlexGroup> </EuiFlyoutFooter> </> ); flyoutRef.current = overlays.openSystemFlyout(<FlyoutContent />, { title: 'My System Flyout', type: 'overlay', size: 'm', maxWidth: 600, ownFocus: false, onClose: () => { console.log('System flyout closed'); flyoutRef.current = null; }, onActive: () => { console.log('System flyout became active'); }, }); return flyoutRef.current; }; // Open the flyout const flyoutRef = openMySystemFlyout(overlays); // Close the flyout programmatically from outside flyoutRef.close(); ``` The developer README for the Flyout System is [here](https://github.com/elastic/eui/blob/feat/flyout-system/packages/eui/src/components/flyout/README.md). ### Example plugin Along with the new service and documentation changes, a new example plugin for developers is provided that shows different integration patterns for the EUI flyout system. **Screenshot of example plugin:** <img width="1327" height="836" alt="image" src="https://github.com/user-attachments/assets/9664f0cb-f793-4a8c-8a96-c46d069756dd" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Ania Kowalska <ania.kowalska@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

tkajtoch added 9 commits December 8, 2025 12:46

chore: upgrade @elastic/eui to v111.0.0

d9967c8

fix: update EuiFlyout ref usage to not use string refs

58d2256

chore: update i18n mapping

6c53a96

test: update snapshots in src/platform/packages/shared/shared-ux/page…

7eb2062

…/solution_nav/jest.config.js

test: update snapshots in src/platform/plugins/private/vis_types/visl…

084c866

…ib/jest.config.js

test: update snapshots in x-pack/platform/plugins/shared/security/jes…

255d5d1

…t.config.js

style: remove unnecessary z-index overrides

2af1cc7

style(ActionLogButton): remove unnecessary z-index override

7d045e2

chore: update styled-components mapping

3bf82f1

tkajtoch self-assigned this Dec 8, 2025

tkajtoch requested review from a team as code owners December 8, 2025 12:00

tkajtoch added the release_note:skip Skip the PR/issue when compiling release notes label Dec 8, 2025

tkajtoch requested review from a team as code owners December 8, 2025 12:00

tkajtoch added the EUI label Dec 8, 2025

tkajtoch requested review from a team as code owners December 8, 2025 12:00

tkajtoch added the backport:skip This PR does not require backporting label Dec 8, 2025

tkajtoch requested review from parkiino and paul-tavares December 8, 2025 12:00

botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Dec 8, 2025

tkajtoch marked this pull request as draft December 8, 2025 12:00

tkajtoch added the ci:cloud-deploy Create or update a Cloud deployment label Dec 9, 2025

jbudz approved these changes Dec 9, 2025

View reviewed changes

rmyz approved these changes Dec 10, 2025

View reviewed changes

Merge branch 'main' into feat/eui-v111.0.0

2f082e3

criamico reviewed Dec 10, 2025

View reviewed changes

tsullivan mentioned this pull request Dec 10, 2025

[Flyout System] Service to open flyouts within the Flyout System #233806

Merged

paul-tavares approved these changes Dec 11, 2025

View reviewed changes

elena-shostak approved these changes Dec 11, 2025

View reviewed changes

mariairiartef approved these changes Dec 11, 2025

View reviewed changes

afharo approved these changes Dec 11, 2025

View reviewed changes

criamico approved these changes Dec 11, 2025

View reviewed changes

christineweng approved these changes Dec 11, 2025

View reviewed changes

Merge branch 'main' into feat/eui-v111.0.0

c59cd2e

nkhristinin approved these changes Dec 12, 2025

View reviewed changes

andrew-goldstein approved these changes Dec 12, 2025

View reviewed changes

nikitaindik approved these changes Dec 15, 2025

View reviewed changes

elasticmachine and others added 2 commits December 15, 2025 23:31

Merge branch 'main' into feat/eui-v111.0.0

effc35d

fix: remove unwanted z-index override on PageOverlay that causes flyo…

76aece0

…uts to render incorrectly

kowalczyk-krzysztof approved these changes Dec 16, 2025

View reviewed changes

tkajtoch added the ci:project-deploy-security Create a Security Serverless Project label Dec 16, 2025

Dosant mentioned this pull request Dec 16, 2025

[Sharing/Export Flyout] The flyout doesn't expand to its full height #245851

Closed

tkajtoch merged commit dab3fa9 into elastic:main Dec 16, 2025
17 checks passed

kibanamachine added the v9.3.0 label Dec 16, 2025

Conversation

tkajtoch commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Dependency updates

Changes

Package updates

@elastic/eui v111.0.0

@elastic/eui-theme-borealis v5.2.0

Uh oh!

elasticmachine commented Dec 8, 2025

Uh oh!

elasticmachine commented Dec 8, 2025

Uh oh!

cnasikas commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tkajtoch commented Dec 9, 2025

Uh oh!

rmyz left a comment

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Dec 10, 2025

Uh oh!

tkajtoch commented Dec 10, 2025

Uh oh!

criamico Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tkajtoch Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

afharo left a comment

Choose a reason for hiding this comment

Uh oh!

criamico left a comment

Choose a reason for hiding this comment

Uh oh!

christineweng left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nkhristinin left a comment

Choose a reason for hiding this comment

Uh oh!

nikitaindik left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

Page load bundle

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

19 participants

tkajtoch commented Dec 8, 2025 •

edited

Loading

`@elastic/eui` v111.0.0

`@elastic/eui-theme-borealis` v5.2.0

cnasikas commented Dec 9, 2025 •

edited

Loading

criamico Dec 10, 2025 •

edited

Loading

christineweng left a comment •

edited

Loading

elasticmachine commented Dec 16, 2025 •

edited

Loading