diff --git a/.changeset/silver-glasses-sing.md b/.changeset/silver-glasses-sing.md
new file mode 100644
index 0000000000..e3c5a8c1d6
--- /dev/null
+++ 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
index 8379ae8224..a691b2b727 100644
--- 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 }) => (
+
+
+
+
+
+ {}}>Item 1
+ {}}>Item 2
+ {}}>Item 3
+
+
+ ),
+};
+
+export const RoundedLarge: Story = {
+ render: ({ ...args }) => (
+
+
+
+
+
+ {}}>Item 1
+ {}}>Item 2
+ {}}>Item 3
+
+
+ ),
+};
+
+export const ShadowLarge: Story = {
+ render: ({ ...args }) => (
+
+
+
+
+
+ {}}>Item 1
+ {}}>Item 2
+ {}}>Item 3
+
+
+ ),
+};
+
export const LinkItems: Story = {
render: ({ ...args }) => (
diff --git a/packages/components/src/components/Dropdown/Dropdown.tsx b/packages/components/src/components/Dropdown/Dropdown.tsx
index 4a84a7ae3d..ca834c16d5 100644
--- 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,6 +104,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 +113,10 @@ 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,6 +126,12 @@ export const DropdownContent = (
return (
{
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 = (
diff --git a/packages/components/src/components/Dropdown/styles/dropdown.module.scss b/packages/components/src/components/Dropdown/styles/dropdown.module.scss
index 7c84655ebc..6022f7a469 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,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);
}
}