fix: Align menu item long content with icon slots (#33102)

microsoft · Oct 22, 2024 · 5001626 · 5001626
1 parent ed7c93c
commit 5001626
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox, MenuItem } from '@fluentui/react-menu';
+import { StoryWright } from 'storywright';
+import { CutRegular, CutFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CutIcon = bundleIcon(CutFilled, CutRegular);
+
+export default {
+  title: 'Menu Converged - selection',
+  decorators: [story => <StoryWright>{story()}</StoryWright>],
+} satisfies Meta<typeof Menu>;
+
+export const SelectableWithLongText = () => (
+  <Menu hasIcons hasCheckmarks open>
+    <MenuTrigger disableButtonEnhancement>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+    <MenuPopover>
+      <MenuList>
+        <MenuItemCheckbox icon={<CutIcon />} name="edit" value="cut">
+          Checkbox item
+        </MenuItemCheckbox>
+        <MenuItem>Menu item with really long text, this is really really long text</MenuItem>
+        <MenuItem>Menu item</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+
+SelectableWithLongText.storyName = 'selectable with long text';
diff --git a/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json b/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Align menu item long content with icon slots",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...s/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts b/...s/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -98,6 +98,7 @@ const useIconBaseStyles = makeResetStyles({
   alignItems: 'center',
   display: 'inline-flex',
   justifyContent: 'center',
+  flexShrink: 0,
 });
 
 const useSubmenuIndicatorBaseStyles = makeResetStyles({

diff --git a/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts b/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
@@ -7,9 +7,11 @@ const useStyles = makeStyles({
     width: '16px',
     height: '16px',
     visibility: 'hidden',
+    flexShrink: 0,
   },
   rootChecked: {
     visibility: 'visible',
+    flexShrink: 0,
   },
 });