Skip to content

feat(button-group): update button group styles #2182

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
simeonoff merged 10 commits into from
Apr 16, 2026
Merged

feat(button-group): update button group styles #2182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
094a2d6
feat(button-group): update button group styles
didimmova Apr 14, 2026
ea592b3
feat(button-group): update button group styles
didimmova Apr 14, 2026
824a25e
fix(button-group): fix selected + focused border
didimmova Apr 14, 2026
81c4d1a
fix(button-group): fix z-indexes
didimmova Apr 14, 2026
d33def3
feat(button-group): fix focused styles
didimmova Apr 15, 2026
9992bf7
chore(button-group): fix border in selected focus
didimmova Apr 15, 2026
7cfffa0
chore(button-group): refactor button group styles
didimmova Apr 15, 2026
a030f0a
chore(button-group): fix toggle focused hover z-index
didimmova Apr 15, 2026
b5780dd
chore(deps): bump theming version
didimmova Apr 16, 2026
6fc8163
chore(deps): bump theming version
didimmova Apr 16, 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
10 changes: 5 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"husky": "^9.1.7",
"ig-typedoc-theme": "^7.0.1",
"igniteui-i18n-resources": "^1.0.4",
"igniteui-theming": "^25.1.0",
"igniteui-theming": "^25.2.0",
"keep-a-changelog": "^3.0.2",
"lint-staged": "^16.4.0",
"lit-analyzer": "^2.0.3",
Expand Down
37 changes: 0 additions & 37 deletions src/components/button-group/themes/shared/button/button.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,52 +11,15 @@ $group-item-border-thickness: rem(1px);
min-height: $bootstrap-flat-btn-size;
border-width: $group-item-border-thickness;
padding-block: pad-block(rem(2px), rem(4px), rem(7px));

&::before {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
z-index: -1;
}
}

[part='toggle focused'] {
box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
z-index: 1;
}
}

[part~='toggle']:active {
background: var-get($theme, 'item-hover-background');
color: var-get($theme, 'item-hover-text-color');
border-color: var-get($theme, 'item-hover-border-color');

&::before {
content: '';
background: var-get($theme, 'item-focused-background');
}

::slotted(igc-icon) {
color: var-get($theme, 'item-hover-icon-color');
}
}

:host([selected]) {
[part~='toggle']:active {
background: var-get($theme, 'item-selected-hover-background');
color: var-get($theme, 'item-selected-hover-text-color');
border-color: var-get($theme, 'item-selected-hover-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
}

&::before {
background: var-get($theme, 'item-selected-focus-background');
}
}

[part='toggle focused'] {
box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
}
Expand Down
91 changes: 78 additions & 13 deletions src/components/button-group/themes/shared/button/button.common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,34 +29,83 @@ $theme: $material;
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
padding-block: pad-block(rem(1px), rem(4px), rem(6px));
border-color: var-get($theme, 'item-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-icon-color');
}
}

::slotted(igc-icon) {
color: var-get($theme, 'item-icon-color');
[part='toggle focused'] {
z-index: 2;
color: var-get($theme, 'item-focused-text-color');
background: var-get($theme, 'item-focused-background');
border-color: var-get($theme, 'item-focused-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-focused-text-color');
}
}
}

:host(:hover) {
[part~='toggle'] {
z-index: 1;
color: var-get($theme, 'item-hover-text-color');
background: var-get($theme, 'item-hover-background');
border-color: var-get($theme, 'item-hover-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-hover-icon-color');
}
}

[part='toggle focused'] {
z-index: 2;
background: var-get($theme, 'item-focused-hover-background');
border-color: var-get($theme, 'item-focused-hover-border-color');
color: var-get($theme, 'item-focused-hover-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-focused-hover-text-color');
}
}
}

:host(:active) [part~='toggle'],
[part~='toggle']:active {
background: var-get($theme, 'item-active-background');
border-color: var-get($theme, 'item-active-border-color');
color: var-get($theme, 'item-hover-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-hover-icon-color');
}
}

:host(:active) [part='toggle-focused'],
[part='toggle focused']:active {
color: var-get($theme, 'item-focused-hover-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-focused-hover-text-color');
}
}

:host([selected]) {
[part~='toggle'] {
color: var-get($theme, 'item-selected-text-color');
background: var-get($theme, 'item-selected-background');
border-color: var-get($theme, 'item-selected-border-color');
z-index: 2;

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-icon-color');
}
}

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-icon-color');
[part='toggle focused'] {
background: var-get($theme, 'item-selected-focus-background');
border-color: var-get($theme, 'item-selected-hover-border-color');
}
}

