fix(TextInput): Fix font size for small text inputs (#5243)

* fix(TextInput): Fix font size for small text inputs * revert test change * changeset * test(vrt): update snapshots --------- Co-authored-by: hussam-i-am <hussam-i-am@users.noreply.github.com>
primer · Nov 6, 2024 · bc9c696 · bc9c696
1 parent 9ec5bb6
commit bc9c696
Show file tree

Hide file tree

Showing 17 changed files with 259 additions and 2 deletions.
diff --git a/.changeset/fuzzy-kiwis-greet.md b/.changeset/fuzzy-kiwis-greet.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Fix small TextInput to be the use the correct font size
diff --git a/...hots/components/Select.test.ts-snapshots/Select-Small-dark-colorblind-linux.png b/...hots/components/Select.test.ts-snapshots/Select-Small-dark-colorblind-linux.png
diff --git a/...napshots/components/Select.test.ts-snapshots/Select-Small-dark-dimmed-linux.png b/...napshots/components/Select.test.ts-snapshots/Select-Small-dark-dimmed-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png b/...s/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png
diff --git a/...right/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-linux.png b/...right/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-linux.png
diff --git a/...hots/components/Select.test.ts-snapshots/Select-Small-dark-tritanopia-linux.png b/...hots/components/Select.test.ts-snapshots/Select-Small-dark-tritanopia-linux.png
diff --git a/...ots/components/Select.test.ts-snapshots/Select-Small-light-colorblind-linux.png b/...ots/components/Select.test.ts-snapshots/Select-Small-light-colorblind-linux.png
diff --git a/.../components/Select.test.ts-snapshots/Select-Small-light-high-contrast-linux.png b/.../components/Select.test.ts-snapshots/Select-Small-light-high-contrast-linux.png
diff --git a/...ight/snapshots/components/Select.test.ts-snapshots/Select-Small-light-linux.png b/...ight/snapshots/components/Select.test.ts-snapshots/Select-Small-light-linux.png
diff --git a/...ots/components/Select.test.ts-snapshots/Select-Small-light-tritanopia-linux.png b/...ots/components/Select.test.ts-snapshots/Select-Small-light-tritanopia-linux.png
diff --git a/...onents/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png b/...onents/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png
diff --git a/...nents/TextInput.test.ts-snapshots/TextInput-Small-light-high-contrast-linux.png b/...nents/TextInput.test.ts-snapshots/TextInput-Small-light-high-contrast-linux.png
diff --git a/...hTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png b/...hTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png
diff --git a/...Tokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png b/...Tokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1658,6 +1658,18 @@ exports[`TextInput renders small 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
@@ -4173,6 +4185,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -4391,6 +4411,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -4647,6 +4675,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -4874,6 +4910,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -5175,6 +5219,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -5476,6 +5528,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -5771,6 +5831,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -6028,6 +6096,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -6323,6 +6399,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -6597,6 +6681,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c0 {
+    font-size: 12px;
+  }
+}
+
 @media (min-width:768px) {
 
 }
@@ -6938,6 +7034,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
 
 }
@@ -7282,6 +7386,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;