Skip to content

Commit

Permalink
Merge 9db31eb into 80fe025
Browse files Browse the repository at this point in the history
  • Loading branch information
@langermank
langermank authored Sep 9, 2024
2 parents 80fe025 + 9db31eb commit aea157a
Show file tree
Hide file tree
Showing 14 changed files with 32 additions and 20 deletions.
5 changes: 5 additions & 0 deletions .changeset/ten-masks-smoke.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Button bug fixes: `invisible` variant icon colors missing variables + icon button disabled state
Binary file modified ...ts/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ponents/IconButton.test.ts-snapshots/IconButton-Invisible-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nts/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...onents/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-dimmed-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 8 additions & 7 deletions packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ exports[`Button respects block prop 1`] = `
color: var(--button-color,undefined);
}
.c0[data-component="IconButton"][data-no-visuals] {
.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
color: fg.muted;
}
Expand Down Expand Up @@ -602,7 +602,7 @@ exports[`Button respects the alignContent prop 1`] = `
color: var(--button-color,undefined);
}
.c0[data-component="IconButton"][data-no-visuals] {
.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
color: fg.muted;
}
Expand Down Expand Up @@ -918,7 +918,7 @@ exports[`Button respects the large size prop 1`] = `
color: var(--button-color,undefined);
}
.c0[data-component="IconButton"][data-no-visuals] {
.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
color: fg.muted;
}
Expand Down Expand Up @@ -1235,7 +1235,7 @@ exports[`Button respects the small size prop 1`] = `
color: var(--button-color,undefined);
}
.c0[data-component="IconButton"][data-no-visuals] {
.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
color: fg.muted;
}
Expand Down Expand Up @@ -1803,7 +1803,7 @@ exports[`Button styles invisible button appropriately 1`] = `
.c0 [data-component="leadingVisual"] {
grid-area: leadingVisual;
color: fg.muted;
color: var(--button-invisible-iconColor-rest,undefined);
}
.c0 [data-component="text"] {
Expand All @@ -1814,11 +1814,12 @@ exports[`Button styles invisible button appropriately 1`] = `
.c0 [data-component="trailingVisual"] {
grid-area: trailingVisual;
color: var(--button-invisible-iconColor-rest,undefined);
}
.c0 [data-component="trailingAction"] {
margin-right: -4px;
color: fg.muted;
color: var(--button-invisible-iconColor-rest,undefined);
}
.c0 [data-component="buttonContent"] {
Expand Down Expand Up @@ -1865,7 +1866,7 @@ exports[`Button styles invisible button appropriately 1`] = `
}
.c0[data-component="IconButton"][data-no-visuals] {
color: fg.muted;
color: var(--button-invisible-iconColor-rest,undefined);
}
.c0[data-no-visuals] {
Expand Down
11 changes: 7 additions & 4 deletions packages/react/src/Button/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
'[data-component=ButtonCounter]': {
backgroundColor: 'btn.counterBg',
},
'&[data-component="IconButton"][data-no-visuals]': {
'&[data-component="IconButton"][data-no-visuals]:not(:disabled)': {
color: 'fg.muted',
},
},
Expand Down Expand Up @@ -135,13 +135,16 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
backgroundColor: 'actionListItem.default.selectedBg',
},
'&[data-component="IconButton"][data-no-visuals]': {
color: 'fg.muted',
color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`,
},
'[data-component="trailingAction"]': {
color: 'fg.muted',
color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`,
},
'[data-component="leadingVisual"]': {
color: 'fg.muted',
color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`,
},
'[data-component="trailingVisual"]': {
color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`,
},
'&[data-no-visuals]': {
color: `var(--button-invisible-fgColor-rest, ${theme?.colors.btn.text})`,
Expand Down
21 changes: 12 additions & 9 deletions packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1879,7 +1879,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
.c4 [data-component="leadingVisual"] {
grid-area: leadingVisual;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="text"] {
Expand All @@ -1890,11 +1890,12 @@ exports[`TextInput renders trailingAction icon button 1`] = `
.c4 [data-component="trailingVisual"] {
grid-area: trailingVisual;
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="trailingAction"] {
margin-right: -4px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="buttonContent"] {
Expand Down Expand Up @@ -1941,7 +1942,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
}
.c4[data-component="IconButton"][data-no-visuals] {
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4[data-no-visuals] {
Expand Down Expand Up @@ -2511,7 +2512,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
.c4 [data-component="leadingVisual"] {
grid-area: leadingVisual;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="text"] {
Expand All @@ -2522,11 +2523,12 @@ exports[`TextInput renders trailingAction text button 1`] = `
.c4 [data-component="trailingVisual"] {
grid-area: trailingVisual;
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="trailingAction"] {
margin-right: -4px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="buttonContent"] {
Expand Down Expand Up @@ -2573,7 +2575,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
}
.c4[data-component="IconButton"][data-no-visuals] {
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4[data-no-visuals] {
Expand Down Expand Up @@ -3004,7 +3006,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
.c4 [data-component="leadingVisual"] {
grid-area: leadingVisual;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="text"] {
Expand All @@ -3015,11 +3017,12 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
.c4 [data-component="trailingVisual"] {
grid-area: trailingVisual;
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="trailingAction"] {
margin-right: -4px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4 [data-component="buttonContent"] {
Expand Down Expand Up @@ -3066,7 +3069,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
}
.c4[data-component="IconButton"][data-no-visuals] {
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c4[data-no-visuals] {
Expand Down

0 comments on commit aea157a

Please sign in to comment.