Skip to content

Commit 04728f2

Browse files
SisIvanovaSisIvanova
committed
feat(badge): design enhancement
1 parent c177b83 commit 04728f2

File tree

11 files changed

+104
-249
lines changed

11 files changed

+104
-249
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"globby": "^15.0.0",
8181
"husky": "^9.1.7",
8282
"ig-typedoc-theme": "^6.2.3",
83-
"igniteui-theming": "^20.0.0",
83+
"igniteui-theming": "^22.0.0",
8484
"keep-a-changelog": "^2.7.1",
8585
"lint-staged": "^16.2.3",
8686
"lit-analyzer": "^2.0.3",

‎src/components/badge/badge.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default class IgcBadgeComponent extends LitElement {
5353
public shape: BadgeShape = 'rounded';
5454

5555
/**
56-
* Sets whether to render a dot badge (minimal badge without content).
56+
* Sets whether to render a dot type badge.
5757
* @attr
5858
*/
5959
@property({ type: Boolean, reflect: true })

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

Lines changed: 23 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,87 +2,34 @@
22
@use 'styles/utilities' as *;
33

44
:host {
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-
);
25-
--_badge-size: var(--size);
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-
);
41-
425
width: fit-content;
436
height: fit-content;
447
display: inline-flex;
45-
font-weight: 500;
468
vertical-align: top;
479
}
4810

49-
:host([dot]) {
50-
--size: #{rem(8px)};
51-
}
52-
5311
[part='base'] {
54-
@include type-style('caption');
55-
5612
display: inline-flex;
57-
min-width: var(--size);
58-
min-height: var(--size);
13+
min-width: var(--_badge-size);
14+
min-height: var(--_badge-size);
5915
justify-content: center;
6016
align-items: center;
6117
overflow: hidden;
6218
white-space: nowrap;
63-
font-size: var(--_badge-font-size);
19+
font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
20+
font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
21+
line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
22+
letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
23+
text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
6424
}
6525

