[EuiFlyoutMenu] add hideTitle prop for “main” flyouts in a session

packages/eui/changelogs/upcoming/9150.md

@@ -0,0 +1,5 @@
+**Bug fixes**
+
+- Fixed `EuiFlyoutMenu` by adding a `hideTitle` prop to hide the title when not needed.
+  - The value `false` most scenarios to maintain backward compatibility.
+  - For "main" flyouts in the managed flyout system, it is automatically set to `true`.

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

@@ -537,6 +537,15 @@ export const EuiFlyoutComponent = forwardRef(
       return _titleId || generatedMenuId;
     }, [hasMenu, _titleId, generatedMenuId]);
 
+    // If the flyout level is LEVEL_MAIN, the title should be hidden by default
+    const flyoutMenuHideTitle = useMemo(() => {
+      if (!hasMenu) return undefined;
+      if (_flyoutMenuProps?.hideTitle !== undefined) {
+        return _flyoutMenuProps.hideTitle;
+      }
+      return currentSession?.mainFlyoutId === flyoutId;
+    }, [hasMenu, _flyoutMenuProps, currentSession, flyoutId]);
+
     const ariaLabelledBy = useMemo(() => {
       if (flyoutMenuId) {
         return classnames(flyoutMenuId, _ariaLabelledBy);
@@ -617,7 +626,11 @@ export const EuiFlyoutComponent = forwardRef(
               />
             )}
             {_flyoutMenuProps && (
-              <EuiFlyoutMenu {...flyoutMenuProps} titleId={flyoutMenuId} />
+              <EuiFlyoutMenu
+                {...flyoutMenuProps}
+                hideTitle={flyoutMenuHideTitle}
+                titleId={flyoutMenuId}
+              />
             )}
             {resizable && (
               <EuiFlyoutResizeButton

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

@@ -16,6 +16,7 @@ import { EuiText } from '../text';
 import { EuiFlyout } from './flyout';
 import { EuiFlyoutBody } from './flyout_body';
 import { EuiFlyoutMenu, EuiFlyoutMenuProps } from './flyout_menu';
+import { EuiFlyoutHeader } from './flyout_header';
 
 interface Args extends EuiFlyoutMenuProps {
   showCustomActions: boolean;
@@ -26,6 +27,7 @@ const meta: Meta<Args> = {
   title: 'Layout/EuiFlyout/EuiFlyoutMenu',
   component: EuiFlyoutMenu,
   argTypes: {
+    hideTitle: { control: 'boolean' },
     showBackButton: { control: 'boolean' },
     showCustomActions: { control: 'boolean' },
     'aria-label': { table: { disable: true } },
@@ -38,13 +40,15 @@ const meta: Meta<Args> = {
     showBackButton: true,
     showCustomActions: true,
     showHistoryItems: true,
+    hideTitle: true,
   },
 };
 
 export default meta;
 
 const MenuBarFlyout = (args: Args) => {
   const {
+    hideTitle,
     hideCloseButton,
     showBackButton,
     showCustomActions,
@@ -80,6 +84,8 @@ const MenuBarFlyout = (args: Args) => {
     'aria-label': `${iconType} action`,
   }));
 
+  const titleId = 'menu-bar-example-main-title';
+
   return (
     <>
       <EuiButton onClick={openFlyout} disabled={isFlyoutOpen}>
@@ -94,15 +100,25 @@ const MenuBarFlyout = (args: Args) => {
           type="overlay"
           outsideClickCloses={false}
           ownFocus
+          aria-labelledby={titleId}
           flyoutMenuProps={{
             title: 'Flyout title',
+            titleId,
+            hideTitle,
             hideCloseButton,
             showBackButton,
             backButtonProps,
             historyItems,
             customActions: showCustomActions ? customActions : undefined,
           }}
         >
+          {hideTitle && (
+            <EuiFlyoutHeader hasBorder>
+              <EuiText>
+                <h2 id={titleId}>Simple flyout header</h2>
+              </EuiText>
+            </EuiFlyoutHeader>
+          )}
           <EuiFlyoutBody>
             <EuiText>
               <p>Simple flyout content.</p>

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

@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { euiScreenReaderOnly } from '../accessibility';
 
 export const euiFlyoutMenuStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -31,5 +32,8 @@ export const euiFlyoutMenuStyles = (euiThemeContext: UseEuiTheme) => {
     euiFlyoutMenu__actions: css`
       block-size: calc(${euiTheme.size.m} * 1.8);
     `,
+    euiFlyoutMenu__hiddenTitle: css`
+      ${euiScreenReaderOnly()}
+    `,
   };
 };