feat(ui5-badge): update design (#3529)

packages/main/src/Badge.hbs

@@ -1,7 +1,5 @@
 <div class="ui5-badge-root" dir="{{effectiveDir}}">
-	{{#if hasIcon}}
-		<slot name="icon"></slot>
-	{{/if}}
+	<slot name="icon"></slot>
 
 	{{#if hasText}}
 		<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>

packages/main/src/Badge.js

@@ -32,6 +32,22 @@ const metadata = {
 			type: String,
 			defaultValue: "1",
 		},
+
+		/**
+		 * Defines if the badge has an icon.
+		 * @private
+		 */
+		_hasIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines if the badge has only an icon (and no text).
+		 * @private
+		 */
+		_iconOnly: {
+			type: Boolean,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -114,11 +130,8 @@ class Badge extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this.hasIcon) {
-			this.setAttribute("__has-icon", "");
-		} else {
-			this.removeAttribute("__has-icon");
-		}
+		this._hasIcon = this.hasIcon;
+		this._iconOnly = this.iconOnly;
 	}
 
 	get hasText() {
@@ -129,6 +142,10 @@ class Badge extends UI5Element {
 		return !!this.icon.length;
 	}
 
+	get iconOnly() {
+		return this.hasIcon && !this.hasText;
+	}
+
 	get badgeDescription() {
 		return this.i18nBundle.getText(BADGE_DESCRIPTION);
 	}

packages/main/src/themes/Badge.css

@@ -2,119 +2,132 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	height: 1.125em;
+	height: 1em;
 	min-width: 1.125em;
 	max-width: 100%;
-	padding: 0 0.625em;
-	color: var(--sapTextColor);
+	padding: 0 0.3125em;
+	color: var(--sapAccentColor1);
 	background: var(--sapLegendBackgroundColor1);
-	border: solid 1px var(--sapLegendColor1);
-	border-radius: 1.125em;
+	border: solid 0.0625em var(--sapAccentColor1);
+	border-radius: 0.5em;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
 	text-align: center;
 	letter-spacing: 0.0125em;
 }
 
-/* Bagde with Icon */
-:host([__has-icon]) {
-	padding: 0 0.3125em;
+.ui5-badge-root {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-badge-text {
+	width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	font-weight: bold;
+	text-overflow: ellipsis;
+	text-transform: uppercase;
+	letter-spacing: inherit;
+	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+}
+
+:host([_icon-only]) {
+	padding: 0 0.1875em;
 }
 
 ::slotted([ui5-icon]) {
-	width: .75em;
-	height: .75em;
+	width: 0.75em;
+	height: 0.75em;
+	min-width: 0.75em;
+	min-height: 0.75em;
+	color: inherit;
 }
 
 /* IE 11 specific selector */
 [ui5-badge] [ui5-icon][slot="icon"] {
 	display: flex;
 }
 
-:host([__has-icon]) .ui5-badge-text {
-	padding-left: 0.1875em;
+:host([_has-icon]) .ui5-badge-text {
+	padding-left: 0.125em;
 }
 
 /* RTL */
-:host([__has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
+:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
 	padding-left: 0;
-	padding-right: 0.1875em;
+	padding-right: 0.125em;
 }
 
 /* Scheme 1 */
 :host([color-scheme="1"]) {
 	background-color: var(--ui5-badge-color-scheme-1-background);
 	border-color: var(--ui5-badge-color-scheme-1-border);
+	color: var(--ui5-badge-color-scheme-1-color);
 }
 
 /* Scheme 2 */
 :host([color-scheme="2"]) {
 	background-color: var(--ui5-badge-color-scheme-2-background);
 	border-color: var(--ui5-badge-color-scheme-2-border);
+	color: var(--ui5-badge-color-scheme-2-color);
 }
 
 /* Scheme 3 */
 :host([color-scheme="3"]) {
 	background-color: var(--ui5-badge-color-scheme-3-background);
 	border-color: var(--ui5-badge-color-scheme-3-border);
+	color: var(--ui5-badge-color-scheme-3-color);
 }
 
 /* Scheme 4 */
 :host([color-scheme="4"]) {
 	background-color: var(--ui5-badge-color-scheme-4-background);
 	border-color: var(--ui5-badge-color-scheme-4-border);
+	color: var(--ui5-badge-color-scheme-4-color);
 }
 
 /* Scheme 5 */
 :host([color-scheme="5"]) {
 	background-color: var(--ui5-badge-color-scheme-5-background);
 	border-color: var(--ui5-badge-color-scheme-5-border);
+	color: var(--ui5-badge-color-scheme-5-color);
 }
 
 /* Scheme 6 */
 :host([color-scheme="6"]) {
 	background-color: var(--ui5-badge-color-scheme-6-background);
 	border-color: var(--ui5-badge-color-scheme-6-border);
+	color: var(--ui5-badge-color-scheme-6-color);
 }
 
 /* Scheme 7 */
 :host([color-scheme="7"]) {
 	background-color: var(--ui5-badge-color-scheme-7-background);
 	border-color: var(--ui5-badge-color-scheme-7-border);
+	color: var(--ui5-badge-color-scheme-7-color);
 }
 
 /* Scheme 8 */
 :host([color-scheme="8"]) {
 	background-color: var(--ui5-badge-color-scheme-8-background);
 	border-color: var(--ui5-badge-color-scheme-8-border);
+	color: var(--ui5-badge-color-scheme-8-color);
 }
 
 /* Scheme 9 */
 :host([color-scheme="9"]) {
 	background-color: var(--ui5-badge-color-scheme-9-background);
 	border-color: var(--ui5-badge-color-scheme-9-border);
+	color: var(--ui5-badge-color-scheme-9-color);
 }
 
 /* Scheme 10 */
 :host([color-scheme="10"]) {
 	background-color: var(--ui5-badge-color-scheme-10-background);
 	border-color: var(--ui5-badge-color-scheme-10-border);
-}
-
-.ui5-badge-root {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-}
-
-.ui5-badge-text {
-	width: 100%;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	text-transform: uppercase;
-	letter-spacing: inherit;
-	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
-}
+	color: var(--ui5-badge-color-scheme-10-color);
+}

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

@@ -1,23 +1,43 @@
 :root {
 	--ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
+
 	--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
-	--ui5-badge-color-scheme-1-border: var(--sapLegendColor1);
+	--ui5-badge-color-scheme-1-border: var(--sapAccentColor1);
+	--ui5-badge-color-scheme-1-color: var(--sapAccentColor1);
+
 	--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
-	--ui5-badge-color-scheme-2-border: var(--sapLegendColor2);
+	--ui5-badge-color-scheme-2-border: var(--sapAccentColor2);
+	--ui5-badge-color-scheme-2-color: var(--sapAccentColor2);
+
 	--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
-	--ui5-badge-color-scheme-3-border: var(--sapLegendColor3);
+	--ui5-badge-color-scheme-3-border: var(--sapAccentColor3);
+	--ui5-badge-color-scheme-3-color: var(--sapAccentColor3);
+
 	--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
-	--ui5-badge-color-scheme-4-border: var(--sapLegendColor5);
+	--ui5-badge-color-scheme-4-border: var(--sapAccentColor4);
+	--ui5-badge-color-scheme-4-color: var(--sapAccentColor4);
+
 	--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
-	--ui5-badge-color-scheme-5-border: var(--sapLegendColor20);
+	--ui5-badge-color-scheme-5-border: var(--sapAccentColor5);
+	--ui5-badge-color-scheme-5-color: var(--sapAccentColor5);
+
 	--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
-	--ui5-badge-color-scheme-6-border: var(--sapLegendColor6);
+	--ui5-badge-color-scheme-6-border: var(--sapAccentColor6);
+	--ui5-badge-color-scheme-6-color: var(--sapAccentColor6);
+
 	--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
-	--ui5-badge-color-scheme-7-border: var(--sapLegendColor7);
+	--ui5-badge-color-scheme-7-border: var(--sapAccentColor7);
+	--ui5-badge-color-scheme-7-color: var(--sapAccentColor7);
+
 	--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor8);
-	--ui5-badge-color-scheme-8-border: var(--sapLegendColor8);
+	--ui5-badge-color-scheme-8-border: var(--sapAccentColor8);
+	--ui5-badge-color-scheme-8-color: var(--sapAccentColor8);
+
 	--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
-	--ui5-badge-color-scheme-9-border: var(--sapLegendColor10);
+	--ui5-badge-color-scheme-9-border: var(--sapAccentColor10);
+	--ui5-badge-color-scheme-9-color: var(--sapAccentColor10);
+
 	--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
 	--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
+	--ui5-badge-color-scheme-10-color: var(--sapAccentColor9);
 }

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

@@ -2,23 +2,42 @@
 
 :root {
 	--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-1-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-2-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-3-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-4-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-5-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-6-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-7-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-8-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-9-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-10-color: var(--sapTextColor);
 }

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

@@ -2,23 +2,42 @@
 
 :root {
 	--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
-	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-1-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-2-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-3-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-4-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-5-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-6-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-7-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-8-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-9-color: var(--sapTextColor);
+
+	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
 	--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-10-color: var(--sapTextColor);
 }