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

packages/eui/changelogs/upcoming/9056.md

@@ -0,0 +1 @@
+Added a new `childBackgroundShaded` boolean prop (defaults to false) to `EuiFlyout`

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

@@ -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
 - **Constraints**: Forces `type="overlay"` and `ownFocus={false}`
 - **Width Integration**: Uses main flyout width for positioning
 

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

@@ -176,6 +176,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
+   */
+  childBackgroundShaded?: 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.
@@ -262,6 +267,7 @@ export const EuiFlyoutComponent = forwardRef(
       paddingSize = DEFAULT_PADDING_SIZE,
       maxWidth = false,
       style,
+      childBackgroundShaded = false,
       maskProps,
       type = DEFAULT_TYPE,
       outsideClickCloses,
@@ -478,6 +484,7 @@ export const EuiFlyoutComponent = forwardRef(
     const classes = classnames(
       'euiFlyout',
       openStateToClassNameMap[openState],
+      isChildFlyout && childBackgroundShaded && 'euiFlyout--childShaded',
       className
     );
 

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

@@ -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;
@@ -91,9 +91,12 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none;
       }
 
+      &.euiFlyout--childShaded {
+        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`

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

@@ -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,
@@ -27,15 +26,12 @@ 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';
-}
+  > {}
 
 /**
  * Managed child flyout that renders alongside or stacked over the main flyout,
@@ -44,12 +40,10 @@ export interface EuiFlyoutChildProps
  */
 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();
@@ -85,12 +79,7 @@ export function EuiFlyoutChild({
       type="overlay"
       ownFocus={false}
       side={side}
-      css={[
-        backgroundStyle === 'shaded'
-          ? styles.backgroundShaded
-          : styles.backgroundDefault,
-        customCss,
-      ]}
+      css={customCss}
     />
   );
 }

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

@@ -25,7 +25,7 @@ type EuiFlyoutChildActualProps = Pick<
   EuiFlyoutChildProps,
   | 'aria-label'
   | 'as'
-  | 'backgroundStyle'
+  | 'childBackgroundShaded'
   | 'children'
   | 'closeButtonProps'
   | 'focusTrapProps'
@@ -47,7 +47,7 @@ type EuiFlyoutType = (typeof FLYOUT_TYPES)[number];
 interface FlyoutChildStoryArgs extends EuiFlyoutChildActualProps {
   mainSize?: 's' | 'm';
   childSize?: 's' | 'm';
-  childBackgroundStyle?: 'default' | 'shaded';
+  childBackgroundShaded?: boolean;
   childMaxWidth?: number;
   mainFlyoutType: EuiFlyoutType;
   mainMaxWidth?: number;
@@ -73,10 +73,10 @@ const meta: Meta<FlyoutChildStoryArgs> = {
       description:
         'The size of the child flyout. If the main is `s`, the child can be `s`, or `m`. If the main is `m`, the child can only be `s`.',
     },
-    childBackgroundStyle: {
-      options: ['default', 'shaded'],
-      control: { type: 'radio' },
-      description: 'The background style of the child flyout.',
+    childBackgroundShaded: {
+      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' },
@@ -116,9 +116,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
@@ -138,7 +135,7 @@ const meta: Meta<FlyoutChildStoryArgs> = {
   args: {
     mainSize: 'm',
     childSize: 's',
-    childBackgroundStyle: 'default',
+    childBackgroundShaded: false,
     mainFlyoutType: 'overlay',
     outsideClickCloses: false,
     ownFocus: true, // Depends on `mainFlyoutType=overlay`
@@ -166,7 +163,7 @@ type Story = StoryObj<FlyoutChildStoryArgs>;
 const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
   mainSize,
   childSize,
-  childBackgroundStyle,
+  childBackgroundShaded,
   mainFlyoutType,
   pushMinBreakpoint,
   mainMaxWidth,
@@ -256,7 +253,7 @@ const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
             isOpen={isChildOpen}
             id="flyout-manager-playground-child"
             size={childSize}
-            backgroundStyle={childBackgroundStyle}
+            childBackgroundShaded={childBackgroundShaded}
             maxWidth={childMaxWidth}
             ownFocus={false}
             resizable={childFlyoutResizable}

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

@@ -51,6 +51,7 @@ const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
     mainMaxWidth,
     childMaxWidth,
     flyoutType,
+    childBackgroundShaded,
   } = props;
 
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -147,6 +148,7 @@ const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
             maxWidth={childMaxWidth}
             onActive={childFlyoutOnActive}
             onClose={childFlyoutOnClose}
+            childBackgroundShaded={childBackgroundShaded}
           >
             <EuiFlyoutBody>
               <EuiText>
@@ -182,6 +184,7 @@ const ExampleComponent = () => {
   const bottomBorder: EuiPageTemplateProps['bottomBorder'] = 'extended';
 
   const [flyoutType, setFlyoutType] = useState<'overlay' | 'push'>('overlay');
+  const [childBackgroundShaded, setChildBackgroundShaded] = useState(false);
 
   const handleFlyoutTypeToggle = useCallback((e: EuiSwitchEvent) => {
     setFlyoutType(e.target.checked ? 'push' : 'overlay');
@@ -200,6 +203,7 @@ const ExampleComponent = () => {
             title="Session A"
             mainSize="s"
             childSize="s"
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
@@ -211,6 +215,7 @@ const ExampleComponent = () => {
             title="Session B"
             mainSize="m"
             childSize="s"
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
@@ -222,6 +227,7 @@ const ExampleComponent = () => {
             title="Session C"
             mainSize="s"
             childSize="fill"
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
@@ -233,6 +239,7 @@ const ExampleComponent = () => {
             title="Session D"
             mainSize="fill"
             childSize="s"
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
@@ -243,6 +250,7 @@ const ExampleComponent = () => {
             flyoutType={flyoutType}
             title="Session E"
             mainSize="fill"
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
@@ -256,6 +264,7 @@ const ExampleComponent = () => {
             mainSize={undefined}
             childSize="fill"
             childMaxWidth={1000}
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
@@ -268,11 +277,12 @@ const ExampleComponent = () => {
             mainSize="fill"
             mainMaxWidth={1000}
             childSize="s"
+            childBackgroundShaded={childBackgroundShaded}
           />
         ),
       },
     ],
-    [flyoutType]
+    [flyoutType, childBackgroundShaded]
   );
 
   return (
@@ -297,7 +307,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={childBackgroundShaded}
+          onChange={() => setChildBackgroundShaded((prev) => !prev)}
+        />
       </EuiPageTemplate.Section>
       <EuiPageTemplate.Section grow={false} bottomBorder={bottomBorder}>
         <EuiDescriptionList