Skip to content

Commit 89f440e

Browse files
Copilotkdinev
Copilot
and
kdinev
committed
Add size and dot properties to badge component with updated styles
Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
1 parent 63bab0a commit 89f440e

File tree

7 files changed

+278
-20
lines changed

7 files changed

+278
-20
lines changed

‎src/components/badge/badge.spec.ts‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ describe('Badge', () => {
1919
const el = await fixture<IgcBadgeComponent>(html`<igc-badge></igc-badge>`);
2020

2121
expect(el).dom.to.equal(
22-
`<igc-badge shape="rounded" variant="primary"></igc-badge>`
22+
`<igc-badge shape="rounded" size="medium" variant="primary"></igc-badge>`
2323
);
2424
});
2525

@@ -41,7 +41,7 @@ describe('Badge', () => {
4141
el.variant = 'success';
4242
await elementUpdated(el);
4343
expect(el).dom.to.equal(
44-
`<igc-badge shape="rounded" variant="success"></igc-badge>`
44+
`<igc-badge shape="rounded" size="medium" variant="success"></igc-badge>`
4545
);
4646
});
4747

@@ -55,7 +55,7 @@ describe('Badge', () => {
5555
el.shape = 'rounded';
5656
await elementUpdated(el);
5757
expect(el).dom.to.equal(
58-
`<igc-badge shape="rounded" variant="primary"></igc-badge>`
58+
`<igc-badge shape="rounded" size="medium" variant="primary"></igc-badge>`
5959
);
6060
});
6161

@@ -69,7 +69,44 @@ describe('Badge', () => {
6969
el.outlined = false;
7070
await elementUpdated(el);
7171
expect(el).dom.to.equal(
72-
`<igc-badge shape="rounded" variant="primary"></igc-badge>`
72+
`<igc-badge shape="rounded" size="medium" variant="primary"></igc-badge>`
7373
);
7474
});
75+
76+
it('can change size', async () => {
77+
const el = await fixture<IgcBadgeComponent>(
78+
html`<igc-badge size="small"></igc-badge>`
79+
);
80+
81+
expect(el.size).to.equal('small');
82+
83+
el.size = 'large';
84+
await elementUpdated(el);
85+
expect(el).dom.to.equal(
86+
`<igc-badge shape="rounded" size="large" variant="primary"></igc-badge>`
87+
);
88+
});
89+
90+
it('can be a dot badge', async () => {
91+
const el = await fixture<IgcBadgeComponent>(
92+
html`<igc-badge dot></igc-badge>`
93+
);
94+
95+
expect(el.dot).to.be.true;
96+
97+
el.dot = false;
98+
await elementUpdated(el);
99+
expect(el).dom.to.equal(
100+
`<igc-badge shape="rounded" size="medium" variant="primary"></igc-badge>`
101+
);
102+
});
103+
104+
it('dot badge works with all variants', async () => {
105+
const el = await fixture<IgcBadgeComponent>(
106+
html`<igc-badge dot variant="success"></igc-badge>`
107+
);
108+
109+
expect(el.dot).to.be.true;
110+
expect(el.variant).to.equal('success');
111+
});
75112
});

