feat(dropdownmenu): css changes and data attrs (#2387)

part of #2295

Author: Barsnes

.changeset/eleven-peaches-agree.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+dropdownmenu: Style using data attributes

packages/css/dropdownmenu.css

@@ -1,11 +1,6 @@
 .ds-dropdownmenu {
-  --dsc-dropdownmenu-background: var(--ds-color-neutral-background-default);
-  --dsc-dropdownmenu-padding: var(--ds-spacing-2);
-  --dsc-dropdownmenu-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-dropdownmenu-border: 1px solid var(--ds-color-neutral-border-subtle);
-  --dsc-dropdownmenu-min-width: 260px;
-  --dsc-dropdownmenu-shadow: var(--ds-shadow-md);
-  --dsc-dropdownmenu-hr-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
+  --dsc-dropdownmenu-min-width: 16rem;
   --dsc-dropdownmenu-item-padding: 0 var(--ds-spacing-4);
   --dsc-dropdownmenu-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
 
@@ -14,30 +9,21 @@
   z-index: 1500;
   margin: 0;
   list-style: none;
-  border-radius: var(--dsc-dropdownmenu-border-radius);
-  box-shadow: var(--dsc-dropdownmenu-shadow);
-  background-color: var(--dsc-dropdownmenu-background);
-  border: var(--dsc-dropdownmenu-border);
+  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-dropdownmenu-min-width);
-}
-
-.ds-dropdownmenu--sm {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 240px;
-}
 
-.ds-dropdownmenu--md {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 260px;
-}
-
-.ds-dropdownmenu--lg {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 280px;
-}
+  &[data-size='sm'] {
+    --dsc-dropdownmenu-padding: var(--ds-spacing-2);
+    --dsc-dropdownmenu-min-width: 15rem;
+  }
 
-.ds-dropdownmenu > hr {
-  border-color: var(--dsc-dropdownmenu-hr-border-color) !important;
+  &[data-size='lg'] {
+    --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
+    --dsc-dropdownmenu-min-width: 18rem;
+  }
 }
 
 .ds-dropdownmenu__item {
@@ -46,7 +32,7 @@
   width: 100%;
 }
 
-.ds-dropdownmenu__section {
+.ds-dropdownmenu__group {
   margin: 0;
   padding: 0;
   list-style: none;

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

@@ -101,11 +101,8 @@ export const DropdownMenuContent = forwardRef<
                 ref: floatingRef,
                 tabIndex: undefined,
               })}
-              className={cl(
-                'ds-dropdownmenu',
-                `ds-dropdownmenu--${size}`,
-                className,
-              )}
+              className={cl('ds-dropdownmenu', className)}
+              data-size={size}
               {...rest}
             >
               {children}

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

@@ -25,7 +25,7 @@ export const DropdownMenuGroup = forwardRef<
         {...(heading ? { 'aria-labelledby': headingId } : {})}
         ref={ref}
         role='group'
-        className={'ds-dropdownmenu__section'}
+        className={'ds-dropdownmenu__group'}
         {...rest}
       >
         {heading && (