From a6388eb04e8255bb13d1f11c46611b6e58c38d09 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 14 Mar 2022 18:14:11 +1100
Subject: [PATCH 1/3] Add disabled styles to counter and add storybook

---
 src/Button/Button2.stories.tsx | 15 ++++++++++++++-
 src/Button/styles.ts           | 20 ++++++++++++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/Button/Button2.stories.tsx b/src/Button/Button2.stories.tsx
index 033030ddb7d..9f8ef960f63 100644
--- a/src/Button/Button2.stories.tsx
+++ b/src/Button/Button2.stories.tsx
@@ -25,6 +25,12 @@ export default {
         type: 'radio',
         options: ['small', 'medium', 'large']
       }
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+        default: false
+      }
     }
   }
 } as Meta
@@ -151,9 +157,16 @@ export const blockButton = ({...args}: ButtonProps) => {
   )
 }
 
-export const disabledButton = ({...args}: ButtonProps) => {
+export const DisabledButton = ({...args}: ButtonProps) => {
+  const [count, setCount] = useState(0)
   return (
     <>
+      <Box mb={2}>
+        <Button disabled onClick={() => setCount(count + 1)} {...args}>
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
       <Box mb={2}>
         <Button disabled {...args}>
           Disabled
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index e4f5eea4597..5678ca0ac59 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -22,7 +22,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
-        backgroundColor: 'btn.disabledBg'
+        backgroundColor: 'btn.disabledBg',
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.disableBg',
+          color: 'primer.fg.disabled'
+        }
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.activeBg',
@@ -48,7 +52,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'btn.primary.disabledText',
-        backgroundColor: 'btn.primary.disabledBg'
+        backgroundColor: 'btn.primary.disabledBg',
+        '[data-component="ButtonCounter"]': {
+          color: 'btn.primary.disabledText'
+        }
       },
       '[data-component="ButtonCounter"]': {
         backgroundColor: 'btn.primary.counterBg',
@@ -89,6 +96,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.danger.disabledBg',
         borderColor: 'btn.danger.disabledBorder',
         '[data-component="ButtonCounter"]': {
+          color: 'btn.danger.disabledText',
           backgroundColor: 'btn.danger.disabledCounterBg'
         }
       },
@@ -119,7 +127,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.selectedBg'
       },
       '&:disabled': {
-        color: 'primer.fg.disabled'
+        color: 'primer.fg.disabled',
+        '[data-component="ButtonCounter"]': {
+          color: 'primer.fg.disabled'
+        }
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.selectedBg'
@@ -159,7 +170,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.outline.disabledBg',
         borderColor: 'btn.border',
         '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.outline.disabledCounterBg'
+          backgroundColor: 'btn.outline.disabledCounterBg',
+          color: 'btn.outline.disabledText'
         }
       },
       '[data-component="ButtonCounter"]': {

From 5ce73233c60cd99ed4a4ea91877cfbfb6b417d32 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 15 Mar 2022 20:30:07 +1100
Subject: [PATCH 2/3] Update with PR review comments

---
 src/Button/styles.ts                          | 36 +++++++++----------
 .../__snapshots__/ActionMenu.test.tsx.snap    |  7 ++--
 .../__snapshots__/Button.test.tsx.snap        | 35 ++++++++++++------
 3 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 5678ca0ac59..a17f6910347 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -22,10 +22,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
-        backgroundColor: 'btn.disabledBg',
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.disableBg',
-          color: 'primer.fg.disabled'
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
         }
       },
       '&[aria-expanded=true]': {
@@ -53,11 +51,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:disabled': {
         color: 'btn.primary.disabledText',
         backgroundColor: 'btn.primary.disabledBg',
-        '[data-component="ButtonCounter"]': {
-          color: 'btn.primary.disabledText'
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.primary.counterBg',
         color: 'btn.primary.text'
       },
@@ -75,7 +73,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.danger.hoverBg',
         borderColor: 'btn.danger.hoverBorder',
         boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
-        '[data-component="ButtonCounter"]': {
+        '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.danger.hoverCounterBg',
           color: 'btn.danger.hoverText'
         }
@@ -95,12 +93,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.danger.disabledText',
         backgroundColor: 'btn.danger.disabledBg',
         borderColor: 'btn.danger.disabledBorder',
-        '[data-component="ButtonCounter"]': {
-          color: 'btn.danger.disabledText',
+        '[data-component=ButtonCounter]': {
+          color: 'inherit',
           backgroundColor: 'btn.danger.disabledCounterBg'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         color: 'btn.danger.text',
         backgroundColor: 'btn.danger.counterBg'
       },
@@ -128,8 +126,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
-        '[data-component="ButtonCounter"]': {
-          color: 'primer.fg.disabled'
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
         }
       },
       '&[aria-expanded=true]': {
@@ -147,9 +145,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.outline.hoverBg',
         borderColor: 'outline.hoverBorder',
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
-        '[data-component="ButtonCounter"]': {
+        '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',
-          color: 'btn.outline.hoverText'
+          color: 'inherit'
         }
       },
       // focus must come before :active so that the active box shadow overrides
@@ -169,12 +167,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.outline.disabledText',
         backgroundColor: 'btn.outline.disabledBg',
         borderColor: 'btn.border',
-        '[data-component="ButtonCounter"]': {
+        '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.disabledCounterBg',
-          color: 'btn.outline.disabledText'
+          color: 'inherit'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.outline.counterBg',
         color: 'btn.outline.text'
       },
@@ -224,7 +222,7 @@ export const getSizeStyles = (size = 'medium', variant: VariantType = 'default',
     paddingY: `${paddingY}px`,
     paddingX: `${paddingX}px`,
     fontSize,
-    '[data-component="ButtonCounter"]': {
+    '[data-component=ButtonCounter]': {
       fontSize
     }
   }
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 0e44dd1890b..b7e6b825d1c 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -51,7 +51,10 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1:disabled {
   cursor: default;
   color: #8c959f;
-  background-color: btn.disabledBg;
+}
+
+.c1:disabled [data-component=ButtonCounter] {
+  color: inherit;
 }
 
 .c1:disabled svg {
@@ -74,7 +77,7 @@ exports[`ActionMenu renders consistently 1`] = `
   grid-area: trailingIcon;
 }
 
-.c1 [data-component="ButtonCounter"] {
+.c1 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 1546846cb53..f2e1657f35f 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -40,7 +40,10 @@ exports[`Button renders consistently 1`] = `
 .c0:disabled {
   cursor: default;
   color: #8c959f;
-  background-color: btn.disabledBg;
+}
+
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
 }
 
 .c0:disabled svg {
@@ -63,7 +66,7 @@ exports[`Button renders consistently 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
@@ -133,7 +136,8 @@ exports[`Button styles danger button appropriately 1`] = `
   border-color: btn.danger.disabledBorder;
 }
 
-.c0:disabled [data-component="ButtonCounter"] {
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
   background-color: btn.danger.disabledCounterBg;
 }
 
@@ -157,7 +161,7 @@ exports[`Button styles danger button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
   color: btn.danger.text;
   background-color: btn.danger.counterBg;
@@ -170,7 +174,7 @@ exports[`Button styles danger button appropriately 1`] = `
   box-shadow: undefined;
 }
 
-.c0:hover:not([disabled]) [data-component="ButtonCounter"] {
+.c0:hover:not([disabled]) [data-component=ButtonCounter] {
   background-color: btn.danger.hoverCounterBg;
   color: btn.danger.hoverText;
 }
@@ -246,6 +250,10 @@ exports[`Button styles invisible button appropriately 1`] = `
   color: primer.fg.disabled;
 }
 
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
 .c0:disabled svg {
   opacity: 0.6;
 }
@@ -266,7 +274,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
@@ -341,8 +349,9 @@ exports[`Button styles outline button appropriately 1`] = `
   border-color: btn.border;
 }
 
-.c0:disabled [data-component="ButtonCounter"] {
+.c0:disabled [data-component=ButtonCounter] {
   background-color: btn.outline.disabledCounterBg;
+  color: inherit;
 }
 
 .c0:disabled svg {
@@ -365,7 +374,7 @@ exports[`Button styles outline button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
   background-color: btn.outline.counterBg;
   color: btn.outline.text;
@@ -378,9 +387,9 @@ exports[`Button styles outline button appropriately 1`] = `
   box-shadow: undefined;
 }
 
-.c0:hover:not([disabled]) [data-component="ButtonCounter"] {
+.c0:hover:not([disabled]) [data-component=ButtonCounter] {
   background-color: btn.outline.hoverCounterBg;
-  color: btn.outline.hoverText;
+  color: inherit;
 }
 
 .c0:focus:not([disabled]) {
@@ -456,6 +465,10 @@ exports[`Button styles primary button appropriately 1`] = `
   background-color: btn.primary.disabledBg;
 }
 
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
 .c0:disabled svg {
   opacity: 0.6;
 }
@@ -476,7 +489,7 @@ exports[`Button styles primary button appropriately 1`] = `
   grid-area: trailingIcon;
 }
 
-.c0 [data-component="ButtonCounter"] {
+.c0 [data-component=ButtonCounter] {
   font-size: 14px;
   background-color: btn.primary.counterBg;
   color: btn.primary.text;

From eb83a0ba503dc251c6a795bdb40097fd977b26ce Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 15 Mar 2022 20:30:44 +1100
Subject: [PATCH 3/3] Create yellow-planes-decide.md

---
 .changeset/yellow-planes-decide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yellow-planes-decide.md

diff --git a/.changeset/yellow-planes-decide.md b/.changeset/yellow-planes-decide.md
new file mode 100644
index 00000000000..d0923ffb3ea
--- /dev/null
+++ b/.changeset/yellow-planes-decide.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add disabled color and backgroundColor to Button.Counter