feat: add option for select trigger to be full width [LW-9231]

Author: DominikGuzei

src/design-system/select/select-root.component.css.ts

@@ -117,3 +117,7 @@ export const content = styleVariants({
     },
   ],
 });
+
+export const triggerFullWidth = sx({
+  width: '$fill',
+});

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 `<Select.Content />`.
  */
@@ -71,6 +74,7 @@ export const Root = ({
   showArrow = false,
   value,
   variant = 'plain',
+  triggerFullWidth,
   triggerTestId,
   zIndex,
 }: Readonly<SelectRootProps>): JSX.Element => {
@@ -87,7 +91,10 @@ export const Root = ({
       onValueChange={onChange}
     >
       <Select.Trigger
-        className={cx.trigger[variant]}
+        className={cn(
+          cx.trigger[variant],
+          triggerFullWidth ? cx.triggerFullWidth : null,
+        )}
         id={id}
         data-testid={triggerTestId}
       >

src/design-system/select/select.stories.tsx

@@ -77,6 +77,43 @@ const SelectAlignment = (): JSX.Element => (
   </Section>
 );
 
+const SelectTriggerWidth = (): JSX.Element => (
+  <Section
+    title="Trigger Width"
+    subtitle="The trigger element acts like an inline element (default) or can be set to span the full width of its parent element."
+  >
+    <Variants.Table
+      headers={[
+        'Trigger as inline element (default)',
+        'Trigger with full width',
+      ]}
+    >
+      <Variants.Row>
+        {[undefined, true].map(triggerFullWidth => (
+          <Variants.Cell key={`triggerFullWidth-${triggerFullWidth}`}>
+            <Select.Root
+              triggerFullWidth={triggerFullWidth}
+              variant="outline"
+              value={options[2].value}
+              onChange={(): void => void 0}
+              placeholder={placeholder}
+              showArrow
+            >
+              {options.map(option => (
+                <Select.Item
+                  key={option.value}
+                  value={option.value}
+                  title={option.label}
+                />
+              ))}
+            </Select.Root>
+          </Variants.Cell>
+        ))}
+      </Variants.Row>
+    </Variants.Table>
+  </Section>
+);
+
 const SelectVariants = (): JSX.Element => {
   const { darkThemePortalContainer, lightThemePortalContainer } =
     usePortalContainer();
@@ -280,6 +317,8 @@ export const Overview = (): JSX.Element => (
     <Cell>
       <SelectAlignment />
       <Divider my="$64" />
+      <SelectTriggerWidth />
+      <Divider my="$64" />
       <SelectVariants />
       <Divider my="$64" />
       <SelectRootVariants />