refactor(DropdownMenu): ♻️ Move styling to dropdownmenu.css

packages/react/src/components/DropdownMenu/DropdownMenu.module.css → packages/css/dropdownmenu.css

@@ -1,5 +1,5 @@
 @layer fds.dropdownmenu {
-  .dropdown {
+  .fds-dropdown {
     position: relative;
     padding: var(--fds-spacing-2);
     z-index: 1500;
@@ -10,22 +10,37 @@
     background-color: var(--fds-semantic-background-default);
   }
 
-  .dropdown.small {
+  .fds-dropdown--small {
     min-width: 240px;
     padding: var(--fds-spacing-2);
   }
 
-  .dropdown.medium {
+  .fds-dropdown--medium {
     min-width: 260px;
     padding: var(--fds-spacing-3) var(--fds-spacing-2);
   }
 
-  .dropdown.large {
+  .fds-dropdown--large {
     min-width: 280px;
     padding: var(--fds-spacing-4) var(--fds-spacing-2);
   }
 
-  .dropdown > hr {
+  .fds-dropdown > hr {
     border-color: var(--fds-semantic-border-divider-subtle) !important;
   }
+
+  .fds-dropdown__item {
+    justify-content: start;
+    padding: 0 var(--fds-spacing-4);
+  }
+
+  .fds-dropdown__section {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .fds-dropdown__heading {
+    padding: var(--fds-spacing-2) var(--fds-spacing-4);
+  }
 }

packages/css/index.css

@@ -27,4 +27,5 @@
 @import url('./card.css');
 @import url('./link.css');
 @import url('./fieldset.css');
+@import url('./dropdownmenu.css');
 @import url('./divider.css');

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

@@ -14,11 +14,10 @@ import {
   FloatingFocusManager,
   FloatingPortal,
 } from '@floating-ui/react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { useIsomorphicLayoutEffect } from '../../hooks';
 
-import classes from './DropdownMenu.module.css';
 import { DropdownMenuContext } from './DropdownMenu';
 
 const GAP = 4;
@@ -106,7 +105,7 @@ export const DropdownMenuContent = forwardRef<
                 ref: floatingRef,
                 tabIndex: undefined,
               })}
-              className={cl(classes.dropdown, classes[size], className)}
+              className={cl('fds-dropdown', `fds-dropdown${size}`, className)}
               {...rest}
             >
               {children}

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

@@ -1,11 +1,9 @@
 import { forwardRef, useContext, useId } from 'react';
 import type * as React from 'react';
-import cl from 'clsx';
 
-import { Paragraph } from '../../Typography';
-import { DropdownMenuContext } from '../DropdownMenu';
+import { Paragraph } from '../Typography';
 
-import classes from './DropdownMenuGroup.module.css';
+import { DropdownMenuContext } from './DropdownMenu';
 
 export type DropdownMenuGroupProps = {
   /**
@@ -30,7 +28,7 @@ export const DropdownMenuGroup = forwardRef<
         {...(heading ? { 'aria-labelledby': headingId } : {})}
         ref={ref}
         role='group'
-        className={classes.section}
+        className={'fds-dropdown__section'}
         {...rest}
       >
         {heading && (
@@ -40,7 +38,7 @@ export const DropdownMenuGroup = forwardRef<
           >
             <h2
               id={headingId}
-              className={cl(classes.heading)}
+              className={'fds-dropdown__heading'}
             >
               {heading}
             </h2>

packages/react/src/components/DropdownMenu/DropdownMenuItem/DropdownMenuItem.tsx → packages/react/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -1,10 +1,9 @@
 import { forwardRef, useContext } from 'react';
 
-import type { ButtonProps } from '../../Button';
-import { Button } from '../../Button';
-import { DropdownMenuContext } from '../DropdownMenu';
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
 
-import classes from './DropdownMenuItem.module.css';
+import { DropdownMenuContext } from './DropdownMenu';
 
 export type DropdownMenuItemProps = Omit<
   ButtonProps,
@@ -27,7 +26,7 @@ export const DropdownMenuItem = forwardRef<
         variant='tertiary'
         size={menu.size}
         fullWidth
-        className={classes.item}
+        className='fds-dropdown__item'
         role='menuitem'
         {...rest}
       >

packages/react/src/components/DropdownMenu/index.ts

@@ -1,6 +1,6 @@
 import { DropdownMenu as DropdownRoot } from './DropdownMenu';
-import { DropdownMenuGroup } from './DropdownMenuGroup/DropdownMenuGroup';
-import { DropdownMenuItem } from './DropdownMenuItem/DropdownMenuItem';
+import { DropdownMenuGroup } from './DropdownMenuGroup';
+import { DropdownMenuItem } from './DropdownMenuItem';
 import { DropdownMenuTrigger } from './DropdownMenuTrigger';
 import { DropdownMenuContent } from './DropdownMenuContent';
 
@@ -24,8 +24,8 @@ DropdownMenu.Item.displayName = 'DropdownMenu.Item';
 DropdownMenu.Trigger.displayName = 'DropdownMenu.Trigger';
 
 export type { DropdownMenuProps } from './DropdownMenu';
-export type { DropdownMenuGroupProps } from './DropdownMenuGroup/DropdownMenuGroup';
-export type { DropdownMenuItemProps } from './DropdownMenuItem/DropdownMenuItem';
+export type { DropdownMenuGroupProps } from './DropdownMenuGroup';
+export type { DropdownMenuItemProps } from './DropdownMenuItem';
 export type { DropdownMenuContentProps } from './DropdownMenuContent';
 export {
   DropdownMenu,