## 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](elastic/eui#9202)) - EuiFlyout session management is an optional feature that can be enabled by adding `session="start"` to EuiFlyout. Check out the [documentation](https://eui.elastic.co/docs/components/containers/flyout/session-management) to learn more. - Added a new `hasChildBackground` boolean prop (defaults to false) to `EuiFlyout` ([#9056](elastic/eui#9056)) - Updated `EuiFlyout` with new `onActive` callback and enable stack managed history controls. ([#9003](elastic/eui#9003)) - Updated `EuiFlyoutMenu` with new prop `historyItems` and refactored props for back button. ([#9003](elastic/eui#9003)) - Added a new optional `resizable` (boolean) prop to `EuiFlyout`. Resizability can now be controlled dynamically without the need to use `EuiFlyoutResizable`. ([#8999](elastic/eui#8999)) - Flyout system menu bar: require tile, support custom actions ([#8897](elastic/eui#8897)) - Added a new `EuiFlyoutMenu` component that provides a standardized top menu bar for flyouts. ([#8851](elastic/eui#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](elastic/eui#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](elastic/eui#9202)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Add known plugin to wiki #9003

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions