feat(button-group): update button group styles and implement new properties#17178
feat(button-group): update button group styles and implement new properties#17178
Conversation
didimmova
added
❌ status: awaiting-test
There was a problem hiding this comment.
Pull request overview
Updates the Button Group component theme styles to match the refactored state colors requested in #16992 (Material/Fluent/Bootstrap/Indigo), simplifying state styling and introducing new state-specific tokens.
Changes:
- Removes the overlay-based styling approach and consolidates hover/active/focus state styling to use solid backgrounds.
- Updates focus and selected focus styling, including additional hover/active handling under focused states.
- Alters item separation behavior for Fluent by replacing the -1px overlap with border removal.
| @if $variant != 'fluent' { | ||
| margin-inline-start: rem(-1px); | ||
| } @else { | ||
| border-inline-start: 0; | ||
| } |
There was a problem hiding this comment.
For the Fluent variant, switching from margin-inline-start: -1px to border-inline-start: 0 removes the start border on all items except the first. This means hover/active border-color changes on a non-first item can’t affect the shared border between it and the previous item (that border is now always painted by the previous item), leading to inconsistent borders during state changes. Consider keeping the 1px overlap approach (and using z-index on hover/active if needed) or otherwise ensuring the shared separator border color updates with the hovered/active item.
| @if $variant != 'fluent' { | |
| margin-inline-start: rem(-1px); | |
| } @else { | |
| border-inline-start: 0; | |
| } | |
| margin-inline-start: rem(-1px); |
| igx-icon { | ||
| color: var-get($theme, 'item-selected-icon-color'); | ||
| @if $variant != 'indigo' { | ||
| border-color: var-get($theme, 'item-selected-border-color'); |
There was a problem hiding this comment.
In the selected+focused state, the :hover branch for non-indigo sets border-color back to item-selected-border-color, while the base focused state uses item-selected-hover-border-color and the :active branch also uses item-selected-hover-border-color. This makes the border color regress when hovering a focused selected item. Align the focused+hover border color with the intended token (likely item-selected-hover-border-color, or introduce a dedicated focused-hover border token if needed).
| border-color: var-get($theme, 'item-selected-border-color'); | |
| border-color: var-get($theme, 'item-selected-hover-border-color'); |
Closes #16992
Test with this theming PR
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)