feat(ToggleGroup): unified theme updates by kmcfaul · Pull Request #8154 · patternfly/patternfly

kmcfaul · 2026-02-19T17:33:54Z

Closes #8059.

Updates for unified theme & docs update to use RH icons.

Need to open follow up bug for pre-existing border layer issue (hovering over a toggle group item whose left sibling is selected cuts into the selected border color).

Summary by CodeRabbit

Documentation
- Updated toggle group examples to use the design-system icon helper for icons, preserving structure and accessibility while aligning examples with current standards.
Style
- Overhauled toggle group styles: refined background, text and border colors; introduced explicit icon color tokens; improved hover, selected and disabled states, spacing, radii and adjacent-item edge-case behavior for more consistent interactive feedback.

coderabbitai · 2026-02-19T17:34:17Z

Walkthrough

Replaces inline Font Awesome icon markup with pfIcon helper calls in ToggleGroup examples and updates ToggleGroup SCSS to use unified theme tokens and new icon color variables, adjusting hover/selected/disabled colors, borders, radii, and adjacent-item spacing/selectors.

Changes

Cohort / File(s)	Summary
ToggleGroup Examples `src/patternfly/components/ToggleGroup/examples/toggle-group.md`	Replaced static Font Awesome `<i ...>` icon markup with `{{pfIcon 'rh-ui-*'}}` helper calls inside `toggle-group-icon` blocks in "With icon" and "Icon-and-text" examples; markup structure and accessibility attributes preserved.
ToggleGroup Styling `src/patternfly/components/ToggleGroup/toggle-group.scss`	Switched color tokens to control/brand variants; added icon color variables for normal/hover/selected/disabled; updated hover/selected/disabled border colors, background/text colors, radii, z-index and adjacent-item selector rules; moved icon color application into a dedicated `.toggle-group__icon` rule.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

chore(controls): apply control tokens #8121: Modifies ToggleGroup SCSS tokens and icon/border styling; closely related styling/token changes.

Suggested reviewers

mcoker
srambach
lboehling

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately describes the main changes: unified theme updates to the ToggleGroup component following conventional commit format.
Linked Issues check	✅ Passed	Code changes implement unified theme updates to ToggleGroup component and update documentation to use Red Hat icons, directly addressing requirements from issue `#8059`.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly scoped to ToggleGroup component theming updates and documentation icon replacements, with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/ToggleGroup/toggle-group.scss`:
- Around line 39-40: The selected state's ::before border width uses the
high-contrast token (--pf-t--global--border--width--high-contrast--regular)
which resolves to 0px in normal theme causing the selected ::before border to be
invisible; update the variable on the selected rule (the
--#{$toggle-group}__button--m-selected--before--BorderWidth declaration) to use
an always-visible token such as --pf-t--global--border--width--control--clicked
(matching the ::after forced-colors choice) and make the same replacement for
the related hover state variable so the ::before border is visible in normal
mode.

patternfly-build · 2026-02-19T17:42:15Z

Preview: https://pf-pr-8154.surge.sh

A11y report: https://pf-pr-8154-a11y.surge.sh

mcoker

LGTM other than the token @lboehling pointed out. Left a few nit comments 🤓

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/ToggleGroup/toggle-group.scss`:
- Around line 179-181: The adjacent-sibling selectors using
.#{$toggle-group}__icon+.#{$toggle-group}__text and
.#{$toggle-group}__text+.#{$toggle-group}__icon should be updated to include
spaces around the + for consistency and readability — locate the rules
referencing the #{$toggle-group}__icon and #{$toggle-group}__text selectors in
toggle-group.scss and change the selectors to use " .#{$toggle-group}__icon +
.#{$toggle-group}__text " and " .#{$toggle-group}__text +
.#{$toggle-group}__icon " (preserving the existing rule body/variables).

---

Duplicate comments:
In `@src/patternfly/components/ToggleGroup/toggle-group.scss`:
- Around line 39-42: The selected-button ::before border width uses the
high-contrast token (--pf-t--global--border--width--high-contrast--regular)
which resolves to 0px in normal mode causing ::before to be invisible; decide
whether ::before is intended only as a forced-colors overlay or should be
visible like ::after and act accordingly: either add a clear comment next to
--#{$toggle-group}__button--m-selected--before--BorderWidth (and mention
::before is only the high-contrast overlay and ::after carries the visible
selected border) or replace the token with an always-visible token (e.g.
--pf-t--global--border--width--control--clicked) so
--#{$toggle-group}__button--m-selected--before--BorderWidth renders in normal
mode; update the SCSS where
--#{$toggle-group}__button--m-selected--before--BorderWidth and
--#{$toggle-group}__button--m-selected--after--BorderWidth are defined to
reflect your choice.

