[Flyout System] Support resizing flyouts #8999

tkajtoch · 2025-09-08T13:07:27Z

Summary

Resolves #8875.

This PR is targeting the feat/flyout-system feature branch.

This PR adds support for making flyouts resizable by setting resizable=true, allowing managed flyouts to be resized when resizing is explicitly enabled.

The solution builds upon the original EuiFlyoutResizable implementation. The resizing logic is moved to an internal useEuiFlyoutResizable hook and integrated directly into EuiFlyoutComponent (EuiFlyout on main). This allows for dynamic control of whether a flyout is resizable while keeping the API backwards compatible. With this change, EuiFlyoutResizable becomes a small wrapper that sets resizable=true on EuiFlyout.

Tests remain unchanged since the functionality is generally the same. We may consider restructuring them before merging the feature branch into main and releasing it.

Why are we making this change?

Because the Flyout System project needs to support resizable main and child flyouts as per requirements. See #8875 and the Flyout System meta issue for more information.

Impact to users

No negative impact to users expected.

QA

Ensure CI is passing on this PR
Confirm EuiFlyoutResizable works the same as on prod
Confirm the mainFlyoutResizable and childFlyoutResizable toggles work in the managed flyout story

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Props have proper autodocs (using @default if default values are missing) and playground toggles
Release checklist
- A changelog entry exists and is marked appropriately.

…lyout resizable when `resizable=true`

…ble` to prevent extra styles being added

…tem`

tkajtoch · 2025-09-08T13:09:36Z

packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap

 `;

 exports[`EuiFlyout props size fill is rendered 1`] = `
