Skip to content

Commit 8496211

Browse files
ilhan007ilhan007
authored
feat(ui5-badge): iniital implementation (#521)
1 parent 4003029 commit 8496211

23 files changed

+641
-8
lines changed

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
1212
import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
1313
import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
1414

15+
import Badge from "./dist/Badge.js";
1516
import BusyIndicator from "./dist/BusyIndicator.js";
1617
import Button from "./dist/Button.js";
1718
import CheckBox from "./dist/CheckBox.js";

‎packages/main/src/Badge.hbs

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="ui5-badge-wrapper" dir="{{rtl}}">
2+
<slot name="icon"></slot>
3+
4+
{{#if hasText}}
5+
<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>
6+
{{/if}}
7+
</div>

‎packages/main/src/Badge.js

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
2+
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
3+
import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
4+
import Icon from "./Icon.js";
5+
6+
// Template
7+
import BadgeRenderer from "./build/compiled/BadgeRenderer.lit.js";
8+
9+
// Styles
10+
import badgeCss from "./themes/Badge.css.js";
11+
12+
// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
13+
import "./ThemePropertiesProvider.js";
14+
15+
/**
16+
* @public
17+
*/
18+
const metadata = {
19+
tag: "ui5-badge",
20+
properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
21+
22+
/**
23+
* Defines the color scheme of the <code>ui5-badge</code>.
24+
* There are 10 predefined schemes. Each scheme applies different values for the <code>background-color> and <code>border-color</code>.
25+
* To use one you can set a number from <code>"1"</code> to <code>"10"</code>.
26+
* <br><br>
27+
* <b>Note:</b> color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
28+
* @type {string}
29+
* @defaultvalue ""
30+
* @public
31+
*/
32+
colorScheme: {
33+
type: String,
34+
},
35+
},
36+
slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
37+
/**
38+
* Defines the text of the <code>ui5-badge</code>.
39+
* <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
40+
*
41+
* @type {Node[]}
42+
* @slot
43+
* @public
44+
*/
45+
text: {
46+
type: Node,
47+
multiple: true,
48+
},
49+
50+
/**
51+
* Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
52+
*
53+
* @type {Icon}
54+
* @slot
55+
* @public
56+
*/
57+
icon: {
58+
type: Icon,
59+
},
60+
61+
},
62+
defaultSlot: "text",
63+
renderer: BadgeRenderer,
64+
};
65+
66+
/**
67+
* @class
68+
* <h3 class="comment-api-title">Overview</h3>
69+
*
70+
* The <code>ui5-badge</code> is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes.
71+
* It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).
72+
*
73+
* <h3>Usage Guidelines</h3>
74+
* <ul>
75+
* <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
76+
* <li>When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.</li>
77+
* <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
78+
* </ul>
79+
*
80+
* <h3>ES6 Module Import</h3>
81+
*
82+
* <code>import "@ui5/webcomponents/dist/Badge";</code>
83+
*
84+
* @constructor
85+
* @author SAP SE
86+
* @alias sap.ui.webcomponents.main.Badge
87+
* @extends sap.ui.webcomponents.base.UI5Element
88+
* @tagname ui5-badge
89+
* @since 0.12.0
90+
* @public
91+
*/
92+
class Badge extends UI5Element {
93+
static get metadata() {
94+
return metadata;
95+
}
96+
97+
static get renderer() {
98+
return BadgeRenderer;
99+
}
100+
101+
static get styles() {
102+
return badgeCss;
103+
}
104+
105+
onBeforeRendering() {
106+
if (this.hasIcon) {
107+
this.setAttribute("__has-icon", "");
108+
} else {
109+
this.removeAttribute("__has-icon");
110+
}
111+
}
112+
113+
get hasText() {
114+
return !!this.textContent.trim().length;
115+
}
116+
117+
get hasIcon() {
118+
return !!this.icon;
119+
}
120+
121+
get rtl() {
122+
return getEffectiveRTL() ? "rtl" : undefined;
123+
}
124+
}
125+
126+
Bootstrap.boot().then(_ => {
127+
Badge.define();
128+
});
129+
130+
export default Badge;

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

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
:host(ui5-badge:not([hidden])) {
2+
display: inline-flex;
3+
height: 1.125rem;
4+
min-width: 1.125rem;
5+
max-width: 100%;
6+
padding: 0 0.625rem;
7+
color: var(--sapUiBaseText);
8+
background: var(--sapUiGroupContentBackground);
9+
border: solid 1px var(--sapUiGroupContentBorderColor);
10+
border-radius: 1.125rem;
11+
box-sizing: border-box;
12+
font-size: var(--sapMFontSmallSize);
13+
text-align: center;
14+
}
15+
16+
/* Bagde with Icon */
17+
:host(ui5-badge[__has-icon]) {
18+
padding: 0 0.3125rem;
19+
}
20+
21+
:host(ui5-badge[__has-icon]) .ui5-badge-text {
22+
padding-left: 0.1875rem;
23+
}
24+
25+
/* RTL */
26+
:host(ui5-badge[__has-icon]) .ui5-badge-wrapper[rtl] .ui5-badge-text {
27+
padding-right: 0.1875rem;
28+
}
29+
30+
/* Scheme 1 */
31+
:host(ui5-badge[color-scheme="1"]) {
32+
background-color: var(--ui5-badge-bg-color-scheme-1);
33+
border-color: var(--ui5-badge-border-color-scheme-1);
34+
}
35+
36+
/* Scheme 2 */
37+
:host(ui5-badge[color-scheme="2"]) {
38+
background-color: var(--ui5-badge-bg-color-scheme-2);
39+
border-color: var(--ui5-badge-border-color-scheme-2);
40+
}
41+
42+
/* Scheme 3 */
43+
:host(ui5-badge[color-scheme="3"]) {
44+
background-color: var(--ui5-badge-bg-color-scheme-3);
45+
border-color: var(--ui5-badge-border-color-scheme-3);
46+
}
47+
48+
/* Scheme 4 */
49+
:host(ui5-badge[color-scheme="4"]) {
50+
background-color: var(--ui5-badge-bg-color-scheme-4);
51+
border-color: var(--ui5-badge-border-color-scheme-4);
52+
}
53+
54+
/* Scheme 5 */
55+
:host(ui5-badge[color-scheme="5"]) {
56+
background-color: var(--ui5-badge-bg-color-scheme-5);
57+
border-color: var(--ui5-badge-border-color-scheme-5);
58+
}
59+
60+
/* Scheme 6 */
61+
:host(ui5-badge[color-scheme="6"]) {
62+
background-color: var(--ui5-badge-bg-color-scheme-6);
63+
border-color: var(--ui5-badge-border-color-scheme-6);
64+
}
65+
66+
/* Scheme 7 */
67+
:host(ui5-badge[color-scheme="7"]) {
68+
background-color: var(--ui5-badge-bg-color-scheme-7);
69+
border-color: var(--ui5-badge-border-color-scheme-7);
70+
}
71+
72+
/* Scheme 8 */
73+
:host(ui5-badge[color-scheme="8"]) {
74+
background-color: var(--ui5-badge-bg-color-scheme-8);
75+
border-color: var(--ui5-badge-border-color-scheme-8);
76+
}
77+
78+
/* Scheme 9 */
79+
:host(ui5-badge[color-scheme="9"]) {
80+
background-color: var(--ui5-badge-bg-color-scheme-9);
81+
border-color: var(--ui5-badge-border-color-scheme-9);
82+
}
83+
84+
/* Scheme 10 */
85+
:host(ui5-badge[color-scheme="10"]) {
86+
background-color: var(--ui5-badge-bg-color-scheme-10);
87+
border-color: var(--ui5-badge-border-color-scheme-10);
88+
}
89+
90+
.ui5-badge-wrapper {
91+
display: inline-flex;
92+
align-items: center;
93+
width: 100%;
94+
box-sizing: border-box;
95+
}
96+
97+
.ui5-badge-text {
98+
width: 100%;
99+
overflow: hidden;
100+
white-space: nowrap;
101+
text-overflow: ellipsis;
102+
text-transform: uppercase;
103+
letter-spacing: 0.0125rem;
104+
}
105+
106+
/* ================================== */
107+
/* ======= IE pair of styles ======== */
108+
/* ================================== */
109+
ui5-badge:not([hidden]) {
110+
display: inline-flex;
111+
height: 1.125rem;
112+
min-width: 1.125rem;
113+
max-width: 100%;
114+
padding: 0 0.625rem;
115+
color: var(--sapUiBaseText);
116+
background: var(--sapUiGroupContentBackground);
117+
border: solid 1px var(--sapUiGroupContentBorderColor);
118+
border-radius: 1.125rem;
119+
box-sizing: border-box;
120+
font-size: var(--sapMFontSmallSize);
121+
text-align: center;
122+
}
123+
124+
ui5-badge[__has-icon] {
125+
padding: 0 0.3125rem;
126+
}
127+
128+
ui5-badge[__has-icon] .ui5-badge-text {
129+
padding-left: 0.1875rem;
130+
}
131+
132+
ui5-badge[__has-icon] .ui5-badge-wrapper[rtl] .ui5-badge-text {
133+
padding-right: 0.1875rem;
134+
}
135+
136+
/* Scheme 1 */
137+
ui5-badge[color-scheme="1"] {
138+
background-color: var(--ui5-badge-bg-color-scheme-1);
139+
border-color: var(--ui5-badge-border-color-scheme-1);
140+
}
141+
142+
/* Scheme 2 */
143+
ui5-badge[color-scheme="2"] {
144+
background-color: var(--ui5-badge-bg-color-scheme-2);
145+
border-color: var(--ui5-badge-border-color-scheme-2);
146+
}
147+
148+
/* Scheme 3 */
149+
ui5-badge[color-scheme="3"] {
150+
background-color: var(--ui5-badge-bg-color-scheme-3);
151+
border-color: var(--ui5-badge-border-color-scheme-3);
152+
}
153+
154+
/* Scheme 4 */
155+
ui5-badge[color-scheme="4"] {
156+
background-color: var(--ui5-badge-bg-color-scheme-4);
157+
border-color: var(--ui5-badge-border-color-scheme-4);
158+
}
159+
160+
/* Scheme 5 */
161+
ui5-badge[color-scheme="5"] {
162+
background-color: var(--ui5-badge-bg-color-scheme-5);
163+
border-color: var(--ui5-badge-border-color-scheme-5);
164+
}
165+
166+
/* Scheme 6 */
167+
ui5-badge[color-scheme="6"] {
168+
background-color: var(--ui5-badge-bg-color-scheme-6);
169+
border-color: var(--ui5-badge-border-color-scheme-6);
170+
}
171+
172+
/* Scheme 7 */
173+
ui5-badge[color-scheme="7"] {
174+
background-color: var(--ui5-badge-bg-color-scheme-7);
175+
border-color: var(--ui5-badge-border-color-scheme-7);
176+
}
177+
178+
/* Scheme 8 */
179+
ui5-badge[color-scheme="8"] {
180+
background-color: var(--ui5-badge-bg-color-scheme-8);
181+
border-color: var(--ui5-badge-border-color-scheme-8);
182+
}
183+
184+
/* Scheme 9 */
185+
ui5-badge[color-scheme="9"] {
186+
background-color: var(--ui5-badge-bg-color-scheme-9);
187+
border-color: var(--ui5-badge-border-color-scheme-9);
188+
}
189+
190+
/* Scheme 10 */
191+
ui5-badge[color-scheme="10"] {
192+
background-color: var(--ui5-badge-bg-color-scheme-10);
193+
border-color: var(--ui5-badge-border-color-scheme-10);
194+
}

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
:root {
2+
--ui5-badge-bg-color-scheme-1: var(--sapUiAccent1Lighten50);
3+
--ui5-badge-border-color-scheme-1: var(--sapUiAccent1);
4+
--ui5-badge-bg-color-scheme-2: var(--sapUiAccent2Lighten40);
5+
--ui5-badge-border-color-scheme-2: var(--sapUiAccent2);
6+
--ui5-badge-bg-color-scheme-3: var(--sapUiAccent3Lighten46);
7+
--ui5-badge-border-color-scheme-3: var(--sapUiAccent3);
8+
--ui5-badge-bg-color-scheme-4:var(--sapUiAccent4Lighten46);
9+
--ui5-badge-border-color-scheme-4: var(--sapUiAccent4);
10+
--ui5-badge-bg-color-scheme-5: var(--sapUiAccent5Lighten32);
11+
--ui5-badge-border-color-scheme-5: var(--sapUiAccent5);
12+
--ui5-badge-bg-color-scheme-6: var(--sapUiAccent6Lighten52);
13+
--ui5-badge-border-color-scheme-6: var(--sapUiAccent6);
14+
--ui5-badge-bg-color-scheme-7: var(--sapUiAccent7Lighten64);
15+
--ui5-badge-border-color-scheme-7: var(--sapUiAccent7);
16+
--ui5-badge-bg-color-scheme-8: var(--sapUiAccent8Lighten61);
17+
--ui5-badge-border-color-scheme-8: var(--sapUiAccent8);
18+
--ui5-badge-bg-color-scheme-9: var(--sapUiAccent9Lighten37);
19+
--ui5-badge-border-color-scheme-9: var(--sapUiAccent9);
20+
--ui5-badge-bg-color-scheme-10: var(--sapUiAccent10Lighten37);
21+
--ui5-badge-border-color-scheme-10: var(--sapUiAccent10);
22+
}

‎packages/main/src/themes/base/component-derived-colors.js

+10
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,16 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur
3131
"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
3232
"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
3333
"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
34+
"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
35+
"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
36+
"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),
37+
"--sapUiAccent4Lighten46": () => lighten("--sapUiAccent4", 46),
38+
"--sapUiAccent5Lighten32": () => lighten("--sapUiAccent5", 32),
39+
"--sapUiAccent6Lighten52": () => lighten("--sapUiAccent6", 52),
40+
"--sapUiAccent7Lighten64": () => lighten("--sapUiAccent7", 64),
41+
"--sapUiAccent8Lighten61": () => lighten("--sapUiAccent8", 61),
42+
"--sapUiAccent9Lighten37": () => lighten("--sapUiAccent9", 37),
43+
"--sapUiAccent10Lighten37": () => lighten("--sapUiAccent10", 37),
3444
};
3545

3646
return derivations;

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

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
@import "../base/Badge-parameters.css";

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

+3
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
--sapAccentColor6: #0092d1;
2121
--sapAccentColor7: #1a9898;
2222
--sapAccentColor8: #759421;
23+
--sapAccentColor9: #925ace;
24+
--sapAccentColor10: #647987;
25+
2326
--sapBrandColor: var(--sapPrimary2);
2427
--sapHighlightColor: var(--sapBrandColor);
2528
--sapBaseColor: var(--sapPrimary3);

0 commit comments

Comments
 (0)