Button counter contrast fixes (#3270)

* bump primies * update counter colors * Create breezy-fireants-tickle.md * bump again * snaps * add story to e2e * bump * snippy snaps
primer · May 10, 2023 · 6f2340c · 6f2340c
1 parent 102ea81
commit 6f2340c
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 73 deletions.
diff --git a/.changeset/breezy-fireants-tickle.md b/.changeset/breezy-fireants-tickle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Button counter contrast fixes
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@lit-labs/react": "1.1.1",
     "@primer/behaviors": "1.3.3",
     "@primer/octicons-react": "^18.0.0",
-    "@primer/primitives": "7.11.7",
+    "@primer/primitives": "7.11.10",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",

diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
@@ -242,6 +242,10 @@ const components = new Map([
           id: 'components-button-features--trailing-visual',
           name: 'Trailing Visual',
         },
+        {
+          id: 'components-button-features--trailing-counter-all-variants',
+          name: 'Trailing Counter All Variants',
+        },
       ],
     },
   ],

diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
@@ -28,6 +28,54 @@ export const TrailingCounter = () => {
   )
 }
 
+export const TrailingCounterAllVariants = () => {
+  const [count, setCount] = useState(0)
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="primary" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="primary" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="outline" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="outline" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="danger" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="danger" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+    </div>
+  )
+}
+
 export const TrailingAction = () => <Button trailingAction={TriangleDownIcon}>Trailing action</Button>
 
 export const Block = () => <Button block>Default</Button>

diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -72,7 +72,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.danger.hoverCounterBg',
-          color: 'btn.danger.hoverText',
+          color: 'btn.danger.hoverCounterFg',
         },
       },
       '&:active:not([disabled])': {
@@ -86,12 +86,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.danger.disabledBg',
         borderColor: 'btn.danger.disabledBorder',
         '[data-component=ButtonCounter]': {
-          color: 'inherit',
+          color: 'btn.danger.disabledCounterFg',
           backgroundColor: 'btn.danger.disabledCounterBg',
         },
       },
       '[data-component=ButtonCounter]': {
-        color: 'btn.danger.text',
+        color: 'btn.danger.counterFg',
         backgroundColor: 'btn.danger.counterBg',
       },
       '&[aria-expanded=true]': {
@@ -156,7 +156,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',
-          color: 'inherit',
+          color: 'btn.outline.hoverCounterFg',
         },
       },
       '&:active:not([disabled])': {
@@ -172,12 +172,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: 'btn.border',
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.disabledCounterBg',
-          color: 'inherit',
+          color: 'btn.outline.disabledCounterFg',
         },
       },
       '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.outline.counterBg',
-        color: 'btn.outline.text',
+        color: 'btn.outline.counterFg',
       },
       '&[aria-expanded=true]': {
         color: 'btn.outline.selectedText',

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1258,13 +1258,13 @@ exports[`Button styles danger button appropriately 1`] = `
 }
 
 .c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
+  color: btn.danger.disabledCounterFg;
   background-color: btn.danger.disabledCounterBg;
 }
 
 .c0 [data-component=ButtonCounter] {
   font-size: 14px;
-  color: btn.danger.text;
+  color: btn.danger.counterFg;
   background-color: btn.danger.counterBg;
 }
 
@@ -1366,7 +1366,7 @@ exports[`Button styles danger button appropriately 1`] = `
 
 .c0:hover:not([disabled]) [data-component=ButtonCounter] {
   background-color: btn.danger.hoverCounterBg;
-  color: btn.danger.hoverText;
+  color: btn.danger.hoverCounterFg;
 }
 
 .c0:active:not([disabled]) {