Bug fix: Button loading spinner color (#4941)

* fix * Create calm-forks-pull.md * test(vrt): update snapshots * snippy snappers --------- Co-authored-by: langermank <[email protected]>
primer · Sep 9, 2024 · 80fe025 · 80fe025
1 parent 2f8d864
commit 80fe025
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/calm-forks-pull.md b/.changeset/calm-forks-pull.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: Button loading spinner color
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png
diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -257,6 +257,7 @@ exports[`Button respects block prop 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -573,6 +574,7 @@ exports[`Button respects the alignContent prop 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -888,6 +890,7 @@ exports[`Button respects the large size prop 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -1204,6 +1207,7 @@ exports[`Button respects the small size prop 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -1522,6 +1526,7 @@ exports[`Button styles danger button appropriately 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -1840,6 +1845,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -2163,6 +2169,7 @@ exports[`Button styles primary button appropriately 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: fg.muted;
 }
 
 .c0 [data-component="loadingSpinner"] + [data-component="text"] {

diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts
@@ -406,6 +406,7 @@ export const getButtonStyles = (theme?: Theme) => {
       gridArea: 'text',
       marginRight: '0px !important',
       placeSelf: 'center',
+      color: 'fg.muted',
     },
     '[data-component="loadingSpinner"] + [data-component="text"]': {
       visibility: 'hidden',

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1921,6 +1921,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -2552,6 +2553,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4 [data-component="loadingSpinner"] + [data-component="text"] {
@@ -3044,6 +3046,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   grid-area: text;
   margin-right: 0px !important;
   place-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4 [data-component="loadingSpinner"] + [data-component="text"] {