diff --git a/.changeset/five-turkeys-confess.md b/.changeset/five-turkeys-confess.md new file mode 100644 index 0000000000..ed65071e7e --- /dev/null +++ b/.changeset/five-turkeys-confess.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": major +--- + +Dropdown: Add `Dropdown.Button` for more explicit API diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx index 8314ae75d5..da664a2762 100644 --- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx +++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx @@ -226,17 +226,25 @@ const TokenList = ({ - setBrand('digdir')}> - Digdir + + setBrand('digdir')}> + Digdir + - setBrand('altinn')}> - Altinn + + setBrand('altinn')}> + Altinn + - setBrand('tilsynet')}> - Tilsynet + + setBrand('tilsynet')}> + Tilsynet + - setBrand('portal')}> - Brreg + + setBrand('portal')}> + Brreg + diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx index c41b84e2f7..bc247c662f 100644 --- a/apps/theme/components/Previews/Components/Components.tsx +++ b/apps/theme/components/Previews/Components/Components.tsx @@ -400,10 +400,18 @@ export const Components = () => { Velg språk - Norsk - Engelsk - Spansk - Fransk + + Norsk + + + Engelsk + + + Spansk + + + Fransk + Velg språk for å endre innholdet på siden diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css index 2d874a0258..f0d1bc7e8c 100644 --- a/packages/css/dropdown.css +++ b/packages/css/dropdown.css @@ -17,7 +17,7 @@ display: none; } - .ds-dropdown__heading { + & > :is(h2, h3, h4, h5, h6) { align-items: center; box-sizing: border-box; color: var(--ds-color-neutral-text-subtle); @@ -29,6 +29,12 @@ padding: var(--dsc-dropdown-item-padding); } + & > ul { + margin: 0; + padding: 0; + list-style: none; + } + & :is(a, button, [role='button']) { justify-content: start; padding: var(--dsc-dropdown-item-padding); @@ -36,10 +42,4 @@ width: 100%; font-weight: var(--ds-font-weight-regular); } - - .ds-dropdown__list { - margin: 0; - padding: 0; - list-style: none; - } } diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/Avatar/Avatar.stories.tsx index 20c8bbb6ae..c430e9d390 100644 --- a/packages/react/src/components/Avatar/Avatar.stories.tsx +++ b/packages/react/src/components/Avatar/Avatar.stories.tsx @@ -96,18 +96,22 @@ export const InDropdown: Story = () => ( - - - ON - - - Ola Nordmann + + + + ON + + + Ola Nordmann + - - - - Sogndal kommune + + + + + Sogndal kommune + diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx index f832cf8dc3..29a1e587f7 100644 --- a/packages/react/src/components/Dropdown/Dropdown.mdx +++ b/packages/react/src/components/Dropdown/Dropdown.mdx @@ -23,7 +23,9 @@ import { Dropdown } from '@digdir/designsystemet-react'; Heading - Item + + Item + @@ -33,7 +35,9 @@ import { Dropdown } from '@digdir/designsystemet-react'; Heading - Item + + Item + ``` diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.tsx b/packages/react/src/components/Dropdown/Dropdown.stories.tsx index 386555b6eb..044a148391 100644 --- a/packages/react/src/components/Dropdown/Dropdown.stories.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.stories.tsx @@ -38,15 +38,23 @@ export const Preview: StoryFn = (args) => { Dropdown - Heading 1 + First heading - Button 1.1 - Button 1.2 + + Button 1.1 + + + Button 1.2 + - Heading 2 + Second heading - Button 2.1 - Button 2.2 + + Button 2.1 + + + Button 2.2 + @@ -64,25 +72,29 @@ export const Icons: StoryFn = (args) => { Dropdown - - - - Github - + + + + + Github + + - - - - Designsystemet.no - + + + + + Designsystemet.no + + @@ -100,25 +112,29 @@ export const Controlled: StoryFn = () => { setOpen(false)}> - - - - Github - + + + + + Github + + - - - - Designsystemet.no - + + + + + Designsystemet.no + + @@ -132,7 +148,9 @@ export const WithoutTrigger: StoryFn = () => { - Item + + Item + diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx index d9c283151c..2b312e4d4c 100644 --- a/packages/react/src/components/Dropdown/Dropdown.test.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.test.tsx @@ -13,7 +13,9 @@ const Comp = (args: Partial) => { Links - Item + + Item + {args.children} @@ -36,7 +38,11 @@ describe('Dropdown', () => { /* We are testing closing and opening in Popover.tests.tsx */ it('should render children', async () => { const { user } = await render({ - children: Item 2, + children: ( + + Item 2 + + ), }); const dropdownTrigger = screen.getByRole('button'); @@ -45,11 +51,13 @@ describe('Dropdown', () => { expect(screen.queryByText('Item 2')).toBeInTheDocument(); }); - it('should be able to render `Dropdown.Item` as a anchor element using asChild', async () => { + it('should be able to render `Dropdown.Button` as a anchor element using asChild', async () => { const { user } = await render({ children: ( - - Anchor + + + Anchor + ), }); diff --git a/packages/react/src/components/Dropdown/DropdownButton.tsx b/packages/react/src/components/Dropdown/DropdownButton.tsx new file mode 100644 index 0000000000..ca6aeb2e1c --- /dev/null +++ b/packages/react/src/components/Dropdown/DropdownButton.tsx @@ -0,0 +1,15 @@ +import { forwardRef } from 'react'; + +import { Button, type ButtonProps } from '../Button/Button'; + +export type DropdownButtonProps = Omit< + ButtonProps, + 'variant' | 'size' | 'color' +>; + +export const DropdownButton = forwardRef< + HTMLButtonElement, + DropdownButtonProps +>(function DropdownButton({ className, ...rest }, ref) { + return