Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tsullivan merged 18 commits into from
Oct 15, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
12d31c8
feat: add backgroundStyle prop to flyout
paulinashakirova Sep 24, 2025
8748ea9
also add examples how to use it inside managed flyouts
paulinashakirova Sep 24, 2025
a974094
reset state as in feature branch
paulinashakirova Oct 8, 2025
e1f1014
feat: Add childBgShaded prop to managed flyout
paulinashakirova Oct 8, 2025
1f764c3
update snap
paulinashakirova Oct 8, 2025
bd3abec
update md + add new line
paulinashakirova Oct 8, 2025
f380e55
remove line
paulinashakirova Oct 8, 2025
1e6e55b
Update packages/eui/src/components/flyout/flyout.component.tsx
paulinashakirova Oct 9, 2025
aaee46e
rename + clean up
paulinashakirova Oct 10, 2025
dd21ae3
revert changes to 2 files since they were deleted in main and i need …
paulinashakirova Oct 10, 2025
3e78537
Merge branch 'feat/flyout-system' into flyout-props-shaded-bg
paulinashakirova Oct 10, 2025
b75aee2
update stories after file restructure
paulinashakirova Oct 10, 2025
f5ae409
update flyout sessions story
paulinashakirova Oct 10, 2025
6e1ea99
rename in md
paulinashakirova Oct 10, 2025
8a2c247
Merge branch 'feat/flyout-system' into flyout-props-shaded-bg
paulinashakirova Oct 15, 2025
b8900dc
add to omit childBackgroundShaded
paulinashakirova Oct 10, 2025
0cfb396
rename var + story loki skip
paulinashakirova Oct 15, 2025
8a1b42c
add comment for skipping sessions story
paulinashakirova Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/9056.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added a new `hasChildBackground` boolean prop (defaults to false) to `EuiFlyout`
3 changes: 1 addition & 2 deletions packages/eui/src/components/flyout/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ Renders the primary flyout in a session. Currently a simple wrapper around `EuiM
### `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
Copy link
Member

@tsullivan tsullivan Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

- **Constraints**: Forces `type="overlay"` and `ownFocus={false}`
- **Width Integration**: Uses main flyout width for positioning

Expand Down Expand Up @@ -96,7 +95,7 @@ Core flyout styling with emotion CSS-in-JS:
Menu-specific styling for the flyout menu component.

### `src/components/flyout/manager/flyout.styles.ts`
Managed flyout styling, including background styles for child flyouts.
Managed flyout styling for the flyout managment system.

## Testing and Documentation

