From d847667f18fe26773954a7654e73000b6ff534f5 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 5 Jun 2023 14:26:13 -0400 Subject: [PATCH 1/2] corrects disabled button icon colors --- src/Button/styles.ts | 2 +- src/__tests__/__snapshots__/Button.test.tsx.snap | 4 +++- src/__tests__/__snapshots__/TextInput.test.tsx.snap | 12 +++++++++--- 3 files changed, 13 insertions(+), 5 deletions(-) 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; } From f3c23417c72ebd372bd829c19b03cc847a1301ef Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 5 Jun 2023 14:29:40 -0400 Subject: [PATCH 2/2] Create dry-olives-rule.md --- .changeset/dry-olives-rule.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-olives-rule.md 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