feat(ui5-badge): add different design types

packages/main/src/Badge.hbs

@@ -1,6 +1,14 @@
-<div class="ui5-badge-root">
+<div class="ui5-badge-root"
+ tabindex="{{_tabIndex}}"
+ @keydown={{_onkeydown}}
+ @keyup={{_onkeyup}}
+>
  <slot name="icon"></slot>
 
+ {{#if this._semanticIconName}}
+ <ui5-icon class="ui5-badge-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
+ {{/if}}
+
  {{#if hasText}}
  <label class="ui5-badge-text"><bdi><slot></slot></bdi></label>
  {{/if}}

packages/main/src/Badge.ts

@@ -1,12 +1,17 @@
 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 { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
-
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import WrappingType from "./types/WrappingType.js";
+import BadgeIndicationColorType from "./types/BadgeIndicationColorType.js";
+import BadgeDesignType from "./types/BadgeDesignType.js";
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
@@ -48,7 +53,26 @@ import badgeCss from "./generated/themes/Badge.css.js";
  template: BadgeTemplate,
  styles: badgeCss,
 })
+
+/**
+ * Fired on mouseup, <code>SPACE</code> and <code>ENTER</code>.
+ * - on mouse click, the icon fires native <code>click</code> event
+ * - on <code>SPACE</code> and <code>ENTER</code>, the badge fires custom <code>click</code> event
+ * @private
+ * @since 1.19
+ */
+@event("click")
 class Badge extends UI5Element {
+ /**
+ * Defines the design type of the component.
+ * @type {string}
+ * @name sap.ui.webc.main.Badge.prototype.designType
+ * @defaultvalue "ColorScheme"
+ * @public
+ */
+ @property({ defaultValue: BadgeDesignType.ColorScheme })
+ designType!: `${BadgeDesignType}`;
+
  /**
  * Defines the color scheme of the component.
  * There are 10 predefined schemes.
@@ -63,6 +87,65 @@ class Badge extends UI5Element {
  @property({ defaultValue: "1" })
  colorScheme!: string;
 
+ /**
+ * Defines the value state of the component.
+ *
+ * @type {sap.ui.webc.base.types.ValueState}
+ * @defaultvalue "None"
+ * @name sap.ui.webc.main.Badge.prototype.valueState
+ * @public
+ * @since 1.19
+ */
+ @property({ type: ValueState, defaultValue: ValueState.None })
+ valueState!: `${ValueState}`;
+
+ /**
+ * Defines the indication color type of the component.
+ *
+ * @type {sap.ui.webc.base.types.BadgeIndicationColorType}
+ * @defaultvalue "DarkRed"
+ * @name sap.ui.webc.main.Badge.prototype.indicationColor
+ * @public
+ * @since 1.19
+ */
+ @property({ type: ValueState, defaultValue: BadgeIndicationColorType.DarkRed })
+ indicationColor!: `${BadgeIndicationColorType}`;
+
+ /**
+ * Defines if the default state icon is shown.
+ * @type {boolean}
+ * @name sap.ui.webc.main.Badge.prototype.showStateIcon
+ * @defaultValue false
+ * @public
+ * @since 1.19
+ */
+ @property({ type: Boolean })
+ showStateIcon!: boolean;
+
+ /**
+ * Defines if the component is interactive (focusable and pressable).
+ * @type {boolean}
+ * @name sap.ui.webc.main.Badge.prototype.interactive
+ * @defaultValue false
+ * @public
+ * @since 1.19
+ */
+ @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.19
+ */
+ @property({ type: WrappingType, defaultValue: WrappingType.None })
+ wrappingType!: `${WrappingType}`;
+
  /**
  * Defines if the badge has an icon.
  * @private
@@ -107,7 +190,7 @@ class Badge extends UI5Element {
  }
 
  onBeforeRendering() {
- this._hasIcon = this.hasIcon;
+ this._hasIcon = this.hasIcon || !!this._semanticIconName;
  this._iconOnly = this.iconOnly;
  }
 
@@ -126,6 +209,49 @@ class Badge extends UI5Element {
  get badgeDescription() {
  return Badge.i18nBundle.getText(BADGE_DESCRIPTION);
  }
+
+ get _semanticIconName() {
+ if (!this.showStateIcon || this.hasIcon || this.designType !== BadgeDesignType.ValueState) {
+ return null;
+ }
+
+ switch (this.valueState) {
+ case ValueState.Success:
+ return "sys-enter-2";
+ case ValueState.Error:
+ return "error";
+ case ValueState.Warning:
+ return "alert";
+ case ValueState.Information:
+ return "information";
+ default:
+ return null;
+ }
+ }
+
+ get _tabIndex() {
+ return this.interactive ? "0" : undefined;
+ }
+
+ _onkeydown(e: KeyboardEvent) {
+ if (!this.interactive) {
+ return;
+ }
+
+ if (isEnter(e)) {
+ this.fireEvent("click");
+ }
+
+ if (isSpace(e)) {
+ e.preventDefault(); // prevent scrolling
+ }
+ }
+
+ _onkeyup(e: KeyboardEvent) {
+ if (this.interactive && isSpace(e)) {
+ this.fireEvent("click");
+ }
+ }
 }
 
 Badge.define();