From dc714f81be7ddeefba0c26ca18354959580fcd77 Mon Sep 17 00:00:00 2001 From: Sarah Higley <smhigley@users.noreply.github.com> Date: Tue, 6 Aug 2024 14:52:30 -0700 Subject: [PATCH] docs: add wrapping menu item example to ContextualMenu docs (#31289) --- ...ontextualMenu.WrappingMenuItem.Example.tsx | 60 +++++++++++++++++++ .../ContextualMenu/ContextualMenu.doc.tsx | 8 +++ 2 files changed, 68 insertions(+) create mode 100644 packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx new file mode 100644 index 0000000000000..3800766238c6c --- /dev/null +++ b/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} />; +}; diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.doc.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.doc.tsx index 428f6abd88f8b..b085901c0a7df 100644 --- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.doc.tsx +++ b/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,