Design tweaks for 35.2.x (primer#2013)

* fixes spacing in TextInputWithTokens when there is a loading spinner * bolds input validation text * adds changeset * Update src/_InputValidation.tsx Co-authored-by: Cole Bemis <[email protected]> * fixes linting issues and updates snapshots * empty commit to run CI Co-authored-by: Cole Bemis <[email protected]>
enlyze · Apr 19, 2022 · 5f6c5e2 · 5f6c5e2
1 parent 13fb052
commit 5f6c5e2
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/.changeset/orange-eels-kiss.md 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
@@ -254,8 +254,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       className={className}
       contrast={contrast}
       disabled={disabled}
-      hasLeadingVisual={Boolean(LeadingVisual)}
-      hasTrailingVisual={Boolean(TrailingVisual)}
+      hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
+      hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
       width={widthProp}
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}

diff --git a/src/_InputValidation.tsx b/src/_InputValidation.tsx
@@ -27,8 +27,9 @@ const InputValidation: React.FC<Props> = ({children, id, validationStatus, sx})
 
   return (
     <Text
-      fontSize={0}
       sx={{
+        fontSize: 0,
+        fontWeight: 'bold',
         alignItems: 'center',
         color: fgColor,
         display: 'flex',

diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -6507,7 +6507,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);
@@ -6556,7 +6556,7 @@ Array [
 .c0 > 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
@@ -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`] = `
         >
           <span
             class="c12"
-            font-size="0"
           >
             <span
               aria-hidden="true"
@@ -1163,6 +1163,7 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
 
 .c12 {
   font-size: 12px;
+  font-weight: bold;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1296,7 +1297,6 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
         >
           <span
             class="c12"
-            font-size="0"
           >
             <span
               aria-hidden="true"