[EuiFlyoutChild] default / shaded background style

packages/eui/changelogs/upcoming/8847.md

@@ -0,0 +1 @@
+- Added a new background styling option to the EuiFlyoutChild component.

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

@@ -29,8 +29,7 @@ export const euiFlyoutCloseButtonStyles = (euiThemeContext: UseEuiTheme) => {
       z-index: 3;
     `,
     inside: css`
-      background-color: ${euiTheme.components
-        .flyoutCloseButtonInsideBackground};
+      background-color: transparent;
     `,
     outside: css`
       /* Match dropshadow */

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

@@ -249,7 +249,7 @@ export const WithSmallMainSize: Story = {
   ),
 };
 
-export const WithSmallMainLargeChlld: Story = {
+export const WithSmallMainLargeChild: Story = {
   name: 'Main Size: s, Child Size: m',
   render: (args) => (
     <StatefulFlyout
@@ -259,3 +259,93 @@ export const WithSmallMainLargeChlld: Story = {
     />
   ),
 };
+
+const ChildBackgroundStylesFlyout = () => {
+  const [isMainOpen, setIsMainOpen] = useState(true);
+  const [isDefaultChildOpen, setIsDefaultChildOpen] = useState(true);
+  const [isShadedChildOpen, setIsShadedChildOpen] = useState(false);
+
+  const openDefaultChild = () => {
+    setIsDefaultChildOpen(true);
+    setIsShadedChildOpen(false);
+  };
+  const openShadedChild = () => {
+    setIsDefaultChildOpen(false);
+    setIsShadedChildOpen(true);
+  };
+
+  const closeMain = () => {
+    setIsMainOpen(false);
+    setIsDefaultChildOpen(false);
+    setIsShadedChildOpen(false);
+  };
+  const closeChild = () => {
+    setIsDefaultChildOpen(false);
+    setIsShadedChildOpen(false);
+  };
+
+  const ChildFlyoutContent = () => (
+    <EuiFlyoutBody>
+      <EuiText>
+        <p>
+          This is the child flyout content, with a{' '}
+          <b>{isShadedChildOpen ? 'shaded' : 'default'}</b> background.
+        </p>
+      </EuiText>
+    </EuiFlyoutBody>
+  );
+
+  return (
+    <>
+      <EuiText>
+        <EuiButton onClick={openDefaultChild} disabled={isDefaultChildOpen}>
+          Open flyout with <b>default</b> child background
+        </EuiButton>
+        <EuiSpacer />
+        <EuiButton onClick={openShadedChild} disabled={isShadedChildOpen}>
+          Open flyout with <b>shaded</b> child background
+        </EuiButton>
+      </EuiText>
+
+      {isMainOpen && (
+        <EuiFlyout
+          onClose={closeMain}
+          size="s"
+          type="push"
+          pushMinBreakpoint="xs"
+        >
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>This is the main flyout content.</p>
+            </EuiText>
+            <EuiSpacer />
+          </EuiFlyoutBody>
+
+          {isDefaultChildOpen && (
+            <EuiFlyoutChild
+              onClose={closeChild}
+              size="s"
+              backgroundStyle="default"
+            >
+              <ChildFlyoutContent />
+            </EuiFlyoutChild>
+          )}
+          {isShadedChildOpen && (
+            <EuiFlyoutChild
+              onClose={closeChild}
+              size="s"
+              backgroundStyle="shaded"
+            >
+              <ChildFlyoutContent />
+            </EuiFlyoutChild>
+          )}
+        </EuiFlyout>
+      )}
+    </>
+  );
+};
+
+export const WithChildBackgroundStyles: Story = {
+  name: 'Child Background Styles',
+  render: () => <ChildBackgroundStylesFlyout />,
+};

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

@@ -25,7 +25,6 @@ export const euiFlyoutChildStyles = (euiThemeContext: UseEuiTheme) => {
       inset-block-start: 0;
       inset-inline-start: 0;
       block-size: 100%;
-      background: ${euiTheme.colors.backgroundBaseSubdued};
       display: flex;
       flex-direction: column;
       ${logicalCSSWithFallback('overflow-y', 'hidden')}
@@ -36,6 +35,13 @@ export const euiFlyoutChildStyles = (euiThemeContext: UseEuiTheme) => {
       ${maxedFlyoutWidth(euiThemeContext)}
     `,
 
+    backgroundDefault: css`
+      background: ${euiTheme.colors.backgroundBasePlain};
+    `,
+    backgroundShaded: css`
+      background: ${euiTheme.colors.backgroundBaseSubdued};
+    `,
+
     // Position variants based on screen size
     sidePosition: css`
       transform: translateX(-100%);
@@ -55,13 +61,6 @@ export const euiFlyoutChildStyles = (euiThemeContext: UseEuiTheme) => {
       ${composeFlyoutSizing(euiThemeContext, 'm')}
     `,
 
-    closeButton: css`
-      position: absolute;
-      inset-block-start: ${euiTheme.size.s};
-      inset-inline-end: ${euiTheme.size.s};
-      z-index: 1;
-    `,
-
     overflow: {
       overflow: css`
         flex-grow: 1;

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

@@ -60,6 +60,10 @@ export interface EuiFlyoutChildProps
    * @default 's'
    */
   size?: 's' | 'm';
+  /*
+   * The background of the child flyout can be optionally shaded. Use `shaded` to add the shading.
+   */
+  backgroundStyle?: 'shaded' | 'default';
   /**
    * Children are implicitly part of FunctionComponent, but good to have if props type is standalone.
    */
@@ -72,6 +76,7 @@ export interface EuiFlyoutChildProps
  */
 export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
   children,
+  backgroundStyle = 'default',
   className,
   banner,
   hideCloseButton = false,
@@ -195,6 +200,9 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
 
   const flyoutChildCss = [
     styles.euiFlyoutChild,
+    backgroundStyle === 'shaded'
+      ? styles.backgroundShaded
+      : styles.backgroundDefault,
     size === 's' ? styles.s : styles.m,
     childLayoutMode === 'side-by-side'
       ? styles.sidePosition
@@ -238,7 +246,6 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
         {!hideCloseButton && (
           <EuiFlyoutCloseButton
             className="euiFlyoutChild__closeButton"
-            css={styles.closeButton}
             onClose={handleClose}
             side="right"
             closeButtonPosition="inside"