Skip to content

Commit a58a1a4

Browse files
georgimkvgeorgimkv
authored
feat(ui5-badge): update design (#3529)
1 parent faf3135 commit a58a1a4

File tree

10 files changed

+211
-96
lines changed

10 files changed

+211
-96
lines changed

‎packages/main/src/Badge.hbs

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<div class="ui5-badge-root" dir="{{effectiveDir}}">
2-
{{#if hasIcon}}
3-
<slot name="icon"></slot>
4-
{{/if}}
2+
<slot name="icon"></slot>
53

64
{{#if hasText}}
75
<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>

‎packages/main/src/Badge.js

+22-5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@ const metadata = {
3232
type: String,
3333
defaultValue: "1",
3434
},
35+
36+
/**
37+
* Defines if the badge has an icon.
38+
* @private
39+
*/
40+
_hasIcon: {
41+
type: Boolean,
42+
},
43+
44+
/**
45+
* Defines if the badge has only an icon (and no text).
46+
* @private
47+
*/
48+
_iconOnly: {
49+
type: Boolean,
50+
},
3551
},
3652
managedSlots: true,
3753
slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -114,11 +130,8 @@ class Badge extends UI5Element {
114130
}
115131

116132
onBeforeRendering() {
117-
if (this.hasIcon) {
118-
this.setAttribute("__has-icon", "");
119-
} else {
120-
this.removeAttribute("__has-icon");
121-
}
133+
this._hasIcon = this.hasIcon;
134+
this._iconOnly = this.iconOnly;
122135
}
123136

124137
get hasText() {
@@ -129,6 +142,10 @@ class Badge extends UI5Element {
129142
return !!this.icon.length;
130143
}
131144

145+
get iconOnly() {
146+
return this.hasIcon && !this.hasText;
147+
}
148+
132149
get badgeDescription() {
133150
return this.i18nBundle.getText(BADGE_DESCRIPTION);
134151
}

‎packages/main/src/themes/Badge.css

+46-33
Original file line numberDiff line numberDiff line change
@@ -2,119 +2,132 @@
22

33
:host(:not([hidden])) {
44
display: inline-block;
5-
height: 1.125em;
5+
height: 1em;
66
min-width: 1.125em;
77
max-width: 100%;
8-
padding: 0 0.625em;
9-
color: var(--sapTextColor);
8+
padding: 0 0.3125em;
9+
color: var(--sapAccentColor1);
1010
background: var(--sapLegendBackgroundColor1);
11-
border: solid 1px var(--sapLegendColor1);
12-
border-radius: 1.125em;
11+
border: solid 0.0625em var(--sapAccentColor1);
12+
border-radius: 0.5em;
1313
box-sizing: border-box;
1414
font-family: "72override", var(--sapFontFamily);
1515
text-align: center;
1616
letter-spacing: 0.0125em;
1717
}
1818

19-
/* Bagde with Icon */
20-
:host([__has-icon]) {
21-
padding: 0 0.3125em;
19+
.ui5-badge-root {
20+
display: flex;
21+
align-items: center;
22+
width: 100%;
23+
height: 100%;
24+
box-sizing: border-box;
25+
}
26+
27+
.ui5-badge-text {
28+
width: 100%;
29+
overflow: hidden;
30+
white-space: nowrap;
31+
font-weight: bold;
32+
text-overflow: ellipsis;
33+
text-transform: uppercase;
34+
letter-spacing: inherit;
35+
font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
36+
}
37+
38+
:host([_icon-only]) {
39+
padding: 0 0.1875em;
2240
}
2341

2442
::slotted([ui5-icon]) {
25-
width: .75em;
26-
height: .75em;
43+
width: 0.75em;
44+
height: 0.75em;
45+
min-width: 0.75em;
46+
min-height: 0.75em;
47+
color: inherit;
2748
}
2849

2950
/* IE 11 specific selector */
3051
[ui5-badge] [ui5-icon][slot="icon"] {
3152
display: flex;
3253
}
3354

34-
:host([__has-icon]) .ui5-badge-text {
35-
padding-left: 0.1875em;
55+
:host([_has-icon]) .ui5-badge-text {
56+
padding-left: 0.125em;
3657
}
3758

3859
/* RTL */
39-
:host([__has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
60+
:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
4061
padding-left: 0;
41-
padding-right: 0.1875em;
62+
padding-right: 0.125em;
4263
}
4364

4465
/* Scheme 1 */
4566
:host([color-scheme="1"]) {
4667
background-color: var(--ui5-badge-color-scheme-1-background);
4768
border-color: var(--ui5-badge-color-scheme-1-border);
69+
color: var(--ui5-badge-color-scheme-1-color);
4870
}
4971

5072
/* Scheme 2 */
5173
:host([color-scheme="2"]) {
5274
background-color: var(--ui5-badge-color-scheme-2-background);
5375
border-color: var(--ui5-badge-color-scheme-2-border);
76+
color: var(--ui5-badge-color-scheme-2-color);
5477
}
5578

5679
/* Scheme 3 */
5780
:host([color-scheme="3"]) {
5881
background-color: var(--ui5-badge-color-scheme-3-background);
5982
border-color: var(--ui5-badge-color-scheme-3-border);
83+
color: var(--ui5-badge-color-scheme-3-color);
6084
}
6185

6286
/* Scheme 4 */
6387
:host([color-scheme="4"]) {
6488
background-color: var(--ui5-badge-color-scheme-4-background);
6589
border-color: var(--ui5-badge-color-scheme-4-border);
90+
color: var(--ui5-badge-color-scheme-4-color);
6691
}
6792

6893
/* Scheme 5 */
6994
:host([color-scheme="5"]) {
7095
background-color: var(--ui5-badge-color-scheme-5-background);
7196
border-color: var(--ui5-badge-color-scheme-5-border);
97+
color: var(--ui5-badge-color-scheme-5-color);
7298
}
7399

74100
/* Scheme 6 */
75101
:host([color-scheme="6"]) {
76102
background-color: var(--ui5-badge-color-scheme-6-background);
77103
border-color: var(--ui5-badge-color-scheme-6-border);
104+
color: var(--ui5-badge-color-scheme-6-color);
78105
}
79106

80107
/* Scheme 7 */
81108
:host([color-scheme="7"]) {
82109
background-color: var(--ui5-badge-color-scheme-7-background);
83110
border-color: var(--ui5-badge-color-scheme-7-border);
111+
color: var(--ui5-badge-color-scheme-7-color);
84112
}
85113

86114
/* Scheme 8 */
87115
:host([color-scheme="8"]) {
88116
background-color: var(--ui5-badge-color-scheme-8-background);
89117
border-color: var(--ui5-badge-color-scheme-8-border);
118+
color: var(--ui5-badge-color-scheme-8-color);
90119
}
91120

92121
/* Scheme 9 */
93122
:host([color-scheme="9"]) {
94123
background-color: var(--ui5-badge-color-scheme-9-background);
95124
border-color: var(--ui5-badge-color-scheme-9-border);
125+
color: var(--ui5-badge-color-scheme-9-color);
96126
}
97127

98128
/* Scheme 10 */
99129
:host([color-scheme="10"]) {
100130
background-color: var(--ui5-badge-color-scheme-10-background);
101131
border-color: var(--ui5-badge-color-scheme-10-border);
102-
}
103-
104-
.ui5-badge-root {
105-
display: flex;
106-
align-items: center;
107-
width: 100%;
108-
height: 100%;
109-
box-sizing: border-box;
110-
}
111-
112-
.ui5-badge-text {
113-
width: 100%;
114-
overflow: hidden;
115-
white-space: nowrap;
116-
text-overflow: ellipsis;
117-
text-transform: uppercase;
118-
letter-spacing: inherit;
119-
font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
120-
}
132+
color: var(--ui5-badge-color-scheme-10-color);
133+
}

‎packages/main/src/themes/base/Badge-parameters.css

+29-9
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,43 @@
11
:root {
22
--ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
3+
34
--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
4-
--ui5-badge-color-scheme-1-border: var(--sapLegendColor1);
5+
--ui5-badge-color-scheme-1-border: var(--sapAccentColor1);
6+
--ui5-badge-color-scheme-1-color: var(--sapAccentColor1);
7+
58
--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
6-
--ui5-badge-color-scheme-2-border: var(--sapLegendColor2);
9+
--ui5-badge-color-scheme-2-border: var(--sapAccentColor2);
10+
--ui5-badge-color-scheme-2-color: var(--sapAccentColor2);
11+
712
--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
8-
--ui5-badge-color-scheme-3-border: var(--sapLegendColor3);
13+
--ui5-badge-color-scheme-3-border: var(--sapAccentColor3);
14+
--ui5-badge-color-scheme-3-color: var(--sapAccentColor3);
15+
916
--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
10-
--ui5-badge-color-scheme-4-border: var(--sapLegendColor5);
17+
--ui5-badge-color-scheme-4-border: var(--sapAccentColor4);
18+
--ui5-badge-color-scheme-4-color: var(--sapAccentColor4);
19+
1120
--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
12-
--ui5-badge-color-scheme-5-border: var(--sapLegendColor20);
21+
--ui5-badge-color-scheme-5-border: var(--sapAccentColor5);
22+
--ui5-badge-color-scheme-5-color: var(--sapAccentColor5);
23+
1324
--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
14-
--ui5-badge-color-scheme-6-border: var(--sapLegendColor6);
25+
--ui5-badge-color-scheme-6-border: var(--sapAccentColor6);
26+
--ui5-badge-color-scheme-6-color: var(--sapAccentColor6);
27+
1528
--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
16-
--ui5-badge-color-scheme-7-border: var(--sapLegendColor7);
29+
--ui5-badge-color-scheme-7-border: var(--sapAccentColor7);
30+
--ui5-badge-color-scheme-7-color: var(--sapAccentColor7);
31+
1732
--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor8);
18-
--ui5-badge-color-scheme-8-border: var(--sapLegendColor8);
33+
--ui5-badge-color-scheme-8-border: var(--sapAccentColor8);
34+
--ui5-badge-color-scheme-8-color: var(--sapAccentColor8);
35+
1936
--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
20-
--ui5-badge-color-scheme-9-border: var(--sapLegendColor10);
37+
--ui5-badge-color-scheme-9-border: var(--sapAccentColor10);
38+
--ui5-badge-color-scheme-9-color: var(--sapAccentColor10);
39+
2140
--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
2241
--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
42+
--ui5-badge-color-scheme-10-color: var(--sapAccentColor9);
2343
}

‎packages/main/src/themes/sap_belize_hcb/Badge-parameters.css

+28-9
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,42 @@
22

33
:root {
44
--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
5-
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
6-
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
7-
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
8-
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
9-
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
10-
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
11-
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
12-
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
13-
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
145
--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
6+
--ui5-badge-color-scheme-1-color: var(--sapTextColor);
7+
8+
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
159
--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
10+
--ui5-badge-color-scheme-2-color: var(--sapTextColor);
11+
12+
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
1613
--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
14+
--ui5-badge-color-scheme-3-color: var(--sapTextColor);
15+
16+
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
1717
--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
18+
--ui5-badge-color-scheme-4-color: var(--sapTextColor);
19+
20+
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
1821
--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
22+
--ui5-badge-color-scheme-5-color: var(--sapTextColor);
23+
24+
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
1925
--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
26+
--ui5-badge-color-scheme-6-color: var(--sapTextColor);
27+
28+
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
2029
--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
30+
--ui5-badge-color-scheme-7-color: var(--sapTextColor);
31+
32+
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
2133
--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
34+
--ui5-badge-color-scheme-8-color: var(--sapTextColor);
35+
36+
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
2237
--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
38+
--ui5-badge-color-scheme-9-color: var(--sapTextColor);
39+
40+
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
2341
--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
42+
--ui5-badge-color-scheme-10-color: var(--sapTextColor);
2443
}

‎packages/main/src/themes/sap_belize_hcw/Badge-parameters.css

+28-9
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,42 @@
22

33
:root {
44
--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
5-
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
6-
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
7-
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
8-
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
9-
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
10-
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
11-
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
12-
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
13-
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
145
--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
6+
--ui5-badge-color-scheme-1-color: var(--sapTextColor);
7+
8+
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
159
--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
10+
--ui5-badge-color-scheme-2-color: var(--sapTextColor);
11+
12+
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
1613
--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
14+
--ui5-badge-color-scheme-3-color: var(--sapTextColor);
15+
16+
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
1717
--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
18+
--ui5-badge-color-scheme-4-color: var(--sapTextColor);
19+
20+
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
1821
--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
22+
--ui5-badge-color-scheme-5-color: var(--sapTextColor);
23+
24+
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
1925
--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
26+
--ui5-badge-color-scheme-6-color: var(--sapTextColor);
27+
28+
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
2029
--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
30+
--ui5-badge-color-scheme-7-color: var(--sapTextColor);
31+
32+
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
2133
--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
34+
--ui5-badge-color-scheme-8-color: var(--sapTextColor);
35+
36+
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
2237
--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
38+
--ui5-badge-color-scheme-9-color: var(--sapTextColor);
39+
40+
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
2341
--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
42+
--ui5-badge-color-scheme-10-color: var(--sapTextColor);
2443
}

0 commit comments

Comments
 (0)