Skip to content

Commit 4b53f14

Browse files
Copilotkdinev
Copilot
and
kdinev
committed
Refactor badge: Remove size input, change dot from type to boolean property
Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
1 parent ba8095d commit 4b53f14

File tree

6 files changed

+65
-105
lines changed

6 files changed

+65
-105
lines changed

‎projects/igniteui-angular/src/lib/badge/README.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
1313
| Name | Type | Description |
1414
|:----------|:-------------:|:------|
1515
| `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
16-
| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, `error`, or `dot`. This will change the background color of the badge according to the values set in the default theme. The `dot` type creates a minimal badge without any content. |
17-
| `size` | string | Set the size of the badge to either `small`, `medium`, or `large`. Default is `medium`. |
16+
| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
17+
| `dot` | boolean | Set whether the badge is displayed as a minimal dot indicator without any content. Default is `false`. |
1818
| `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
1919
| `value` | string | Set the value to be displayed inside the badge. |
2020
| `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |
@@ -30,15 +30,17 @@ Using `igx-badge` with the `igx-avatar` component to show active status.
3030
</igx-avatar>
3131
```
3232

33-
Using `igx-badge` with different sizes.
33+
Using `igx-badge` as a dot indicator for notifications.
3434
```html
35-
<igx-badge size="small" value="5"></igx-badge>
36-
<igx-badge size="medium" value="10"></igx-badge>
37-
<igx-badge size="large" value="99+"></igx-badge>
35+
<igx-badge dot type="success"></igx-badge>
36+
<igx-badge dot outlined type="error"></igx-badge>
3837
```
3938

40-
Using `igx-badge` as a dot indicator.
39+
Using different badge types.
4140
```html
42-
<igx-badge type="dot"></igx-badge>
43-
<igx-badge type="dot" outlined></igx-badge>
41+
<igx-badge type="primary" value="1"></igx-badge>
42+
<igx-badge type="info" value="2"></igx-badge>
43+
<igx-badge type="success" value="3"></igx-badge>
44+
<igx-badge type="warning" value="4"></igx-badge>
45+
<igx-badge type="error" value="5"></igx-badge>
4446
```

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

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { TestBed, waitForAsync } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
4-
import { IgxBadgeComponent, IgxBadgeType, IgxBadgeSize } from './badge.component';
4+
import { IgxBadgeComponent, IgxBadgeType } from './badge.component';
55

