feat(form): Update TextFieldContainer to optionally fill all space in…

… flex containers
mlaursen · Jan 18, 2022 · 2c8e68c · 2c8e68c
1 parent e77d939
commit 2c8e68c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 0 deletions.
diff --git a/packages/form/src/select/NativeSelect.tsx b/packages/form/src/select/NativeSelect.tsx
@@ -113,6 +113,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       theme: propTheme,
       dense = false,
       inline = false,
+      stretch = false,
       error = false,
       disabled = false,
       label,
@@ -163,6 +164,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         label={!!label}
         dense={dense}
         inline={inline}
+        stretch={stretch}
         disabled={disabled}
         isLeftAddon={isLeftAddon}
         isRightAddon={isRightAddon}

diff --git a/packages/form/src/select/Select.tsx b/packages/form/src/select/Select.tsx
@@ -199,6 +199,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
     dense = false,
     inline = false,
     error = false,
+    stretch = false,
     disabled = false,
     isLeftAddon = true,
     isRightAddon = true,
@@ -353,6 +354,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
         error={error}
         active={focused || visible}
         inline={inline}
+        stretch={stretch}
         disabled={disabled}
         underlineDirection={underlineDirection}
         isLeftAddon={isLeftAddon}

diff --git a/packages/form/src/text-field/TextArea.tsx b/packages/form/src/text-field/TextArea.tsx
@@ -151,6 +151,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       dense = false,
       inline: propInline = false,
       error = false,
+      stretch = false,
       disabled = false,
       animate = true,
       isLeftAddon = true,
@@ -350,6 +351,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         label={!!label}
         dense={dense}
         inline={inline}
+        stretch={stretch}
         disabled={disabled}
         isLeftAddon={isLeftAddon}
         isRightAddon={isRightAddon}

diff --git a/packages/form/src/text-field/TextField.tsx b/packages/form/src/text-field/TextField.tsx
@@ -146,6 +146,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       dense = false,
       inline = false,
       error = false,
+      stretch = false,
       disabled = false,
       onBlur: propOnBlur,
       onFocus: propOnFocus,
@@ -187,6 +188,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         label={!!label}
         dense={dense}
         inline={inline}
+        stretch={stretch}
         disabled={disabled}
         isLeftAddon={isLeftAddon}
         isRightAddon={isRightAddon}

diff --git a/packages/form/src/text-field/TextFieldContainer.tsx b/packages/form/src/text-field/TextFieldContainer.tsx
@@ -18,6 +18,15 @@ export interface TextFieldContainerOptions extends FormThemeOptions {
    */
   inline?: boolean;
 
+  /**
+   * Boolean if the component should gain `flex: 1 1 auto;` which is useful for
+   * full-width behavior within flex containers.
+   *
+   * @defaultValue `false`
+   * @remarks \@since 5.0.0
+   */
+  stretch?: boolean;
+
   /**
    * Boolean if the text field should gain the error state and update the
    * colors.
@@ -92,6 +101,7 @@ export const TextFieldContainer = forwardRef<
     active,
     label,
     dense = false,
+    stretch = false,
     disabled = false,
     isLeftAddon = true,
     isRightAddon = true,
@@ -121,6 +131,7 @@ export const TextFieldContainer = forwardRef<
         block({
           error,
           inline,
+          stretch,
           filled,
           outline,
           disabled,

diff --git a/packages/form/src/text-field/_mixins.scss b/packages/form/src/text-field/_mixins.scss
@@ -29,6 +29,10 @@
     display: inline-flex;
   }
 
+  &--stretch {
+    flex: 1 1 auto;
+  }
+
   &--label {
     @include rmd-form-theme-update-var(
       text-height,