feat: Add a new boolean `hasChildBackground` prop to the Flyout to use for child flyouts only #9056

paulinashakirova · 2025-09-24T13:52:53Z

Summary

This PR resolves [Flyout System] Add “pass through props” for EuiChildFlyout on EuiFlyout if session=true issue.

Why are we making this change?

In the implementation of the new Developer API for flyout system (https://github.com/elastic/kibana-team/issues/1874), a capability became broken, which is to provide the backgroundStyle prop to EuiFlyoutChild. This happened because EuiFlyoutChild is no longer intended to be consumed directly.
For this reason, we are introducing a new hasChildBackground prop that can set shaded background on a child flyout if session=true.

Screenshots

Impact to users

This is not a breaking change. This new prop has a default value that keeps current UI untouched.

General checklist

Browser QA
- Checked in both light and dark modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.

paulinashakirova · 2025-10-08T14:23:44Z

packages/eui/src/components/flyout/manager/flyout_child.stories.tsx

                id="flyout-manager-playground-child"
                size={childSize}
-                backgroundStyle={childBackgroundStyle}
+                childBgShaded={childBackgroundStyle === 'shaded'}


Screen.Recording.2025-10-08.at.16.21.36.mov

tsullivan · 2025-10-09T01:26:39Z

This PR can also clean up the previous implementation, which relied on consumers directly rendering EuiFlyoutChild (no longer an option)

src/components/flyout/README.md:48:- **Styling**: Supports `backgroundStyle` prop for default/shaded backgrounds
src/components/flyout/manager/flyout_child.stories.tsx:28:  | 'backgroundStyle'
src/components/flyout/manager/flyout_child.stories.tsx:119:    backgroundStyle: { table: { disable: true } },
src/components/flyout/manager/flyout_child.tsx:30: * - `backgroundStyle` toggles between default and shaded backgrounds.
src/components/flyout/manager/flyout_child.tsx:37:  backgroundStyle?: 'default' | 'shaded';
src/components/flyout/manager/flyout_child.tsx:47:  backgroundStyle,
src/components/flyout/manager/flyout_child.tsx:89:        backgroundStyle === 'shaded'
src/components/flyout/manager/flyout_fill_mode.stories.tsx:28:  | 'backgroundStyle'
src/components/flyout/manager/flyout_fill_mode.stories.tsx:108:    backgroundStyle: { table: { disable: true } },
src/components/flyout/manager/flyout_fill_mode.stories.tsx:220:              backgroundStyle={childBackgroundStyle}

tsullivan

Left a suggestion

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

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

Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>

tsullivan · 2025-10-09T16:45:20Z

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

+   * When the flyout is used as a child in a managed flyout session, setting `true` gives the shaded background style.
+   * @default false
+   */
+  childBackgroundShaded?: boolean;


@paulinashakirova we'll also need to update all the places that used the old childBgShaded to use this name

To align more with existing naming conventions for booleans, this should rather be something like: hasChildBackground.
Imho, we should drop the "shaded" part. The color system has a "shaded" background color (which is not used here), so the naming might be confusing.

Thank you for your suggestion!
Where should I describe what type of the background "child" background is?

Where should I describe what type of the background "child" background is?

@paulinashakirova Sorry, I don't quite understand - What do you mean exactly?
The type boolean stays. In terms of naming, we don't need to have the color name "shaded" in the prop, that would make the API volatile if we want to change the color we'd have to change the prop as well.
The JSDoc describes the appliance already for devs 🙂

Gotcha!
Yes, I misunderstood you - of course JSDoc will mention shaded. And if we want to change the color we will update the comment.

…to resolve conflicts

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

tsullivan · 2025-10-10T21:29:48Z

packages/eui/src/components/flyout/README.md

 ### `src/components/flyout/manager/flyout_child.tsx`
 Renders child flyouts within a session:
 - **Positioning**: Automatically positions relative to main flyout width
- **Styling**: Supports `backgroundStyle` prop for default/shaded backgrounds


In this file, let's change line 97-98 to:

### `src/components/flyout/manager/flyout.styles.ts` Managed flyout styling for the flyout management system.

97 is ok, 98 should have the mention background styles removed

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

tsullivan

It's nearly there, just a few small issues with comments that need revising :)

packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx

elasticmachine · 2025-10-15T12:04:02Z

💚 Build Succeeded

History

💔 Build #1544 failed 8a2c247
💚 Build #1496 succeeded 6e1ea99
💔 Build #1484 failed 1e6e55b
💚 Build #1477 succeeded f380e55
💚 Build #1345 succeeded 12d31c8

cc @paulinashakirova

elasticmachine · 2025-10-15T12:17:45Z

💚 Build Succeeded

Buildkite Build
Commit: 8a1b42c

History

💚 Build #4891 succeeded 6e1ea99
💔 Build #4880 failed 1e6e55b
💚 Build #4876 succeeded f380e55
💔 Build #4794 failed 12d31c8

cc @paulinashakirova

tkajtoch

I love the cleanup you did! I believe there's one remaining unresolved comment that I'd like to see done before we merge this PR: https://github.com/elastic/eui/pull/9056/files/6e1ea9904d65de24391364f2d4d8b24db96d66bc#r2422128137

Other than that I have no objections

tsullivan

LGTM! Thanks for the hard work!!

… use for child flyouts only (#9056) Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>

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

feat: add backgroundStyle prop to flyout

12d31c8

paulinashakirova requested a review from tsullivan September 24, 2025 13:52

paulinashakirova self-assigned this Sep 24, 2025

paulinashakirova changed the base branch from main to feat/flyout-system September 24, 2025 13:53

paulinashakirova added 6 commits September 24, 2025 16:46

also add examples how to use it inside managed flyouts

8748ea9

reset state as in feature branch

a974094

feat: Add childBgShaded prop to managed flyout

e1f1014

update snap

1f764c3

update md + add new line

bd3abec

remove line

f380e55

paulinashakirova commented Oct 8, 2025

View reviewed changes

paulinashakirova changed the title ~~feat: Add a new backgroundStyle prop to the Flyout (default/shaded)~~ feat: Add a new boolean childBgShaded prop to the Flyout to use for child flyouts only Oct 8, 2025

tsullivan reviewed Oct 9, 2025

View reviewed changes

packages/eui/src/components/flyout/flyout.component.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/flyout/flyout.styles.ts Show resolved Hide resolved

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

1e6e55b

Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>

tsullivan reviewed Oct 9, 2025

View reviewed changes

rename + clean up

aaee46e

paulinashakirova marked this pull request as ready for review October 10, 2025 16:20

paulinashakirova requested a review from a team as a code owner October 10, 2025 16:20

paulinashakirova changed the title ~~feat: Add a new boolean childBgShaded prop to the Flyout to use for child flyouts only~~ feat: Add a new boolean childBackgroundShaded prop to the Flyout to use for child flyouts only Oct 10, 2025

paulinashakirova added 5 commits October 10, 2025 18:34

revert changes to 2 files since they were deleted in main and i need …

dd21ae3

…to resolve conflicts

Merge branch 'feat/flyout-system' into flyout-props-shaded-bg

3e78537

update stories after file restructure

b75aee2

update flyout sessions story

f5ae409

rename in md

6e1ea99

paulinashakirova commented Oct 10, 2025

View reviewed changes

packages/eui/src/components/flyout/manager/flyout_child.tsx Outdated Show resolved Hide resolved

tsullivan reviewed Oct 10, 2025

View reviewed changes

packages/eui/src/components/flyout/manager/flyout_child.tsx Outdated Show resolved Hide resolved

tsullivan reviewed Oct 10, 2025

View reviewed changes

packages/eui/src/components/flyout/manager/flyout_child.tsx Show resolved Hide resolved

tsullivan requested changes Oct 10, 2025

View reviewed changes

mgadewoll reviewed Oct 13, 2025

View reviewed changes

packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx Show resolved Hide resolved

tsullivan mentioned this pull request Oct 13, 2025

[Flyout System] Add “pass through props” for EuiChildFlyout on EuiFlyout if session=true #9024

Closed

paulinashakirova added 4 commits October 15, 2025 13:23

Merge branch 'feat/flyout-system' into flyout-props-shaded-bg

8a2c247

add to omit childBackgroundShaded

b8900dc

rename var + story loki skip

0cfb396

add comment for skipping sessions story

8a1b42c

tkajtoch reviewed Oct 15, 2025

View reviewed changes

tsullivan approved these changes Oct 15, 2025

View reviewed changes

tsullivan merged commit 33f76da into elastic:feat/flyout-system Oct 15, 2025
4 checks passed

tsullivan added a commit that referenced this pull request Oct 15, 2025

feat: Add a new boolean childBackgroundShaded prop to the Flyout to…

32f91da

… use for child flyouts only (#9056) Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>

paulinashakirova changed the title ~~feat: Add a new boolean childBackgroundShaded prop to the Flyout to use for child flyouts only~~ feat: Add a new boolean hasChildBackground prop to the Flyout to use for child flyouts only Oct 16, 2025

tkajtoch mentioned this pull request Dec 8, 2025

Upgrade EUI to v111.0.0 elastic/kibana#245515

Merged

feat: Add a new boolean hasChildBackground prop to the Flyout to use for child flyouts only #9056

feat: Add a new boolean hasChildBackground prop to the Flyout to use for child flyouts only #9056

Uh oh!

Conversation

paulinashakirova commented Sep 24, 2025 • 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

General checklist

Uh oh!

paulinashakirova Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Oct 9, 2025

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tsullivan Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

paulinashakirova Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

paulinashakirova Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tsullivan Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Oct 15, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Oct 15, 2025

💚 Build Succeeded

History

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat: Add a new boolean `hasChildBackground` prop to the Flyout to use for child flyouts only #9056

feat: Add a new boolean `hasChildBackground` prop to the Flyout to use for child flyouts only #9056

paulinashakirova commented Sep 24, 2025 •

edited

Loading