66
describe('Badge', () => {
77
beforeEach(waitForAsync(() => {
@@ -12,8 +12,7 @@ describe('Badge', () => {
1212
InitBadgeWithIconComponent,
1313
IgxBadgeComponent,
1414
InitBadgeWithIconARIAComponent,
15-
InitBadgeWithSizeComponent,
16-
InitBadgeWithDotTypeComponent
15+
InitBadgeWithDotComponent
1716
]
1817
}).compileComponents();
1918
}));
@@ -90,31 +89,24 @@ describe('Badge', () => {
9089
expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
9190
});
9291

93-
it('Initializes badge with size', () => {
94-
const fixture = TestBed.createComponent(InitBadgeWithSizeComponent);
95-
fixture.detectChanges();
96-
const badge = fixture.componentInstance.badge;
97-
const domBadge = fixture.debugElement.query(By.css('igx-badge')).nativeElement;
98-
99-
expect(badge.size).toBe(IgxBadgeSize.LARGE);
100-
expect(domBadge.style.getPropertyValue('--component-size')).toBe('var(--ig-size-large)');
101-
});
102-
103-
it('Initializes badge with default size', () => {
104-
const fixture = TestBed.createComponent(InitBadgeWithDefaultsComponent);
92+
it('Initializes badge with dot property', () => {
93+
const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
10594
fixture.detectChanges();
10695
const badge = fixture.componentInstance.badge;
10796

108-
expect(badge.size).toBe(IgxBadgeSize.MEDIUM);
97+
expect(badge.dot).toBeTruthy();
98+
expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
10999
});
110100

111-
it('Initializes badge with dot type', () => {
112-
const fixture = TestBed.createComponent(InitBadgeWithDotTypeComponent);
101+
it('Initializes success badge as dot', () => {
102+
const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
113103
fixture.detectChanges();
114104
const badge = fixture.componentInstance.badge;
115105

116-
expect(badge.type).toBe(IgxBadgeType.DOT);
106+
expect(badge.type).toBe(IgxBadgeType.SUCCESS);
107+
expect(badge.dot).toBeTruthy();
117108
expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
109+
expect(fixture.debugElement.query(By.css('.igx-badge--success'))).toBeTruthy();
118110
});
119111
});
120112

@@ -151,17 +143,9 @@ class InitBadgeWithIconARIAComponent {
151143
}
152144

153145
@Component({
154-
template: `<igx-badge size="large" value="10"></igx-badge>`,
155-
imports: [IgxBadgeComponent]
156-
})
157-
class InitBadgeWithSizeComponent {
158-
@ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
159-
}
160-
161-
@Component({
162-
template: `<igx-badge type="dot"></igx-badge>`,
146+
template: `<igx-badge dot type="success"></igx-badge>`,
163147
imports: [IgxBadgeComponent]
164148
})
165-
class InitBadgeWithDotTypeComponent {
149+
class InitBadgeWithDotComponent {
166150
@ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
167151
}

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

Lines changed: 16 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,9 @@ export const IgxBadgeType = {
1111
INFO: 'info',
1212
SUCCESS: 'success',
1313
WARNING: 'warning',
14-
ERROR: 'error',
15-
DOT: 'dot'
14+
ERROR: 'error'
1615
} as const;
1716
export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
18-
19-
/**
20-
* Determines the igxBadge size
21-
*/
22-
export const IgxBadgeSize = {
23-
SMALL: 'small',
24-
MEDIUM: 'medium',
25-
LARGE: 'large'
26-
} as const;
27-
export type IgxBadgeSize = (typeof IgxBadgeSize)[keyof typeof IgxBadgeSize];
2817
/**
2918
* Badge provides visual notifications used to decorate avatars, menus, etc.
3019
*
@@ -73,7 +62,7 @@ export class IgxBadgeComponent {
7362
* Sets/gets the type of the badge.
7463
*
7564
* @remarks
76-
* Allowed values are `primary`, `info`, `success`, `warning`, `error`, `dot`.
65+
* Allowed values are `primary`, `info`, `success`, `warning`, `error`.
7766
* Providing an invalid value won't display a badge.
7867
*
7968
* @example
@@ -84,21 +73,6 @@ export class IgxBadgeComponent {
8473
@Input()
8574
public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
8675

87-
/**
88-
* Sets/gets the size of the badge.
89-
*
90-
* @remarks
91-
* Allowed values are `small`, `medium`, `large`.
92-
* Default value is `medium`.
93-
*
94-
* @example
95-
* ```html
96-
* <igx-badge size="large"></igx-badge>
97-
* ```
98-
*/
99-
@Input()
100-
public size: string | IgxBadgeSize = IgxBadgeSize.MEDIUM;
101-
10276
/**
10377
* Sets/gets the value to be displayed inside the badge.
10478
*
@@ -209,6 +183,20 @@ export class IgxBadgeComponent {
209183
@HostBinding('class.igx-badge--outlined')
210184
public outlined = false;
211185

186+
/**
187+
* Sets/gets whether the badge is displayed as a dot.
188+
* When true, the badge will be rendered as a minimal 8px indicator without any content.
189+
* Default value is `false`.
190+
*
191+
* @example
192+
* ```html
193+
* <igx-badge dot type="success"></igx-badge>
194+
* ```
195+
*/
196+
@Input({transform: booleanAttribute})
197+
@HostBinding('class.igx-badge--dot')
198+
public dot = false;
199+
212200
/**
213201
* Defines a human-readable, accessor, author-localized description for
214202
* the `type` and the `icon` or `value` of the element.
@@ -245,16 +233,4 @@ export class IgxBadgeComponent {
245233
public get errorClass() {
246234
return this.type === IgxBadgeType.ERROR;
247235
}
248-
249-
@HostBinding('class.igx-badge--dot')
250-
public get dotClass() {
251-
return this.type === IgxBadgeType.DOT;
252-
}
253-
254-
@HostBinding('style.--component-size')
255-
protected get componentSize() {
256-
if (this.size) {
257-
return `var(--ig-size-${this.size})`;
258-
}
259-
}
260236
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
$variant: map.get($theme, '_meta', 'theme');
1111

1212
%igx-badge-display {
13-
--size: var(--component-size, var(--ig-size-medium, #{rem(22px)}));
13+
--size: var(--ig-size, #{rem(22px)});
1414
--_badge-size: var(--size);
1515

1616
display: inline-flex;

‎src/app/badge/badge.sample.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
77
[type]="properties.variant"
88
value="8"
99
[shape]="properties.shape"
10-
[size]="properties.size"
1110
[outlined]="properties.outlined"
11+
[dot]="properties.dot"
1212
></igx-badge>
1313
<span>With Value</span>
1414
</div>
1515
<div class="badge-item">
1616
<igx-badge
1717
[type]="properties.variant"
1818
[shape]="properties.shape"
19-
[size]="properties.size"
2019
[outlined]="properties.outlined"
20+
[dot]="properties.dot"
2121
>
2222
<igx-icon>bluetooth</igx-icon>
2323
</igx-badge>
@@ -28,44 +28,44 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
2828
<igx-badge
2929
[type]="properties.variant"
3030
[shape]="properties.shape"
31-
[size]="properties.size"
3231
[outlined]="properties.outlined"
32+
[dot]="properties.dot"
3333
>
3434
<igx-icon>bluetooth</igx-icon>
3535
</igx-badge>
3636
<span>On Avatar</span>
3737
</div>
3838
</div>
3939

40-
<h3 class="sample-title">Size Variants</h3>
40+
<h3 class="sample-title">Dot Badges</h3>
4141
<div class="badge-examples">
4242
<div class="badge-item">
43-
<igx-badge type="info" value="5" size="small"></igx-badge>
44-
<span>Small</span>
43+
<igx-badge dot type="primary"></igx-badge>
44+
<span>Primary Dot</span>
4545
</div>
4646
<div class="badge-item">
47-
<igx-badge type="info" value="10" size="medium"></igx-badge>
48-
<span>Medium</span>
47+
<igx-badge dot type="info"></igx-badge>
48+
<span>Info Dot</span>
4949
</div>
5050
<div class="badge-item">
51-
<igx-badge type="info" value="99+" size="large"></igx-badge>
52-
<span>Large</span>
51+
<igx-badge dot type="success"></igx-badge>
52+
<span>Success Dot</span>
53+
</div>
54+
<div class="badge-item">
55+
<igx-badge dot type="warning"></igx-badge>
56+
<span>Warning Dot</span>
5357
</div>
54-
</div>
55-
56-
<h3 class="sample-title">Dot Type</h3>
57-
<div class="badge-examples">
5858
<div class="badge-item">
59-
<igx-badge type="dot"></igx-badge>
60-
<span>Default Dot</span>
59+
<igx-badge dot type="error"></igx-badge>
60+
<span>Error Dot</span>
6161
</div>
6262
<div class="badge-item">
63-
<igx-badge type="dot" outlined></igx-badge>
63+
<igx-badge dot outlined type="success"></igx-badge>
6464
<span>Outlined Dot</span>
6565
</div>
6666
<div class="badge-item avatar-sample">
6767
<igx-avatar icon="face" shape="rounded"></igx-avatar>
68-
<igx-badge type="dot"></igx-badge>
68+
<igx-badge dot type="success"></igx-badge>
6969
<span>Dot on Avatar</span>
7070
</div>
7171
</div>

‎src/app/badge/badge.sample.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,17 @@ export class BadgeSampleComponent {
4747
variant: {
4848
control: {
4949
type: 'select',
50-
options: ['default', 'info', 'success', 'warning', 'error', 'dot'],
50+
options: ['default', 'info', 'success', 'warning', 'error'],
5151
defaultValue: 'default'
5252
}
5353
},
54-
size: {
54+
outlined: {
5555
control: {
56-
type: 'button-group',
57-
options: ['small', 'medium', 'large'],
58-
defaultValue: 'medium'
56+
type: 'boolean',
57+
defaultValue: false
5958
}
6059
},
61-
outlined: {
60+
dot: {
6261
control: {
6362
type: 'boolean',
6463
defaultValue: false
@@ -90,8 +89,7 @@ export class BadgeSampleComponent {
9089
info: 'info',
9190
success: 'success',
9291
warning: 'warning',
93-
error: 'danger',
94-
dot: 'primary',
92+
error: 'danger'
9593
})
9694
);
9795

0 commit comments

Comments
 (0)