diff --git a/.changeset/sour-numbers-pretend.md b/.changeset/sour-numbers-pretend.md new file mode 100644 index 000000000..e0e4741f0 --- /dev/null +++ b/.changeset/sour-numbers-pretend.md @@ -0,0 +1,5 @@ +--- +'@primer/react-brand': patch +--- + +Fixed bug where `TextInput`, `TextArea`, and `Select` components would expand to the width of a the validation message on the parent `FormControl`. diff --git a/packages/react/src/forms/Select/Select.module.css b/packages/react/src/forms/Select/Select.module.css index 00fa66590..d2d9d64de 100644 --- a/packages/react/src/forms/Select/Select.module.css +++ b/packages/react/src/forms/Select/Select.module.css @@ -83,14 +83,6 @@ padding-block: 0; } -/* - * Visual states - */ - -.Select--fullWidth { - width: 100%; -} - /* * Select wrapper */ @@ -128,7 +120,7 @@ } .Select-wrapper--fullWidth { - display: flex; + width: 100%; } /* diff --git a/packages/react/src/forms/Select/Select.module.css.d.ts b/packages/react/src/forms/Select/Select.module.css.d.ts index 29a722125..4f83fe26f 100644 --- a/packages/react/src/forms/Select/Select.module.css.d.ts +++ b/packages/react/src/forms/Select/Select.module.css.d.ts @@ -6,7 +6,6 @@ declare const styles: { readonly "Select--medium": string; readonly "Select-wrapper--large": string; readonly "Select--large": string; - readonly "Select--fullWidth": string; readonly "Select-wrapper--fullWidth": string; readonly "Select--success": string; readonly "Select--error": string; diff --git a/packages/react/src/forms/TextInput/TextInput.module.css b/packages/react/src/forms/TextInput/TextInput.module.css index 37712710c..00284b6c3 100644 --- a/packages/react/src/forms/TextInput/TextInput.module.css +++ b/packages/react/src/forms/TextInput/TextInput.module.css @@ -83,9 +83,14 @@ } .TextInput-wrapper--fullWidth { + width: 100%; display: flex; } +.TextInput-wrapper:not(.TextInput-wrapper--fullWidth) { + width: min-content; +} + .TextInput-wrapper--monospace { font-family: var(--brand-fontStack-monospace); } diff --git a/packages/react/src/forms/Textarea/Textarea.module.css b/packages/react/src/forms/Textarea/Textarea.module.css index f6b5b5420..d50529d7c 100644 --- a/packages/react/src/forms/Textarea/Textarea.module.css +++ b/packages/react/src/forms/Textarea/Textarea.module.css @@ -30,10 +30,6 @@ outline: none; } -.Textarea:focus { - outline: none; -} - .Textarea-resize--vertical { resize: vertical; } @@ -98,6 +94,10 @@ display: flex; } +.Textarea-wrapper:not(.Textarea-wrapper--fullWidth) { + width: min-content; +} + .Textarea-wrapper--monospace { font-family: var(--brand-fontStack-monospace); }