-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dropdownmenu): streamline API (#2432)
part of #2221 I changed to using our `Popover`, which means we can handle testing state there. New API is this: ```tsx import { DropdownMenu } from '@digdir/designsystemet-react'; // med context <DropdownMenu.Context> <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger> <DropdownMenu> <DropdownMenu.Heading>Heading</DropdownMenu.Heading> <DropdownMenu.List> <DropdownMenu.Item>Item</DropdownMenu.Item> </DropdownMenu.List> </DropdownMenu> </DropdownMenu.Context> // uten context <Button popovertarget="my-dropdown">Trigger</Button> <Dropdown id="my-dropdown"> <DropdownMenu.Heading>Heading</DropdownMenu.Heading> <DropdownMenu.List> <DropdownMenu.Item>Item</DropdownMenu.Item> </DropdownMenu.List> </Dropdown> ```
- Loading branch information
Showing
31 changed files
with
578 additions
and
853 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| "@digdir/designsystemet-css": patch | ||
| "@digdir/designsystemet-react": patch | ||
| --- | ||
|
|
||
| DropdownMenu: | ||
| - Rename from `DropdownMenu` to `Dropdown` | ||
| - Change API and structure | ||
| - Rename `.Root` to `.Context` | ||
| - Rename `.Content` to `Dropdown` |
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
File renamed without changes
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 |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| .ds-dropdown { | ||
| --dsc-dropdown-padding: var(--ds-spacing-3) var(--ds-spacing-2); | ||
| --dsc-dropdown-min-width: 16rem; | ||
| --dsc-dropdown-item-padding: 0 var(--ds-spacing-4); | ||
| --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4); | ||
|
|
||
| padding: var(--dsc-dropdown-padding); | ||
| list-style: none; | ||
| border-radius: min(1rem, var(--ds-border-radius-md)); | ||
| box-shadow: var(--ds-shadow-md); | ||
| background-color: var(--ds-color-neutral-background-default); | ||
| border: 1px solid var(--ds-color-neutral-border-subtle); | ||
| min-width: var(--dsc-dropdown-min-width); | ||
|
|
||
| /* Remove popover arrow */ | ||
| &::before { | ||
| display: none; | ||
| } | ||
|
|
||
| &[data-size='sm'] { | ||
| --dsc-dropdown-padding: var(--ds-spacing-2); | ||
| --dsc-dropdown-min-width: 15rem; | ||
| } | ||
|
|
||
| &[data-size='lg'] { | ||
| --dsc-dropdown-padding: var(--ds-spacing-4) var(--ds-spacing-2); | ||
| --dsc-dropdown-min-width: 18rem; | ||
| } | ||
|
|
||
| & :is(a, button, [role='button']) { | ||
| justify-content: start; | ||
| padding: var(--dsc-dropdown-item-padding); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .ds-dropdown__list { | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .ds-dropdown__heading { | ||
| padding: var(--dsc-dropdown-header-padding); | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/blocks'; | ||
|
|
||
| import * as DropdownStories from './Dropdown.stories'; | ||
|
|
||
| import { Dropdown } from './'; | ||
|
|
||
| <Meta of={DropdownStories} /> | ||
|
|
||
| # Dropdown | ||
|
|
||
| <Primary /> | ||
| <Controls /> | ||
|
|
||
| ## Slik bruker du `Dropdown` | ||
|
|
||
| ```tsx | ||
| import { Dropdown } from '@digdir/designsystemet-react'; | ||
|
|
||
| // med context | ||
| <Dropdown.Context> | ||
| <Dropdown.Trigger>Trigger</Dropdown.Trigger> | ||
| <Dropdown> | ||
| <Dropdown.Heading>Heading</Dropdown.Heading> | ||
| <Dropdown.List> | ||
| <Dropdown.Item>Item</Dropdown.Item> | ||
| </Dropdown.List> | ||
| </Dropdown> | ||
| </Dropdown.Context> | ||
|
|
||
| // uten context | ||
| <Button popovertarget="my-dropdown">Trigger</Button> | ||
| <Dropdown id="my-dropdown"> | ||
| <Dropdown.Heading>Heading</Dropdown.Heading> | ||
| <Dropdown.List> | ||
| <Dropdown.Item>Item</Dropdown.Item> | ||
| </Dropdown.List> | ||
| </Dropdown> | ||
| ``` | ||
|
|
||
| ## Eksempler på bruk | ||
|
|
||
| ### Kontrollert | ||
|
|
||
| Dersom du sender inn `open`, så bruker du `Dropdown` kontrollert. Du kan bruke `onClose` for å få beskjed når `Dropdown` vil lukkes. | ||
|
|
||
| <Canvas of={DropdownStories.Controlled} /> | ||
|
|
||
| ### Ikoner | ||
|
|
||
| Du kan legge ikon rett inn i `Dropdown.Item`, dersom det blir mye mellomrom til kanten kan du legge på din egen klasse og endre på `padding`. | ||
|
|
||
| <Canvas of={DropdownStories.Icons} /> | ||
|
|
||
| ### Uten Trigger | ||
|
|
||
| `Dropdown` bruker popover APIet, så du kan bruke `Dropdown` uten `Dropdown.Trigger`. | ||
| Du må da legge til `popovertarget={id}` på `Dropdown`, og `id` på `Dropdown`. | ||
|
|
||
| <Canvas of={DropdownStories.WithoutTrigger} /> | ||
|
|
||
| ## Tilgjengelighet | ||
|
|
||
| Det er innebygd tilgjengelighet i `Dropdown.Trigger` med `aria-expanded={true/false}` i henhold til åpne/lukket tilstand, og `aria-haspopup='menu'`. | ||
|
|
||
| ### `Dropdown.List` | ||
|
|
||
| <ArgTypes of={Dropdown.List} /> | ||
|
|
||
| ### `Dropdown.Trigger` | ||
|
|
||
| Triggeren er en [Button](/docs/komponenter-button--docs) som standard. | ||
|
|
||
| Bruk `Dropdown.Trigger` til å aktivere `Dropdown`. Du kan bruke `asChild` for å endre `Dropdown.Trigger` elementet. | ||
| Dersom du skal legge på funksjoner som `onClick`, legg det på ditt element, og legg `asChild` på `Dropdown.Trigger`. | ||
|
|
||
| ### Referanser | ||
|
|
||
| Vi bruker `ul` og `li` tags i dropdownen, valget er basert på denne: | ||
|
|
||
| - https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbbtn | ||
| - https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/../Dropdown.stories. |
Oops, something went wrong.