feat(ui5-badge): iniital implementation (#521)

packages/main/bundle.esm.js

@@ -12,6 +12,7 @@ import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
 import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
 import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
 
+import Badge from "./dist/Badge.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";
 import CheckBox from "./dist/CheckBox.js";

packages/main/src/Badge.hbs

@@ -0,0 +1,7 @@
+<div class="ui5-badge-wrapper" dir="{{rtl}}">
+	<slot name="icon"></slot>
+
+	{{#if hasText}}
+		<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>
+	{{/if}}
+</div>

packages/main/src/Badge.js

@@ -0,0 +1,130 @@
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
+import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
+import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
+import Icon from "./Icon.js";
+
+// Template
+import BadgeRenderer from "./build/compiled/BadgeRenderer.lit.js";
+
+// Styles
+import badgeCss from "./themes/Badge.css.js";
+
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-badge",
+	properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */  {
+
+		/**
+		 * Defines the color scheme of the <code>ui5-badge</code>.
+		 * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color> and <code>border-color</code>.
+		 * To use one you can set a number from <code>"1"</code> to <code>"10"</code>.
+		 * <br><br>
+		 * <b>Note:</b> color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		colorScheme: {
+			type: String,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
+		/**
+		 * Defines the text of the <code>ui5-badge</code>.
+		 * <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.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		text: {
+			type: Node,
+			multiple: true,
+		},
+
+		/**
+		 * Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
+		 *
+		 * @type {Icon}
+		 * @slot
+		 * @public
+		 */
+		icon: {
+			type: Icon,
+		},
+
+	},
+	defaultSlot: "text",
+	renderer: BadgeRenderer,
+};
+
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * 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.
+ * It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).
+ *
+ * <h3>Usage Guidelines</h3>
+ * <ul>
+ * <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
+ * <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>
+ * <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Badge";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Badge
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-badge
+ * @since 0.12.0
+ * @public
+ */
+class Badge extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get renderer() {
+		return BadgeRenderer;
+	}
+
+	static get styles() {
+		return badgeCss;
+	}
+
+	onBeforeRendering() {
+		if (this.hasIcon) {
+			this.setAttribute("__has-icon", "");
+		} else {
+			this.removeAttribute("__has-icon");
+		}
+	}
+
+	get hasText() {
+		return !!this.textContent.trim().length;
+	}
+
+	get hasIcon() {
+		return !!this.icon;
+	}
+
+	get rtl() {
+		return getEffectiveRTL() ? "rtl" : undefined;
+	}
+}
+
+Bootstrap.boot().then(_ => {
+	Badge.define();
+});
+
+export default Badge;

packages/main/src/themes/Badge.css

