Skip to content

ToggleGroupControl: Make unselected item color consistent across all variants #75737

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
ciampo merged 7 commits into from
Feb 20, 2026
Merged

ToggleGroupControl: Make unselected item color consistent across all variants #75737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
538886c
`ToggleGroupControl`: Remove color override for icon and pressed items
ciampo Feb 19, 2026
11a7d9e
Don't use deprecated variables
ciampo Feb 19, 2026
4e46b1d
CHANGELOG
ciampo Feb 19, 2026
355c3ad
Edit CHANGELOG
ciampo Feb 20, 2026
3d6fbcd
Do not apply hover styles to disabled items
ciampo Feb 20, 2026
dab82cd
Add hover color bug fix to CHANGELOG
ciampo Feb 20, 2026
3dccb64
Update snapshots
ciampo Feb 20, 2026
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 packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
### Bug Fixes

- `SnackbarList`: Fix scaling distortion when a snackbar's content is updated in place via a shared notice ID ([#75709](https://github.com/WordPress/gutenberg/pull/75709)).
- `ToggleGroupControl`: Fix hover styles on disabled items ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).

### Enhancements

- `ToggleGroupControl`: Make unselected item color consistent across all variants ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).

## 32.2.0 (2026-02-18)

Expand Down
34 changes: 18 additions & 16 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
user-select: none;
width: 100%;
z-index: 2;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 38px;
aspect-ratio: 1;
padding-left: 0;
Expand All @@ -157,12 +156,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
border: 0;
}

.emotion-12[disabled] {
.emotion-12[disabled],
.emotion-12[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

.emotion-12:hover {
.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: var(--wp-components-color-foreground, #1e1e1e);
}

Expand Down Expand Up @@ -211,7 +211,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
user-select: none;
width: 100%;
z-index: 2;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 38px;
aspect-ratio: 1;
padding-left: 0;
Expand All @@ -229,12 +228,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
border: 0;
}

.emotion-17[disabled] {
.emotion-17[disabled],
.emotion-17[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

.emotion-17:hover {
.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: var(--wp-components-color-foreground, #1e1e1e);
}

Expand Down Expand Up @@ -491,12 +491,13 @@ exports[`ToggleGroupControl controlled should render correctly with text options
border: 0;
}

.emotion-12[disabled] {
.emotion-12[disabled],
.emotion-12[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

.emotion-12:hover {
.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: var(--wp-components-color-foreground, #1e1e1e);
}

Expand Down Expand Up @@ -726,7 +727,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
user-select: none;
width: 100%;
z-index: 2;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 38px;
aspect-ratio: 1;
padding-left: 0;
Expand All @@ -746,12 +746,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
border: 0;
}

.emotion-12[disabled] {
.emotion-12[disabled],
.emotion-12[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

.emotion-12:hover {
.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: var(--wp-components-color-foreground, #1e1e1e);
}

Expand Down Expand Up @@ -800,7 +801,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
user-select: none;
width: 100%;
z-index: 2;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 38px;
aspect-ratio: 1;
padding-left: 0;
Expand All @@ -818,12 +818,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
border: 0;
}

.emotion-17[disabled] {
.emotion-17[disabled],
.emotion-17[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

.emotion-17:hover {
.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: var(--wp-components-color-foreground, #1e1e1e);
}

Expand Down Expand Up @@ -1074,12 +1075,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
border: 0;
}

.emotion-12[disabled] {
.emotion-12[disabled],
.emotion-12[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

.emotion-12:hover {
.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: var(--wp-components-color-foreground, #1e1e1e);
}

Expand Down
10 changes: 4 additions & 6 deletions packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,14 @@ export const buttonView = ( {
border: 0;
}

&[disabled] {
&[disabled],
&[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}

&:hover {
color: ${ COLORS.theme.gray[ 900 ] };
&:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
color: ${ COLORS.theme.foreground };
Copy link
Contributor Author

@ciampo ciampo Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is effectively the same color, but the change fixes a deprecation warning.

}

${ isDeselectable && deselectable }
Expand All @@ -83,8 +84,6 @@ const pressed = css`
`;

const deselectable = css`
color: ${ COLORS.theme.foreground };

&:focus {
outline: ${ CONFIG.borderWidthFocus } solid ${ COLORS.ui.borderFocus };
outline-offset: 2px;
Expand Down Expand Up @@ -112,7 +111,6 @@ const isIconStyles = ( {
};

return css`
color: ${ COLORS.theme.foreground };
height: ${ iconButtonSizes[ size ] };
aspect-ratio: 1;
padding-left: 0;
Expand Down
Loading