[Flyout System] Add close all flyouts action by angeles-mb · Pull Request #9378 · elastic/eui

angeles-mb · 2026-02-12T09:40:45Z

Summary

This PR updates the EuiFlyout manager to close all flyout sessions when a parent flyout is closed:

Added a new action ACTION_CLOSE_ALL
Updated EuiFlyoutManaged to call closeAllFlyouts if on parent level and closeFlyout on child level.
Updated unit tests and stories

Why are we making this change?

Closes https://github.com/elastic/kibana-team/issues/2448

Before, if there were several parent flyouts and we closed one, only that one and its child would close.

Screenshots #

Before	After
Screen.Recording.2026-02-11.at.14.13.07.mov	Screen.Recording.2026-02-12.at.11.28.47.mov

Impact to users

Flyout System users will see a change on the way the 'x' button (or any close action such as ESC key or 'Close' button) behaves, it will now act as a 'dismiss all' button.
Flyout System devs might need to ensure child state is also reset when the parent close if they are managing their own state for child flyouts in multi-session scenarios. This prevents stale child issues when reopening a parent + child flyout after closing with closeAllFlyouts.

Kibana examples are already working like this, no changes needed:

  const handleCloseFlyout = useCallback(() => {
    setIsFlyoutOpen(false);
    setIsChildFlyoutAOpen(false);
    setIsChildFlyoutBOpen(false);
  }, [title]);

If you want to test on Kibana:

Create a build of EUI with this branch
Run kibana with yarn start --run-examples
Test the System flyouts in the Flyout System Example

Before	After
Screen.Recording.2026-02-12.at.11.49.34.mov	Screen.Recording.2026-02-12.at.12.21.22.mov

QA

Remove or strikethrough items that do not apply to your PR.

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
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

tsullivan

This is pretty much perfect. :)

One thing that came up in my review is that some test code has incomplete mocks:

Shared mock is missing closeAllFlyouts: mocks/index.ts
flyout_main.test.tsx mock is missing closeAllFlyouts
Reducer "complex scenario" tests still use closeFlyout on main flyouts: reducer.test.ts

I'm not sure why this wasn't caught in type check 🤨

elasticmachine · 2026-02-13T10:48:17Z

💚 Build Succeeded

History

💚 Build #2640 succeeded 00a3974
💚 Build #2630 succeeded 086be1d
💚 Build #2629 succeeded 823ecd1

elasticmachine · 2026-02-13T11:07:59Z

💚 Build Succeeded

Buildkite Build
Commit: 1e57336

History

💚 Build #5760 succeeded 00a3974
💚 Build #5750 succeeded 086be1d

mgadewoll

🟢 The code changes are LGTM. I tested the updated closing behavior for flyouts on EUI and Kibana, everything works as expected. Nice work! 🎉

mgadewoll · 2026-02-13T14:16:33Z

packages/eui/src/components/flyout/manager/flyout_managed.tsx

        // This prevents duplicate removal when using Escape/X button
        if (flyoutExistsInManagerRef.current) {
-          closeFlyout(flyoutId);
+          level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);