@@ -0,0 +1,194 @@
+:host(ui5-badge:not([hidden])) {
+	display: inline-flex;
+	height: 1.125rem;
+	min-width: 1.125rem;
+	max-width: 100%;
+	padding: 0 0.625rem;
+	color: var(--sapUiBaseText);
+	background: var(--sapUiGroupContentBackground);
+	border: solid 1px var(--sapUiGroupContentBorderColor);
+	border-radius: 1.125rem;
+	box-sizing: border-box;
+	font-size: var(--sapMFontSmallSize);
+	text-align: center;
+}
+
+/* Bagde with Icon */
+:host(ui5-badge[__has-icon]) {
+	padding: 0 0.3125rem;
+}
+
+:host(ui5-badge[__has-icon]) .ui5-badge-text {
+	padding-left: 0.1875rem;
+}
+
+/* RTL */
+:host(ui5-badge[__has-icon]) .ui5-badge-wrapper[rtl] .ui5-badge-text {
+	padding-right: 0.1875rem;
+}
+
+/* Scheme 1 */
+:host(ui5-badge[color-scheme="1"]) {  
+	background-color: var(--ui5-badge-bg-color-scheme-1);
+	border-color: var(--ui5-badge-border-color-scheme-1);
+}
+
+/* Scheme 2 */
+:host(ui5-badge[color-scheme="2"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-2);
+	border-color: var(--ui5-badge-border-color-scheme-2);
+}
+
+/* Scheme 3 */
+:host(ui5-badge[color-scheme="3"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-3);
+	border-color: var(--ui5-badge-border-color-scheme-3);
+}
+
+/* Scheme 4 */
+:host(ui5-badge[color-scheme="4"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-4);
+	border-color: var(--ui5-badge-border-color-scheme-4);
+}
+
+/* Scheme 5 */
+:host(ui5-badge[color-scheme="5"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-5);
+	border-color: var(--ui5-badge-border-color-scheme-5);
+}
+
+/* Scheme 6 */
+:host(ui5-badge[color-scheme="6"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-6);
+	border-color: var(--ui5-badge-border-color-scheme-6);
+}
+
+/* Scheme 7 */
+:host(ui5-badge[color-scheme="7"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-7);
+	border-color: var(--ui5-badge-border-color-scheme-7);
+}
+
+/* Scheme 8 */
+:host(ui5-badge[color-scheme="8"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-8);
+	border-color: var(--ui5-badge-border-color-scheme-8);
+}
+
+/* Scheme 9 */
+:host(ui5-badge[color-scheme="9"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-9);
+	border-color: var(--ui5-badge-border-color-scheme-9);
+}
+
+/* Scheme 10 */
+:host(ui5-badge[color-scheme="10"]) { 
+	background-color: var(--ui5-badge-bg-color-scheme-10);
+	border-color: var(--ui5-badge-border-color-scheme-10);
+}
+
+.ui5-badge-wrapper {
+	display: inline-flex;
+	align-items: center;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-badge-text {
+	width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-transform: uppercase;
+	letter-spacing: 0.0125rem;
+}
+
+/* ================================== */
+/* ======= IE pair of styles ======== */
+/* ================================== */
+ui5-badge:not([hidden]) {
+	display: inline-flex;
+	height: 1.125rem;
+	min-width: 1.125rem;
+	max-width: 100%;
+	padding: 0 0.625rem;
+	color: var(--sapUiBaseText);
+	background: var(--sapUiGroupContentBackground);
+	border: solid 1px var(--sapUiGroupContentBorderColor); 
+	border-radius: 1.125rem;
+	box-sizing: border-box;
+	font-size: var(--sapMFontSmallSize);
+	text-align: center;
+}
+
+ui5-badge[__has-icon] {
+	padding: 0 0.3125rem;
+}
+
+ui5-badge[__has-icon] .ui5-badge-text {
+	padding-left: 0.1875rem;
+}
+
+ui5-badge[__has-icon] .ui5-badge-wrapper[rtl] .ui5-badge-text {
+	padding-right: 0.1875rem;
+}
+
+/* Scheme 1 */
+ui5-badge[color-scheme="1"] {  
+	background-color: var(--ui5-badge-bg-color-scheme-1);
+	border-color: var(--ui5-badge-border-color-scheme-1);
+}
+
+/* Scheme 2 */
+ui5-badge[color-scheme="2"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-2);
+	border-color: var(--ui5-badge-border-color-scheme-2);
+}
+
+/* Scheme 3 */
+ui5-badge[color-scheme="3"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-3);
+	border-color: var(--ui5-badge-border-color-scheme-3);
+}
+
+/* Scheme 4 */
+ui5-badge[color-scheme="4"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-4);
+	border-color: var(--ui5-badge-border-color-scheme-4);
+}
+
+/* Scheme 5 */
+ui5-badge[color-scheme="5"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-5);
+	border-color: var(--ui5-badge-border-color-scheme-5);
+}
+
+/* Scheme 6 */
+ui5-badge[color-scheme="6"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-6);
+	border-color: var(--ui5-badge-border-color-scheme-6);
+}
+
+/* Scheme 7 */
+ui5-badge[color-scheme="7"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-7);
+	border-color: var(--ui5-badge-border-color-scheme-7);
+}
+
+/* Scheme 8 */
+ui5-badge[color-scheme="8"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-8);
+	border-color: var(--ui5-badge-border-color-scheme-8);
+}	
+
+/* Scheme 9 */
+ui5-badge[color-scheme="9"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-9);
+	border-color: var(--ui5-badge-border-color-scheme-9);
+}
+
+/* Scheme 10 */
+ui5-badge[color-scheme="10"] { 
+	background-color: var(--ui5-badge-bg-color-scheme-10);
+	border-color: var(--ui5-badge-border-color-scheme-10);
+}

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

