diff --git a/.changeset/metal-ants-punch.md b/.changeset/metal-ants-punch.md new file mode 100644 index 00000000000..6e6d87bc026 --- /dev/null +++ b/.changeset/metal-ants-punch.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Decrease `invisible` button icon CSS specifity diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx index a4e3dee364f..0bb4d6d99b7 100644 --- a/src/Button/Button.dev.stories.tsx +++ b/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 {count} + ) } diff --git a/src/Button/IconButton.dev.stories.tsx b/src/Button/IconButton.dev.stories.tsx index ac583d84d48..36e75d6b350 100644 --- a/src/Button/IconButton.dev.stories.tsx +++ b/src/Button/IconButton.dev.stories.tsx @@ -21,3 +21,7 @@ export const CustomSizeWithMedia = () => { /> ) } + +export const CustomIconColor = () => ( + +) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 605da445460..620850c4419 100644 --- a/src/Button/styles.ts +++ b/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]': { diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap index e1933f893c2..47b0a606fda 100644 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ b/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; } diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 31051ce5700..12f9f416c18 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/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; }