fix(toggle-group): added forced colors selected borders - #7848
Merged
Merged
Conversation
Collaborator
|
Preview: https://pf-pr-7848.surge.sh A11y report: https://pf-pr-7848-a11y.surge.sh |
|
I'm good with all of the above changes @mcoker! adjusting the border thickness is clever! The pros outweight the cons in the compact version -- it's not covering the text. |
Contributor
Author
|
@lboehling roger that, thanks! Updated the PR to thicken the borders in forced colors mode - https://pf-pr-7848.surge.sh/components/toggle-group |
srambach
approved these changes
Sep 23, 2025
Collaborator
|
🎉 This PR is included in version 6.3.0-prerelease.78 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This was referenced Jul 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
fixes #7837
@lboehling needs some design feedback on this one. Updated selected toggles to have an additional border. It isn't very visible IMO:
We could add a hover border-width change of 1px and increase the selected state to 2px? Here's what that would look like with "option 1" on the third row hovered
The only thing that looks bad with that is the compact variant, feels kinda squished, but maybe it's ok?
Also updated the border between 2 selected toggles to use the
border--color--alttoken (like we updated with primary split toggles), and the border between 2 disabled toggles to use the disabled border color. The disabled border has less contrast than the regular border, but seems like the more correct use of the token? That border matches the other borders around the disabled toggles in a toggle group when it didn't before. Curious what you think of those changesThis is before the change in HC:
This is after the change:
