fix: Storybook menu overflow behavior and Menu docs for autoSize (#33350

)
microsoft · Nov 27, 2024 · b0af329 · b0af329
1 parent 2fc8151
commit b0af329
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 1 deletion.
diff --git a/apps/public-docsite-v9/src/DocsComponents/ThemePicker.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/ThemePicker.stories.tsx
@@ -49,6 +49,7 @@ export const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedTh
     <Menu
       onCheckedValueChange={onCheckedValueChange}
       checkedValues={{ theme: selectedThemeId ? [selectedThemeId] : [] }}
+      positioning={{ autoSize: true }}
     >
       <MenuTrigger>
         <MenuButton className={styles.menuButton} menuIcon={{ className: styles.chevronIcon }}>

diff --git a/packages/react-components/react-menu/stories/src/Menu/MenuBestPractices.md b/packages/react-components/react-menu/stories/src/Menu/MenuBestPractices.md
@@ -8,6 +8,7 @@
 - Use the `hasIcons` prop for alignment if only some menu items have icons.
 - Use the `hasCheckmarks` prop for alignment if only some menu items are selectable.
 - Use `MenuItemLink` if the menu item should navigate to a new page
+- Use `positioning={{ autoSize: true }}` if the Menu could potentially be clipped by the top of the page when forced to render above the trigger, or render past the bottom of the page when forced to render below the trigger (these can happen at high zoom or on small devices). Optionally: use `autoSize: true` for all Menus to force them to stay within the viewport and have their own scrollbars if there is overflow.
 
 ### Don't
 

diff --git a/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx b/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Button, Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-components';
 
 export const Default = () => (
-  <Menu>
+  <Menu positioning={{ autoSize: true }}>
     <MenuTrigger disableButtonEnhancement>
       <Button>Toggle menu</Button>
     </MenuTrigger>