diff --git a/.changeset/serious-terms-sniff.md b/.changeset/serious-terms-sniff.md new file mode 100644 index 00000000000..0bca0592c80 --- /dev/null +++ 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/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png index 4576252c2ff..e57faf5540f 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png index f340029d61e..88f1876f316 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png index f729b3b79ef..5e9b24d5f7e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-linux.png index 0f658c732ee..e0ab348ef94 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png index b2291afcfe2..4ea4f3302f1 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png index ab2bbed402a..ca57689cbc0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png index 48d77e4315a..13ed0540824 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png index d9a798b162e..f94c25e440f 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png index 89391563b7c..d9ea5021514 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png differ diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index 5e6c0e4caa5..784960cca3c 100644 --- 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 index cca6d55a067..7ec74892d15 100644 --- 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 index abf6f01ebad..c24f58c96aa 100644 --- 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],