Allow flyout size to be undefined, default to ‘m’

tsullivan · tsullivan · commit c8c15fbd06e3 · 2025-10-01T14:55:28.000-07:00
diff --git a/packages/eui/src/components/flyout/README.md b/packages/eui/src/components/flyout/README.md
@@ -54,7 +54,7 @@ The managed flyout wrapper that integrates with the flyout manager system, handl
 
 ### `src/components/flyout/manager/flyout_validation.ts`
 Validation utilities for managed flyout props:
-- **Named Size Validation**: Managed flyouts must use named sizes (s, m, l)
+- **Named Size Validation**: Managed flyouts must use named sizes (s, m, l). If not provided, defaults to 'm'.
 - **Size Combination Rules**: Parent and child can't both be 'm', parent can't be 'l' with child
 - **Title**: Must be provided either through `flyoutMenuProps` or `aria-label`
 - **Error Handling**: Comprehensive error messages for invalid configurations
diff --git a/packages/eui/src/components/flyout/manager/flyout_managed.test.tsx b/packages/eui/src/components/flyout/manager/flyout_managed.test.tsx
@@ -281,6 +281,49 @@ describe('EuiManagedFlyout', () => {
     });
   });
 
+  describe('size handling', () => {
+    it('defaults size to "m" when no size is provided', () => {
+      // Import the real validation function to test the actual behavior
+      const { validateManagedFlyoutSize } = jest.requireActual('./validation');
+
+      // Temporarily restore the real validation function for this test
+      const originalMock = require('./validation').validateManagedFlyoutSize;
+      require('./validation').validateManagedFlyoutSize =
+        validateManagedFlyoutSize;
+
+      const { getByTestSubject } = renderInProvider(
+        <EuiManagedFlyout
+          id="default-size-test"
+          level={LEVEL_MAIN}
+          onClose={() => {}}
+          flyoutMenuProps={{ title: 'Test Flyout' }}
+          // Explicitly not providing size prop
+        />
+      );
+
+      // The flyout should render successfully, indicating the default size worked
+      expect(getByTestSubject('managed-flyout')).toBeInTheDocument();
+
+      // Restore the mock
+      require('./validation').validateManagedFlyoutSize = originalMock;
+    });
+
+    it('uses provided size when size is explicitly set', () => {
+      const { getByTestSubject } = renderInProvider(
+        <EuiManagedFlyout
+          id="explicit-size-test"
+          level={LEVEL_MAIN}
+          size="s"
+          onClose={() => {}}
+          flyoutMenuProps={{ title: 'Test Flyout' }}
+        />
+      );
+
+      // The flyout should render successfully with explicit size
+      expect(getByTestSubject('managed-flyout')).toBeInTheDocument();
+    });
+  });
+
   describe('onClose callback behavior', () => {
     it('does not call onClose callback during component cleanup/unmount', () => {
       const onClose = jest.fn();
diff --git a/packages/eui/src/components/flyout/manager/flyout_managed.tsx b/packages/eui/src/components/flyout/manager/flyout_managed.tsx
@@ -89,6 +89,11 @@ export const EuiManagedFlyout = ({
   const layoutMode = useFlyoutLayoutMode();
   const styles = useEuiMemoizedStyles(euiManagedFlyoutStyles);
 
+  // Default the size to 'm' if not provided
+  if (!size) {
+    size = 'm';
+  }
+
   // Validate size
   const sizeTypeError = validateManagedFlyoutSize(size, flyoutId, level);
   if (sizeTypeError) {
diff --git a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx
@@ -35,7 +35,7 @@ export default meta;
 
 interface FlyoutSessionProps {
   title: string;
-  mainSize: 's' | 'm' | 'l' | 'fill';
+  mainSize: 's' | 'm' | 'l' | 'fill' | undefined;
   mainMaxWidth?: number;
   childSize?: 's' | 'm' | 'fill';
   childMaxWidth?: number;
@@ -118,7 +118,10 @@ const FlyoutSession: React.FC<FlyoutSessionProps> = React.memo((props) => {
               type="column"
               listItems={[
                 { title: 'Flyout type', description: flyoutType },
-                { title: 'Main flyout size', description: mainSize },
+                {
+                  title: 'Main flyout size',
+                  description: mainSize ?? 'undefined (`m` by default)',
+                },
                 {
                   title: 'Main flyout maxWidth',
                   description: mainMaxWidth ?? 'N/A',
@@ -245,12 +248,13 @@ const ExampleComponent = () => {
         ),
       },
       {
-        title: 'Session F: main size = s, child size = fill (maxWidth 1000px)',
+        title:
+          'Session F: main size = undefined, child size = fill (maxWidth 1000px)',
         description: (
           <FlyoutSession
             flyoutType={flyoutType}
             title="Session F"
-            mainSize="s"
+            mainSize={undefined}
             childSize="fill"
             childMaxWidth={1000}
           />
