Skip to content

Commit 5be7989

Browse files
didimmovadidimmova
authored
feat(button-group): update button group styles (#2182)
* feat(button-group): update button group styles * feat(button-group): update button group styles * fix(button-group): fix selected + focused border * fix(button-group): fix z-indexes * feat(button-group): fix focused styles * chore(button-group): fix border in selected focus * chore(button-group): refactor button group styles * chore(button-group): fix toggle focused hover z-index * chore(deps): bump theming version * chore(deps): bump theming version
1 parent dfcae5a commit 5be7989

File tree

7 files changed

+99
-247
lines changed

7 files changed

+99
-247
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"husky": "^9.1.7",
8282
"ig-typedoc-theme": "^7.0.1",
8383
"igniteui-i18n-resources": "^1.0.4",
84-
"igniteui-theming": "^25.1.0",
84+
"igniteui-theming": "^25.2.0",
8585
"keep-a-changelog": "^3.0.2",
8686
"lint-staged": "^16.4.0",
8787
"lit-analyzer": "^2.0.3",

‎src/components/button-group/themes/shared/button/button.bootstrap.scss‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,15 @@ $group-item-border-thickness: rem(1px);
1111
min-height: $bootstrap-flat-btn-size;
1212
border-width: $group-item-border-thickness;
1313
padding-block: pad-block(rem(2px), rem(4px), rem(7px));
14-
15-
&::before {
16-
position: absolute;
17-
pointer-events: none;
18-
width: 100%;
19-
height: 100%;
20-
z-index: -1;
21-
}
2214
}
2315

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

30-
[part~='toggle']:active {
31-
background: var-get($theme, 'item-hover-background');
32-
color: var-get($theme, 'item-hover-text-color');
33-
border-color: var-get($theme, 'item-hover-border-color');
34-
35-
&::before {
36-
content: '';
37-
background: var-get($theme, 'item-focused-background');
38-
}
39-
40-
::slotted(igc-icon) {
41-
color: var-get($theme, 'item-hover-icon-color');
42-
}
43-
}
4421

4522
:host([selected]) {
46-
[part~='toggle']:active {
47-
background: var-get($theme, 'item-selected-hover-background');
48-
color: var-get($theme, 'item-selected-hover-text-color');
49-
border-color: var-get($theme, 'item-selected-hover-border-color');
50-
51-
::slotted(igc-icon) {
52-
color: var-get($theme, 'item-selected-hover-icon-color');
53-
}
54-
55-
&::before {
56-
background: var-get($theme, 'item-selected-focus-background');
57-
}
58-
}
59-
6023
[part='toggle focused'] {
6124
box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
6225
}

‎src/components/button-group/themes/shared/button/button.common.scss‎

Lines changed: 78 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,34 +29,83 @@ $theme: $material;
2929
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
3030
padding-block: pad-block(rem(1px), rem(4px), rem(6px));
3131
border-color: var-get($theme, 'item-border-color');
32+
33+
::slotted(igc-icon) {
34+
color: var-get($theme, 'item-icon-color');
35+
}
3236
}
3337

34-
::slotted(igc-icon) {
35-
color: var-get($theme, 'item-icon-color');
38+
[part='toggle focused'] {
39+
z-index: 2;
40+
color: var-get($theme, 'item-focused-text-color');
41+
background: var-get($theme, 'item-focused-background');
42+
border-color: var-get($theme, 'item-focused-border-color');
43+
44+
::slotted(igc-icon) {
45+
color: var-get($theme, 'item-focused-text-color');
46+
}
3647
}
3748
}
3849

