Skip to content

Commit fd64858

Browse files
kdinevkdinev
authored
Merge pull request #8460 from IgniteUI/SIvanova/small-badge-option
feat(badge): provide a small badge option
2 parents fa5d77e + 1bd7b27 commit fd64858

File tree

6 files changed

+50
-81
lines changed

6 files changed

+50
-81
lines changed

‎projects/igniteui-angular/src/lib/badge/badge.component.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
<div class="igx-badge__circle" [ngClass]="setClasses()" [attr.aria-roledescription]="roleDescription">
2-
<span *ngIf="!icon" class="igx-badge__circle-value">{{value}}</span>
3-
<igx-icon *ngIf="icon" fontSet="material">{{icon}}</igx-icon>
4-
</div>
1+
<span *ngIf="!icon" class="igx-badge__value">{{value}}</span>
2+
<igx-icon *ngIf="icon">{{icon}}</igx-icon>

‎projects/igniteui-angular/src/lib/badge/badge.component.spec.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ describe('Badge', () => {
3232
expect(badge.value).toBeTruthy();
3333
expect(badge.type).toBeTruthy();
3434

35-
expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
36-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--error'))).toBeTruthy();
35+
expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
36+
expect(fixture.debugElement.query(By.css('.igx-badge--error'))).toBeTruthy();
3737

3838
expect(badge.value).toMatch('22');
3939
expect(badge.type).toMatch('error');
@@ -63,9 +63,8 @@ describe('Badge', () => {
6363
expect(badge.value).toMatch('');
6464
expect(badge.icon).toBeFalsy();
6565

66-
expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
67-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--default'))).toBeTruthy();
68-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--icon'))).toBeFalsy();
66+
expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
67+
expect(fixture.debugElement.query(By.css('.igx-badge--icon'))).toBeFalsy();
6968
});
7069

7170
it('Initializes badge with icon', () => {
@@ -77,8 +76,8 @@ describe('Badge', () => {
7776
expect(badge.type === IgxBadgeType.INFO).toBeTruthy();
7877
expect(badge.value === '').toBeTruthy();
7978

80-
expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
81-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--info'))).toBeTruthy();
79+
expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
80+
expect(fixture.debugElement.query(By.css('.igx-badge--info'))).toBeTruthy();
8281
});
8382

8483
it('Initializes badge with icon ARIA', () => {
@@ -89,7 +88,7 @@ describe('Badge', () => {
8988
const expectedDescription = `${badge.type} type badge with icon type ${badge.icon}`;
9089
expect(badge.roleDescription).toMatch(expectedDescription);
9190

92-
const container = fixture.nativeElement.querySelectorAll('.igx-badge__circle--default')[0];
91+
const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
9392
expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
9493
});
9594
});

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

Lines changed: 16 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export class IgxBadgeComponent {
153153
* @hidden
154154
* @internal
155155
*/
156+
@HostBinding('attr.aria-roledescription')
156157
get roleDescription() {
157158
// tslint:disable-next-line:prefer-conditional-expression
158159
if (this.icon) {
@@ -163,45 +164,25 @@ export class IgxBadgeComponent {
163164
return this.type + ' badge type without value';
164165
}
165166

166-
/**
167-
* Method which makes the name of the class more descriptive.
168-
* This helps the styling of the badges.
169-
* @hidden
170-
* @internal
171-
*/
172-
public setClasses() {
173-
let classes = {};
167+
@HostBinding('class.igx-badge--info')
168+
public get infoClass() {
169+
return this.type === IgxBadgeType.INFO;
170+
}
174171

175-
switch (IgxBadgeType[this.type.toUpperCase()]) {
176-
case IgxBadgeType.INFO:
177-
classes = {
178-
[`${this.cssClass}__circle--info`]: true
179-
};
180-
break;
181-
case IgxBadgeType.SUCCESS:
182-
classes = {
183-
[`${this.cssClass}__circle--success`]: true
184-
};
185-
break;
186-
case IgxBadgeType.WARNING:
187-
classes = {
188-
[`${this.cssClass}__circle--warning`]: true
189-
};
190-
break;
191-
case IgxBadgeType.ERROR:
192-
classes = {
193-
[`${this.cssClass}__circle--error`]: true
194-
};
195-
break;
196-
default:
197-
classes = {
198-
[`${this.cssClass}__circle--default`]: true
199-
};
200-
}
172+
@HostBinding('class.igx-badge--success')
173+
public get successClass() {
174+
return this.type === IgxBadgeType.SUCCESS;
175+
}
201176

202-
return classes;
177+
@HostBinding('class.igx-badge--warning')
178+
public get warningClass() {
179+
return this.type === IgxBadgeType.WARNING;
203180
}
204181

182+
@HostBinding('class.igx-badge--error')
183+
public get errorClass() {
184+
return this.type === IgxBadgeType.ERROR;
185+
}
205186
}
206187

207188
/**

‎projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,28 @@
1111

1212
@extend %igx-badge-display !optional;
1313

14-
@include e(circle) {
15-
@extend %igx-badge-display !optional;
16-
@extend %igx-badge--circle !optional;
17-
}
18-
19-
@include e(circle-value) {
14+
@include e(value) {
2015
@extend %igx-badge-value !optional;
2116
}
2217

23-
@include e(circle, $m: default) {
18+
@include m(default) {
2419
@extend %igx-badge--default !optional;
2520
}
2621

27-
@include e(circle, $m: info) {
28-
@extend %igx-badge-display !optional;
22+
@include m(info) {
2923
@extend %igx-badge--info !optional;
3024
}
3125

32-
@include e(circle, $m: success) {
33-
@extend %igx-badge-display !optional;
34-
@extend %igx-circle--success !optional;
26+
@include m(success) {
27+
@extend %igx-badge--success !optional;
3528
}
3629

37-
@include e(circle, $m: warning) {
38-
@extend %igx-badge-display !optional;
39-
@extend %igx-circle--warn !optional;
30+
@include m(warning) {
31+
@extend %igx-badge--warn !optional;
4032
}
4133

42-
@include e(circle, $m: error) {
43-
@extend %igx-badge-display !optional;
44-
@extend %igx-circle--error !optional;
34+
@include m(error) {
35+
@extend %igx-badge--error !optional;
4536
}
4637

4738
@include m(hidden) {

‎projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,13 @@
124124
font-weight: $badge-font-weight;
125125
color: --var($theme, 'text-color');
126126
line-height: 1;
127+
background: --var($theme, 'background-color');
128+
border-radius: --var($theme, 'border-radius');
129+
box-shadow: --var($theme, 'shadow');
130+
border-width: --var($theme, 'border-width');
131+
border-color: --var($theme, 'border-color');
132+
border-style: $border-type;
133+
overflow: hidden;
127134

128135
igx-icon {
129136
display: inline-flex;
@@ -142,32 +149,19 @@
142149
padding: $badge-value-padding;
143150
}
144151

145-
%igx-badge--circle {
146-
border-radius: --var($theme, 'border-radius');
147-
box-shadow: --var($theme, 'shadow');
148-
border-width: --var($theme, 'border-width');
149-
border-color: --var($theme, 'border-color');
150-
border-style: $border-type;
151-
overflow: hidden;
152-
}
153-
154-
%igx-badge--default {
155-
background: --var($theme, 'background-color');
156-
}
157-
158-
%igx-circle--success {
152+
%igx-badge--success {
159153
background: igx-color($palette, 'success');
160154
}
161155

162156
%igx-badge--info {
163157
background: igx-color($palette, 'info');
164158
}
165159

166-
%igx-circle--warn {
160+
%igx-badge--warn {
167161
background: igx-color($palette, 'warn');
168162
}
169163

170-
%igx-circle--error {
164+
%igx-badge--error {
171165
background: igx-color($palette, 'error');
172166
}
173167

‎src/app/badge/badge.sample.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,9 @@
1212
height: 88px;
1313
align-items: center;
1414
}
15+
16+
.badge-theme {
17+
min-width: 15px;
18+
width: 15px;
19+
height: 15px;
20+
}

0 commit comments

Comments
 (0)