diff --git a/src/design-system/select/select-root.component.css.ts b/src/design-system/select/select-root.component.css.ts index 9d49e09..50051a1 100644 --- a/src/design-system/select/select-root.component.css.ts +++ b/src/design-system/select/select-root.component.css.ts @@ -117,3 +117,7 @@ export const content = styleVariants({ }, ], }); + +export const triggerFullWidth = sx({ + width: '$fill', +}); diff --git a/src/design-system/select/select-root.component.tsx b/src/design-system/select/select-root.component.tsx index 35374a8..49fef8c 100644 --- a/src/design-system/select/select-root.component.tsx +++ b/src/design-system/select/select-root.component.tsx @@ -3,6 +3,7 @@ import React from 'react'; import ChevronDownIcon from '@icons/ChevronDownComponent'; import * as Select from '@radix-ui/react-select'; +import cn from 'classnames'; import { Item, ItemRoot } from './select-item'; import * as cx from './select-root.component.css'; @@ -24,6 +25,7 @@ export type SelectRootProps = Pick< value: string | undefined; variant?: SelectVariant; portalContainer?: HTMLElement; + triggerFullWidth?: boolean; triggerTestId?: string; zIndex?: number; }; @@ -54,6 +56,7 @@ const isValidSelectRootChild = ( * @param showArrow Render arrow icon next to the input value, when the Select is closed. * @param value See: https://www.radix-ui.com/primitives/docs/components/select#root * @param variant The style variant. + * @param triggerFullWidth Make the Select trigger element span the full width of its parent element * @param triggerTestId The `data-testid` attribute, passed to the input trigger / root element. * @param zIndex The `z-index` applied to the ``. */ @@ -71,6 +74,7 @@ export const Root = ({ showArrow = false, value, variant = 'plain', + triggerFullWidth, triggerTestId, zIndex, }: Readonly): JSX.Element => { @@ -87,7 +91,10 @@ export const Root = ({ onValueChange={onChange} > diff --git a/src/design-system/select/select.stories.tsx b/src/design-system/select/select.stories.tsx index 23294d8..b7a5e57 100644 --- a/src/design-system/select/select.stories.tsx +++ b/src/design-system/select/select.stories.tsx @@ -77,6 +77,43 @@ const SelectAlignment = (): JSX.Element => ( ); +const SelectTriggerWidth = (): JSX.Element => ( +
+ + + {[undefined, true].map(triggerFullWidth => ( + + void 0} + placeholder={placeholder} + showArrow + > + {options.map(option => ( + + ))} + + + ))} + + +
+); + const SelectVariants = (): JSX.Element => { const { darkThemePortalContainer, lightThemePortalContainer } = usePortalContainer(); @@ -280,6 +317,8 @@ export const Overview = (): JSX.Element => ( + +