Change display mode default from always to auto

angeles-mb · angeles-mb · commit 5f55d2a5816c · 2026-03-10T10:39:50.000+01:00
diff --git a/packages/eui/changelogs/upcoming/9426.md b/packages/eui/changelogs/upcoming/9426.md
@@ -1 +1 @@
-- Added `flyoutMenuDisplayMode` prop to `EuiFlyout` allowing consumers to hide the menu bar when it only contains a close button (`'auto'` mode).
+- Added `flyoutMenuDisplayMode` prop to `EuiFlyout` to control when the flyout menu renders. Defaults to `'auto'`, which hides the menu bar when it only contains a close button.
diff --git a/packages/eui/src/components/flyout/const.ts b/packages/eui/src/components/flyout/const.ts
@@ -53,7 +53,7 @@ export const DEFAULT_SIZE: EuiFlyoutSize = 'm';
 export const DEFAULT_PADDING_SIZE: _EuiFlyoutPaddingSize = 'l';
 /** Default flyout menu display mode. */
 export const DEFAULT_MENU_DISPLAY_MODE: EuiFlyoutMenuDisplayMode =
-  MENU_DISPLAY_ALWAYS;
+  MENU_DISPLAY_AUTO;
 
 /**
  * Custom type checker for named flyout sizes since the prop
diff --git a/packages/eui/src/components/flyout/flyout.component.tsx b/packages/eui/src/components/flyout/flyout.component.tsx
@@ -208,11 +208,11 @@ interface _EuiFlyoutComponentProps {
 
   /**
    * Controls the display mode of the flyout menu:
+   * - `'auto'`: Render the menu whenever menu props are available and there is navigation content
+   * (back button, history, custom actions) or a visible title.
    * - `'always'`: Render the menu whenever menu props are available. This may result in a close-only menu.
-   * - `'auto'`: Render the menu whenever menu props are available and there is navigation content (back button, history, custom actions)
-   *   or a visible title.
    *
-   * @default 'always'
+   * @default 'auto'
    */
   flyoutMenuDisplayMode?: EuiFlyoutMenuDisplayMode;
 
diff --git a/packages/eui/src/components/flyout/flyout.test.tsx b/packages/eui/src/components/flyout/flyout.test.tsx
@@ -20,7 +20,7 @@ import {
 } from './flyout';
 import { EuiProvider } from '../provider';
 import { EuiFlyoutManager } from './manager';
-import { MENU_DISPLAY_ALWAYS, MENU_DISPLAY_AUTO } from './const';
+import { MENU_DISPLAY_ALWAYS } from './const';
 
 jest.mock('../overlay_mask', () => ({
   EuiOverlayMask: ({ headerZindexLocation, maskRef, ...props }: any) => (
@@ -248,7 +248,6 @@ describe('EuiFlyout', () => {
                 },
               ],
             }}
-            flyoutMenuDisplayMode={MENU_DISPLAY_AUTO}
           />
         );
 
@@ -257,11 +256,7 @@ describe('EuiFlyout', () => {
 
       it('renders close button when menu has no content', () => {
         const { getByTestSubject, queryByTestSubject } = render(
-          <EuiFlyout
-            onClose={() => {}}
-            flyoutMenuProps={{}}
-            flyoutMenuDisplayMode={MENU_DISPLAY_AUTO}
-          />
+          <EuiFlyout onClose={() => {}} flyoutMenuProps={{}} />
         );
 
         expect(getByTestSubject('euiFlyoutCloseButton')).toBeInTheDocument();
diff --git a/packages/website/docs/components/containers/flyout/_flyout_menu.mdx b/packages/website/docs/components/containers/flyout/_flyout_menu.mdx
@@ -51,7 +51,7 @@ In [managed session flyouts](#flyout-session-management), the Flyout Manager aut
 
 #### Menu display mode
 
-By default, the flyout menu is always rendered when `flyoutMenuProps` is provided. You can control this behavior with the `flyoutMenuDisplayMode` prop on `EuiFlyout`:
+By default, the flyout menu is rendered when `flyoutMenuProps` is provided and menu has meaningful content. You can control this behavior with the `flyoutMenuDisplayMode` prop on `EuiFlyout`:
 
-- **`'always'`** (default): Always render the menu, even if it only contains a close button.
-- **`'auto'`**: Only render the menu when it has meaningful content (back button, history, custom actions, or a visible title). Otherwise, use a standalone close button.
+- **`'auto'`** (default): Only render the menu when it has navigation content (back button, history or custom actions) or a visible title. Otherwise, use a standalone close button.
+- **`'always'`**: Always render the menu, even if it only contains a close button.

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-- Added `flyoutMenuDisplayMode` prop to `EuiFlyout` allowing consumers to hide the menu bar when it only contains a close button (`'auto'` mode).
	`1`	+- Added `flyoutMenuDisplayMode` prop to `EuiFlyout` to control when the flyout menu renders. Defaults to `'auto'`, which hides the menu bar when it only contains a close button.