-
Notifications
You must be signed in to change notification settings - Fork 91
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dropdowns): add
hasSelection prop for use with `<Option type="…
…next">` (#1971)
- Loading branch information
Showing
18 changed files
with
376 additions
and
261 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,59 @@ | ||
| import { useCallback } from 'react'; | ||
| import { Meta, Canvas, Story } from '@storybook/addon-docs'; | ||
| import { useArgs } from '@storybook/client-api'; | ||
| import { Combobox } from '@zendeskgarden/react-dropdowns'; | ||
| import { ListboxStory } from './stories/ListboxStory'; | ||
| import { MenuAppendStory } from './stories/MenuAppendStory'; | ||
| import { MenuButtonStory } from './stories/MenuButtonStory'; | ||
| import { MenuNestedStory } from './stories/MenuNestedStory'; | ||
| import { BASE_ITEMS, NESTED_ITEMS } from './stories/data'; | ||
| import { NestedStory } from './stories/NestedStory'; | ||
| import { PortalStory } from './stories/PortalStory'; | ||
|
|
||
| <Meta title="Packages/Dropdowns/[patterns]" /> | ||
|
|
||
| # Patterns | ||
|
|
||
| ## Render listbox in a root level React portal | ||
| ## Nested | ||
|
|
||
| The `listboxAppendToNode` property can be used to render the listbox in a | ||
| different DOM location than inline with the Combobox component. This is done via | ||
| React portals under the hood. | ||
| ### Listbox | ||
|
|
||
| You typically will need to set this property if you are using the `Combobox` | ||
| inside an element with `overflow: hidden` / `auto` / `scroll` CSS styles. | ||
| A `Combobox` with `<Option type="next">` can be controlled to enable nested | ||
| listbox behavior. The nested listbox will then need an `<Option | ||
| type="previous">` to allow backwards navigation to the previous listbox. Use | ||
| `<Option type="next" hasSelection>` to indicate that the nested listbox contains | ||
| one or more selected options. | ||
|
|
||
| See in this example, that the listbox is currently getting cropped. Enable the | ||
| `listboxAppendToNode` property to see the full listbox. | ||
| ### Menu | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="Listbox" | ||
| args={{ listboxAppendToNode: false }} | ||
| argTypes={{ listboxAppendToNode: { control: 'boolean' } }} | ||
| > | ||
| {args => <ListboxStory {...args} />} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ## Render menu in a root level React portal | ||
|
|
||
| The `appendToNode` property can be used to render the menu popover in a | ||
| different DOM location than inline with the menu button. This is done via | ||
| React portals under the hood. | ||
|
|
||
| You typically will need to set this property if you are using `Menu` inside an | ||
| element with `overflow: hidden` / `auto` / `scroll` CSS styles. | ||
|
|
||
| See in this example that the menu will attempt to reposition, however it's | ||
| ultimately still cropped. Enable the `appendToNode` property to see the full menu. | ||
| Adding an `Item` with `type="next"` will enable nested menu behavior. It can be | ||
| implemented with or without controlled focus. The subsequent nested menu will | ||
| then need an `Item` with `type="previous"` to allow backwards navigation to the | ||
| previous menu. | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="Menu portal" | ||
| args={{ appendToNode: false }} | ||
| argTypes={{ appendToNode: { control: 'boolean' } }} | ||
| > | ||
| {args => <MenuAppendStory {...args} />} | ||
| </Story> | ||
| <Story name="Nested">{args => <NestedStory {...args} />}</Story> | ||
| </Canvas> | ||
|
|
||
| ## Render menu with custom button | ||
|
|
||
| The `button` property can alternatively be set as a callback function that returns | ||
| custom button JSX. By default, `Menu` will use a Garden `Button` internally. | ||
| ## Portal | ||
|
|
||
| This is an option for things like icon buttons. | ||
| Dropdowns can be rendered in a different DOM location than inline with their | ||
| associated trigger component. This is done via React portals under the hood. | ||
| You typically will need to portal if you are using dropdown components inside an | ||
| element with `overflow: hidden` / `auto` / `scroll` CSS styles. See in these | ||
| examples that the dropdowns are currently getting cropped. | ||
|
|
||
| <Canvas> | ||
| <Story name="Menu button">{args => <MenuButtonStory {...args} />}</Story> | ||
| </Canvas> | ||
| ### Listbox portal | ||
|
|
||
| ## Menu with nested items | ||
| Enable the `listboxAppendToNode` property to see the full listbox. | ||
|
|
||
| Adding an `Item` with `type="next"` will enable nested menu | ||
| behavior. It can be implemented with or without controlled focus. | ||
| ### Menu portal | ||
|
|
||
| The subsequent nested menu will then need an `Item` with `type="previous"` | ||
| to allow backwards navigation to the previous menu. | ||
| Enable the `appendToNode` property to see the full menu. | ||
|
|
||
| <Canvas> | ||
| <Story name="Menu nested" args={{ items: BASE_ITEMS }}> | ||
| {args => { | ||
| const [_, updateArgs, resetArgs] = useArgs(); | ||
| const onChange = useCallback(({ type, isExpanded }) => { | ||
| const isNext = type.includes('next'); | ||
| const isPrev = type.includes('previous'); | ||
| if (isNext || isPrev) { | ||
| updateArgs({ items: isNext ? NESTED_ITEMS : BASE_ITEMS }); | ||
| } else if (isExpanded === false) { | ||
| resetArgs(['items']); | ||
| } | ||
| }, []); | ||
| return <MenuNestedStory {...args} onChange={onChange} />; | ||
| <Story | ||
| name="Portal" | ||
| args={{ listboxAppendToNode: false, menuAppendToNode: false }} | ||
| argTypes={{ | ||
| listboxAppendToNode: { control: 'boolean', name: 'Combobox listboxAppendToNode' }, | ||
| menuAppendToNode: { control: 'boolean', name: 'Menu appendToNode' } | ||
| }} | ||
| > | ||
| {args => <PortalStory {...args} />} | ||
| </Story> | ||
| </Canvas> |
52 changes: 0 additions & 52 deletions
52
packages/dropdowns/demo/~patterns/stories/MenuAppendStory.tsx
This file was deleted.
Oops, something went wrong.
42 changes: 0 additions & 42 deletions
42
packages/dropdowns/demo/~patterns/stories/MenuButtonStory.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.