66-
::slotted(*) {
67-
--size: var(--_badge-icon-size) !important;
68-
}
26+
:host(:not(:empty, [dot])) [part='base'] {
27+
padding-inline: pad-inline(rem(4px), rem(6px), rem(8px));
6928

70-
::slotted(igc-icon) {
71-
--size: var(--_badge-icon-size) !important;
72-
--ig-icon-size: var(--_badge-icon-size);
73-
--igx-icon-size: var(--_badge-icon-size);
74-
}
75-
76-
:host(:not(:empty):not([dot])) [part='base'] {
77-
padding-inline: var(--_badge-padding);
78-
}
79-
80-
:host([dot]) [part='base'] {
81-
min-width: var(--size);
82-
max-width: var(--size);
83-
min-height: var(--size);
84-
max-height: var(--size);
85-
padding: 0;
29+
//should be fixed
30+
&:has(::slotted(igc-icon)) {
31+
padding: 0;
32+
}
8633
}
8734

8835
:host([variant='info']) [part='base'] {
@@ -95,13 +42,21 @@
9542

9643
:host([variant='warning']) [part='base'] {
9744
background: color(warn, 500);
45+
color: contrast-color(warn, 500);
46+
47+
igc-icon,
48+
::slotted(igc-icon) {
49+
color: contrast-color(warn, 500);
50+
}
9851
}
9952

10053
:host([variant='danger']) [part='base'] {
10154
background: color(error, 500);
55+
color: contrast-color(error, 900);
10256
}
10357

10458
:host([shape='rounded']),
105-
:host([shape='rounded']) [part='base'] {
106-
border-radius: calc(var(--size) * 2);
59+
:host([shape='rounded']) [part='base'],
60+
:host([dot]) [part='base'] {
61+
border-radius: calc(var(--_badge-size) * 2);
10762
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
@use 'styles/utilities' as *;
2-
@use '../light/themes' as *;
32

4-
$theme: $bootstrap;
5-
6-
:host([outlined]) [part='base'] {
7-
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
3+
:host([variant='danger']) [part='base'] {
4+
color: contrast-color(error, 100);
85
}

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

Lines changed: 23 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@
33

44
$theme: $material;
55

6+
:host {
7+
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
8+
--badge-size: var(--component-size);
9+
--_badge-size: #{var-get($theme, 'size')};
10+
11+
igc-icon,
12+
::slotted(igc-icon) {
13+
--size: #{sizable(rem(12px), rem(14px), rem(16px))};
14+
--component-size: var(--badge-size);
15+
}
16+
}
17+
618
[part='base'] {
719
box-shadow: var-get($theme, 'elevation');
820
color: var-get($theme, 'text-color');
@@ -16,57 +28,22 @@ $theme: $material;
1628
background: var-get($theme, 'background-color');
1729
}
1830

19-
:host([shape='square']) [part='base'] {
31+
:host([shape='square']:not([dot])) [part='base'] {
2032
border-radius: var-get($theme, 'border-radius');
2133
}
2234

2335
:host([outlined]) [part='base'] {
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);
36+
box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color');
5437
}
5538

56-
:host([outlined][variant='warning']) [part='base'] {
57-
outline-color: color(warn, 500);
58-
color: color(warn, 500);
59-
}
39+
:host([dot]) [part='base'] {
40+
--_dot-size: #{var-get($theme, 'dot-size')};
6041

61-
:host([outlined][variant='warning']) ::slotted(igc-icon) {
62-
color: color(warn, 500);
63-
}
42+
min-width: var(--_dot-size);
43+
min-height: var(--_dot-size);
6444

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);
72-
}
45+
igc-icon,
46+
> * {
47+
display: none;
48+
}
49+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use 'styles/utilities' as *;
2+
3+
:host([variant='info']) [part='base'] {
4+
background: color(info, 700);
5+
}

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

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,27 @@
33

44
$theme: $indigo;
55

6-
[part='base'] {
7-
@include type-style('button');
6+
:host {
7+
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
8+
--badge-size: var(--component-size);
9+
10+
igc-icon,
11+
::slotted(igc-icon) {
12+
--size: #{sizable(rem(8px), rem(10px), rem(12px))};
13+
}
14+
}
15+
16+
:host(:not(:empty, [dot])) [part='base'] {
17+
padding-inline: pad-inline(rem(4px), rem(6px), rem(6px));
818
}
919

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);
20+
:host([variant='success']) [part='base'] {
21+
background: color(success, 700);
22+
}
23+
24+
[part='base'] {
25+
@include type-style('button', false) {
26+
font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size));
27+
line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height));
28+
}
1429
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@use 'styles/utilities' as *;
2+
3+
:host([variant='danger']) [part='base'] {
4+
background: color(error, 700);
5+
}
6+
7+
:host([variant='success']) [part='base'] {
8+
background: color(success, 900);
9+
}
10+
11+
:host([variant='info']) [part='base'] {
12+
background: color(info, 800);
13+
}

‎src/components/badge/themes/themes.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import { styles as materialLight } from './light/badge.material.css.js';
1414
import { styles as shared } from './light/badge.shared.css.js';
1515
// Shared Styles
1616
import { styles as bootstrap } from './shared/badge.bootstrap.css.js';
17+
import { styles as fluent } from './shared/badge.fluent.css.js';
1718
import { styles as indigo } from './shared/badge.indigo.css.js';
19+
import { styles as material } from './shared/badge.material.css.js';
1820

1921
const light = {
2022
shared: css`
@@ -24,10 +26,10 @@ const light = {
2426
${bootstrap} ${bootstrapLight}
2527
`,
2628
material: css`
27-
${materialLight}
29+
${material} ${materialLight}
2830
`,
2931
fluent: css`
30-
${fluentLight}
32+
${fluent} ${fluentLight}
3133
`,
3234
indigo: css`
3335
${indigo} ${indigoLight}
@@ -42,10 +44,10 @@ const dark = {
4244
${bootstrap} ${bootstrapDark}
4345
`,
4446
material: css`
45-
${materialDark}
47+
${material} ${materialDark}
4648
`,
4749
fluent: css`
48-
${fluentDark}
50+
${fluent} ${fluentDark}
4951
`,
5052
indigo: css`
5153
${indigo} ${indigoDark}

0 commit comments

Comments
 (0)