3950
:host(:hover) {
4051
[part~='toggle'] {
52+
z-index: 1;
4153
color: var-get($theme, 'item-hover-text-color');
4254
background: var-get($theme, 'item-hover-background');
4355
border-color: var-get($theme, 'item-hover-border-color');
56+
57+
::slotted(igc-icon) {
58+
color: var-get($theme, 'item-hover-icon-color');
59+
}
60+
}
61+
62+
[part='toggle focused'] {
63+
z-index: 2;
64+
background: var-get($theme, 'item-focused-hover-background');
65+
border-color: var-get($theme, 'item-focused-hover-border-color');
66+
color: var-get($theme, 'item-focused-hover-text-color');
67+
68+
::slotted(igc-icon) {
69+
color: var-get($theme, 'item-focused-hover-text-color');
70+
}
4471
}
72+
}
73+
74+
:host(:active) [part~='toggle'],
75+
[part~='toggle']:active {
76+
background: var-get($theme, 'item-active-background');
77+
border-color: var-get($theme, 'item-active-border-color');
78+
color: var-get($theme, 'item-hover-text-color');
4579

4680
::slotted(igc-icon) {
4781
color: var-get($theme, 'item-hover-icon-color');
4882
}
4983
}
5084

85+
:host(:active) [part='toggle-focused'],
86+
[part='toggle focused']:active {
87+
color: var-get($theme, 'item-focused-hover-text-color');
88+
89+
::slotted(igc-icon) {
90+
color: var-get($theme, 'item-focused-hover-text-color');
91+
}
92+
}
93+
5194
:host([selected]) {
5295
[part~='toggle'] {
5396
color: var-get($theme, 'item-selected-text-color');
5497
background: var-get($theme, 'item-selected-background');
5598
border-color: var-get($theme, 'item-selected-border-color');
99+
z-index: 2;
100+
101+
::slotted(igc-icon) {
102+
color: var-get($theme, 'item-selected-icon-color');
103+
}
56104
}
57105

58-
::slotted(igc-icon) {
59-
color: var-get($theme, 'item-selected-icon-color');
106+
[part='toggle focused'] {
107+
background: var-get($theme, 'item-selected-focus-background');
108+
border-color: var-get($theme, 'item-selected-hover-border-color');
60109
}
61110
}
62111

@@ -65,13 +114,29 @@ $theme: $material;
65114
color: var-get($theme, 'item-selected-hover-text-color');
66115
background: var-get($theme, 'item-selected-hover-background');
67116
border-color: var-get($theme, 'item-selected-hover-border-color');
117+
118+
::slotted(igc-icon) {
119+
color: var-get($theme, 'item-selected-hover-icon-color');
120+
}
68121
}
69122

70-
::slotted(igc-icon) {
71-
color: var-get($theme, 'item-selected-hover-icon-color');
123+
[part='toggle focused'] {
124+
background: var-get($theme, 'item-selected-focus-hover-background');
125+
border-color: var-get($theme, 'item-selected-border-color');
72126
}
73127
}
74128

129+
:host([selected]:active) [part~='toggle'],
130+
:host([selected]) [part~='toggle']:active {
131+
background: var-get($theme, 'item-selected-active-background');
132+
color: var-get($theme, 'item-selected-hover-text-color');
133+
border-color: var-get($theme, 'item-selected-active-border-color');
134+
135+
::slotted(igc-icon) {
136+
color: var-get($theme, 'item-selected-hover-icon-color');
137+
}
138+
}
139+
75140
:host([disabled]),
76141
:host(:disabled) {
77142
@include disabled();
@@ -85,12 +150,12 @@ $theme: $material;
85150
:host([selected]:disabled),
86151
:host([selected][disabled]) {
87152
[part~='toggle'] {
88-
&::before {
89-
position: absolute;
90-
content: '';
91-
inset: 0;
92-
z-index: 3;
93-
background: var-get($theme, 'disabled-selected-background');
94-
}
153+
color: var-get($theme, 'disabled-selected-text-color');
154+
background: var-get($theme, 'disabled-selected-background');
155+
border-color: var-get($theme, 'disabled-selected-border-color');
156+
}
157+
158+
::slotted(igc-icon) {
159+
color: var-get($theme, 'disabled-selected-icon-color');
95160
}
96161
}

‎src/components/button-group/themes/shared/button/button.fluent.scss‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $outline-btn-indent: rem(2px);
1212
}
1313

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