Expand All @@ -65,13 +114,29 @@ $theme: $material;
color: var-get($theme, 'item-selected-hover-text-color');
background: var-get($theme, 'item-selected-hover-background');
border-color: var-get($theme, 'item-selected-hover-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
}
}

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
[part='toggle focused'] {
background: var-get($theme, 'item-selected-focus-hover-background');
border-color: var-get($theme, 'item-selected-border-color');
}
}

:host([selected]:active) [part~='toggle'],
:host([selected]) [part~='toggle']:active {
background: var-get($theme, 'item-selected-active-background');
color: var-get($theme, 'item-selected-hover-text-color');
border-color: var-get($theme, 'item-selected-active-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
}
}

:host([disabled]),
:host(:disabled) {
@include disabled();
Expand All @@ -85,12 +150,12 @@ $theme: $material;
:host([selected]:disabled),
:host([selected][disabled]) {
[part~='toggle'] {
&::before {
position: absolute;
content: '';
inset: 0;
z-index: 3;
background: var-get($theme, 'disabled-selected-background');
}
color: var-get($theme, 'disabled-selected-text-color');
background: var-get($theme, 'disabled-selected-background');
border-color: var-get($theme, 'disabled-selected-border-color');
}

::slotted(igc-icon) {
color: var-get($theme, 'disabled-selected-icon-color');
}
}
48 changes: 1 addition & 47 deletions src/components/button-group/themes/shared/button/button.fluent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $outline-btn-indent: rem(2px);
}

[part='toggle focused'] {
background: var-get($theme, 'item-background');
border-color: var-get($theme, 'item-border-color');

&::after {
content: '';
Expand All @@ -26,49 +26,3 @@ $outline-btn-indent: rem(2px);
}
}
}

:host(:hover) {
[part='toggle focused'] {
background: var-get($theme, 'item-hover-background');
}
}

[part~='toggle']:active {
background: var-get($theme, 'item-focused-background');
}

[part='toggle focused'] {
&:active {
background: var-get($theme, 'item-focused-background');
}
}

:host([selected]:hover) {
[part~='toggle'] {
background: var-get($theme, 'item-selected-background');

&::before {
content: '';
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
z-index: -1;
background: var-get($theme, 'item-selected-hover-background');
}
}
}

:host([selected]) {
[part~='toggle']:active {
background: var-get($theme, 'item-selected-focus-background');
}

[part='toggle focused'] {
background: var-get($theme, 'item-selected-background');

&:active {
background: var-get($theme, 'item-selected-focus-background');
}
}
}
60 changes: 11 additions & 49 deletions src/components/button-group/themes/shared/button/button.indigo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,72 +20,34 @@ $group-item-border-thickness: rem(1px);
}

[part='toggle focused'] {
z-index: 2;
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
border-color: var-get($theme, 'item-border-color');
color: var-get($theme, 'item-focused-text-color');
}
}

:host(:hover) {
[part~='toggle'] {
z-index: 1;
}

[part='toggle focused'] {
border-color: var-get($theme, 'item-hover-border-color');
color: var-get($theme, 'item-hover-text-color');
::slotted(igc-icon) {
color: var-get($theme, 'item-icon-color');
}
}
}

[part~='toggle']:active {
color: var-get($theme, 'item-hover-text-color');
background: var-get($theme, 'item-hover-background');
border-color: var-get($theme, 'item-hover-border-color');
z-index: 2;

:host(:hover) [part='toggle focused'],
[part='toggle focused']:active {
::slotted(igc-icon) {
color: var-get($theme, 'item-hover-icon-color');
}
}

:host([selected]:hover) {
[part='toggle focused'] {
border-color: var-get($theme, 'item-selected-hover-border-color');
}
:host([selected]) [part='toggle focused'] {
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
border-color: var-get($theme, 'item-selected-border-color');
}

:host([selected]) {
[part='toggle focused'] {
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
border-color: var-get($theme, 'item-selected-border-color');
color: var-get($theme, 'item-selected-hover-text-color');
}

[part~='toggle']:active {
color: var-get($theme, 'item-selected-hover-text-color');
background: var-get($theme, 'item-selected-hover-background');
border-color: var-get($theme, 'item-selected-hover-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
}
}
:host([selected]:hover) [part='toggle focused'],
:host([selected]) [part='toggle focused']:active {
border-color: var-get($theme, 'item-selected-hover-border-color');
}

:host([selected]:disabled),
:host([selected][disabled]) {
[part~='toggle'] {
color: var-get($theme, 'disabled-selected-text-color');
background: var-get($theme, 'disabled-selected-background');
border: none;

&::before {
display: none;
}
}

::slotted(igc-icon) {
color: var-get($theme, 'disabled-selected-icon-color');
}
}
Loading
Loading