Skip to content

Button bug fixes: invisible variant icon colors missing variables + icon button disabled state#4943

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
langermank merged 4 commits into from
Sep 9, 2024
Merged

Button bug fixes: invisible variant icon colors missing variables + icon button disabled state #4943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d682723
its endless
langermank Sep 9, 2024
98acc7c
snaps
langermank Sep 9, 2024
623765f
Create ten-masks-smoke.md
langermank Sep 9, 2024
9db31eb
test(vrt): update snapshots
langermank Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/ten-masks-smoke.md
View file
Open in desktop
Original file line numberDiff line numberDiff 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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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