From 418f0a8c2d1a00e5ad2c19bb11e5e1cbad4216d5 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Mon, 18 Nov 2024 10:47:55 +0000 Subject: [PATCH 1/7] fix bug where TextInput width would expand to length of validation message --- packages/react/src/forms/TextInput/TextInput.module.css | 5 +++++ 1 file changed, 5 insertions(+) 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); } From 7c1b5f5dca58a714efbb6fdce01692d41f591811 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Tue, 26 Nov 2024 11:21:42 +0000 Subject: [PATCH 2/7] remove duplicated styles --- packages/react/src/forms/Textarea/Textarea.module.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/react/src/forms/Textarea/Textarea.module.css b/packages/react/src/forms/Textarea/Textarea.module.css index f6b5b5420..44f2a2772 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; } From 93e5da4d307fdda842a685b5f609d0d98987bbf4 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Tue, 26 Nov 2024 11:22:52 +0000 Subject: [PATCH 3/7] fixed same bug in TextArea --- packages/react/src/forms/Textarea/Textarea.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/forms/Textarea/Textarea.module.css b/packages/react/src/forms/Textarea/Textarea.module.css index 44f2a2772..d50529d7c 100644 --- a/packages/react/src/forms/Textarea/Textarea.module.css +++ b/packages/react/src/forms/Textarea/Textarea.module.css @@ -94,6 +94,10 @@ display: flex; } +.Textarea-wrapper:not(.Textarea-wrapper--fullWidth) { + width: min-content; +} + .Textarea-wrapper--monospace { font-family: var(--brand-fontStack-monospace); } From 5c93c7f87b9d38058daae68543207afcac9eeba9 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Tue, 26 Nov 2024 11:54:22 +0000 Subject: [PATCH 4/7] remove redundant style --- packages/react/src/forms/Select/Select.module.css | 8 -------- packages/react/src/forms/Select/Select.module.css.d.ts | 1 - 2 files changed, 9 deletions(-) diff --git a/packages/react/src/forms/Select/Select.module.css b/packages/react/src/forms/Select/Select.module.css index 00fa66590..cd26fe658 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 */ 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; From c600f2c6348a3ece173c60a2ffe20e91e3de0f6a Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Tue, 26 Nov 2024 11:54:40 +0000 Subject: [PATCH 5/7] fix width bug --- packages/react/src/forms/Select/Select.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/forms/Select/Select.module.css b/packages/react/src/forms/Select/Select.module.css index cd26fe658..8f7ee4fd8 100644 --- a/packages/react/src/forms/Select/Select.module.css +++ b/packages/react/src/forms/Select/Select.module.css @@ -88,6 +88,8 @@ */ .Select-wrapper { + width: 12.5rem; + border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default); border-radius: var(--brand-borderRadius-medium, 6px); font-family: var(--brand-body-fontFamily); @@ -120,7 +122,7 @@ } .Select-wrapper--fullWidth { - display: flex; + width: 100%; } /* From e9bc123bd0be895aed3acef70a91c1a49d91c3fc Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Tue, 26 Nov 2024 12:23:53 +0000 Subject: [PATCH 6/7] remove unnecessary width --- packages/react/src/forms/Select/Select.module.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/forms/Select/Select.module.css b/packages/react/src/forms/Select/Select.module.css index 8f7ee4fd8..d2d9d64de 100644 --- a/packages/react/src/forms/Select/Select.module.css +++ b/packages/react/src/forms/Select/Select.module.css @@ -88,8 +88,6 @@ */ .Select-wrapper { - width: 12.5rem; - border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default); border-radius: var(--brand-borderRadius-medium, 6px); font-family: var(--brand-body-fontFamily); From d410836b03e1e9a329775ee280e62a7bab448e17 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Tue, 26 Nov 2024 12:25:26 +0000 Subject: [PATCH 7/7] add changeset --- .changeset/sour-numbers-pretend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sour-numbers-pretend.md 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`.