diff --git a/.changeset/dry-olives-rule.md b/.changeset/dry-olives-rule.md new file mode 100644 index 00000000000..56d93602c64 --- /dev/null +++ b/.changeset/dry-olives-rule.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Correct disabled Button icon fill colors diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 4602e7fa250..67276efe797 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -114,7 +114,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme }, '&:disabled': { color: 'primer.fg.disabled', - '[data-component=ButtonCounter]': { + '[data-component=ButtonCounter], [data-component="leadingVisual"], [data-component="trailingAction"]': { color: 'inherit', }, }, diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap index 772130612d6..463dd0f2a73 100644 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/__tests__/__snapshots__/Button.test.tsx.snap @@ -1504,7 +1504,9 @@ exports[`Button styles invisible button appropriately 1`] = ` color: primer.fg.disabled; } -.c0:disabled [data-component=ButtonCounter] { +.c0:disabled [data-component=ButtonCounter], +.c0:disabled [data-component="leadingVisual"], +.c0:disabled [data-component="trailingAction"] { color: inherit; } diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index a02f8b8c3c2..12f447b6d76 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1336,7 +1336,9 @@ exports[`TextInput renders trailingAction icon button 1`] = ` color: #8c959f; } -.c4:disabled [data-component=ButtonCounter] { +.c4:disabled [data-component=ButtonCounter], +.c4:disabled [data-component="leadingVisual"], +.c4:disabled [data-component="trailingAction"] { color: inherit; } @@ -1982,7 +1984,9 @@ exports[`TextInput renders trailingAction text button 1`] = ` color: #8c959f; } -.c3:disabled [data-component=ButtonCounter] { +.c3:disabled [data-component=ButtonCounter], +.c3:disabled [data-component="leadingVisual"], +.c3:disabled [data-component="trailingAction"] { color: inherit; } @@ -2383,7 +2387,9 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` color: #8c959f; } -.c4:disabled [data-component=ButtonCounter] { +.c4:disabled [data-component=ButtonCounter], +.c4:disabled [data-component="leadingVisual"], +.c4:disabled [data-component="trailingAction"] { color: inherit; }