Button.counter does not have disabled styles (#1955)

* Add disabled styles to counter and add storybook * Update with PR review comments * Create yellow-planes-decide.md
primer · Mar 16, 2022 · 77e123f · 77e123f
1 parent 767d416
commit 77e123f
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 27 deletions.
diff --git a/.changeset/yellow-planes-decide.md b/.changeset/yellow-planes-decide.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add disabled color and backgroundColor to Button.Counter
diff --git 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
@@ -22,7 +22,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
-        backgroundColor: 'btn.disabledBg'
+        '[data-component=ButtonCounter]': {
+          color: 'inherit'
+        }
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.activeBg',
@@ -48,9 +50,12 @@ 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: 'inherit'
+        }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.primary.counterBg',
         color: 'btn.primary.text'
       },
@@ -68,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'
         }
@@ -88,11 +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"]': {
+        '[data-component=ButtonCounter]': {
+          color: 'inherit',
           backgroundColor: 'btn.danger.disabledCounterBg'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         color: 'btn.danger.text',
         backgroundColor: 'btn.danger.counterBg'
       },
@@ -119,7 +125,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: 'inherit'
+        }
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.selectedBg'
@@ -136,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
@@ -158,11 +167,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.outline.disabledText',
         backgroundColor: 'btn.outline.disabledBg',
         borderColor: 'btn.border',
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.outline.disabledCounterBg'
+        '[data-component=ButtonCounter]': {
+          backgroundColor: 'btn.outline.disabledCounterBg',
+          color: 'inherit'
         }
       },
-      '[data-component="ButtonCounter"]': {
+      '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.outline.counterBg',
         color: 'btn.outline.text'
       },
@@ -212,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
@@ -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
@@ -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;