1717
&::after {
1818
content: '';
@@ -26,49 +26,3 @@ $outline-btn-indent: rem(2px);
2626
}
2727
}
2828
}
29-
30-
:host(:hover) {
31-
[part='toggle focused'] {
32-
background: var-get($theme, 'item-hover-background');
33-
}
34-
}
35-
36-
[part~='toggle']:active {
37-
background: var-get($theme, 'item-focused-background');
38-
}
39-
40-
[part='toggle focused'] {
41-
&:active {
42-
background: var-get($theme, 'item-focused-background');
43-
}
44-
}
45-
46-
:host([selected]:hover) {
47-
[part~='toggle'] {
48-
background: var-get($theme, 'item-selected-background');
49-
50-
&::before {
51-
content: '';
52-
position: absolute;
53-
pointer-events: none;
54-
width: 100%;
55-
height: 100%;
56-
z-index: -1;
57-
background: var-get($theme, 'item-selected-hover-background');
58-
}
59-
}
60-
}
61-
62-
:host([selected]) {
63-
[part~='toggle']:active {
64-
background: var-get($theme, 'item-selected-focus-background');
65-
}
66-
67-
[part='toggle focused'] {
68-
background: var-get($theme, 'item-selected-background');
69-
70-
&:active {
71-
background: var-get($theme, 'item-selected-focus-background');
72-
}
73-
}
74-
}

‎src/components/button-group/themes/shared/button/button.indigo.scss‎

Lines changed: 11 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -20,72 +20,34 @@ $group-item-border-thickness: rem(1px);
2020
}
2121

2222
[part='toggle focused'] {
23-
z-index: 2;
2423
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
25-
border-color: var-get($theme, 'item-border-color');
26-
color: var-get($theme, 'item-focused-text-color');
27-
}
28-
}
29-
30-
:host(:hover) {
31-
[part~='toggle'] {
32-
z-index: 1;
33-
}
3424

35-
[part='toggle focused'] {
36-
border-color: var-get($theme, 'item-hover-border-color');
37-
color: var-get($theme, 'item-hover-text-color');
25+
::slotted(igc-icon) {
26+
color: var-get($theme, 'item-icon-color');
27+
}
3828
}
3929
}
4030

41-
[part~='toggle']:active {
42-
color: var-get($theme, 'item-hover-text-color');
43-
background: var-get($theme, 'item-hover-background');
44-
border-color: var-get($theme, 'item-hover-border-color');
45-
z-index: 2;
46-
31+
:host(:hover) [part='toggle focused'],
32+
[part='toggle focused']:active {
4733
::slotted(igc-icon) {
4834
color: var-get($theme, 'item-hover-icon-color');
4935
}
5036
}
5137

52-
:host([selected]:hover) {
53-
[part='toggle focused'] {
54-
border-color: var-get($theme, 'item-selected-hover-border-color');
55-
}
38+
:host([selected]) [part='toggle focused'] {
39+
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
40+
border-color: var-get($theme, 'item-selected-border-color');
5641
}
5742

58-
:host([selected]) {
59-
[part='toggle focused'] {
60-
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
61-
border-color: var-get($theme, 'item-selected-border-color');
62-
color: var-get($theme, 'item-selected-hover-text-color');
63-
}
64-
65-
[part~='toggle']:active {
66-
color: var-get($theme, 'item-selected-hover-text-color');
67-
background: var-get($theme, 'item-selected-hover-background');
68-
border-color: var-get($theme, 'item-selected-hover-border-color');
69-
70-
::slotted(igc-icon) {
71-
color: var-get($theme, 'item-selected-hover-icon-color');
72-
}
73-
}
43+
:host([selected]:hover) [part='toggle focused'],
44+
:host([selected]) [part='toggle focused']:active {
45+
border-color: var-get($theme, 'item-selected-hover-border-color');
7446
}
7547

7648
:host([selected]:disabled),
7749
:host([selected][disabled]) {
7850
[part~='toggle'] {
79-
color: var-get($theme, 'disabled-selected-text-color');
80-
background: var-get($theme, 'disabled-selected-background');
8151
border: none;
82-
83-
&::before {
84-
display: none;
85-
}
86-
}
87-
88-
::slotted(igc-icon) {
89-
color: var-get($theme, 'disabled-selected-icon-color');
9052
}
9153
}

0 commit comments

Comments
 (0)