Skip to content

Commit

Permalink
Use args.children when possible
Browse files Browse the repository at this point in the history
  • Loading branch information
@ciampo
ciampo committed Dec 22, 2024
1 parent fd4b118 commit 980c20e
Showing 1 changed file with 104 additions and 99 deletions.
203 changes: 104 additions & 99 deletions packages/components/src/menu/stories/index.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,112 +68,117 @@ const meta: Meta< typeof Menu > = {
export default meta;

export const Default: StoryObj< typeof Menu > = {
render: ( props: MenuProps ) => (
<Menu { ...props }>
<Menu.TriggerButton
render={ <Button __next40pxDefaultSize variant="secondary" /> }
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
The menu item help text is automatically truncated when
there are more than two lines of text
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item hideOnClick={ false }>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
This item doesn&apos;t close the menu on click
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item disabled>Disabled item</Menu.Item>
<Menu.Separator />
<Menu.Group>
<Menu.GroupLabel>Group label</Menu.GroupLabel>
<Menu.Item
prefix={ <Icon icon={ customLink } size={ 24 } /> }
>
<Menu.ItemLabel>With prefix</Menu.ItemLabel>
args: {
children: (
<>
<Menu.TriggerButton
render={
<Button __next40pxDefaultSize variant="secondary" />
}
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
</Menu.Item>
<Menu.Item suffix="⌘S">With suffix</Menu.Item>
<Menu.Item
disabled
prefix={
<Icon icon={ formatCapitalize } size={ 24 } />
}
suffix="⌥⌘T"
>
<Menu.ItemLabel>
Disabled with prefix and suffix
</Menu.ItemLabel>
<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
</Menu.Item>
</Menu.Group>
</Menu.Popover>
</Menu>
),

args: {},
};

export const WithSubmenu: StoryObj< typeof Menu > = {
render: ( props: MenuProps ) => (
<Menu { ...props }>
<Menu.TriggerButton
render={ <Button __next40pxDefaultSize variant="secondary" /> }
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>Level 1 item</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem suffix="Suffix">
<Menu.ItemLabel>
Submenu trigger item with a long label
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
The menu item help text is automatically truncated
when there are more than two lines of text
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item hideOnClick={ false }>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
This item doesn&apos;t close the menu on click
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item disabled>Disabled item</Menu.Item>
<Menu.Separator />
<Menu.Group>
<Menu.GroupLabel>Group label</Menu.GroupLabel>
<Menu.Item
prefix={ <Icon icon={ customLink } size={ 24 } /> }
>
<Menu.ItemLabel>With prefix</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
<Menu.Item suffix="⌘S">With suffix</Menu.Item>
<Menu.Item
disabled
prefix={
<Icon icon={ formatCapitalize } size={ 24 } />
}
suffix="⌥⌘T"
>
<Menu.ItemLabel>
Disabled with prefix and suffix
</Menu.ItemLabel>
<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem>
<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
),
</Menu.Group>
</Menu.Popover>
</>
),
},
};

export const WithSubmenu: StoryObj< typeof Menu > = {
args: {
...Default.args,
children: (
<>
<Menu.TriggerButton
render={
<Button __next40pxDefaultSize variant="secondary" />
}
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>Level 1 item</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem suffix="Suffix">
<Menu.ItemLabel>
Submenu trigger item with a long label
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem>
<Menu.ItemLabel>
Submenu trigger
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
</Menu.Popover>
</>
),
},
};

Expand Down

0 comments on commit 980c20e

Please sign in to comment.