Add EuiFlyoutChild for Grouped Flyouts #8771

tsullivan · 2025-06-09T19:44:33Z

EuiFlyoutChild: A Secondary "Child" Flyout with Dynamic Responsive Stacking

This PR introduces the EuiFlyoutChild component, a new addition to the EUI flyout system, designed to allow for side-by-side (grouped) flyout panels.

Screenshots

Responsive behavior

Stateful custom hook

Feature Overview

The EuiFlyoutChild component enables a secondary flyout panel to be opened adjacent to a primary EuiFlyout.

Key Behaviors:

Side-by-Side Layout: On wider viewports, the child flyout appears to the left edge of its parent EuiFlyout.
Stacked Layout: On narrower viewports, the child flyout stacks on top of its parent, occupying the full width of the parent.
Dynamic Stacking Breakpoint: The transition point between side-by-side and stacked layouts is dynamically calculated based on the combined widths of the parent and child flyouts.
- The stacking breakpoint is the sum of the parent flyout's effective width and the child flyout's effective width.
- For example:
  - If Parent is size 'm' and Child is size 's', the breakpoint is theme.breakpoint.m + theme.breakpoint.s.
  - If Parent is size 's' and Child is size 's', the breakpoint is theme.breakpoint.s + theme.breakpoint.s.
Size Restrictions:
- EuiFlyoutChild supports sizes 's' (small) and 'm' (medium).
- If the parent EuiFlyout is size 'm', the EuiFlyoutChild can only be size 's'.
- If the parent EuiFlyout is size 's', the EuiFlyoutChild can be size 's' or 'm'.

Implementation Details

Component Structure (eui_flyout_child.tsx):
- Manages its own responsive logic by listening to window resize events to get the current viewport width (window.innerWidth).
- Calculates the stackingBreakpointValue (numeric pixel value) by summing the theme-defined pixel widths corresponding to the parent's and child's sizes.
- Determines isAboveStackingBreakpoint (boolean) by comparing window.innerWidth to stackingBreakpointValue. This state variable controls whether to apply side-by-side or stacked positioning styles.
Context Usage:
- Uses EuiFlyoutContext to get the size of the parent EuiFlyout.
Validation:
- Ensures EuiFlyoutChild is used within an EuiFlyout.
- Requires an EuiFlyoutBody as a child.
- Enforces the size restriction (parent 'm' cannot have child 'm').

State Management system

This PR adds a state management system for programmatically controlling flyouts (EuiFlyoutSessionProvider). It provides a flexible way to open, close, and manage the content of flyouts from anywhere within a React component tree.

This system is ideal for scenarios flows involving sequence of flyouts (e.g., a main flyout that opens a child flyout, a main flyout opens a "next" flyout), otherwise known as a "flyout session".

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

…tacked

…ild at the same time

tkajtoch · 2025-06-24T17:57:22Z

I'm in the process of reviewing this work

tsullivan · 2025-06-26T01:17:01Z

Dug a little deeper. This seems to have to do with the max-inline-size for the child flyout.

@ryankeairns thanks for the detailed explanation! This has been fixed in f12ba50

ryankeairns · 2025-06-26T15:09:22Z

Tested locally, the fix lgtm. Thanks!

ryankeairns

Approving knowing there is more to do (e.g. add something like a fill). Great progress!

tkajtoch

LGTM; Let's not keep it in review longer than necessary. I'm happy with the current shape of this PR

…hild

elasticmachine · 2025-06-27T17:55:53Z

💚 Build Succeeded

History

💚 Build #638 succeeded 180089c
💚 Build #627 succeeded f12ba50
💚 Build #626 succeeded 89d79d4
💚 Build #625 succeeded ec1a72c
💚 Build #624 succeeded f02a3b9
💚 Build #622 succeeded 42f8bf7

cc @tsullivan

elasticmachine · 2025-06-27T18:13:09Z

💚 Build Succeeded

Buildkite Build
Commit: f660f6b

History

💚 Build #4277 succeeded 180089c
💚 Build #4269 succeeded f12ba50
💚 Build #4268 succeeded 89d79d4
💚 Build #4267 succeeded ec1a72c
💚 Build #4266 succeeded f02a3b9
💚 Build #4264 succeeded 42f8bf7

cc @tsullivan

ThomThomson

Looks good! Thanks for tagging me for review on this! I ran it locally clicked around, and looked through the code to understand how the state management is done.

…tic#8771

