Add isFullWidth option to form fields

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -161,7 +161,7 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isOptional" | "name"
+  "errorMessage" | "hint" | "id" | "isOptional" | "name" | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -177,6 +177,7 @@ const Autocomplete = <
   inputValue,
   isCustomValueAllowed,
   isDisabled,
+  isFullWidth = false,
   isLoading,
   isOptional = false,
   isReadOnly,
@@ -309,6 +310,7 @@ const Autocomplete = <
       freeSolo={isCustomValueAllowed}
       filterSelectedOptions={true}
       id={idOverride}
+      fullWidth={isFullWidth}
       loading={isLoading}
       multiple={hasMultipleChoices}
       onBlur={onBlur}

packages/odyssey-react-mui/src/Field.tsx

@@ -59,6 +59,10 @@ export type FieldProps = {
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * If `true`, the component can stretch to fill the width of the container.
+   */
+  isFullWidth?: boolean;
   /**
    * If `true`, the `input` element is not required.
    */
@@ -96,6 +100,7 @@ const Field = ({
   hint,
   id: idOverride,
   isDisabled: isDisabledProp = false,
+  isFullWidth = false,
   isRadioGroup = false,
   isOptional = false,
   label,
@@ -126,6 +131,7 @@ const Field = ({
       disabled={isDisabled}
       error={Boolean(errorMessage)}
       role={isRadioGroup ? "radiogroup" : undefined}
+      fullWidth={isFullWidth}
     >
       {fieldType === "group" ? (
         <MuiFormLabel component="legend">

packages/odyssey-react-mui/src/FieldComponentProps.ts

@@ -27,6 +27,10 @@ export type FieldComponentProps = {
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * If `true`, the component can stretch to fill the width of the container.
+   */
+  isFullWidth?: boolean;
   /**
    * If `true`, the `input` element is not required.
    */

packages/odyssey-react-mui/src/NativeSelect.tsx

@@ -81,7 +81,7 @@ export type NativeSelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional"
+  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -97,6 +97,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isMultiSelect,
       isOptional = false,
       label,
@@ -179,6 +180,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

packages/odyssey-react-mui/src/PasswordField.tsx

@@ -84,6 +84,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isOptional = false,
       hasShowPassword = true,
       isReadOnly,
@@ -199,6 +200,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

packages/odyssey-react-mui/src/SearchField.tsx

@@ -78,7 +78,7 @@ export type SearchFieldProps = {
    * The value of the `input` element, to use when controlled.
    */
   value?: string;
-} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+} & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
   SeleniumProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
@@ -89,6 +89,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       hasInitialFocus,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       label,
       name: nameOverride,
       onChange: onChangeProp,
@@ -186,6 +187,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         hasVisibleLabel={false}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={true}
         label={label}
         renderFieldComponent={renderFieldComponent}

packages/odyssey-react-mui/src/Select.tsx

@@ -84,7 +84,13 @@ export type SelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "name"
+  | "errorMessage"
+  | "hint"
+  | "id"
+  | "isDisabled"
+  | "isOptional"
+  | "name"
+  | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -114,6 +120,7 @@ const Select = <
   hint,
   id: idOverride,
   isDisabled = false,
+  isFullWidth = false,
   isMultiSelect,
   isOptional = false,
   label,
@@ -282,6 +289,7 @@ const Select = <
       hint={hint}
       id={idOverride}
       isDisabled={isDisabled}
+      isFullWidth={isFullWidth}
       isOptional={isOptional}
       label={label}
       renderFieldComponent={renderFieldComponent}

packages/odyssey-react-mui/src/TextField.tsx

@@ -104,6 +104,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isMultiline = false,
       isOptional = false,
       isReadOnly,
@@ -205,6 +206,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx

@@ -74,6 +74,7 @@ const storybookMeta: Meta<typeof Autocomplete> = {
       },
     },
     isDisabled: fieldComponentPropsMetaData.isDisabled,
+    isFullWidth: fieldComponentPropsMetaData.isFullWidth,
     isLoading: {
       control: "boolean",
       description: "Displays a loading indicator",

packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.stories.tsx

@@ -46,6 +46,7 @@ const storybookMeta: Meta<typeof NativeSelect> = {
     hint: fieldComponentPropsMetaData.hint,
     id: fieldComponentPropsMetaData.id,
     isDisabled: fieldComponentPropsMetaData.isDisabled,
+    isFullWidth: fieldComponentPropsMetaData.isFullWidth,
     isMultiSelect: {
       control: "boolean",
       description:

packages/odyssey-storybook/src/components/odyssey-mui/PasswordField/PasswordField.stories.tsx

@@ -74,6 +74,7 @@ const storybookMeta: Meta<typeof PasswordField> = {
     hint: fieldComponentPropsMetaData.hint,
     id: fieldComponentPropsMetaData.id,
     isDisabled: fieldComponentPropsMetaData.isDisabled,
+    isFullWidth: fieldComponentPropsMetaData.isFullWidth,
     isOptional: fieldComponentPropsMetaData.isOptional,
     isReadOnly: fieldComponentPropsMetaData.isReadOnly,
     label: {

packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.stories.tsx

@@ -57,6 +57,7 @@ const storybookMeta: Meta<typeof SearchField> = {
       },
     },
     isDisabled: fieldComponentPropsMetaData.isDisabled,
+    isFullWidth: fieldComponentPropsMetaData.isFullWidth,
     id: fieldComponentPropsMetaData.id,
     label: {
       control: "text",

packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx

@@ -16,6 +16,7 @@ import { MuiThemeDecorator } from "../../../../.storybook/components";
 import { userEvent, waitFor, screen } from "@storybook/testing-library";
 import { axeRun } from "../../../axe-util";
 import { expect } from "@storybook/jest";
+import { fieldComponentPropsMetaData } from "../../../fieldComponentPropsMetaData";
 import { useCallback, useState } from "react";
 
 const optionsArray: SelectProps<string | string[], boolean>["options"] = [
@@ -120,15 +121,7 @@ const storybookMeta: Meta<SelectProps<string | string[], boolean>> = {
         },
       },
     },
-    errorMessage: {
-      control: "text",
-      description: "The error message for the select component",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
+    errorMessage: fieldComponentPropsMetaData.errorMessage,
     hasMultipleChoices: {
       control: "boolean",
       description: "If `true`, the select component allows multiple selections",
@@ -141,36 +134,10 @@ const storybookMeta: Meta<SelectProps<string | string[], boolean>> = {
         },
       },
     },
-    hint: {
-      control: "text",
-      description: "The hint text for the select component",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    id: {
-      control: "text",
-      description: "The id attribute of the select component",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    isDisabled: {
-      control: "boolean",
-      description: "If `true`, the select component is disabled",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
+    hint: fieldComponentPropsMetaData.hint,
+    id: fieldComponentPropsMetaData.id,
+    isDisabled: fieldComponentPropsMetaData.isFullWidth,
+    isFullWidth: fieldComponentPropsMetaData.isFullWidth,
     isOptional: {
       control: "boolean",
       description: "If `true`, the select component is optional",
@@ -196,16 +163,7 @@ const storybookMeta: Meta<SelectProps<string | string[], boolean>> = {
         name: "string",
       },
     },
-    name: {
-      control: "text",
-      description:
-        "The name of the select component. Defaults to the `id` if not set.",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
+    name: fieldComponentPropsMetaData.name,
     onBlur: {
       control: null,
       description: "Callback fired when the select component loses focus",

packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx

@@ -70,6 +70,7 @@ const storybookMeta: Meta<typeof TextField> = {
     hint: fieldComponentPropsMetaData.hint,
     id: fieldComponentPropsMetaData.id,
     isDisabled: fieldComponentPropsMetaData.isDisabled,
+    isFullWidth: fieldComponentPropsMetaData.isFullWidth,
     isMultiline: {
       control: "boolean",
       description: "If `true`, a TextareaAutosize element is rendered",

packages/odyssey-storybook/src/fieldComponentPropsMetaData.ts

@@ -56,6 +56,19 @@ export const fieldComponentPropsMetaData: Partial<
       },
     },
   },
+  isFullWidth: {
+    control: "boolean",
+    description:
+      "If `true`, the component can stretch to fill the width of the container",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
   isOptional: {
     control: "boolean",
     description: "If `true`, the `input` element is not required",