diff --git a/.changeset/young-cooks-shave.md b/.changeset/young-cooks-shave.md new file mode 100644 index 00000000000..6230dd2ecde --- /dev/null +++ b/.changeset/young-cooks-shave.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Bug fix: default Button disabled bg-color 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 0f679e807c0..d3d45fe45c0 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 126f95d553b..9fad292d18d 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 1a6f14f4040..e4233ba2477 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 0f679e807c0..d68cb9cf27e 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 0f679e807c0..5364d91fe97 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 29cde67f322..a054a97858e 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 8b9f8c96d23..64e0d7b620e 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 29cde67f322..459714bd032 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 29cde67f322..a5e891a3f85 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/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png index 1e3a0c45717..dfdc58a3949 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png index 20fa18b1f09..4aaceb71715 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png index d9fea495638..3818d4b21fc 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png index 1e3a0c45717..dfdc58a3949 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png index 1e3a0c45717..dfdc58a3949 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png index aac9a555acf..aa8ecaf1e36 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png index f8942b5bac8..2dec0c5e60c 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png index 3bc974ffe65..c409a4b2887 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png index aac9a555acf..aa8ecaf1e36 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png differ diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx index 195093642ca..313b249c093 100644 --- a/packages/react/src/Button/Button.features.stories.tsx +++ b/packages/react/src/Button/Button.features.stories.tsx @@ -61,12 +61,34 @@ export const TrailingAction = () => -export const Disabled = () => +export const Disabled = () => ( +
+ + + + +
+) export const Inactive = () => ( - +
+ + + + +
) export const Small = () => 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 793000078b0..74cf6ccef44 100644 --- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -100,6 +100,7 @@ exports[`Button respects block prop 1`] = ` box-shadow: none; color: primer.fg.disabled; border-color: var(--button-default-borderColor-disabled,undefined); + background-color: var(--button-default-bgColor-disabled,undefined); } .c0:disabled [data-component=ButtonCounter] { @@ -356,6 +357,7 @@ exports[`Button respects the alignContent prop 1`] = ` box-shadow: none; color: primer.fg.disabled; border-color: var(--button-default-borderColor-disabled,undefined); + background-color: var(--button-default-bgColor-disabled,undefined); } .c0:disabled [data-component=ButtonCounter] { @@ -611,6 +613,7 @@ exports[`Button respects the large size prop 1`] = ` box-shadow: none; color: primer.fg.disabled; border-color: var(--button-default-borderColor-disabled,undefined); + background-color: var(--button-default-bgColor-disabled,undefined); } .c0:disabled [data-component=ButtonCounter] { @@ -867,6 +870,7 @@ exports[`Button respects the small size prop 1`] = ` box-shadow: none; color: primer.fg.disabled; border-color: var(--button-default-borderColor-disabled,undefined); + background-color: var(--button-default-bgColor-disabled,undefined); } .c0:disabled [data-component=ButtonCounter] { diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts index a8407d648fa..f591cdbe8ac 100644 --- a/packages/react/src/Button/styles.ts +++ b/packages/react/src/Button/styles.ts @@ -18,6 +18,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme '&:disabled': { color: 'primer.fg.disabled', borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`, + backgroundColor: `var(--button-default-bgColor-disabled, ${theme?.colors.input.disabledBg})`, '[data-component=ButtonCounter]': { color: 'inherit', }, diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx index 588b3b46c5e..07bb3fecb8d 100644 --- a/packages/react/src/FormControl/FormControl.features.stories.tsx +++ b/packages/react/src/FormControl/FormControl.features.stories.tsx @@ -284,3 +284,25 @@ export const WithLeadingVisual = () => ( ) + +export const DisabledInputs = () => ( + + + Disabled checkbox + + + + Disabled input + + + + Disabled select + + + +)