Decrease invisible button icon CSS specifity (#2925)

* make color overridable

* snaps

* Create .changeset/metal-ants-punch.md

* missed one

* tests

Author: langermank

.changeset/metal-ants-punch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Decrease `invisible` button icon CSS specifity

src/Button/Button.dev.stories.tsx

@@ -1,6 +1,6 @@
 import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
 import React from 'react'
-import {Button} from '.'
+import {Button, IconButton} from '.'
 
 export default {
   title: 'Components/Button/DevOnly',
@@ -29,6 +29,7 @@ export const InvisibleVariants = () => {
         Button
         <Button.Counter>{count}</Button.Counter>
       </Button>
+      <IconButton icon={TriangleDownIcon} variant="invisible" aria-label="Invisible" />
     </div>
   )
 }

src/Button/IconButton.dev.stories.tsx

@@ -21,3 +21,7 @@ export const CustomSizeWithMedia = () => {
     />
   )
 }
+
+export const CustomIconColor = () => (
+  <IconButton aria-label="Expand" variant="invisible" size="small" icon={ChevronDownIcon} sx={{color: 'red'}} />
+)

src/Button/styles.ts

@@ -121,7 +121,13 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.selectedBg',
       },
-      svg: {
+      '&[data-component="IconButton"][data-no-visuals]': {
+        color: 'fg.muted',
+      },
+      '[data-component="trailingAction"]': {
+        color: 'fg.muted',
+      },
+      '[data-component="leadingVisual"]': {
         color: 'fg.muted',
       },
       '&[data-no-visuals]': {

src/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1565,6 +1565,7 @@ exports[`Button styles invisible button appropriately 1`] = `
 
 .c0 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
+  color: fg.muted;
 }
 
 .c0 [data-component="text"] {
@@ -1579,6 +1580,7 @@ exports[`Button styles invisible button appropriately 1`] = `
 
 .c0 [data-component="trailingAction"] {
   margin-right: -4px;
+  color: fg.muted;
 }
 
 .c0 [data-component="buttonContent"] {
@@ -1613,7 +1615,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   background-color: btn.selectedBg;
 }
 
-.c0 svg {
+.c0[data-component="IconButton"][data-no-visuals] {
   color: fg.muted;
 }
 

src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -1408,6 +1408,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
+  color: #57606a;
 }
 
 .c4 [data-component="text"] {
@@ -1422,6 +1423,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
+  color: #57606a;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -1456,7 +1458,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4 svg {
+.c4[data-component="IconButton"][data-no-visuals] {
   color: #57606a;
 }
 
@@ -2046,6 +2048,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
+  color: #57606a;
 }
 
 .c3 [data-component="text"] {
@@ -2060,6 +2063,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="trailingAction"] {
   margin-right: -4px;
+  color: #57606a;
 }
 
 .c3 [data-component="buttonContent"] {
@@ -2094,7 +2098,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   background-color: hsla(220,14%,94%,1);
 }
 
-.c3 svg {
+.c3[data-component="IconButton"][data-no-visuals] {
   color: #57606a;
 }
 
@@ -2438,6 +2442,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
+  color: #57606a;
 }
 
 .c4 [data-component="text"] {
@@ -2452,6 +2457,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
+  color: #57606a;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -2486,7 +2492,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4 svg {
+.c4[data-component="IconButton"][data-no-visuals] {
   color: #57606a;
 }