feat(Dropdown): add radius, shadow, and width control (#2161)

Frontify · Jan 15, 2025 · 2736fe4 · 2736fe4
1 parent 8799fa8
commit 2736fe4
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 5 deletions.
diff --git a/.changeset/silver-glasses-sing.md b/.changeset/silver-glasses-sing.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+feat(`Dropdown`): add shadow and rounded option
diff --git a/packages/components/src/components/Dropdown/Dropdown.stories.tsx b/packages/components/src/components/Dropdown/Dropdown.stories.tsx
@@ -63,6 +63,51 @@ export const Default: Story = {
     ),
 };
 
+export const CustomWidth: Story = {
+    render: ({ ...args }) => (
+        <Dropdown.Root {...args}>
+            <Dropdown.Trigger>
+                <Button>Trigger</Button>
+            </Dropdown.Trigger>
+            <Dropdown.Content maxWidth="800px" minWidth="500px">
+                <Dropdown.Item onSelect={() => {}}>Item 1</Dropdown.Item>
+                <Dropdown.Item onSelect={() => {}}>Item 2</Dropdown.Item>
+                <Dropdown.Item onSelect={() => {}}>Item 3</Dropdown.Item>
+            </Dropdown.Content>
+        </Dropdown.Root>
+    ),
+};
+
+export const RoundedLarge: Story = {
+    render: ({ ...args }) => (
+        <Dropdown.Root {...args}>
+            <Dropdown.Trigger>
+                <Button>Trigger</Button>
+            </Dropdown.Trigger>
+            <Dropdown.Content rounded="large">
+                <Dropdown.Item onSelect={() => {}}>Item 1</Dropdown.Item>
+                <Dropdown.Item onSelect={() => {}}>Item 2</Dropdown.Item>
+                <Dropdown.Item onSelect={() => {}}>Item 3</Dropdown.Item>
+            </Dropdown.Content>
+        </Dropdown.Root>
+    ),
+};
+
+export const ShadowLarge: Story = {
+    render: ({ ...args }) => (
+        <Dropdown.Root {...args}>
+            <Dropdown.Trigger>
+                <Button>Trigger</Button>
+            </Dropdown.Trigger>
+            <Dropdown.Content shadow="large">
+                <Dropdown.Item onSelect={() => {}}>Item 1</Dropdown.Item>
+                <Dropdown.Item onSelect={() => {}}>Item 2</Dropdown.Item>
+                <Dropdown.Item onSelect={() => {}}>Item 3</Dropdown.Item>
+            </Dropdown.Content>
+        </Dropdown.Root>
+    ),
+};
+
 export const LinkItems: Story = {
     render: ({ ...args }) => (
         <Dropdown.Root {...args}>

diff --git a/packages/components/src/components/Dropdown/Dropdown.tsx b/packages/components/src/components/Dropdown/Dropdown.tsx
@@ -3,7 +3,7 @@
 import { IconCaretRight } from '@frontify/fondue-icons';
 import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, type ForwardedRef, type ReactNode } from 'react';
+import { type CSSProperties, forwardRef, type ForwardedRef, type ReactNode } from 'react';
 
 import { useProcessedChildren } from './hooks/useProcessedChildren';
 import styles from './styles/dropdown.module.scss';
@@ -65,8 +65,26 @@ export const DropdownTrigger = (
 DropdownTrigger.displayName = 'Dropdown.Trigger';
 
 export type DropdownContentProps = {
-    children?: ReactNode;
-    'data-test-id'?: string;
+    /**
+     * Add a shadow to the flyout
+     * @default "medium"
+     */
+    shadow?: 'none' | 'medium' | 'large';
+    /**
+     * Add rounded corners to the flyout
+     * @default "medium"
+     */
+    rounded?: 'none' | 'medium' | 'large';
+    /**
+     * Define a minimum width for the dropdown
+     * @default "250px"
+     */
+    minWidth?: string;
+    /**
+     * Define a maximum width for the dropdown
+     * @default "350px"
+     */
+    maxWidth?: string;
     /**
      * The vertical padding around each dropdown item.
      * @default "comfortable"
@@ -86,13 +104,19 @@ export type DropdownContentProps = {
      * Prevents the focus from being set on the trigger when the dropdown is closed.
      */
     preventTriggerFocusOnClose?: boolean;
+    children?: ReactNode;
+    'data-test-id'?: string;
 };
 
 export const DropdownContent = (
     {
         side = 'bottom',
         padding = 'comfortable',
         align = 'start',
+        rounded = 'medium',
+        shadow = 'medium',
+        minWidth = '250px',
+        maxWidth = '350px',
         children,
         preventTriggerFocusOnClose,
         'data-test-id': dataTestId = 'fondue-dropdown-content',
@@ -102,13 +126,21 @@ export const DropdownContent = (
     return (
         <RadixDropdown.Portal>
             <RadixDropdown.Content
+                style={
+                    {
+                        '--dropdown-max-width': maxWidth,
+                        '--dropdown-min-width': minWidth,
+                    } as CSSProperties
+                }
                 align={align}
                 collisionPadding={8}
                 sideOffset={8}
                 side={side}
                 className={styles.content}
                 data-padding={padding}
                 data-test-id={dataTestId}
+                data-rounded={rounded}
+                data-shadow={shadow}
                 ref={ref}
                 onCloseAutoFocus={(event) => {
                     if (preventTriggerFocusOnClose) {
@@ -164,6 +196,16 @@ export const DropdownSubTrigger = (
 DropdownSubTrigger.displayName = 'Dropdown.SubTrigger';
 
 export type DropdownSubContentProps = {
+    /**
+     * Add a shadow to the flyout
+     * @default "medium"
+     */
+    shadow?: 'none' | 'medium' | 'large';
+    /**
+     * Add rounded corners to the flyout
+     * @default "medium"
+     */
+    rounded?: 'none' | 'medium' | 'large';
     /**
      * The vertical padding around each dropdown item.
      * @default "comfortable"
@@ -176,6 +218,8 @@ export type DropdownSubContentProps = {
 export const DropdownSubContent = (
     {
         padding = 'comfortable',
+        rounded = 'medium',
+        shadow = 'medium',
         children,
         'data-test-id': dataTestId = 'fondue-dropdown-subcontent',
     }: DropdownSubContentProps,
@@ -186,6 +230,8 @@ export const DropdownSubContent = (
             <RadixDropdown.SubContent
                 className={styles.subContent}
                 data-padding={padding}
+                data-rounded={rounded}
+                data-shadow={shadow}
                 data-test-id={dataTestId}
                 ref={ref}
             >

diff --git a/packages/components/src/components/Dropdown/styles/dropdown.module.scss b/packages/components/src/components/Dropdown/styles/dropdown.module.scss
@@ -3,6 +3,7 @@
 @import '../../../utilities/sizeToken.module.scss';
 @import '../../../utilities/transitions.module.scss';
 @import '../../../utilities/mediaQuery.module.scss';
+@import '../../../utilities/shadow.module.scss';
 
 .content,
 .subContent {
@@ -29,10 +30,26 @@
         padding: sizeToken(3) sizeToken(5);
     }
 
+    &[data-rounded='medium'] {
+        border-radius: var(--radius);
+    }
+
+    &[data-rounded='large'] {
+        border-radius: var(--radius-large);
+    }
+
+    &[data-shadow='medium'] {
+        @include shadow-md;
+    }
+
+    &[data-shadow='large'] {
+        @include shadow-lg;
+    }
+
     @include sm {
         width: auto;
-        min-width: 250px;
-        max-width: 350px;
+        min-width: var(--dropdown-min-width);
+        max-width: var(--dropdown-max-width);
     }
 }