From 0a2d655c3568e16f153f6d55b23943e95e72e0c1 Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Wed, 15 Jan 2025 11:33:58 +0100
Subject: [PATCH] feat: add rounded and shadow options

---
 .../components/Dropdown/Dropdown.stories.tsx  | 30 +++++++++++++++++
 .../src/components/Dropdown/Dropdown.tsx      | 32 +++++++++++++++++--
 .../Dropdown/styles/dropdown.module.scss      | 17 ++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Dropdown/Dropdown.stories.tsx b/packages/components/src/components/Dropdown/Dropdown.stories.tsx
index 8379ae8224..173852ec21 100644
--- 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
index 4a84a7ae3d..7dae912d90 100644
--- 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,6 +94,8 @@ 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 = (
@@ -93,6 +103,8 @@ 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
index 7c84655ebc..ae8380f10d 100644
--- 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;