feat(ui5-badge): add different design types (#7564)

* feat(ui5-badge): add different design types

Author: TeodorTaushanov

packages/main/src/Badge.hbs

@@ -1,9 +1,30 @@
-<div class="ui5-badge-root">
-	<slot name="icon"></slot>
+{{#if interactive}}
+	<button class="ui5-badge-root"
+			title="{{_title}}"
+			aria-roledescription="{{_roleDescription}}"
+			aria-description="{{_valueState}}"
+			@onclick={{_onclick}}
+	>
+		{{> content}}
+	</button>
+{{else}}
+	<div class="ui5-badge-root"
+		 title="{{_title}}">
+		{{> content}}
+	</div>
+{{/if}}
 
+{{#*inline "content"}}
+	<slot name="icon"></slot>
+	{{#if this._semanticIconName}}
+		<ui5-icon class="ui5-badge-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
+	{{/if}}
+	<span class="ui5-hidden-text">{{badgeDescription}}</span>
 	{{#if hasText}}
-		<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>
+		<span class="ui5-badge-text"><bdi><slot></slot></bdi></span>
 	{{/if}}
+{{/inline}}
+
+
+
 
-	<span class="ui5-hidden-text">{{badgeDescription}}</span>
-</div>

packages/main/src/Badge.ts

@@ -1,16 +1,32 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
-
+import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/sys-help-2.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/information.js";
+import WrappingType from "./types/WrappingType.js";
+import BadgeDesign from "./types/BadgeDesign.js";
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
-import { BADGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
+import {
+	BADGE_DESCRIPTION_BADGE,
+	BADGE_DESCRIPTION_TAG,
+	BADGE_ROLE_DESCRIPTION,
+	BADGE_ERROR,
+	BADGE_WARNING,
+	BADGE_SUCCESS,
+	BADGE_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import badgeCss from "./generated/themes/Badge.css.js";
@@ -19,14 +35,15 @@ import badgeCss from "./generated/themes/Badge.css.js";
  * @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.).
+ * The <code>ui5-badge</code> is a component which serves
+ * the purpose to attract the user attention to some piece
+ * of information (state, quantity, condition, etc.).
+ * It can contain icon and text information, and its design can be chosen from specific design types.
  *
  * <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>
+ * <li>If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the <code>wrappingType</code> property.</li>
+  * <li>Colors can be semantic or not semantic.</li>
  * </ul>
  *
  * <h3>ES6 Module Import</h3>
@@ -47,8 +64,31 @@ import badgeCss from "./generated/themes/Badge.css.js";
 	renderer: litRender,
 	template: BadgeTemplate,
 	styles: badgeCss,
+	dependencies: [
+		Icon,
+	],
 })
+
+/**
+ * Fired when the user clicks on an interactive badge.
+ * <b>Note:</b> The event will be fired if the <code>interactive</code> property is <code>true</code>
+ * @event sap.ui.webc.main.Badge#click
+ * @public
+ * @since 1.20
+ */
+@event("click")
 class Badge extends UI5Element {
+	/**
+	 * Defines the design type of the component.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Badge.prototype.design
+	 * @defaultvalue "Set3"
+	 * @public
+	 * @since 1.20
+	 */
+	@property({ defaultValue: BadgeDesign.Set3 })
+	design!: `${BadgeDesign}`;
+
 	/**
 	 * Defines the color scheme of the component.
 	 * There are 10 predefined schemes.
@@ -63,6 +103,44 @@ class Badge extends UI5Element {
 	@property({ defaultValue: "1" })
 	colorScheme!: string;
 
+	/**
+	 * Defines if the default state icon is shown.
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Badge.prototype.hideStateIcon
+	 * @defaultValue false
+	 * @public
+	 * @since 1.20
+	 */
+	@property({ type: Boolean })
+	hideStateIcon!: boolean;
+
+	/**
+	 * Defines if the component is interactive (focusable and pressable).
+	 * <br><b>Note:</b> The badge cannot be <code>interactive</code>
+	 * when <code>design</code> property is <code>BadgeDesign.Set3</code>
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Badge.prototype.interactive
+	 * @defaultValue false
+	 * @public
+	 * @since 1.20
+	 */
+	@property({ type: Boolean })
+	interactive!: boolean;
+
+	/**
+	 * Defines how the text of a component will be displayed when there is not enough space.
+	 * <br><b>Note:</b> For option "Normal" the text will wrap and the
+	 * words will not be broken based on hyphenation.
+	 *
+	 * @name sap.ui.webc.main.Badge.prototype.wrappingType
+	 * @type {sap.ui.webc.main.types.WrappingType}
+	 * @defaultvalue "None"
+	 * @public
+	 * @since 1.20
+	 */
+	@property({ type: WrappingType, defaultValue: WrappingType.None })
+	wrappingType!: `${WrappingType}`;
+
 	/**
 	 * Defines if the badge has an icon.
 	 * @private
@@ -77,6 +155,13 @@ class Badge extends UI5Element {
 	@property({ type: Boolean })
 	_iconOnly!: boolean;
 
+	/**
+	 * Defines if the badge has "Tag" design type.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_isTagDesign!: boolean;
+
 	/**
 	 * Defines the text of the component.
 	 * <br><b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
@@ -107,8 +192,28 @@ class Badge extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		this._hasIcon = this.hasIcon;
+		this._hasIcon = this.hasIcon || !!this._semanticIconName;
 		this._iconOnly = this.iconOnly;
+		this._isTagDesign = this.design !== BadgeDesign.Set3;
+	}
+
+	get _roleDescription() {
+		return Badge.i18nBundle.getText(BADGE_ROLE_DESCRIPTION);
+	}
+
+	get _valueState() {
+		switch (this.design) {
+		case BadgeDesign.Positive:
+			return Badge.i18nBundle.getText(BADGE_SUCCESS);
+		case BadgeDesign.Negative:
+			return Badge.i18nBundle.getText(BADGE_ERROR);
+		case BadgeDesign.Critical:
+			return Badge.i18nBundle.getText(BADGE_WARNING);
+		case BadgeDesign.Information:
+			return Badge.i18nBundle.getText(BADGE_INFORMATION);
+		}
+
+		return undefined;
 	}
 
 	get hasText() {
@@ -123,8 +228,52 @@ class Badge extends UI5Element {
 		return this.hasIcon && !this.hasText;
 	}
 
+	get _title() {
+		return this.title || undefined;
+	}
+
 	get badgeDescription() {
-		return Badge.i18nBundle.getText(BADGE_DESCRIPTION);
+		if (this.interactive) {
+			return undefined;
+		}
+
+		if (this.design === BadgeDesign.Set3) {
+			return Badge.i18nBundle.getText(BADGE_DESCRIPTION_BADGE);
+		}
+
+		const valueState = this._valueState;
+		let description = Badge.i18nBundle.getText(BADGE_DESCRIPTION_TAG);
+
+		if (valueState) {
+			description = `${description} ${valueState}`;
+		}
+
+		return description;
+	}
+
+	get _semanticIconName() {
+		if (this.hideStateIcon || this.hasIcon) {
+			return null;
+		}
+
+		switch (this.design) {
+		case BadgeDesign.Neutral:
+			return "sys-help-2";
+		case BadgeDesign.Positive:
+			return "sys-enter-2";
+		case BadgeDesign.Negative:
+			return "error";
+		case BadgeDesign.Critical:
+			return "alert";
+		case BadgeDesign.Information:
+			return "information";
+		default:
+			return null;
+		}
+	}
+
+	_onclick() {
+		this.fireEvent("click");
 	}
 }
 

packages/main/src/i18n/messagebundle.properties

@@ -32,7 +32,25 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Conjoined avatars.
 AVATAR_GROUP_MOVE=Press ARROW keys to move.
 
 #XACT: ARIA announcement for the badge
-BADGE_DESCRIPTION=Badge
+BADGE_DESCRIPTION_BADGE=Badge
+
+#XACT: ARIA announcement for the badge with "Tag" design
+BADGE_DESCRIPTION_TAG=Tag
+
+#XACT: ARIA announcement for the roledescription attribute
+BADGE_ROLE_DESCRIPTION=Tag button
+
+#XACT: ARIA announcement for the "Error" state
+BADGE_ERROR=Error
+
+#XACT: ARIA announcement for the "Warning" state
+BADGE_WARNING=Warning
+
+#XACT: ARIA announcement for the "Success" state
+BADGE_SUCCESS=Success
+
+#XACT: ARIA announcement for the "Information" state
+BADGE_INFORMATION=Information
 
 #XACT: position (current and max. value) of a Breadcrumb item which should be announced by screenreaders
 BREADCRUMB_ITEM_POS={0} of {1}