Bug fix: default Button disabled bg-color (#4379)

* btn bg + stories * Create young-cooks-shave.md * test(vrt): update snapshots * snippy snappers * move bg color --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Mar 12, 2024 · cb54f42 · cb54f42
1 parent 2f65ea5
commit cb54f42
Show file tree

Hide file tree

Showing 23 changed files with 58 additions and 4 deletions.
diff --git a/.changeset/young-cooks-shave.md b/.changeset/young-cooks-shave.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: default Button disabled bg-color
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/...s/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png
diff --git a/...shots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png b/...shots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png
diff --git a/.../components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png b/.../components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png
diff --git a/...mponents/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png b/...mponents/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png
diff --git a/...t/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png b/...t/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png
diff --git a/.../components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png b/.../components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png
diff --git 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 = () => <Button trailingAction={TriangleDownIcon}>Tr
 
 export const Block = () => <Button block>Default</Button>
 
-export const Disabled = () => <Button disabled>Default</Button>
+export const Disabled = () => (
+  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+    <Button disabled>Default</Button>
+    <Button variant="primary" disabled>
+      Primary
+    </Button>
+    <Button variant="danger" disabled>
+      Danger
+    </Button>
+    <Button variant="invisible" disabled>
+      Invisible
+    </Button>
+  </div>
+)
 
 export const Inactive = () => (
-  <Button variant="primary" inactive>
-    Default
-  </Button>
+  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+    <Button inactive>Default</Button>
+    <Button variant="primary" inactive>
+      Primary
+    </Button>
+    <Button variant="danger" inactive>
+      Danger
+    </Button>
+    <Button variant="invisible" inactive>
+      Invisible
+    </Button>
+  </div>
 )
 
 export const Small = () => <Button size="small">Default</Button>

diff --git 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] {
@@ -360,6 +361,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] {
@@ -619,6 +621,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] {
@@ -879,6 +882,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
@@ -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
@@ -284,3 +284,25 @@ export const WithLeadingVisual = () => (
     </FormControl>
   </Box>
 )
+
+export const DisabledInputs = () => (
+  <Box sx={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+    <FormControl disabled>
+      <FormControl.Label>Disabled checkbox</FormControl.Label>
+      <Checkbox />
+    </FormControl>
+    <FormControl disabled>
+      <FormControl.Label>Disabled input</FormControl.Label>
+      <TextInput />
+    </FormControl>
+    <FormControl disabled>
+      <FormControl.Label>Disabled select</FormControl.Label>
+      <Select>
+        <Select.Option value="figma">Figma</Select.Option>
+        <Select.Option value="css">Primer CSS</Select.Option>
+        <Select.Option value="prc">Primer React components</Select.Option>
+        <Select.Option value="pvc">Primer ViewComponents</Select.Option>
+      </Select>
+    </FormControl>
+  </Box>
+)