feat(Dropdown): enforce new compact spacings (#2168)

Frontify · Jan 21, 2025 · 57d7a63 · 57d7a63
1 parent 2cacc39
commit 57d7a63
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 54 deletions.
diff --git a/.changeset/wild-carrots-fix.md b/.changeset/wild-carrots-fix.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+feat(Dropdown): enforce compact paddings
diff --git a/packages/components/src/components/Dropdown/Dropdown.stories.tsx b/packages/components/src/components/Dropdown/Dropdown.stories.tsx
@@ -369,27 +369,6 @@ export const RightSide: Story = {
     ),
 };
 
-export const CompactPadding: Story = {
-    render: ({ ...args }) => (
-        <Dropdown.Root {...args}>
-            <Dropdown.Trigger>
-                <Button>Trigger</Button>
-            </Dropdown.Trigger>
-            <Dropdown.Content padding="compact" side="right">
-                <Dropdown.Item onSelect={() => {}}>
-                    <p>Item 1</p>
-                    <p>Item 1 description</p>
-                </Dropdown.Item>
-                <Dropdown.Item onSelect={() => {}}>
-                    <p>Item 2</p>
-                    <p>Item 2 description</p>
-                </Dropdown.Item>
-                <Dropdown.Item onSelect={() => {}}>Item 3</Dropdown.Item>
-            </Dropdown.Content>
-        </Dropdown.Root>
-    ),
-};
-
 export const WithTooltip: Story = {
     render: ({ ...args }) => (
         <Dropdown.Root {...args}>

diff --git a/packages/components/src/components/Dropdown/Dropdown.tsx b/packages/components/src/components/Dropdown/Dropdown.tsx
@@ -67,11 +67,6 @@ DropdownTrigger.displayName = 'Dropdown.Trigger';
 export type DropdownContentProps = {
     children?: ReactNode;
     'data-test-id'?: string;
-    /**
-     * The vertical padding around each dropdown item.
-     * @default "comfortable"
-     */
-    padding?: 'comfortable' | 'compact';
     /**
      * Defines the alignment of the dropdown.
      * @default "start"
@@ -91,7 +86,6 @@ export type DropdownContentProps = {
 export const DropdownContent = (
     {
         side = 'bottom',
-        padding = 'comfortable',
         align = 'start',
         children,
         preventTriggerFocusOnClose,
@@ -107,7 +101,6 @@ export const DropdownContent = (
                 sideOffset={8}
                 side={side}
                 className={styles.content}
-                data-padding={padding}
                 data-test-id={dataTestId}
                 ref={ref}
                 onCloseAutoFocus={(event) => {
@@ -164,31 +157,17 @@ export const DropdownSubTrigger = (
 DropdownSubTrigger.displayName = 'Dropdown.SubTrigger';
 
 export type DropdownSubContentProps = {
-    /**
-     * The vertical padding around each dropdown item.
-     * @default "comfortable"
-     */
-    padding?: 'comfortable' | 'compact';
     children: ReactNode;
     'data-test-id'?: string;
 };
 
 export const DropdownSubContent = (
-    {
-        padding = 'comfortable',
-        children,
-        'data-test-id': dataTestId = 'fondue-dropdown-subcontent',
-    }: DropdownSubContentProps,
+    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,
     ref: ForwardedRef<HTMLDivElement>,
 ) => {
     return (
         <RadixDropdown.Portal>
-            <RadixDropdown.SubContent
-                className={styles.subContent}
-                data-padding={padding}
-                data-test-id={dataTestId}
-                ref={ref}
-            >
+            <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>
                 {children}
             </RadixDropdown.SubContent>
         </RadixDropdown.Portal>

diff --git a/packages/components/src/components/Dropdown/styles/dropdown.module.scss b/packages/components/src/components/Dropdown/styles/dropdown.module.scss
@@ -21,14 +21,9 @@
         border-color: var(--line-color-x-strong);
     }
 
-    &[data-padding='compact'] .item,
-    &[data-padding='compact'] .subTrigger {
-        padding: sizeToken(2) sizeToken(5);
-    }
-
-    &[data-padding='comfortable'] .item,
-    &[data-padding='comfortable'] .subTrigger {
-        padding: sizeToken(3) sizeToken(5);
+    .item,
+    .subTrigger {
+        padding: sizeToken(2) sizeToken(3);
     }
 
     @include sm {
@@ -47,8 +42,8 @@
     @include transition-colors;
     display: flex;
     align-items: center;
-    gap: sizeToken(1.5);
-    margin: sizeToken(1);
+    gap: sizeToken(1);
+    margin: sizeToken(0.5) sizeToken(2);
     border-radius: sizeToken(1);
     cursor: pointer;
     text-align: start;
@@ -57,6 +52,14 @@
     color: var(--text-color-weak);
     outline-style: none;
 
+    &:first-child {
+        margin-top: sizeToken(2);
+    }
+
+    &:last-child {
+        margin-bottom: sizeToken(2);
+    }
+
     &[data-state='open'] {
         background-color: var(--box-neutral-color);
         color: var(--text-color);