coderabbitai

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@src/patternfly/components/ToggleGroup/toggle-group.scss`:
- Around line 179-181: The adjacent-sibling selectors in toggle-group.scss are
missing required whitespace around the `+` combinator; update the two selectors
`.#{\$toggle-group}__icon+.#{\$toggle-group}__text` and
`.#{\$toggle-group}__text+.#{\$toggle-group}__icon` to include a space before
and after the `+` (i.e., change to `.#{\$toggle-group}__icon +
.#{\$toggle-group}__text` and `.#{\$toggle-group}__text +
.#{\$toggle-group}__icon`) so they conform to the project's CSS style
conventions.
- Around line 39-40: The selected-state ::before border is still using the
high-contrast 0px variable
(--pf-t--global--border--width--high-contrast--regular), which makes the
::before invisible in normal mode and nullifies the inline-start color fix;
update the selected ::before width variable
(--#{$toggle-group}__button--m-selected--before--BorderWidth) to a visible width
(e.g., use the control clicked width var
--pf-t--global--border--width--control--clicked or an explicit 2px) so that when
it is applied via --#{$toggle-group}__button--before--BorderWidth the ::before
ring becomes visible and the --before--BorderInlineStartColor override for
consecutive selected items takes effect. Ensure you only change the assignment
of --#{$toggle-group}__button--m-selected--before--BorderWidth (not the other
unrelated vars) so the rest of the rules that reference
--#{$toggle-group}__button--before--BorderWidth pick up the non-zero width.

mcoker

LPTM!

patternfly-build · 2026-03-04T21:22:50Z

🎉 This PR is included in version 6.5.0-prerelease.50 🎉

The release is available on:

Your semantic-release bot 📦🚀

lboehling · 2026-03-04T21:46:28Z

this looks good to me btw!

coderabbitai Bot requested review from lboehling, mcoker and srambach February 19, 2026 17:34

coderabbitai Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread src/patternfly/components/ToggleGroup/toggle-group.scss

kmcfaul commented Feb 19, 2026

View reviewed changes

Comment thread src/patternfly/components/ToggleGroup/toggle-group.scss Outdated

lboehling reviewed Feb 19, 2026

View reviewed changes

Comment thread src/patternfly/components/ToggleGroup/toggle-group.scss Outdated

mcoker reviewed Feb 19, 2026

View reviewed changes

coderabbitai Bot requested review from lboehling and mcoker February 19, 2026 23:25

coderabbitai Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread src/patternfly/components/ToggleGroup/toggle-group.scss

coderabbitai Bot reviewed Feb 19, 2026

View reviewed changes

kmcfaul added the Needs design review label Mar 4, 2026

kmcfaul added 3 commits March 4, 2026 15:30

feat(ToggleGroup): unified theme updates

4db38eb

fix(ToggleGroup): pr updates and spacing

3b939db

fix(): update to use new variable name

776ee94

kmcfaul force-pushed the unified-toggle-group branch from ccae828 to 776ee94 Compare March 4, 2026 20:30

mcoker approved these changes Mar 4, 2026

View reviewed changes

mcoker merged commit 46a4f50 into patternfly:main Mar 4, 2026
5 checks passed

patternfly-build added the released on @prerelease label Mar 4, 2026

coderabbitai Bot mentioned this pull request Mar 4, 2026

Menu Update favorite icon & buttons #8201

Open

lboehling mentioned this pull request Mar 25, 2026

Toggle group: change color of the selected toggle patternfly/patternfly-design#1415

Open

This was referenced Mar 25, 2026

Breadcrumbs: update tokens and icons #8185

Closed

Progress: Update tokens and brand icons #8188

Closed

Jump links: update tokens and brand icons #8187

Closed

lboehling removed the Needs design review label Mar 30, 2026

This was referenced Apr 7, 2026

Card - add new variant 'inset image' #8125

Open

Label: add new large variant #8138

Open

Menu toggle: Focus ring style updates #8140

Open

Menu toggle: new read only variant #8141

Open

This was referenced Apr 21, 2026

New Variant: Full Width Toggle Groups #8325

Closed

Tree view disabled items follow up #8053

Open

This was referenced May 15, 2026

Bug - subtle border in high contrast is wrong color #8408

Closed

File upload - Update onDrag state #8411

Open

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Uh oh!

Conversation

kmcfaul commented Feb 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 4, 2026

Uh oh!

lboehling commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kmcfaul commented Feb 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 19, 2026 •

edited

Loading

patternfly-build commented Feb 19, 2026 •

edited

Loading