feat: add width controls

Frontify · Jan 15, 2025 · 377e98a · 377e98a
1 parent c8622cc
commit 377e98a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/packages/components/src/components/Dropdown/Dropdown.stories.tsx b/packages/components/src/components/Dropdown/Dropdown.stories.tsx
@@ -63,6 +63,21 @@ 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}>

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';
@@ -75,6 +75,16 @@ export type DropdownContentProps = {
      * @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"
@@ -105,6 +115,8 @@ export const DropdownContent = (
         align = 'start',
         rounded = 'medium',
         shadow = 'medium',
+        minWidth = '250px',
+        maxWidth = '350px',
         children,
         preventTriggerFocusOnClose,
         'data-test-id': dataTestId = 'fondue-dropdown-content',
@@ -114,6 +126,12 @@ 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}

diff --git a/packages/components/src/components/Dropdown/styles/dropdown.module.scss b/packages/components/src/components/Dropdown/styles/dropdown.module.scss
@@ -48,8 +48,8 @@
 
     @include sm {
         width: auto;
-        min-width: 250px;
-        max-width: 350px;
+        min-width: var(--dropdown-min-width);
+        max-width: var(--dropdown-max-width);
     }
 }