docs: add wrapping menu item example to ContextualMenu docs (microsof…

…t#31289)

packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ContextualMenuItemType } from '@fluentui/react/lib/ContextualMenu';
+import type {
+  IContextualMenuProps,
+  IContextualMenuStyles,
+  IContextualMenuItemStyles,
+} from '@fluentui/react/lib/ContextualMenu';
+import { DefaultButton } from '@fluentui/react/lib/Button';
+import { useConst } from '@fluentui/react-hooks';
+
+// text wrapping styles
+const menuItemStyles: Partial<IContextualMenuItemStyles> = {
+  root: {
+    height: 'auto',
+  },
+  linkContent: {
+    minHeight: '36px',
+  },
+  label: {
+    whiteSpace: 'normal',
+    lineHeight: '1.2',
+    padding: '4px 0',
+  },
+};
+
+// prevent the menu from expanding with the longer text
+const menuStyles: Partial<IContextualMenuStyles> = {
+  root: {
+    maxWidth: '200px',
+  },
+};
+
+export const ContextualMenuWithWrappingMenuItemExample: React.FunctionComponent = () => {
+  const menuProps: IContextualMenuProps = useConst(() => ({
+    shouldFocusOnMount: true,
+    styles: menuStyles,
+    items: [
+      { key: 'newItem', text: 'New', itemProps: { styles: menuItemStyles } },
+      { key: 'divider_1', itemType: ContextualMenuItemType.Divider, itemProps: { styles: menuItemStyles } },
+      {
+        key: 'rename',
+        text: 'Rename',
+        itemProps: { styles: menuItemStyles },
+      },
+      { key: 'edit', text: 'Edit', itemProps: { styles: menuItemStyles } },
+      {
+        key: 'properties',
+        text: 'Properties',
+        itemProps: { styles: menuItemStyles },
+      },
+      {
+        key: 'long',
+        text: 'Item with an extra long name that should wrap to a new line',
+        itemProps: { styles: menuItemStyles },
+      },
+    ],
+  }));
+
+  return <DefaultButton text="Click for ContextualMenu" menuProps={menuProps} />;
+};

packages/react-examples/src/react/ContextualMenu/ContextualMenu.doc.tsx

@@ -18,6 +18,7 @@ import { ContextualMenuWithCustomMenuListExample } from './ContextualMenu.Custom
 import { ContextualMenuHeaderExample } from './ContextualMenu.Header.Example';
 import { ContextualMenuPersistedExample } from './ContextualMenu.Persisted.Example';
 import { ContextualMenuScreenReaderExample } from './ContextualMenu.ScreenReader.Example';
+import { ContextualMenuWithWrappingMenuItemExample } from './ContextualMenu.WrappingMenuItem.Example';
 
 const ContextualMenuBasicExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ContextualMenu/ContextualMenu.Basic.Example.tsx') as string;
@@ -51,6 +52,8 @@ const ContextualMenuHeaderExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ContextualMenu/ContextualMenu.Header.Example.tsx') as string;
 const ContextualMenuScreenReaderExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ContextualMenu/ContextualMenu.ScreenReader.Example.tsx') as string;
+const ContextualMenuWithWrappingMenuItemExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx') as string;
 
 export const ContextualMenuPageProps: IDocPageProps = {
   title: 'ContextualMenu',
@@ -122,6 +125,11 @@ export const ContextualMenuPageProps: IDocPageProps = {
       code: ContextualMenuWithCustomMenuItemExampleCode,
       view: <ContextualMenuWithCustomMenuItemExample />,
     },
+    {
+      title: 'ContextualMenu with wrapping menu item text',
+      code: ContextualMenuWithWrappingMenuItemExampleCode,
+      view: <ContextualMenuWithWrappingMenuItemExample />,
+    },
     {
       title: 'ContextualMenu with custom rendered menu list that renders a search box to filter menu items',
       code: ContextualMenuCustomMenuListExampleCode,