`104.1.0` ⏩ `105.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([#8834](elastic/eui#8834)) - Added component tokens: ([#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

`104.1.0` ⏩ `105.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([elastic#8834](elastic/eui#8834)) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([elastic#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([elastic#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([elastic#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([elastic#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([elastic#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([elastic#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

tsullivan changed the title ~~Flyout child~~ Add EuiFlyoutChild component Jun 9, 2025

tsullivan changed the title ~~Add EuiFlyoutChild component~~ Add EuiFlyoutChild for Grouped Flyouts Jun 9, 2025

tsullivan force-pushed the flyout-child branch from c66fe44 to c5837dc Compare June 9, 2025 22:03

tkajtoch self-requested a review June 10, 2025 11:47

tsullivan self-assigned this Jun 10, 2025

tsullivan force-pushed the flyout-child branch from 2aea59e to c301a7f Compare June 13, 2025 00:47

tsullivan added 13 commits June 18, 2025 11:11

initial commit of flyout-child

eddbcc4

refine stories

e9d9021

calculate breakpoint size where layout changes from side-by-side to s…

10b1370

…tacked

Add childLayoutMode to context

1458eee

EuiFlyoutChildManager

25f754e

Organization & cleanup

a2a577e

Fix when different size child flyout stacked above parent

5371f4e

Cleanup / comments

eb0350e

add unit test

ed6dded

add dispatcher story example

6c8c91f

clean up generics

c97191e

clean up transition styles

a89515f

Clean up structures/exports

b0d385d

tsullivan force-pushed the flyout-child branch from 43bbe9d to b0d385d Compare June 18, 2025 22:47

tsullivan added 3 commits June 20, 2025 12:10

add README for state management

f4ce5c4

Naming adjustments

510e59d

changelog

0bb44a8

tsullivan marked this pull request as ready for review June 20, 2025 23:14

tsullivan requested a review from a team as a code owner June 20, 2025 23:14

tsullivan added 3 commits June 23, 2025 10:13

Merge branch 'main' into flyout-child

eb05842

Merge branch 'main' into flyout-child

2a7fd09

update "complete example" with a button that opens both parent and ch…

4b7a3ad

…ild at the same time

ryankeairns self-requested a review June 24, 2025 16:53

tsullivan added 3 commits June 25, 2025 16:20

Make room for more more flyout_provider stories

2a22870

Add story for openFlyoutGroup

f491476

Set max width on child flyout, using helper from main flyout styles

f12ba50

ryankeairns approved these changes Jun 26, 2025

View reviewed changes

tsullivan added 2 commits June 26, 2025 08:50

Merge branch 'main' into flyout-child

565cf2d

simplify render child flyout content function in "with History" story

4a97303

tkajtoch approved these changes Jun 26, 2025

View reviewed changes

tsullivan and others added 6 commits June 27, 2025 09:02

Merge branch 'main' into flyout-child

b62fb57

Merge branch 'main' into flyout-child

180089c

Improve flyout action reducer’s handling “go back” actions

51c141d

Flyout provider storybook polish

d23b5ad

Add more testing

8e8e8f2

Merge branch 'flyout-child' of github.com:tsullivan/eui into flyout-c…

f660f6b

…hild

tsullivan requested review from ThomThomson and clintandrewhall June 27, 2025 18:02

ThomThomson approved these changes Jun 30, 2025

View reviewed changes

clintandrewhall approved these changes Jun 30, 2025

View reviewed changes

tkajtoch merged commit 726cad0 into elastic:main Jun 30, 2025
5 checks passed

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Jul 7, 2025

test(vrt) add missing vrt images for new flyout stories added in elas…

7889c37

…tic#8771

mgadewoll mentioned this pull request Jul 7, 2025

[VRT] Add missing flyout reference images #8845

Merged

acstll mentioned this pull request Jul 7, 2025

Upgrade EUI to v105.0.0 elastic/kibana#226882

Merged

acstll mentioned this pull request Jul 15, 2025

Remove "force click" in Cypress test in Kibana #8867

Closed

2 tasks

tkajtoch mentioned this pull request Jul 22, 2025

[Flyout System] Improve flyout animations #8896

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add EuiFlyoutChild for Grouped Flyouts #8771

Add EuiFlyoutChild for Grouped Flyouts #8771

Uh oh!

tsullivan commented Jun 9, 2025 •

edited

Loading

Uh oh!

tkajtoch commented Jun 24, 2025

Uh oh!

tsullivan commented Jun 26, 2025

Uh oh!

ryankeairns commented Jun 26, 2025

Uh oh!

ryankeairns left a comment

Uh oh!

tkajtoch left a comment •

edited

Loading

Uh oh!

elasticmachine commented Jun 27, 2025

Uh oh!

elasticmachine commented Jun 27, 2025

Uh oh!

ThomThomson left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Add EuiFlyoutChild for Grouped Flyouts #8771

Add EuiFlyoutChild for Grouped Flyouts #8771

Uh oh!

Conversation

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

Uh oh!

EuiFlyoutChild: A Secondary "Child" Flyout with Dynamic Responsive Stacking

Screenshots

Responsive behavior

Stateful custom hook

Feature Overview

Implementation Details

State Management system

QA

General checklist

Uh oh!

tkajtoch commented Jun 24, 2025

Uh oh!

tsullivan commented Jun 26, 2025

Uh oh!

ryankeairns commented Jun 26, 2025

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

tkajtoch 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!

elasticmachine commented Jun 27, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jun 27, 2025

💚 Build Succeeded

History

Uh oh!

ThomThomson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

tsullivan commented Jun 9, 2025 •

edited

Loading

tkajtoch left a comment •

edited

Loading