Merge 8098e33 into a33d6c2

primer · Sep 6, 2024 · 5bd91cf · 5bd91cf
2 parents a33d6c2 + 8098e33
commit 5bd91cf
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],