feat: add rounded and shadow options

Frontify · Jan 15, 2025 · 0a2d655 · 0a2d655
1 parent c9459b0
commit 0a2d655
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 2 deletions.
diff --git a/packages/components/src/components/Dropdown/Dropdown.stories.tsx b/packages/components/src/components/Dropdown/Dropdown.stories.tsx
@@ -63,6 +63,36 @@ export const Default: Story = {
     ),
 };
 
+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
@@ -65,8 +65,16 @@ 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';
     /**
      * The vertical padding around each dropdown item.
      * @default "comfortable"
@@ -86,13 +94,17 @@ 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',
         children,
         preventTriggerFocusOnClose,
         'data-test-id': dataTestId = 'fondue-dropdown-content',
@@ -109,6 +121,8 @@ export const DropdownContent = (
                 className={styles.content}
                 data-padding={padding}
                 data-test-id={dataTestId}
+                data-rounded={rounded}
+                data-shadow={shadow}
                 ref={ref}
                 onCloseAutoFocus={(event) => {
                     if (preventTriggerFocusOnClose) {
@@ -164,6 +178,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 +200,8 @@ export type DropdownSubContentProps = {
 export const DropdownSubContent = (
     {
         padding = 'comfortable',
+        rounded = 'medium',
+        shadow = 'medium',
         children,
         'data-test-id': dataTestId = 'fondue-dropdown-subcontent',
     }: DropdownSubContentProps,
@@ -186,6 +212,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,6 +30,22 @@
         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;