feat(dropdownmenu): streamline API

.changeset/proud-walls-flash.md

@@ -0,0 +1,9 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+DropdownMenu: 
+- Change API and structure
+- Rename `.Root` to `.Context`
+- Rename `.Content` to `DropdownMenu`

apps/storefront/components/Tokens/TokenList/TokenList.tsx

@@ -220,11 +220,11 @@ const TokenList = ({
       {(showThemePicker || showModeSwitcher) && (
         <div className={classes.toggleGroup}>
           {showThemePicker && (
-            <DropdownMenu.Root>
+            <DropdownMenu.Context>
               <DropdownMenu.Trigger variant='secondary'>
                 Brand: {capitalizeString(brand)}
               </DropdownMenu.Trigger>
-              <DropdownMenu.Content>
+              <DropdownMenu>
                 <DropdownMenu.Item onClick={() => setBrand('digdir')}>
                   Digdir
                 </DropdownMenu.Item>
@@ -237,23 +237,23 @@ const TokenList = ({
                 <DropdownMenu.Item onClick={() => setBrand('portal')}>
                   Brreg
                 </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+              </DropdownMenu>
+            </DropdownMenu.Context>
           )}
           {showModeSwitcher && (
-            <DropdownMenu.Root>
+            <DropdownMenu.Context>
               <DropdownMenu.Trigger variant='secondary'>
                 Mode: {capitalizeString(mode)}
               </DropdownMenu.Trigger>
-              <DropdownMenu.Content>
+              <DropdownMenu>
                 <DropdownMenu.Item onClick={() => setMode('light')}>
                   Light
                 </DropdownMenu.Item>
                 <DropdownMenu.Item onClick={() => setMode('dark')}>
                   Dark
                 </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+              </DropdownMenu>
+            </DropdownMenu.Context>
           )}
         </div>
       )}

apps/theme/components/Previews/Components/Components.tsx

@@ -390,18 +390,18 @@ export const Components = () => {
         </Alert>
       </div>
       <div className={cl(classes.card, classes.dropdown)}>
-        <DropdownMenu.Root placement='top'>
+        <DropdownMenu.Context>
           <DropdownMenu.Trigger>Velg språk</DropdownMenu.Trigger>
-          <DropdownMenu.Content>
+          <DropdownMenu placement='top'>
             <DropdownMenu.Item>Norsk</DropdownMenu.Item>
             <DropdownMenu.Item>Engelsk</DropdownMenu.Item>
             <DropdownMenu.Item>Spansk</DropdownMenu.Item>
             <DropdownMenu.Item>Fransk</DropdownMenu.Item>
-          </DropdownMenu.Content>
+          </DropdownMenu>
           <HelpText title='Du har ikke valgt språk'>
             Velg språk for å endre innholdet på siden
           </HelpText>
-        </DropdownMenu.Root>
+        </DropdownMenu.Context>
       </div>
       <div className={cl(classes.card, classes.loaders)}>
         <div className={classes.loadersRest}>

packages/css/dropdownmenu.css

@@ -15,6 +15,10 @@
   border: 1px solid var(--ds-color-neutral-border-subtle);
   min-width: var(--dsc-dropdownmenu-min-width);
 
+  &::before {
+    display: none;
+  }
+
   &[data-size='sm'] {
     --dsc-dropdownmenu-padding: var(--ds-spacing-2);
     --dsc-dropdownmenu-min-width: 15rem;

packages/css/index.css

@@ -12,6 +12,7 @@
 @import url('./utilities.css') layer(ds.utilities);
 @import url('./button.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
+@import url('./popover.css') layer(ds.components);
 @import url('./skiplink.css') layer(ds.components);
 @import url('./accordion.css') layer(ds.components);
 @import url('./switch.css') layer(ds.components);
@@ -32,7 +33,6 @@
 @import url('./divider.css') layer(ds.components);
 @import url('./tabs.css') layer(ds.components);
 @import url('./pagination.css') layer(ds.components);
-@import url('./popover.css') layer(ds.components);
 @import url('./skeleton.css') layer(ds.components);
 @import url('./tag.css') layer(ds.components);
 @import url('./error-summary.css') layer(ds.components);

packages/react/src/components/Avatar/Avatar.stories.tsx

@@ -94,15 +94,16 @@ export const WithImage: Story = () => (
 );
 
 export const InDropdownMenu: Story = () => (
-  <DropdownMenu.Root placement='bottom-end' size='md' portal>
+  <DropdownMenu.Context>
     <DropdownMenu.Trigger variant='tertiary'>
       <Avatar aria-label='Ola Nordmann' size='sm'>
         ON
       </Avatar>
       Velg Profil
     </DropdownMenu.Trigger>
-    <DropdownMenu.Content>
-      <DropdownMenu.Group heading='Alle kontoer'>
+    <DropdownMenu placement='bottom-end' size='md'>
+      <DropdownMenu.Heading>Alle kontoer</DropdownMenu.Heading>
+      <DropdownMenu.List>
         <DropdownMenu.Item>
           <Badge overlap='circle' color='danger' size='sm'>
             <Avatar aria-label='Ola Nordmann' size='xs'>
@@ -117,9 +118,9 @@ export const InDropdownMenu: Story = () => (
           </Avatar>
           Sogndal kommune
         </DropdownMenu.Item>
-      </DropdownMenu.Group>
-    </DropdownMenu.Content>
-  </DropdownMenu.Root>
+      </DropdownMenu.List>
+    </DropdownMenu>
+  </DropdownMenu.Context>
 );
 
 export const AsLink: Story = () => (

packages/react/src/components/DropdownMenu/DropdownMenu.mdx

@@ -6,7 +6,7 @@ import { DropdownMenu } from './';
 
 <Meta of={DropdownMenuStories} />
 
-# Dropdown
+# DropdownMenu
 
 <Primary />
 <Controls />
@@ -16,14 +16,25 @@ import { DropdownMenu } from './';
 ```tsx
 import { DropdownMenu } from '@digdir/designsystemet-react';
 
-<DropdownMenu.Root>
+// med context
+<DropdownMenu.Context>
   <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
-  <DropdownMenu.Content>
-    <DropdownMenu.Group>
+  <DropdownMenu>
+    <DropdownMenu.Heading>Heading</DropdownMenu.Heading>
+    <DropdownMenu.List>
       <DropdownMenu.Item>Item</DropdownMenu.Item>
-    </DropdownMenu.Group>
-  </DropdownMenu.Content>
-</DropdownMenu.Root>;
+    </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>
 ```
 
 ## Eksempler på bruk
@@ -40,19 +51,20 @@ Du kan legge ikon rett inn i `DropdownMenu.Item`, dersom det blir mye mellomrom
 
 <Canvas of={DropdownMenuStories.Icons} />
 
-### I portal
+### Uten Trigger
 
-Legg på `portal` for å rendere `DropdownMenu` i en portal. Dette flytter dropdownen til `body`.
+`DropdownMenu` bruker popover APIet, så du kan bruke `DropdownMenu` uten `DropdownMenu.Trigger`.
+Du må da legge til `popovertarget={id}` på `DropdownMenu`, og `id` på `DropdownMenu`.
 
-<Canvas of={DropdownMenuStories.InPortal} />
+<Canvas of={DropdownMenuStories.WithoutTrigger} />
 
 ## Tilgjengelighet
 
 Det er innebygd tilgjengelighet i `DropdownMenu.Trigger` med `aria-expanded={true/false}` i henhold til åpne/lukket tilstand, og `aria-haspopup='menu'`.
 
-### `DropdownMenu.Group`
+### `DropdownMenu.List`
 
-<ArgTypes of={DropdownMenu.Group} />
+<ArgTypes of={DropdownMenu.List} />
 
 ### `DropdownMenu.Trigger`
 

packages/react/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -3,30 +3,31 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { DropdownMenu } from '.';
-
-const marginDecorator = (Story: StoryFn) => (
-  <div style={{ margin: '20rem', marginTop: '0' }}>
-    <Story />
-  </div>
-);
+import { Button } from '../Button';
 
 export default {
   title: 'Komponenter/DropdownMenu',
-  component: DropdownMenu.Root,
+  component: DropdownMenu,
 } as Meta;
 
-export const Preview: StoryFn<typeof DropdownMenu.Root> = (args) => {
+export const Preview: StoryFn<typeof DropdownMenu> = (args) => {
   return (
     <>
-      <DropdownMenu.Root {...args}>
+      <DropdownMenu.Context>
         <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Group heading='Heading'>
-            <DropdownMenu.Item>Button 1</DropdownMenu.Item>
-            <DropdownMenu.Item>Button 2</DropdownMenu.Item>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+        <DropdownMenu {...args}>
+          <DropdownMenu.Heading>Heading 1</DropdownMenu.Heading>
+          <DropdownMenu.List>
+            <DropdownMenu.Item>Button 1.1</DropdownMenu.Item>
+            <DropdownMenu.Item>Button 1.2</DropdownMenu.Item>
+          </DropdownMenu.List>
+          <DropdownMenu.Heading>Heading 2</DropdownMenu.Heading>
+          <DropdownMenu.List>
+            <DropdownMenu.Item>Button 2.1</DropdownMenu.Item>
+            <DropdownMenu.Item>Button 2.2</DropdownMenu.Item>
+          </DropdownMenu.List>
+        </DropdownMenu>
+      </DropdownMenu.Context>
     </>
   );
 };
@@ -36,48 +37,12 @@ Preview.args = {
   size: 'md',
 };
 
-Preview.decorators = [marginDecorator];
-
-export const Icons: StoryFn<typeof DropdownMenu.Root> = () => {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Group>
-          <DropdownMenu.Item asChild>
-            <a
-              href='https://github.com/digdir/designsystemet'
-              target='_blank'
-              rel='noreferrer'
-            >
-              <LinkIcon fontSize='1.5rem' />
-              Github
-            </a>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item asChild>
-            <a
-              href='https://designsystemet.no'
-              target='_blank'
-              rel='noreferrer'
-            >
-              <LinkIcon fontSize='1.5rem' />
-              Designsystemet.no
-            </a>
-          </DropdownMenu.Item>
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-};
-
-Icons.decorators = [marginDecorator];
-
-export const InPortal: StoryFn<typeof DropdownMenu> = () => {
+export const Icons: StoryFn<typeof DropdownMenu> = (args) => {
   return (
-    <DropdownMenu.Root portal>
+    <DropdownMenu.Context>
       <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Group>
+      <DropdownMenu {...args}>
+        <DropdownMenu.List>
           <DropdownMenu.Item asChild>
             <a
               href='https://github.com/digdir/designsystemet'
@@ -98,9 +63,9 @@ export const InPortal: StoryFn<typeof DropdownMenu> = () => {
               Designsystemet.no
             </a>
           </DropdownMenu.Item>
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+        </DropdownMenu.List>
+      </DropdownMenu>
+    </DropdownMenu.Context>
   );
 };
 
@@ -109,12 +74,12 @@ export const Controlled: StoryFn<typeof DropdownMenu> = () => {
 
   return (
     <>
-      <DropdownMenu.Root open={open} onClose={() => setOpen(false)} portal>
+      <DropdownMenu.Context>
         <DropdownMenu.Trigger onClick={() => setOpen(!open)}>
           Dropdown
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Group>
+        <DropdownMenu open={open} onClose={() => setOpen(false)}>
+          <DropdownMenu.List>
             <DropdownMenu.Item asChild>
               <a
                 href='https://github.com/digdir/designsystemet'
@@ -135,9 +100,22 @@ export const Controlled: StoryFn<typeof DropdownMenu> = () => {
                 Designsystemet.no
               </a>
             </DropdownMenu.Item>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+          </DropdownMenu.List>
+        </DropdownMenu>
+      </DropdownMenu.Context>
+    </>
+  );
+};
+
+export const WithoutTrigger: StoryFn<typeof DropdownMenu> = () => {
+  return (
+    <>
+      <Button popovertarget='dropdown'>Dropdown</Button>
+      <DropdownMenu id='dropdown'>
+        <DropdownMenu.List>
+          <DropdownMenu.Item>Item</DropdownMenu.Item>
+        </DropdownMenu.List>
+      </DropdownMenu>
     </>
   );
 };