‎src/components/badge/badge.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
33
import { addThemingController } from '../../theming/theming-controller.js';
44
import { addInternalsController } from '../common/controllers/internals.js';
55
import { registerComponent } from '../common/definitions/register.js';
6-
import type { BadgeShape, StyleVariant } from '../types.js';
6+
import type { BadgeShape, BadgeSize, StyleVariant } from '../types.js';
77
import { styles } from './themes/badge.base.css.js';
88
import { styles as shared } from './themes/shared/badge.common.css.js';
99
import { all } from './themes/themes.js';
@@ -52,6 +52,20 @@ export default class IgcBadgeComponent extends LitElement {
5252
@property({ reflect: true })
5353
public shape: BadgeShape = 'rounded';
5454

55+
/**
56+
* The size of the badge.
57+
* @attr
58+
*/
59+
@property({ reflect: true })
60+
public size: BadgeSize = 'medium';
61+
62+
/**
63+
* Sets whether to render a dot badge (minimal badge without content).
64+
* @attr
65+
*/
66+
@property({ type: Boolean, reflect: true })
67+
public dot = false;
68+
5569
constructor() {
5670
super();
5771
addThemingController(this, all);

‎src/components/badge/themes/badge.base.scss‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
:host {
55
--size: #{rem(22px)};
66
--_badge-size: var(--size);
7+
--_badge-font-size: #{rem(12px)};
8+
--_badge-icon-size: #{rem(12px)};
9+
--_badge-padding: #{rem(4px)};
710

811
width: fit-content;
912
height: fit-content;
@@ -12,6 +15,31 @@
1215
vertical-align: top;
1316
}
1417

18+
:host([size='small']) {
19+
--size: #{rem(16px)};
20+
--_badge-font-size: #{rem(10px)};
21+
--_badge-icon-size: #{rem(10px)};
22+
--_badge-padding: #{rem(2px)};
23+
}
24+
25+
:host([size='medium']) {
26+
--size: #{rem(22px)};
27+
--_badge-font-size: #{rem(12px)};
28+
--_badge-icon-size: #{rem(12px)};
29+
--_badge-padding: #{rem(4px)};
30+
}
31+
32+
:host([size='large']) {
33+
--size: #{rem(28px)};
34+
--_badge-font-size: #{rem(14px)};
35+
--_badge-icon-size: #{rem(16px)};
36+
--_badge-padding: #{rem(6px)};
37+
}
38+
39+
:host([dot]) {
40+
--size: #{rem(8px)};
41+
}
42+
1543
[part='base'] {
1644
@include type-style('caption');
1745

@@ -22,14 +50,29 @@
2250
align-items: center;
2351
overflow: hidden;
2452
white-space: nowrap;
53+
font-size: var(--_badge-font-size);
2554
}
2655

2756
::slotted(*) {
28-
--size: calc(var(--_badge-size) / 2) !important;
57+
--size: var(--_badge-icon-size) !important;
58+
}
59+
60+
::slotted(igc-icon) {
61+
--size: var(--_badge-icon-size) !important;
62+
--ig-icon-size: var(--_badge-icon-size);
63+
--igx-icon-size: var(--_badge-icon-size);
2964
}
3065

31-
:host(:not(:empty)) [part='base'] {
32-
padding-inline: rem(4px);
66+
:host(:not(:empty):not([dot])) [part='base'] {
67+
padding-inline: var(--_badge-padding);
68+
}
69+
70+
:host([dot]) [part='base'] {
71+
min-width: var(--size);
72+
max-width: var(--size);
73+
min-height: var(--size);
74+
max-height: var(--size);
75+
padding: 0;
3376
}
3477

3578
:host([variant='info']) [part='base'] {

‎src/components/badge/themes/shared/badge.common.scss‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,52 @@ $theme: $material;
2121
}
2222

2323
:host([outlined]) [part='base'] {
24-
box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
24+
outline: rem(2px) solid var-get($theme, 'border-color');
25+
outline-offset: rem(-2px);
26+
background: transparent !important;
27+
}
28+
29+
:host([outlined][variant='primary']) [part='base'] {
30+
outline-color: var-get($theme, 'background-color');
31+
color: var-get($theme, 'background-color');
32+
}
33+
34+
:host([outlined][variant='primary']) ::slotted(igc-icon) {
35+
color: var-get($theme, 'background-color');
36+
}
37+
38+
:host([outlined][variant='info']) [part='base'] {
39+
outline-color: color(info, 500);
40+
color: color(info, 500);
41+
}
42+
43+
:host([outlined][variant='info']) ::slotted(igc-icon) {
44+
color: color(info, 500);
45+
}
46+
47+
:host([outlined][variant='success']) [part='base'] {
48+
outline-color: color(success, 500);
49+
color: color(success, 500);
50+
}
51+
52+
:host([outlined][variant='success']) ::slotted(igc-icon) {
53+
color: color(success, 500);
54+
}
55+
56+
:host([outlined][variant='warning']) [part='base'] {
57+
outline-color: color(warn, 500);
58+
color: color(warn, 500);
59+
}
60+
61+
:host([outlined][variant='warning']) ::slotted(igc-icon) {
62+
color: color(warn, 500);
63+
}
64+
65+
:host([outlined][variant='danger']) [part='base'] {
66+
outline-color: color(error, 500);
67+
color: color(error, 500);
68+
}
69+
70+
:host([outlined][variant='danger']) ::slotted(igc-icon) {
71+
color: color(error, 500);
2572
}

‎src/components/badge/themes/shared/badge.indigo.scss‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ $theme: $indigo;
55

66
[part='base'] {
77
@include type-style('button');
8+
}
89

9-
::slotted(igc-icon) {
10-
$icon-size: rem(12px);
11-
12-
--size: #{$icon-size} !important;
13-
--ig-icon-size: #{$icon-size};
14-
--igx-icon-size: #{$icon-size};
15-
}
10+
::slotted(igc-icon) {
11+
--size: var(--_badge-icon-size) !important;
12+
--ig-icon-size: var(--_badge-icon-size);
13+
--igx-icon-size: var(--_badge-icon-size);
1614
}

‎src/components/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export type TreeSelection = 'none' | 'multiple' | 'cascade';
2222
//#region component-specific
2323
export type AvatarShape = 'square' | 'circle' | 'rounded';
2424
export type BadgeShape = 'rounded' | 'square';
25+
export type BadgeSize = 'small' | 'medium' | 'large';
2526
export type ButtonGroupSelection = 'single' | 'single-required' | 'multiple';
2627
export type ButtonVariant = 'contained' | 'flat' | 'outlined' | 'fab';
2728
export type CarouselIndicatorsOrientation = 'end' | 'start';

0 commit comments

Comments
 (0)