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

Author: joshfarrant

.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`.

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%;
 }
 
 /*

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;

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);
 }

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);
 }