Add FlyoutSystemMenu component

packages/eui/changelogs/upcoming/8851.md

@@ -0,0 +1 @@
+Adds a new `EuiFlyoutMenu` component that provides a standardized top menu bar for flyouts.

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

@@ -48,6 +48,8 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { euiFlyoutStyles } from './flyout.styles';
 import { EuiFlyoutChild } from './flyout_child';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import { EuiFlyoutMenu } from './flyout_menu';
 import { EuiFlyoutChildProvider } from './flyout_child_manager';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 
@@ -242,6 +244,13 @@ export const EuiFlyout = forwardRef(
     const hasChildFlyout = !!childFlyoutElement;
 
     // Validate props, determine close button position and set child flyout classes
+    const hasFlyoutMenu = React.Children.toArray(children).some(
+      (child) =>
+        React.isValidElement(child) &&
+        (child.type === EuiFlyoutMenu ||
+          (child.type as any).displayName === 'EuiFlyoutMenu')
+    );
+
     let closeButtonPosition: 'inside' | 'outside';
     let childFlyoutClasses: string[] = [];
     if (hasChildFlyout) {
@@ -492,7 +501,7 @@ export const EuiFlyout = forwardRef(
       [onClose, hasOverlayMask, outsideClickCloses]
     );
 
-    const closeButton = !hideCloseButton && (
+    const closeButton = !hideCloseButton && !hasFlyoutMenu && (
       <EuiFlyoutCloseButton
         {...closeButtonProps}
         onClose={onClose}
@@ -547,7 +556,9 @@ export const EuiFlyout = forwardRef(
           >
             {!isPushed && screenReaderDescription}
             {closeButton}
-            {contentToRender}
+            <EuiFlyoutMenuContext.Provider value={{ onClose }}>
+              {contentToRender}
+            </EuiFlyoutMenuContext.Provider>
           </Element>
         </EuiFocusTrap>
       </EuiFlyoutWrapper>

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

@@ -24,6 +24,8 @@ import { euiFlyoutChildStyles } from './flyout_child.styles';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { EuiFlyoutContext } from './flyout_context';
 import { EuiFlyoutBody } from './flyout_body';
+import { EuiFlyoutMenu } from './flyout_menu';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
 import { EuiFocusTrap } from '../focus_trap';
 
 /**
@@ -118,8 +120,16 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
 
   let flyoutTitleText: string | undefined;
   let hasDescribedByBody = false;
+  let hasFlyoutMenu = false;
   Children.forEach(children, (child) => {
     if (React.isValidElement(child)) {
+      if (
+        child.type === EuiFlyoutMenu ||
+        (child.type as any).displayName === 'EuiFlyoutMenu'
+      ) {
+        hasFlyoutMenu = true;
+      }
+
       if ((child.type as any)?.displayName === 'EuiFlyoutHeader') {
         // Attempt to extract string content from header for ARIA
         const headerChildren = child.props.children;
@@ -257,7 +267,7 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
             {flyoutTitleText}
           </h2>
         )}
-        {!hideCloseButton && (
+        {!hideCloseButton && !hasFlyoutMenu && (
           <EuiFlyoutCloseButton
             className="euiFlyoutChild__closeButton"
             onClose={handleClose}
@@ -284,7 +294,9 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
             className="euiFlyoutChild__overflowContent"
             css={styles.overflow.wrapper}
           >
-            {processedChildren}
+            <EuiFlyoutMenuContext.Provider value={{ onClose }}>
+              {processedChildren}
+            </EuiFlyoutMenuContext.Provider>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import React, { useState } from 'react';
+import { EuiButton, EuiButtonIcon } from '../button';
+import { EuiText } from '../text';
+import { EuiFlyout } from './flyout';
+import { EuiFlyoutBody } from './flyout_body';
+import { EuiFlyoutChild } from './flyout_child';
+import { EuiFlyoutMenu } from './flyout_menu';
+
+const meta: Meta = {
+  title: 'Layout/EuiFlyout/EuiFlyoutMenu',
+  component: EuiFlyoutMenu,
+};
+
+export default meta;
+
+const MenuBarFlyout = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const openFlyout = () => setIsOpen(true);
+  const closeFlyout = () => setIsOpen(false);
+
+  const handleCustomActionClick = () => {
+    action('custom action clicked')();
+  };
+
+  return (
+    <>
+      <EuiButton onClick={openFlyout}>Open flyout</EuiButton>
+      {isOpen && (
+        <EuiFlyout onClose={closeFlyout}>
+          <EuiFlyoutMenu title="Main menu bar" />
+          <EuiFlyoutBody>
+            <EuiText>Main flyout content.</EuiText>
+          </EuiFlyoutBody>
+          <EuiFlyoutChild onClose={closeFlyout}>
+            <EuiFlyoutMenu title="Child menu bar">
+              <EuiButtonIcon
+                iconType="gear"
+                onClick={handleCustomActionClick}
+                size="s"
+                style={{ blockSize: '20px' }}
+                aria-label="Custom action"
+              />
+            </EuiFlyoutMenu>
+            <EuiFlyoutBody>
+              <EuiText>Child with custom action in the menu bar.</EuiText>
+            </EuiFlyoutBody>
+          </EuiFlyoutChild>
+        </EuiFlyout>
+      )}
+    </>
+  );
+};
+
+export const MenuBarExample: StoryObj = {
+  name: 'Menu bar example',
+  render: () => <MenuBarFlyout />,
+};

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiFlyoutMenuStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    euiFlyoutMenu__container: css`
+      block-size: calc(${euiTheme.size.m} * 3.5);
+      flex-shrink: 0;
+      padding-block: ${euiTheme.size.s};
+      padding-inline: ${euiTheme.size.s};
+      border-block-end: ${euiTheme.border.width.thin} solid
+        ${euiTheme.border.color};
+      padding-block-start: calc(${euiTheme.size.m} * 0.8);
+
+      .euiTitle {
+        padding-inline: ${euiTheme.size.s};
+      }
+    `,
+    euiFlyoutMenu__spacer: css`
+      padding-inline: ${euiTheme.size.m};
+    `,
+  };
+};

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

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import classNames from 'classnames';
+import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
+import { CommonProps } from '../common';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiTitle } from '../title';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { euiFlyoutMenuStyles } from './flyout_menu.styles';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+
+export type EuiFlyoutMenuProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    backButton?: React.ReactNode;
+    popover?: React.ReactNode;
+    title?: React.ReactNode;
+    hideCloseButton?: boolean;
+  };
+
+export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
+  children,
+  className,
+  backButton,
+  popover,
+  title,
+  hideCloseButton,
+  ...rest
+}) => {
+  const { onClose } = useContext(EuiFlyoutMenuContext);
+
+  const styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
+  const classes = classNames('euiFlyoutMenu', className);
+  const titleId = useGeneratedHtmlId();
+
+  let titleNode;
+  if (title) {
+    titleNode = (
+      <EuiTitle size="xxs" id={titleId}>
+        <h3>{title}</h3>
+      </EuiTitle>
+    );
+  }
+
+  const handleClose = (event: MouseEvent | TouchEvent | KeyboardEvent) => {
+    onClose?.(event);
+  };
+
+  let closeButton;
+  if (!hideCloseButton) {
+    closeButton = (
+      <EuiFlyoutCloseButton
+        onClose={handleClose}
+        side="right"
+        closeButtonPosition="inside"
+      />
+    );
+  }
+
+  return (
+    <div className={classes} css={styles.euiFlyoutMenu__container} {...rest}>
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="spaceBetween"
+        gutterSize="none"
+        responsive={false}
+      >
+        {backButton && <EuiFlexItem grow={false}>{backButton}</EuiFlexItem>}
+        {popover && <EuiFlexItem grow={false}>{popover}</EuiFlexItem>}
+        {titleNode && <EuiFlexItem grow={false}>{titleNode}</EuiFlexItem>}
+        <EuiFlexItem grow={true}></EuiFlexItem>
+        {children && <EuiFlexItem grow={false}>{children}</EuiFlexItem>}
+        <EuiFlexItem grow={false} css={styles.euiFlyoutMenu__spacer} />
+      </EuiFlexGroup>
+      {closeButton}
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createContext } from 'react';
+import { EuiFlyoutProps } from './flyout';
+
+interface EuiFlyoutMenuContextProps {
+  onClose?: EuiFlyoutProps['onClose'];
+}
+
+export const EuiFlyoutMenuContext = createContext<EuiFlyoutMenuContextProps>(
+  {}
+);

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

@@ -26,12 +26,16 @@ export { EuiFlyoutResizable } from './flyout_resizable';
 export { EuiFlyoutChild } from './flyout_child';
 export type { EuiFlyoutChildProps } from './flyout_child';
 
+export type { EuiFlyoutMenuProps } from './flyout_menu';
+export { EuiFlyoutMenu } from './flyout_menu';
+
 export type {
   EuiFlyoutSessionApi,
   EuiFlyoutSessionConfig,
   EuiFlyoutSessionOpenChildOptions,
-  EuiFlyoutSessionOpenMainOptions,
   EuiFlyoutSessionOpenGroupOptions,
+  EuiFlyoutSessionOpenMainOptions,
+  EuiFlyoutSessionOpenManagedOptions,
   EuiFlyoutSessionProviderComponentProps,
   EuiFlyoutSessionRenderContext,
 } from './sessions';