Bug fix: invisible Button variant missing background color when dis…

…abled (#4928) * fix * Create serious-terms-sniff.md * snaps * delete snaps to regen * use transparent as fallback its fine * snaps * test(vrt): update snapshots --------- Co-authored-by: langermank <[email protected]>
primer · Sep 6, 2024 · caf4bcf · caf4bcf
1 parent a33d6c2
commit caf4bcf
Show file tree

Hide file tree

Showing 13 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/serious-terms-sniff.md b/.changeset/serious-terms-sniff.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: `invisible` Button variant missing background color when disabled
diff --git a/...s/components/Button.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png
diff --git a/...shots/components/Button.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png b/...shots/components/Button.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png
diff --git a/.../components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png b/.../components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png
diff --git a/...mponents/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png b/...mponents/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png
diff --git a/...t/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png b/...t/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png
diff --git a/.../components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png b/.../components/Button.test.ts-snapshots/Button-Disabled-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
@@ -1680,6 +1680,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: primer.fg.disabled;
+  background-color: var(--button-invisible-bgColor-disabled,transparent);
 }
 
 .c0:disabled [data-component=ButtonCounter],

diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts
@@ -126,6 +126,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
+        backgroundColor: `var(--button-invisible-bgColor-disabled, transparent)`,
         '[data-component=ButtonCounter], [data-component="leadingVisual"], [data-component="trailingAction"]': {
           color: 'inherit',
         },

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1761,6 +1761,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-invisible-bgColor-disabled,transparent);
 }
 
 .c4:disabled [data-component=ButtonCounter],
@@ -2391,6 +2392,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-invisible-bgColor-disabled,transparent);
 }
 
 .c4:disabled [data-component=ButtonCounter],
@@ -2882,6 +2884,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-invisible-bgColor-disabled,transparent);
 }
 
 .c4:disabled [data-component=ButtonCounter],