Skip to content

Commit 0099cdd

Browse files
SisIvanovaSisIvanova
authored
refactor(btn-group): bundle styles with component (#15569)
1 parent e487cc4 commit 0099cdd

File tree

19 files changed

+754
-38
lines changed

19 files changed

+754
-38
lines changed

‎projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {
1212
ViewChildren,
1313
OnDestroy,
1414
ElementRef,
15-
booleanAttribute
15+
booleanAttribute,
16+
ViewEncapsulation
1617
} from '@angular/core';
1718
import { Subject } from 'rxjs';
1819
import { IgxButtonDirective } from '../directives/button/button.directive';
@@ -57,6 +58,8 @@ let NEXT_ID = 0;
5758
@Component({
5859
selector: 'igx-buttongroup',
5960
templateUrl: 'buttongroup-content.component.html',
61+
styleUrl: 'buttongroup-content.component.css',
62+
encapsulation: ViewEncapsulation.None,
6063
imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
6164
})
6265
export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
@@ -77,12 +80,32 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
7780
@Input()
7881
public id = `igx-buttongroup-${NEXT_ID++}`;
7982

83+
/** @hidden @internal */
84+
@HostBinding('class.igx-button-group')
85+
public cssClass = 'igx-button-group';
86+
87+
/** @hidden @internal */
88+
8089
/**
8190
* @hidden
8291
*/
8392
@HostBinding('style.zIndex')
8493
public zIndex = 0;
8594

95+
/**
96+
* Sets/gets the role attribute value.
97+
*
98+
* @example
99+
* ```typescript
100+
* @ViewChild("MyButtonGroup", { read: IgxButtonGroupComponent })
101+
* public badge: IgxButtonGroupComponent;
102+
*
103+
* buttonGroup.role = 'group';
104+
* ```
105+
*/
106+
@HostBinding('attr.role')
107+
public role = 'group';
108+
86109
/**
87110
* Allows you to set a style using the `itemContentCssClass` input.
88111
* The value should be the CSS class name that will be applied to the button group.
@@ -286,6 +309,7 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
286309
* }
287310
* ```
288311
*/
312+
@HostBinding('class.igx-button-group--vertical')
289313
public get isVertical(): boolean {
290314
return this._isVertical;
291315
}

‎projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
<div class="igx-button-group" role="group" [class.igx-button-group--vertical]="isVertical">
2-
@for (button of values; track button) {
3-
<button
4-
type="button"
5-
igxButton="flat"
6-
[selected]="button.selected"
7-
[attr.data-togglable]="button.togglable"
8-
[disabled]="disabled || button.disabled"
9-
[igxLabel]="button.label"
10-
[igxRipple]="button.ripple"
11-
>
12-
<span class="igx-button-group__item-content {{ itemContentCssClass }}">
13-
@if (button.icon) {
14-
<igx-icon>{{button.icon}}</igx-icon>
15-
}
16-
@if (button.label) {
17-
<span class="igx-button-group__button-text">{{button.label}}</span>
18-
}
19-
</span>
20-
</button>
21-
}
22-
<ng-content></ng-content>
23-
</div>
1+
@for (button of values; track button) {
2+
<button
3+
type="button"
4+
igxButton="flat"
5+
[selected]="button.selected"
6+
[attr.data-togglable]="button.togglable"
7+
[disabled]="disabled || button.disabled"
8+
[igxLabel]="button.label"
9+
[igxRipple]="button.ripple"
10+
>
11+
<span class="igx-button-group__item-content {{ itemContentCssClass }}">
12+
@if (button.icon) {
13+
<igx-icon>{{ button.icon }}</igx-icon>
14+
}
15+
@if (button.label) {
16+
<span class="igx-button-group__button-text">{{ button.label }}</span>
17+
}
18+
</span>
19+
</button>
20+
}
21+
<ng-content></ng-content>

‎projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/buttonGroup/themes/_base.scss‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/themes' as *;
3+
@use 'igniteui-theming/sass/typography' as *;
4+
@use 'styles/themes/standalone' as *;
5+
@use './light/tokens' as *;
6+
7+
$_theme: $material;
8+
9+
@include layer(base) {
10+
@include b(igx-button-group) {
11+
--item-min-width: rem(42px);
12+
13+
display: flex;
14+
box-shadow: var-get($_theme, 'elevation');
15+
border-radius: var-get($_theme, 'border-radius');
16+
17+
button {
18+
// The margin here is required to fix a bug in Safari #7858
19+
margin-top: 0;
20+
margin-inline-end: 0;
21+
margin-bottom: 0;
22+
}
23+
24+
@include e(item) {
25+
@include type-style(button) {
26+
text-align: center;
27+
}
28+
29+
border: rem(1px) solid var-get($_theme, 'item-border-color');
30+
color: var-get($_theme, 'item-text-color');
31+
background: var-get($_theme, 'item-background');
32+
min-width: var(--item-min-width);
33+
display: flex;
34+
flex: 1 0 0%;
35+
justify-content: center;
36+
align-items: center;
37+
text-decoration: none;
38+
cursor: pointer;
39+
user-select: none;
40+
position: relative;
41+
z-index: 0;
42+
43+
igx-icon {
44+
color: var-get($_theme, 'item-icon-color');
45+
}
46+
47+
&:hover {
48+
color: var-get($_theme, 'item-hover-text-color');
49+
background: var-get($_theme, 'item-hover-background');
50+
border-color: var-get($_theme, 'item-hover-border-color');
51+
52+
igx-icon {
53+
color: var-get($_theme, 'item-hover-icon-color');
54+
}
55+
}
56+
57+
&:active {
58+
color: var-get($_theme, 'item-hover-text-color');
59+
background: var-get($_theme, 'item-hover-background');
60+
border-color: var-get($_theme, 'item-hover-border-color');
61+
62+
igx-icon {
63+
color: var-get($_theme, 'item-hover-icon-color');
64+
}
65+
}
66+
67+
&[igxButton] {
68+
border-radius: 0;
69+
}
70+
71+
&[igxButton][disabled='true'] {
72+
color: var-get($_theme, 'disabled-text-color');
73+
background: var-get($_theme, 'disabled-background-color');
74+
border-color: var-get($_theme, 'item-disabled-border');
75+
76+
igx-icon {
77+
color: var-get($_theme, 'disabled-text-color');
78+
}
79+
}
80+
81+
&[igxButton].igx-button--focused {
82+
color: var-get($_theme, 'item-hover-text-color');
83+
background: var-get($_theme, 'item-hover-background');
84+
border-color: var-get($_theme, 'item-hover-border-color');
85+
86+
igx-icon {
87+
color: var-get($_theme, 'item-hover-icon-color');
88+
}
89+
90+
&:hover {
91+
color: var-get($_theme, 'item-hover-text-color');
92+
background: var-get($_theme, 'item-hover-background');
93+
94+
igx-icon {
95+
color: var-get($_theme, 'item-hover-icon-color');
96+
}
97+
}
98+
}
99+
100+
&:not(:nth-child(1)) {
101+
margin-inline-start: rem(-1px);
102+
}
103+
104+
&:first-of-type {
105+
border-start-start-radius: inherit;
106+
border-end-start-radius: inherit;
107+
}
108+
109+
&:last-of-type {
110+
border-start-end-radius: inherit;
111+
border-end-end-radius: inherit;
112+
}
113+
}
114+
115+
@include e(item, $m: selected) {
116+
color: var-get($_theme, 'item-selected-text-color');
117+
background: var-get($_theme, 'item-selected-background');
118+
border-color: var-get($_theme, 'item-selected-border-color');
119+
position: relative;
120+
z-index: 1;
121+
122+
&[igxButton] {
123+
border-color: var-get($_theme, 'item-selected-border-color');
124+
}
125+
126+
igx-icon {
127+
color: var-get($_theme, 'item-selected-icon-color');
128+
}
129+
130+
&:hover {
131+
border-color: var-get($_theme, 'item-selected-hover-border-color');
132+
color: var-get($_theme, 'item-selected-hover-text-color');
133+
background: var-get($_theme, 'item-selected-hover-background');
134+
135+
igx-icon {
136+
color: var-get($_theme, 'item-selected-hover-icon-color');
137+
}
138+
}
139+
140+
&[igxButton].igx-button--focused {
141+
&:hover {
142+
color: var-get($_theme, 'item-selected-hover-text-color');
143+
background: var-get($_theme, 'item-selected-hover-background');
144+
border-color: var-get($_theme, 'item-selected-hover-border-color');
145+
}
146+
147+
&:active {
148+
background: var-get($_theme, 'item-selected-hover-background');
149+
color: var-get($_theme, 'item-selected-hover-text-color');
150+
151+
&::before {
152+
background: var-get($_theme, 'item-selected-focus-background');
153+
}
154+
155+
igx-icon {
156+
color: var-get($_theme, 'item-selected-hover-icon-color');
157+
}
158+
}
159+
}
160+
161+
&[igxButton][disabled='true'] {
162+
position: relative;
163+
164+
&::before {
165+
position: absolute;
166+
content: '';
167+
top: 0;
168+
bottom: 0;
169+
inset-inline-end: 0;
170+
inset-inline-start: 0;
171+
background: var-get($_theme, 'disabled-selected-background');
172+
}
173+
}
174+
}
175+
176+
@include e(item-content) {
177+
display: flex;
178+
align-items: center;
179+
flex-flow: row nowrap;
180+
min-width: 0;
181+
182+
* ~ * {
183+
margin-inline-start: rem(10px, 16px);
184+
}
185+
}
186+
187+
@include e(button-text) {
188+
@include ellipsis();
189+
190+
width: 100%;
191+
}
192+
193+
@include m(vertical) {
194+
flex-flow: column;
195+
196+
@include e(item) {
197+
&:not(:nth-child(1)) {
198+
margin-top: rem(-1px) !important;
199+
margin-inline-start: 0;
200+
}
201+
202+
&:first-of-type {
203+
border-start-start-radius: inherit;
204+
border-start-end-radius: inherit;
205+
border-end-start-radius: 0;
206+
border-end-end-radius: 0;
207+
}
208+
209+
&:last-of-type {
210+
border-start-start-radius: 0;
211+
border-start-end-radius: 0;
212+
border-end-start-radius: inherit;
213+
border-end-end-radius: inherit;
214+
}
215+
}
216+
}
217+
}
218+
}

‎projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-button-group, $tokens, dark);

‎projects/igniteui-angular/src/lib/buttonGroup/themes/dark/_tokens.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/button-group' as *;
3+
4+
$material: digest-schema($dark-material-button-group);
5+
$bootstrap: digest-schema($dark-bootstrap-button-group);
6+
$fluent: digest-schema($dark-fluent-button-group);
7+
$indigo: digest-schema($dark-indigo-button-group);

‎projects/igniteui-angular/src/lib/buttonGroup/themes/light/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-button-group, $tokens, light);

‎projects/igniteui-angular/src/lib/buttonGroup/themes/light/_tokens.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/button-group' as *;
3+
4+
$base: digest-schema($light-button-group);
5+
$material: digest-schema($material-button-group);
6+
$bootstrap: digest-schema($bootstrap-button-group);
7+
$fluent: digest-schema($fluent-button-group);
8+
$indigo: digest-schema($indigo-button-group);

0 commit comments

Comments
 (0)