-[


This is an updated snapshot that was failing on feat/flyout-system due to last-minute changes on the last PR merged to the feature branch. The changes match other "is rendered" variants

tkajtoch · 2025-09-08T13:11:21Z

packages/eui/src/components/flyout/use_flyout_resizable.ts

@@ -0,0 +1,180 @@
+/*


This is primarily a restructure of the event handlers previously defined in flyout_resizable.tsx. I did not change the logic here

elasticmachine · 2025-09-08T14:16:09Z

💚 Build Succeeded

History

💔 Build #1169 failed af8f9ec

cc @tkajtoch

elasticmachine · 2025-09-08T14:26:23Z

💚 Build Succeeded

Buildkite Build
Commit: 601af51

History

💔 Build #4661 failed af8f9ec

cc @tkajtoch

tsullivan · 2025-09-08T20:57:10Z

packages/eui/src/components/flyout/flyout.component.tsx

  size?: EuiFlyoutSize | CSSProperties['width'];
+  /**
+   * Sets the minimum width of the panel.
+   * Especially useful when set with `resizable = true`.


It will be good to have this for fill mode calculations as well. In the side-by-side layout when a flyout has fill mode, we need to refer to this in our calculation for the breakpoint when the layout is switched to stacked. Right now the code is using non-dynamic s value as the minimum width.

tsullivan · 2025-09-08T21:01:24Z

This is great!

I spot a few issues, which you probably are aware of

A "jump" happens when we increase a flyout size to where the combined size of both flyouts is above the layout switch breakpoint
The content of the flyout can become cut off if we resize to a certain size, and then lower the viewport width.

IMO, we should use a calculation for the width to make sure the flyout never becomes wider than 90% of the viewport:

stacked layout: min(90vw, size)
side-by-side: min(90vw, size + siblingWidth)

tsullivan · 2025-09-15T22:44:08Z

I think this looks good as this is targeted to a feature branch and it achieves 90% of what is needed.

The pending feedback I gave can be addressed in a later PR

tsullivan

LGTM

Thanks for fixing the broken snapshot and consolidating the code!

acstll

Small things I found in a QA round:

Confirm EuiFlyoutResizable works the same as on prod

type push is not working as expected in the docs
the story's prop table is not picking up the comments (it does in prod)

Confirm the mainFlyoutResizable and childFlyoutResizable toggles work in the managed flyout story

child flyout animates over or above ("z-index") the main flyout when opening

Everything else working as expected. No comments on the code side 👍

tkajtoch · 2025-09-16T10:15:57Z

@acstll

child flyout animates over or above ("z-index") the main flyout when opening
This is actually expected and is in line with the behavior in feat/flyout-system. Animations work is included in this PR.

type push is not working as expected in the docs

I can see it's working but crashes when toggling between push and overlay in the docs. That applies to both this PR and main. It might be related to docusaurus 🤔 Considering it's also broken there and this targets a feature branch, I'd vote to fix it separately.

Do you see any other issues?

acstll · 2025-09-16T10:25:42Z

child flyout animates over or above ("z-index") the main flyout when opening

This is actually expected and is in line with the behavior in feat/flyout-system. Animations work is included in this PR.

perfect, thanks for the clarification!

type push is not working as expected in the docs

I can see it's working but crashes when toggling between push and overlay in the docs. That applies to both this PR and main. It might be related to docusaurus 🤔 Considering it's also broken there and this targets a feature branch, I'd vote to fix it separately.

I agree

Do you see any other issues?

nope

acstll

🟢 LGTM

tkajtoch · 2025-09-16T10:56:04Z

the story's prop table is not picking up the comments (it does in prod)

@acstll It seems that the EuiFlyoutResizable story already has some props type overrides in place to possibly fix an underlying issue related to how deeply nested the type is - there's multiple Omit, Pick as well as the underlying ForwardRefExoticComponent that does quite a lot internally and can easily confuse react-docgen used in storybook.

Props are rendered correctly in the docs; I think it's okay to find a way to fix this issue in this specific story later on.

@tsullivan

## 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>

tkajtoch added 4 commits September 8, 2025 14:07

feat(EuiFlyout): move resizable flyout logic to a hook and make all f…

346ce44

…lyout resizable when `resizable=true`

feat(EuiFlyout): cleanup code

b115143

fix(EuiFlyout): move minWidth fallback value to `useEuiFlyoutResiza…

beef45c

…ble` to prevent extra styles being added

test(EuiFlyout): update failing snapshot coming from `feat/flyout-sys…

e49ba15

…tem`

tkajtoch self-assigned this Sep 8, 2025

tkajtoch changed the base branch from main to feat/flyout-system September 8, 2025 13:07

tkajtoch commented Sep 8, 2025

View reviewed changes

tkajtoch added 4 commits September 8, 2025 15:15

chore(EuiFlyout): add JSDoc

b45a838

chore(EuiFlyout): cleanup unused styles

8520628

chore(EuiFlyout): add changelog

af8f9ec

fix(EuiCollapsibleNavBeta): fix onResize callback type

601af51

tkajtoch marked this pull request as ready for review September 8, 2025 14:29

tkajtoch requested a review from a team as a code owner September 8, 2025 14:29

tsullivan reviewed Sep 8, 2025

View reviewed changes

tkajtoch mentioned this pull request Sep 15, 2025

[Flyout System] Integrate unmanaged EuiFlyout animations with state transition animations of managed flyouts #9015

Merged

9 tasks

tsullivan approved these changes Sep 15, 2025

View reviewed changes

acstll self-requested a review September 16, 2025 07:32

acstll reviewed Sep 16, 2025

View reviewed changes

acstll approved these changes Sep 16, 2025

View reviewed changes

tkajtoch merged commit 228aef4 into elastic:feat/flyout-system Sep 16, 2025
4 checks passed

acstll pushed a commit to acstll/eui that referenced this pull request Sep 17, 2025

[Flyout System] Support resizing flyouts (elastic#8999)

225db60

tsullivan mentioned this pull request Sep 22, 2025

[Flyout System] "Fill" mode logic no longer works #9048

Closed

tkajtoch mentioned this pull request Dec 8, 2025

Upgrade EUI to v111.0.0 elastic/kibana#245515

Merged

[Flyout System] Support resizing flyouts #8999

[Flyout System] Support resizing flyouts #8999

Uh oh!

Conversation

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

Uh oh!

Summary

Why are we making this change?

Impact to users

QA

General checklist

Uh oh!

tkajtoch Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Sep 8, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 8, 2025

💚 Build Succeeded

History

Uh oh!

tsullivan Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Sep 8, 2025

Uh oh!

tsullivan commented Sep 15, 2025

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

tkajtoch commented Sep 16, 2025

Uh oh!

acstll commented Sep 16, 2025

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

tkajtoch commented Sep 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tkajtoch commented Sep 8, 2025 •

edited

Loading