diff --git a/.changeset/orange-eels-kiss.md b/.changeset/orange-eels-kiss.md new file mode 100644 index 00000000000..998a449a3a7 --- /dev/null +++ b/.changeset/orange-eels-kiss.md @@ -0,0 +1,6 @@ +--- +'@primer/react': patch +--- + +1. Fix a spacing issue with the loading spinner in a `TextInputWithTokens` +2. Bolds form validation text to be visually balanced with the icon diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index 6d7b79997f0..0f6a596211b 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -1,3 +1,5 @@ +// i dont understand what's wrong + import {FocusKeys} from '@primer/behaviors' import {isFocusable} from '@primer/behaviors/utils' import {omit} from '@styled-system/props' @@ -254,8 +256,8 @@ function TextInputWithTokensInnerComponent = ({children, id, validationStatus, sx}) return ( input, .c0 > select { padding-left: 12px; - padding-right: 12px; + padding-right: 0; } .c3 { @@ -7230,7 +7230,7 @@ Array [ padding-bottom: calc(12px / 2); background-repeat: no-repeat; background-position: right 8px center; - padding-left: 0; + padding-left: 12px; padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); @@ -7279,7 +7279,7 @@ Array [ .c0 > input, .c0 > select { - padding-left: 12px; + padding-left: 0; padding-right: 12px; } @@ -7999,7 +7999,7 @@ Array [ background-repeat: no-repeat; background-position: right 8px center; padding-left: 0; - padding-right: 0; + padding-right: 12px; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -8048,7 +8048,7 @@ Array [ .c0 > input, .c0 > select { padding-left: 12px; - padding-right: 12px; + padding-right: 0; } .c3 { @@ -10343,7 +10343,7 @@ Array [ background-repeat: no-repeat; background-position: right 8px center; padding-left: 12px; - padding-right: 0; + padding-right: 12px; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -10392,7 +10392,7 @@ Array [ .c0 > input, .c0 > select { padding-left: 0; - padding-right: 12px; + padding-right: 0; } .c6 { @@ -11914,7 +11914,7 @@ Array [ padding-bottom: calc(12px / 2); background-repeat: no-repeat; background-position: right 8px center; - padding-left: 0; + padding-left: 12px; padding-right: 12px; padding-left: 12px; padding-top: calc(12px / 2); @@ -11963,7 +11963,7 @@ Array [ .c0 > input, .c0 > select { - padding-left: 12px; + padding-left: 0; padding-right: 0; } diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap index 6d04bc63ff4..5abfa4ae979 100644 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap @@ -917,6 +917,7 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = ` .c12 { font-size: 12px; + font-weight: bold; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1050,7 +1051,6 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = ` >