Expand Down
12 changes: 11 additions & 1 deletion packages/eui/src/components/flyout/flyout.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,11 @@ interface _EuiFlyoutComponentProps {
*/
pushAnimation?: boolean;
style?: CSSProperties;
/**
* When the flyout is used as a child in a managed flyout session, setting `true` gives the shaded background style.
* @default false
*/
hasChildBackground?: boolean;
/**
* Object of props passed to EuiFocusTrap.
* `shards` specifies an array of elements that will be considered part of the flyout, preventing the flyout from being closed when clicked.
Expand Down Expand Up @@ -233,6 +238,7 @@ export const EuiFlyoutComponent = forwardRef(
paddingSize = DEFAULT_PADDING_SIZE,
maxWidth = false,
style,
hasChildBackground = false,
maskProps,
type = DEFAULT_TYPE,
outsideClickCloses,
Expand Down Expand Up @@ -434,7 +440,11 @@ export const EuiFlyoutComponent = forwardRef(
styles[side],
];

const classes = classnames('euiFlyout', className);
const classes = classnames(
'euiFlyout',
isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground',
className
);

const flyoutToggle = useRef<Element | null>(document.activeElement);
const [focusTrapShards, setFocusTrapShards] = useState<HTMLElement[]>([]);
Expand Down
7 changes: 5 additions & 2 deletions packages/eui/src/components/flyout/flyout.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)')}
${logicalCSS('height', 'inherit')}
z-index: ${euiTheme.levels.flyout};
background: ${euiTheme.colors.emptyShade};
background: ${euiTheme.colors.backgroundBasePlain};
display: flex;
flex-direction: column;
align-items: stretch;
Expand All @@ -91,9 +91,12 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
outline: none;
}

&.euiFlyout--hasChildBackground {
background: ${euiTheme.colors.backgroundBaseSubdued};
}

${maxedFlyoutWidth(euiThemeContext)}
`,

// Flyout sizes
// When a child flyout is stacked on top of the parent, the parent flyout size will match the child flyout size
s: css`
Expand Down
37 changes: 0 additions & 37 deletions packages/eui/src/components/flyout/manager/flyout_child.styles.ts
View file
Open in desktop

This file was deleted.

31 changes: 11 additions & 20 deletions packages/eui/src/components/flyout/manager/flyout_child.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
*/

import React from 'react';
import { useEuiMemoizedStyles, useEuiTheme } from '../../../services';
import { euiChildFlyoutStyles } from './flyout_child.styles';
import { useEuiTheme } from '../../../services';
import { EuiManagedFlyout, type EuiManagedFlyoutProps } from './flyout_managed';
import {
useCurrentMainFlyout,
Expand All @@ -27,29 +26,26 @@ import { DEFAULT_SIDE } from '../const';
*
* Notes:
* - `type`, `side`, and `level` are fixed by the component and thus omitted.
* - `backgroundStyle` toggles between default and shaded backgrounds.
*/
export interface EuiFlyoutChildProps
extends Omit<
EuiManagedFlyoutProps,
'closeButtonPosition' | 'hideCloseButton' | 'type' | 'level'
> {
backgroundStyle?: 'default' | 'shaded';
}
export type EuiFlyoutChildProps = Omit<
EuiManagedFlyoutProps,
| 'closeButtonPosition'
| 'hideCloseButton'
| 'type'
| 'level'
| 'hasChildBackground'
>;

/**
* Managed child flyout that renders alongside or stacked over the main flyout,
* depending on the current layout mode. Handles background styling and required
* managed flyout props.
* depending on the current layout mode. Handles required managed flyout props.
*/
export function EuiFlyoutChild({
css: customCss,
backgroundStyle,
side = DEFAULT_SIDE,
...props
}: EuiFlyoutChildProps) {
const { euiTheme } = useEuiTheme();
const styles = useEuiMemoizedStyles(euiChildFlyoutStyles);
const mainFlyout = useCurrentMainFlyout();
const mainWidth = useFlyoutWidth(mainFlyout?.flyoutId);
const layoutMode = useFlyoutLayoutMode();
Expand Down Expand Up @@ -85,12 +81,7 @@ export function EuiFlyoutChild({
type="overlay"
ownFocus={false}
side={side}
css={[
backgroundStyle === 'shaded'
? styles.backgroundShaded
: styles.backgroundDefault,
customCss,
]}
css={customCss}
/>
);
}
20 changes: 8 additions & 12 deletions packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ type EuiFlyoutChildActualProps = Pick<
EuiFlyoutChildProps,
| 'aria-label'
| 'as'
| 'backgroundStyle'
| 'children'
| 'closeButtonProps'
| 'focusTrapProps'
Expand All @@ -47,7 +46,7 @@ type EuiFlyoutType = (typeof FLYOUT_TYPES)[number];
interface FlyoutChildStoryArgs extends EuiFlyoutChildActualProps {
mainSize?: 's' | 'm';
childSize?: 's' | 'm';
childBackgroundStyle?: 'default' | 'shaded';
hasChildBackground: boolean;
childMaxWidth?: number;
mainFlyoutType: EuiFlyoutType;
mainMaxWidth?: number;
Expand All @@ -73,10 +72,10 @@ const meta: Meta<FlyoutChildStoryArgs> = {
description:
'The size of the child flyout. Valid combinations: both cannot be "m", both cannot be "fill", and "l" can only be used if the other flyout is "fill".',
},
childBackgroundStyle: {
options: ['default', 'shaded'],
control: { type: 'radio' },
description: 'The background style of the child flyout.',
hasChildBackground: {
control: { type: 'boolean' },
description:
'When the flyout is used as a child in a managed flyout session, setting `true` gives the shaded background style.',
},
childMaxWidth: {
control: { type: 'number' },
Expand Down Expand Up @@ -116,9 +115,6 @@ const meta: Meta<FlyoutChildStoryArgs> = {
control: { type: 'boolean' },
description: 'Whether the child flyout should be resizable.',
},

// use "childBackgroundStyle" instead
backgroundStyle: { table: { disable: true } },
// use "mainSize" and "childSize" instead
size: { table: { disable: true } },
// use "mainMaxWidth" and "childMaxWidth" instead
Expand All @@ -138,7 +134,7 @@ const meta: Meta<FlyoutChildStoryArgs> = {
args: {
mainSize: 'm',
childSize: 's',
childBackgroundStyle: 'default',
hasChildBackground: false,
mainFlyoutType: 'overlay',
outsideClickCloses: false,
ownFocus: true, // Depends on `mainFlyoutType=overlay`
Expand Down Expand Up @@ -166,7 +162,7 @@ type Story = StoryObj<FlyoutChildStoryArgs>;
const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
mainSize,
childSize,
childBackgroundStyle,
hasChildBackground,
mainFlyoutType,
pushMinBreakpoint,
mainMaxWidth,
Expand Down Expand Up @@ -256,7 +252,7 @@ const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
<EuiFlyout
id="flyout-manager-playground-child"
size={childSize}
backgroundStyle={childBackgroundStyle}
hasChildBackground={hasChildBackground}
maxWidth={childMaxWidth}
ownFocus={false}
resizable={childFlyoutResizable}
Expand Down
28 changes: 25 additions & 3 deletions packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ import { useFlyoutManager, useCurrentSession } from './hooks';
const meta: Meta<typeof EuiFlyout> = {
title: 'Layout/EuiFlyout/Flyout Manager',
component: EuiFlyout,
// Skipping Loki as this is a playground for the flyout manager
// https://github.com/elastic/eui/pull/9056/files#r2425379403
parameters: {
loki: {
skip: true,
},
},
};

export default meta;
Expand All @@ -40,7 +47,7 @@ interface FlyoutSessionProps {
childSize?: 's' | 'm' | 'fill';
childMaxWidth?: number;
flyoutType: 'overlay' | 'push';
childBackgroundShaded?: boolean;
hasChildBackground: boolean;
}

const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
Expand All @@ -51,6 +58,7 @@ const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
mainMaxWidth,
childMaxWidth,
flyoutType,
hasChildBackground,
} = props;

const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
Expand Down Expand Up @@ -146,6 +154,7 @@ const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
maxWidth={childMaxWidth}
onActive={childFlyoutOnActive}
onClose={childFlyoutOnClose}
hasChildBackground={hasChildBackground}
>
<EuiFlyoutBody>
<EuiText>
Expand Down Expand Up @@ -182,6 +191,7 @@ const ExampleComponent = () => {
const bottomBorder: EuiPageTemplateProps['bottomBorder'] = 'extended';

const [flyoutType, setFlyoutType] = useState<'overlay' | 'push'>('overlay');
const [hasChildBackground, setChildBackgroundShaded] = useState(false);

const handleFlyoutTypeToggle = useCallback((e: EuiSwitchEvent) => {
setFlyoutType(e.target.checked ? 'push' : 'overlay');
Expand All @@ -200,6 +210,7 @@ const ExampleComponent = () => {
title="Session A"
mainSize="s"
childSize="s"
hasChildBackground={hasChildBackground}
/>
),
},
Expand All @@ -211,6 +222,7 @@ const ExampleComponent = () => {
title="Session B"
mainSize="m"
childSize="s"
hasChildBackground={hasChildBackground}
/>
),
},
Expand All @@ -222,6 +234,7 @@ const ExampleComponent = () => {
title="Session C"
mainSize="s"
childSize="fill"
hasChildBackground={hasChildBackground}
/>
),
},
Expand All @@ -233,6 +246,7 @@ const ExampleComponent = () => {
title="Session D"
mainSize="fill"
childSize="s"
hasChildBackground={hasChildBackground}
/>
),
},
Expand All @@ -243,6 +257,7 @@ const ExampleComponent = () => {
flyoutType={flyoutType}
title="Session E"
mainSize="fill"
hasChildBackground={hasChildBackground}
/>
),
},
Expand All @@ -256,6 +271,7 @@ const ExampleComponent = () => {
mainSize={undefined}
childSize="fill"
childMaxWidth={1000}
hasChildBackground={hasChildBackground}
/>
),
},
Expand All @@ -268,11 +284,12 @@ const ExampleComponent = () => {
mainSize="fill"
mainMaxWidth={1000}
childSize="s"
hasChildBackground={hasChildBackground}
/>
),
},
],
[flyoutType]
[flyoutType, hasChildBackground]
);

return (
Expand All @@ -297,7 +314,12 @@ const ExampleComponent = () => {
checked={flyoutType === 'push'}
onChange={handleFlyoutTypeToggle}
/>
{/* FIXME add option to set child flyout background style to "shaded" */}
<EuiSpacer size="m" />
<EuiSwitch
label="Child flyout background shaded"
checked={hasChildBackground}
onChange={() => setChildBackgroundShaded((prev) => !prev)}
/>
</EuiPageTemplate.Section>
<EuiPageTemplate.Section grow={false} bottomBorder={bottomBorder}>
<EuiDescriptionList
Expand Down