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); } }