fix(button): update icon only button styles to use fg muted (#4364)

* fix(button): update icon only button styles to use fg muted * chore: add changeset * test(vrt): update snapshots * test: update snapshots * test(vrt): update snapshots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Mar 12, 2024 · 2f65ea5 · 2f65ea5
1 parent 6d88f92
commit 2f65ea5
Show file tree

Hide file tree

Showing 88 changed files with 24 additions and 0 deletions.
diff --git a/.changeset/silly-geese-juggle.md b/.changeset/silly-geese-juggle.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update IconButton default color to use fgColor-muted
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-colorblind-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-colorblind-linux.png
diff --git a/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-dimmed-linux.png b/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-dimmed-linux.png
diff --git a/...components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-linux.png b/...components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-tritanopia-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-tritanopia-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-colorblind-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-colorblind-linux.png
diff --git a/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-linux.png b/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-tritanopia-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-tritanopia-linux.png
diff --git a/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png b/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png
diff --git a/...ts/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png b/...ts/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png
diff --git a/...omponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png b/...omponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png
diff --git a/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png b/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png
diff --git a/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png b/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png
diff --git a/...mponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png b/...mponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png
diff --git a/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png b/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png
diff --git a/...nents/IconButton.test.ts-snapshots/IconButton-Default-dark-colorblind-linux.png b/...nents/IconButton.test.ts-snapshots/IconButton-Default-dark-colorblind-linux.png
diff --git a/...omponents/IconButton.test.ts-snapshots/IconButton-Default-dark-dimmed-linux.png b/...omponents/IconButton.test.ts-snapshots/IconButton-Default-dark-dimmed-linux.png
diff --git a/...shots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-linux.png b/...shots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-linux.png
diff --git a/...nents/IconButton.test.ts-snapshots/IconButton-Default-dark-tritanopia-linux.png b/...nents/IconButton.test.ts-snapshots/IconButton-Default-dark-tritanopia-linux.png
diff --git a/...ents/IconButton.test.ts-snapshots/IconButton-Default-light-colorblind-linux.png b/...ents/IconButton.test.ts-snapshots/IconButton-Default-light-colorblind-linux.png
diff --git a/...hots/components/IconButton.test.ts-snapshots/IconButton-Default-light-linux.png b/...hots/components/IconButton.test.ts-snapshots/IconButton-Default-light-linux.png
diff --git a/...ents/IconButton.test.ts-snapshots/IconButton-Default-light-tritanopia-linux.png b/...ents/IconButton.test.ts-snapshots/IconButton-Default-light-tritanopia-linux.png
diff --git a/...ents/IconButton.test.ts-snapshots/IconButton-Disabled-dark-colorblind-linux.png b/...ents/IconButton.test.ts-snapshots/IconButton-Disabled-dark-colorblind-linux.png
diff --git a/...mponents/IconButton.test.ts-snapshots/IconButton-Disabled-dark-dimmed-linux.png b/...mponents/IconButton.test.ts-snapshots/IconButton-Disabled-dark-dimmed-linux.png
diff --git a/...s/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png b/...s/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png
diff --git a/...hots/components/IconButton.test.ts-snapshots/IconButton-Disabled-dark-linux.png b/...hots/components/IconButton.test.ts-snapshots/IconButton-Disabled-dark-linux.png
diff --git a/...ents/IconButton.test.ts-snapshots/IconButton-Disabled-dark-tritanopia-linux.png b/...ents/IconButton.test.ts-snapshots/IconButton-Disabled-dark-tritanopia-linux.png
diff --git a/...nts/IconButton.test.ts-snapshots/IconButton-Disabled-light-colorblind-linux.png b/...nts/IconButton.test.ts-snapshots/IconButton-Disabled-light-colorblind-linux.png
diff --git a/.../IconButton.test.ts-snapshots/IconButton-Disabled-light-high-contrast-linux.png b/.../IconButton.test.ts-snapshots/IconButton-Disabled-light-high-contrast-linux.png
diff --git a/...nts/IconButton.test.ts-snapshots/IconButton-Disabled-light-tritanopia-linux.png b/...nts/IconButton.test.ts-snapshots/IconButton-Disabled-light-tritanopia-linux.png
diff --git a/...ponents/IconButton.test.ts-snapshots/IconButton-Large-dark-colorblind-linux.png b/...ponents/IconButton.test.ts-snapshots/IconButton-Large-dark-colorblind-linux.png
diff --git a/.../components/IconButton.test.ts-snapshots/IconButton-Large-dark-dimmed-linux.png b/.../components/IconButton.test.ts-snapshots/IconButton-Large-dark-dimmed-linux.png
diff --git a/...apshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-linux.png b/...apshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-linux.png
diff --git a/...ponents/IconButton.test.ts-snapshots/IconButton-Large-dark-tritanopia-linux.png b/...ponents/IconButton.test.ts-snapshots/IconButton-Large-dark-tritanopia-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Large-light-colorblind-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Large-light-colorblind-linux.png
diff --git a/...pshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-linux.png b/...pshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Large-light-tritanopia-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Large-light-tritanopia-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Medium-dark-colorblind-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Medium-dark-colorblind-linux.png
diff --git a/...components/IconButton.test.ts-snapshots/IconButton-Medium-dark-dimmed-linux.png b/...components/IconButton.test.ts-snapshots/IconButton-Medium-dark-dimmed-linux.png
diff --git a/...pshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-linux.png b/...pshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Medium-dark-tritanopia-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Medium-dark-tritanopia-linux.png
diff --git a/...nents/IconButton.test.ts-snapshots/IconButton-Medium-light-colorblind-linux.png b/...nents/IconButton.test.ts-snapshots/IconButton-Medium-light-colorblind-linux.png
diff --git a/...shots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-linux.png b/...shots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-linux.png
diff --git a/...nents/IconButton.test.ts-snapshots/IconButton-Medium-light-tritanopia-linux.png b/...nents/IconButton.test.ts-snapshots/IconButton-Medium-light-tritanopia-linux.png
diff --git a/...ts/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png b/...ts/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png
diff --git a/...ts/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png b/...ts/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png
diff --git a/...ts/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png b/...ts/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png
diff --git a/...s/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png b/...s/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png
diff --git a/...s/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png b/...s/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png
diff --git a/...s/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png b/...s/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png
diff --git a/...ponents/IconButton.test.ts-snapshots/IconButton-Small-dark-colorblind-linux.png b/...ponents/IconButton.test.ts-snapshots/IconButton-Small-dark-colorblind-linux.png
diff --git a/.../components/IconButton.test.ts-snapshots/IconButton-Small-dark-dimmed-linux.png b/.../components/IconButton.test.ts-snapshots/IconButton-Small-dark-dimmed-linux.png
diff --git a/...apshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-linux.png b/...apshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-linux.png
diff --git a/...ponents/IconButton.test.ts-snapshots/IconButton-Small-dark-tritanopia-linux.png b/...ponents/IconButton.test.ts-snapshots/IconButton-Small-dark-tritanopia-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Small-light-colorblind-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Small-light-colorblind-linux.png
diff --git a/...pshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-linux.png b/...pshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-linux.png
diff --git a/...onents/IconButton.test.ts-snapshots/IconButton-Small-light-tritanopia-linux.png b/...onents/IconButton.test.ts-snapshots/IconButton-Small-light-tritanopia-linux.png
diff --git a/...ts/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png b/...ts/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png
diff --git a/...onents/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png b/...onents/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png
diff --git a/...ts/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png b/...ts/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png
diff --git a/...ts/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png b/...ts/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png
diff --git a/...s/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png b/...s/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png
diff --git a/...s/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png b/...s/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png
diff --git a/...s/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png b/...s/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png
diff --git a/...ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/...ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png
diff --git a/...est.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/...est.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png b/...eader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png
diff --git a/...ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/...ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
diff --git a/...s-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png b/...s-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png
diff --git a/...ader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png b/...ader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png
diff --git a/...s-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/...s-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png
diff --git a/...ents/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png b/...ents/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png
diff --git a/.../components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png b/.../components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png
diff --git a/...components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png b/...components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png
diff --git a/...t.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-colorblind-linux.png b/...t.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-colorblind-linux.png
diff --git a/....test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-dimmed-linux.png b/....test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-dimmed-linux.png
diff --git a/...oltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-linux.png b/...oltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-linux.png
diff --git a/...t.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-tritanopia-linux.png b/...t.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-tritanopia-linux.png
diff --git a/....ts-snapshots/TooltipV2-Icon-Button-With-Description-light-colorblind-linux.png b/....ts-snapshots/TooltipV2-Icon-Button-With-Description-light-colorblind-linux.png
diff --git a/...ltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-linux.png b/...ltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-linux.png
diff --git a/....ts-snapshots/TooltipV2-Icon-Button-With-Description-light-tritanopia-linux.png b/....ts-snapshots/TooltipV2-Icon-Button-With-Description-light-tritanopia-linux.png
diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -231,6 +231,10 @@ exports[`Button respects block prop 1`] = `
   color: var(--button-color,undefined);
 }
 
+.c0[data-component="IconButton"][data-no-visuals] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -487,6 +491,10 @@ exports[`Button respects the alignContent prop 1`] = `
   color: var(--button-color,undefined);
 }
 
+.c0[data-component="IconButton"][data-no-visuals] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -742,6 +750,10 @@ exports[`Button respects the large size prop 1`] = `
   color: var(--button-color,undefined);
 }
 
+.c0[data-component="IconButton"][data-no-visuals] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -998,6 +1010,10 @@ exports[`Button respects the small size prop 1`] = `
   color: var(--button-color,undefined);
 }
 
+.c0[data-component="IconButton"][data-no-visuals] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;

diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts
@@ -32,6 +32,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.counterBg',
       },
+      '&[data-component="IconButton"][data-no-visuals]': {
+        color: 'fg.muted',
+      },
     },
     primary: {
       color: 'btn.primary.text',