No change request (as it's been used like this already), just a very tiny general nit:
We could store level === LEVEL_MAIN as something like isLevelMain and reuse it.

## Dependency updates - `@elastic/eui` - v112.3.0 ⏩ v113.0.0 - `@elastic/eui-theme-borealis` - v5.4.0 ⏩ v6.0.0 - `@elastic/eslint-plugin-eui` - v2.8.0 ⏩ v2.9.0 --- ## Changes 1. EUI component update: API and Design updates to form layout append/prepend by using the new components `EuiFormPrepend` and `EuiFormAppend` (EUI [#9308](elastic/eui#9308)) >[!important] ❗ This upgrade PR includes all changes previously made in the specific QA PR #248805. Please see the description in that PR for detailed information about the specific changes. 2. Additional changes related to the form layout changes >[!note] 🔗 Please see the [section "Additional changes"](#248805 (comment)) in #248805 for an overview of additional changes. 3. Removed token update: Replaced `ghost` and `ink` token usages with `textInk` or `plainDark` and `textGhost` or `plainLight` respectively (EUI [#9379](elastic/eui#9379)) ## Package updates ### `@elastic/eui` [v113.0.0](https://github.com/elastic/eui/releases/tag/v113.0.0) - Updated `EuiFlyout` manager to close all flyouts when a parent flyout is closed. ([#9378](elastic/eui#9378)) - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) - Added `EuiFormAppend` and `EuiFormPrepend` components ([#9014](elastic/eui#9014)) - Added support for `type="span"` on `EuiFormLabel` for visual-only form labels ([#9014](elastic/eui#9014)) - Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed ([#9014](elastic/eui#9014)) - Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiFormAppend`/`EuiFormPrepend` styling ([#9305](elastic/eui#9305)) - Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Updated `EuiFormControlLayout` hover, disabled and readonly styling ([#9305](elastic/eui#9305)) - Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Added `iconSide` prop on `EuiDatePickerRange` ([#9305](elastic/eui#9305)) - Updated `EuiSuperDatePicker` valid state styling ([#9305](elastic/eui#9305)) - Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either) ([#9305](elastic/eui#9305)) - Added `isLoading` prop on `EuiFormControlButton` ([#9328](elastic/eui#9328)) - Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` ([#8948](elastic/eui#8948)) - Updated paddings for `append`/`prepend` on `EuiFormControlLayout` ([#8948](elastic/eui#8948)) - Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. ([#9373](elastic/eui#9373)) **Bug fixes** - Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` ([#9014](elastic/eui#9014)) **Breaking changes** - Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases. ([#9379](elastic/eui#9379)) - Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. ([#9014](elastic/eui#9014)) - Removed `components.superDatePickerBackgroundSuccees` token ([#9305](elastic/eui#9305)) ### `@elastic/eui-theme-borealis` v6.0.0 - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) ### `@elastic/eslint-plugin-eui` v2.9.0 - Prevented `badge-accessibility-rules` rule autofix from duplicating `aria-hidden` attributes. ([#9366](elastic/eui#9366)) - Skip `badge-accessibility-rules` rule validation when a spread operator is used in a component. ([#9366](elastic/eui#9366)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

angeles-mb added 7 commits February 12, 2026 10:13

[Flyout System] Add close all flyouts action

d4c8dc5

Update flyouts stories

681d750

Update unit tests

27c7c5a

Add unit tests

e8810dc

Add missing export

1a8c632

Add closeAllFlyouts mock to selectors tests

3db2f44

Add changelogs

086be1d

angeles-mb force-pushed the 2448-add-close-all-flyouts-action branch from 823ecd1 to 086be1d Compare February 12, 2026 10:08

Update cleanup logic

00a3974

tsullivan reviewed Feb 12, 2026

View reviewed changes

Refactor unit tests

1e57336

angeles-mb self-assigned this Feb 13, 2026

angeles-mb marked this pull request as ready for review February 13, 2026 11:11

angeles-mb requested a review from a team as a code owner February 13, 2026 11:11

mgadewoll self-requested a review February 13, 2026 14:01

mgadewoll approved these changes Feb 13, 2026

View reviewed changes

angeles-mb merged commit 7d60403 into elastic:main Feb 16, 2026
6 checks passed

mgadewoll mentioned this pull request Feb 16, 2026

Upgrade EUI to v113.0.0 elastic/kibana#253286

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Flyout System] Add close all flyouts action#9378

[Flyout System] Add close all flyouts action#9378
angeles-mb merged 9 commits intoelastic:mainfrom
angeles-mb:2448-add-close-all-flyouts-action

angeles-mb commented Feb 12, 2026 •

edited

Loading

Uh oh!

tsullivan left a comment

Uh oh!

elasticmachine commented Feb 13, 2026

Uh oh!

elasticmachine commented Feb 13, 2026

Uh oh!

mgadewoll left a comment

Uh oh!

mgadewoll Feb 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

angeles-mb commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Feb 13, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Feb 13, 2026

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

angeles-mb commented Feb 12, 2026 •

edited

Loading