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 => (
|
+
+
|