diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index 92501c33269580..bd5a7107e56a74 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -44,10 +44,15 @@ const meta: Meta< typeof Menu > = { ItemLabel: Menu.ItemLabel, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 ItemHelpText: Menu.ItemHelpText, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + TriggerButton: Menu.TriggerButton, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + SubmenuTriggerItem: Menu.SubmenuTriggerItem, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + Popover: Menu.Popover, }, argTypes: { children: { control: { type: null } }, - trigger: { control: { type: null } }, }, tags: [ 'status-private' ], parameters: { @@ -63,86 +68,94 @@ export default meta; export const Default: StoryFn< typeof Menu > = ( props ) => ( - - Label - - - Label - Help text - - - Label - - The menu item help text is automatically truncated when there - are more than two lines of text - - - - Label - - This item doesn't close the menu on click - - - Disabled item - - - Group label - }> - With prefix + } + > + Open menu + + + + Label - With suffix - } - suffix="⌥⌘T" - > - Disabled with prefix and suffix - And help text + + Label + Help text - + + Label + + The menu item help text is automatically truncated when + there are more than two lines of text + + + + Label + + This item doesn't close the menu on click + + + Disabled item + + + Group label + }> + With prefix + + With suffix + } + suffix="⌥⌘T" + > + + Disabled with prefix and suffix + + And help text + + + ); -Default.args = { - trigger: ( - - ), -}; +Default.args = {}; export const WithSubmenu: StoryFn< typeof Menu > = ( props ) => ( - Level 1 item - + } + > + Open menu + + + Level 1 item + + Submenu trigger item with a long label - - } - > - - Level 2 item - - - Level 2 item - - + - Submenu trigger + Level 2 item - } - > - - Level 3 item - - - Level 3 item - + + Level 2 item + + + + Submenu trigger + + + + Level 3 item + + + Level 3 item + + + + - + ); WithSubmenu.args = { @@ -169,94 +182,113 @@ export const WithCheckboxes: StoryFn< typeof Menu > = ( props ) => { return ( - - - Single selection, uncontrolled - - - Checkbox item A - Initially unchecked - - - Checkbox item B - Initially checked - - - - - Single selection, controlled - setAChecked( e.target.checked ) } - > - Checkbox item A - Initially unchecked - - setBChecked( e.target.checked ) } - > - Checkbox item B - Initially checked - - - - - - Multiple selection, uncontrolled - - - Checkbox item A - Initially unchecked - - - Checkbox item B - Initially checked - - - - - - Multiple selection, controlled - - - Checkbox item A - Initially unchecked - - - Checkbox item B - Initially checked - - + } + > + Open menu + + + + + Single selection, uncontrolled + + + Checkbox item A + + Initially unchecked + + + + Checkbox item B + Initially checked + + + + + + Single selection, controlled + + { + setAChecked( e.target.checked ); + } } + > + Checkbox item A + + Initially unchecked + + + setBChecked( e.target.checked ) } + > + Checkbox item B + Initially checked + + + + + + Multiple selection, uncontrolled + + + Checkbox item A + + Initially unchecked + + + + Checkbox item B + Initially checked + + + + + + Multiple selection, controlled + + + Checkbox item A + + Initially unchecked + + + + Checkbox item B + Initially checked + + + ); }; @@ -272,43 +304,54 @@ export const WithRadios: StoryFn< typeof Menu > = ( props ) => { return ( - - Uncontrolled - - Radio item 1 - Initially unchecked - - - Radio item 2 - Initially checked - - - - - Controlled - - Radio item 1 - Initially unchecked - - - Radio item 2 - Initially checked - - + } + > + Open menu + + + + Uncontrolled + + Radio item 1 + + Initially unchecked + + + + Radio item 2 + Initially checked + + + + + Controlled + + Radio item 1 + + Initially unchecked + + + + Radio item 2 + Initially checked + + + ); }; @@ -333,29 +376,40 @@ export const WithModals: StoryFn< typeof Menu > = ( props ) => { return ( <> - setOuterModalOpen( true ) } - hideOnClick={ false } - > - Open outer modal - - setInnerModalOpen( true ) } - hideOnClick={ false } + + } > - Open inner modal - - { isInnerModalOpen && ( - setInnerModalOpen( false ) } - overlayClassName={ modalOverlayClassName } + Open menu + + + setOuterModalOpen( true ) } + hideOnClick={ false } > - Modal's contents - - - ) } + Open outer modal + + setInnerModalOpen( true ) } + hideOnClick={ false } + > + Open inner modal + + { isInnerModalOpen && ( + setInnerModalOpen( false ) } + overlayClassName={ modalOverlayClassName } + > + Modal's contents + + + ) } + { isOuterModalOpen && ( = ( props ) => { return ( - - Item - - + + } + > + Open menu + + + + Item + + + Item from fill - + + Submenu from fill + + - Submenu from fill + + Submenu item from fill + - } - > - - Submenu item from fill - + @@ -465,24 +529,30 @@ export const ToolbarVariant: StoryFn< typeof Menu > = ( props ) => ( // TODO: add toolbar - - Level 1 item - - - Level 1 item - - - - Submenu trigger - - } + } > + Open menu + + - Level 2 item + Level 1 item - + + Level 1 item + + + + + Submenu trigger + + + + Level 2 item + + + + ); @@ -502,28 +572,44 @@ export const InsideModal: StoryFn< typeof Menu > = ( props ) => { Open modal { isModalOpen && ( - setModalOpen( false ) }> + setModalOpen( false ) } + title="Menu inside modal" + > - - Level 1 item - - - Level 1 item - - - - - Submenu trigger - - + } > + Open menu + + + + Level 1 item + - Level 2 item + Level 1 item - + + + + + Submenu trigger + + + + + + Level 2 item + + + + +