Fix TextInput, TextArea, and Select width bug (#828)

* fix bug where TextInput width would expand to length of validation message * remove duplicated styles * fixed same bug in TextArea * remove redundant style * fix width bug * remove unnecessary width * add changeset
primer · Dec 5, 2024 · 652e7ff · 652e7ff
1 parent 8c3448d
commit 652e7ff
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/.changeset/sour-numbers-pretend.md 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
@@ -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
@@ -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
@@ -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
@@ -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);
 }