Skip to content

Commit 2c8e68c

Browse files
committed
feat(form): Update TextFieldContainer to optionally fill all space in flex containers
1 parent e77d939 commit 2c8e68c

6 files changed

Lines changed: 23 additions & 0 deletions

File tree

packages/form/src/select/NativeSelect.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
113113
theme: propTheme,
114114
dense = false,
115115
inline = false,
116+
stretch = false,
116117
error = false,
117118
disabled = false,
118119
label,
@@ -163,6 +164,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
163164
label={!!label}
164165
dense={dense}
165166
inline={inline}
167+
stretch={stretch}
166168
disabled={disabled}
167169
isLeftAddon={isLeftAddon}
168170
isRightAddon={isRightAddon}

packages/form/src/select/Select.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
199199
dense = false,
200200
inline = false,
201201
error = false,
202+
stretch = false,
202203
disabled = false,
203204
isLeftAddon = true,
204205
isRightAddon = true,
@@ -353,6 +354,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
353354
error={error}
354355
active={focused || visible}
355356
inline={inline}
357+
stretch={stretch}
356358
disabled={disabled}
357359
underlineDirection={underlineDirection}
358360
isLeftAddon={isLeftAddon}

packages/form/src/text-field/TextArea.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
151151
dense = false,
152152
inline: propInline = false,
153153
error = false,
154+
stretch = false,
154155
disabled = false,
155156
animate = true,
156157
isLeftAddon = true,
@@ -350,6 +351,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
350351
label={!!label}
351352
dense={dense}
352353
inline={inline}
354+
stretch={stretch}
353355
disabled={disabled}
354356
isLeftAddon={isLeftAddon}
355357
isRightAddon={isRightAddon}

packages/form/src/text-field/TextField.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
146146
dense = false,
147147
inline = false,
148148
error = false,
149+
stretch = false,
149150
disabled = false,
150151
onBlur: propOnBlur,
151152
onFocus: propOnFocus,
@@ -187,6 +188,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
187188
label={!!label}
188189
dense={dense}
189190
inline={inline}
191+
stretch={stretch}
190192
disabled={disabled}
191193
isLeftAddon={isLeftAddon}
192194
isRightAddon={isRightAddon}

packages/form/src/text-field/TextFieldContainer.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,15 @@ export interface TextFieldContainerOptions extends FormThemeOptions {
1818
*/
1919
inline?: boolean;
2020

21+
/**
22+
* Boolean if the component should gain `flex: 1 1 auto;` which is useful for
23+
* full-width behavior within flex containers.
24+
*
25+
* @defaultValue `false`
26+
* @remarks \@since 5.0.0
27+
*/
28+
stretch?: boolean;
29+
2130
/**
2231
* Boolean if the text field should gain the error state and update the
2332
* colors.
@@ -92,6 +101,7 @@ export const TextFieldContainer = forwardRef<
92101
active,
93102
label,
94103
dense = false,
104+
stretch = false,
95105
disabled = false,
96106
isLeftAddon = true,
97107
isRightAddon = true,
@@ -121,6 +131,7 @@ export const TextFieldContainer = forwardRef<
121131
block({
122132
error,
123133
inline,
134+
stretch,
124135
filled,
125136
outline,
126137
disabled,

packages/form/src/text-field/_mixins.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
display: inline-flex;
3030
}
3131

32+
&--stretch {
33+
flex: 1 1 auto;
34+
}
35+
3236
&--label {
3337
@include rmd-form-theme-update-var(
3438
text-height,

0 commit comments

Comments
 (0)