Skip to content

Commit c177b83

Browse files
Copilotkdinev
Copilot
and
kdinev
committed
Remove size property, use CSS-based sizing from igniteui-theming
Co-authored-by: kdinev <[email protected]>
1 parent 89f440e commit c177b83

File tree

5 files changed

+60
-67
lines changed

5 files changed

+60
-67
lines changed

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

Lines changed: 5 additions & 19 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" size="medium" variant="primary"></igc-badge>`
22+
`<igc-badge shape="rounded" 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" size="medium" variant="success"></igc-badge>`
44+
`<igc-badge shape="rounded" 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" size="medium" variant="primary"></igc-badge>`
58+
`<igc-badge shape="rounded" variant="primary"></igc-badge>`
5959
);
6060
});
6161

@@ -69,21 +69,7 @@ describe('Badge', () => {
6969
el.outlined = false;
7070
await elementUpdated(el);
7171
expect(el).dom.to.equal(
72-
`<igc-badge shape="rounded" size="medium" variant="primary"></igc-badge>`
73-
);
74-
});
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>`
72+
`<igc-badge shape="rounded" variant="primary"></igc-badge>`
8773
);
8874
});
8975

@@ -97,7 +83,7 @@ describe('Badge', () => {
9783
el.dot = false;
9884
await elementUpdated(el);
9985
expect(el).dom.to.equal(
100-
`<igc-badge shape="rounded" size="medium" variant="primary"></igc-badge>`
86+
`<igc-badge shape="rounded" variant="primary"></igc-badge>`
10187
);
10288
});
10389

‎src/components/badge/badge.ts‎

Lines changed: 1 addition & 8 deletions
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, BadgeSize, StyleVariant } from '../types.js';
6+
import type { BadgeShape, 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,13 +52,6 @@ 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-
6255
/**
6356
* Sets whether to render a dot badge (minimal badge without content).
6457
* @attr

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

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,42 @@
22
@use 'styles/utilities' as *;
33

44
:host {
5-
--size: #{rem(22px)};
5+
--_small-size: #{rem(16px)};
6+
--_small-font-size: #{rem(10px)};
7+
--_small-icon-size: #{rem(10px)};
8+
--_small-padding: #{rem(2px)};
9+
10+
--_medium-size: #{rem(22px)};
11+
--_medium-font-size: #{rem(12px)};
12+
--_medium-icon-size: #{rem(12px)};
13+
--_medium-padding: #{rem(4px)};
14+
15+
--_large-size: #{rem(28px)};
16+
--_large-font-size: #{rem(14px)};
17+
--_large-icon-size: #{rem(16px)};
18+
--_large-padding: #{rem(6px)};
19+
20+
--size: calc(
21+
(var(--_small-size) * var(--is-small)) +
22+
(var(--_medium-size) * var(--is-medium)) +
23+
(var(--_large-size) * var(--is-large))
24+
);
625
--_badge-size: var(--size);
7-
--_badge-font-size: #{rem(12px)};
8-
--_badge-icon-size: #{rem(12px)};
9-
--_badge-padding: #{rem(4px)};
26+
--_badge-font-size: calc(
27+
(var(--_small-font-size) * var(--is-small)) +
28+
(var(--_medium-font-size) * var(--is-medium)) +
29+
(var(--_large-font-size) * var(--is-large))
30+
);
31+
--_badge-icon-size: calc(
32+
(var(--_small-icon-size) * var(--is-small)) +
33+
(var(--_medium-icon-size) * var(--is-medium)) +
34+
(var(--_large-icon-size) * var(--is-large))
35+
);
36+
--_badge-padding: calc(
37+
(var(--_small-padding) * var(--is-small)) +
38+
(var(--_medium-padding) * var(--is-medium)) +
39+
(var(--_large-padding) * var(--is-large))
40+
);
1041

1142
width: fit-content;
1243
height: fit-content;
@@ -15,27 +46,6 @@
1546
vertical-align: top;
1647
}
1748

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-
3949
:host([dot]) {
4050
--size: #{rem(8px)};
4151
}

‎src/components/types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ 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';
2625
export type ButtonGroupSelection = 'single' | 'single-required' | 'multiple';
2726
export type ButtonVariant = 'contained' | 'flat' | 'outlined' | 'fab';
2827
export type CarouselIndicatorsOrientation = 'end' | 'start';

‎stories/badge.stories.ts‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ const metadata: Meta<IgcBadgeComponent> = {
6363
variant: 'primary',
6464
outlined: false,
6565
shape: 'rounded',
66-
size: 'medium',
6766
dot: false,
6867
},
6968
};
@@ -77,8 +76,6 @@ interface IgcBadgeArgs {
7776
outlined: boolean;
7877
/** The shape of the badge. */
7978
shape: 'rounded' | 'square';
80-
/** The size of the badge. */
81-
size: 'small' | 'medium' | 'large';
8279
/** Sets whether to render a dot badge (minimal badge without content). */
8380
dot: boolean;
8481
}
@@ -110,12 +107,11 @@ function renderTabs(args: IgcBadgeArgs) {
110107
}
111108

112109
export const Basic: Story = {
113-
render: ({ outlined, shape, variant, size, dot }) => html`
110+
render: ({ outlined, shape, variant, dot }) => html`
114111
<igc-badge
115112
?outlined=${outlined}
116113
shape=${shape}
117114
variant=${variant}
118-
size=${size}
119115
?dot=${dot}
120116
>
121117
${!dot ? html`<igc-icon name="home"></igc-icon>` : ''}
@@ -148,24 +144,33 @@ export const Sizes: Story = {
148144
width: 100px;
149145
font-weight: 500;
150146
}
147+
.small-badge {
148+
--ig-size: 1;
149+
}
150+
.medium-badge {
151+
--ig-size: 2;
152+
}
153+
.large-badge {
154+
--ig-size: 3;
155+
}
151156
</style>
152157
<div class="badge-container">
153158
<span class="badge-label">Small:</span>
154-
<igc-badge size="small">1</igc-badge>
155-
<igc-badge size="small" variant="info">2</igc-badge>
156-
<igc-badge size="small" variant="success">3</igc-badge>
159+
<igc-badge class="small-badge">1</igc-badge>
160+
<igc-badge class="small-badge" variant="info">2</igc-badge>
161+
<igc-badge class="small-badge" variant="success">3</igc-badge>
157162
</div>
158163
<div class="badge-container">
159164
<span class="badge-label">Medium:</span>
160-
<igc-badge size="medium">1</igc-badge>
161-
<igc-badge size="medium" variant="info">2</igc-badge>
162-
<igc-badge size="medium" variant="success">3</igc-badge>
165+
<igc-badge class="medium-badge">1</igc-badge>
166+
<igc-badge class="medium-badge" variant="info">2</igc-badge>
167+
<igc-badge class="medium-badge" variant="success">3</igc-badge>
163168
</div>
164169
<div class="badge-container">
165170
<span class="badge-label">Large:</span>
166-
<igc-badge size="large">1</igc-badge>
167-
<igc-badge size="large" variant="info">2</igc-badge>
168-
<igc-badge size="large" variant="success">3</igc-badge>
171+
<igc-badge class="large-badge">1</igc-badge>
172+
<igc-badge class="large-badge" variant="info">2</igc-badge>
173+
<igc-badge class="large-badge" variant="success">3</igc-badge>
169174
</div>
170175
`,
171176
};

0 commit comments

Comments
 (0)