@@ -0,0 +1,22 @@
+:root {
+	--ui5-badge-bg-color-scheme-1: var(--sapUiAccent1Lighten50);
+	--ui5-badge-border-color-scheme-1: var(--sapUiAccent1);
+	--ui5-badge-bg-color-scheme-2: var(--sapUiAccent2Lighten40);
+	--ui5-badge-border-color-scheme-2: var(--sapUiAccent2);
+	--ui5-badge-bg-color-scheme-3: var(--sapUiAccent3Lighten46);
+	--ui5-badge-border-color-scheme-3: var(--sapUiAccent3);
+	--ui5-badge-bg-color-scheme-4:var(--sapUiAccent4Lighten46);
+	--ui5-badge-border-color-scheme-4: var(--sapUiAccent4);
+	--ui5-badge-bg-color-scheme-5: var(--sapUiAccent5Lighten32);
+	--ui5-badge-border-color-scheme-5: var(--sapUiAccent5);
+	--ui5-badge-bg-color-scheme-6: var(--sapUiAccent6Lighten52);
+	--ui5-badge-border-color-scheme-6: var(--sapUiAccent6);
+	--ui5-badge-bg-color-scheme-7: var(--sapUiAccent7Lighten64);
+	--ui5-badge-border-color-scheme-7: var(--sapUiAccent7);
+	--ui5-badge-bg-color-scheme-8: var(--sapUiAccent8Lighten61);
+	--ui5-badge-border-color-scheme-8: var(--sapUiAccent8);
+	--ui5-badge-bg-color-scheme-9: var(--sapUiAccent9Lighten37);
+	--ui5-badge-border-color-scheme-9: var(--sapUiAccent9);
+	--ui5-badge-bg-color-scheme-10: var(--sapUiAccent10Lighten37);
+	--ui5-badge-border-color-scheme-10: var(--sapUiAccent10);
+}

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

@@ -31,6 +31,16 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur
 		"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
 		"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
 		"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
+		"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
+		"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
+		"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),
+		"--sapUiAccent4Lighten46": () => lighten("--sapUiAccent4", 46),
+		"--sapUiAccent5Lighten32": () => lighten("--sapUiAccent5", 32),
+		"--sapUiAccent6Lighten52": () => lighten("--sapUiAccent6", 52),
+		"--sapUiAccent7Lighten64": () => lighten("--sapUiAccent7", 64),
+		"--sapUiAccent8Lighten61": () => lighten("--sapUiAccent8", 61),
+		"--sapUiAccent9Lighten37": () => lighten("--sapUiAccent9", 37),
+		"--sapUiAccent10Lighten37": () => lighten("--sapUiAccent10", 37),
 	};
 
 	return derivations;

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

@@ -0,0 +1,2 @@
+
+@import "../base/Badge-parameters.css";

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

@@ -20,6 +20,9 @@
 	--sapAccentColor6: #0092d1;
 	--sapAccentColor7: #1a9898;
 	--sapAccentColor8: #759421;
+	--sapAccentColor9: #925ace;
+	--sapAccentColor10: #647987;
+
 	--sapBrandColor: var(--sapPrimary2);
 	--sapHighlightColor: var(--sapBrandColor);
 	--sapBaseColor: var(--sapPrimary3);