refactor(ui5-badge): rename Badge ui5-badge to Tag ui5-tag

docs/3-customizing/01-styles.md

@@ -6,7 +6,7 @@ One of the core principles of Web Components is the encapsulation. The HTML and
 
 
 ## Styles on Tag Level
-We designed some components such as Title, Label, Badge, Button, Input, and a few more in such a way that it is possible to set styles/classes on the custom elements that will take effect.
+We designed some components such as Title, Label, Tag, Button, Input, and a few more in such a way that it is possible to set styles/classes on the custom elements that will take effect.
 
 <b>For example:</b>
 ```css

docs/5-development/04-understanding-hbs-templates.md

@@ -354,7 +354,7 @@ Examples:
 
 ```handlebars
 {{#if hasText}}
-	<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>
+	<label class="ui5-tag-text"><bdi><slot></slot></bdi></label>
 {{/if}}
 ```
 

docs/Migrating to version 2.0 guide.md

@@ -58,6 +58,22 @@ import "@ui5/webcomponents-icons/dist/Assets.js"
 
 ## Main package (@ui5/webcomponents)
 
+### ui5-badge
+
+| Changed item                  | Old               | New          | 
+|-------------------------------|-------------------|--------------|
+| tag                      | `ui5-badge` | `ui5-tag` | 
+
+- The Badge `ui5-badge` has been renamed to Tag `ui5-tag`. If you have previously used the `ui5-badge`:
+```html
+<ui5-badge></ui5-badge>
+```
+Now use `ui5-tag` instead:
+```html
+<ui5-tag></ui5-tag>
+```
+
+
 ### ui5-breadcrumbs
 
 | Changed item                  | Old               | New          | 
@@ -75,7 +91,6 @@ Now use  `separators`  instead:
 <ui5-breadcrumbs separators="Slash">
 ```
 
-
 ### ui5-busy-indicator
 
 | Changed item | Old    | New                                     | 

packages/fiori/test/pages/DynamicSideContent.html

@@ -38,10 +38,10 @@ <h1>Side Content</h1>
 
 		<div slot="footer">
 			<ui5-bar design="FloatingFooter">
-				<ui5-badge class="breakpointBadge" id="breakpointS" color-scheme="5" slot="startContent">S</ui5-badge>
-				<ui5-badge class="breakpointBadge" id="breakpointM" color-scheme="6" slot="startContent">M</ui5-badge>
-				<ui5-badge class="breakpointBadge" id="breakpointL" color-scheme="7" slot="startContent">L</ui5-badge>
-				<ui5-badge class="breakpointBadge" id="breakpointXL" color-scheme="8" slot="startContent">XL</ui5-badge>
+				<ui5-tag class="breakpointTag" id="breakpointS" color-scheme="5" slot="startContent">S</ui5-tag>
+				<ui5-tag class="breakpointTag" id="breakpointM" color-scheme="6" slot="startContent">M</ui5-tag>
+				<ui5-tag class="breakpointTag" id="breakpointL" color-scheme="7" slot="startContent">L</ui5-tag>
+				<ui5-tag class="breakpointTag" id="breakpointXL" color-scheme="8" slot="startContent">XL</ui5-tag>
 				<ui5-switch id="hideMainContent" class="hide-on-S" text-on="M +" text-off="M -" title="MainContent" checked></ui5-switch>
 				<ui5-switch id="hideSideContent" class="hide-on-S" text-on="S +" text-off="S -" title="SideContent" checked></ui5-switch>
 				<ui5-switch id="equalSplit" class="hide-on-S" text-on="EQ" text-off="! EQ" title="equalSplit"></ui5-switch>
@@ -113,7 +113,7 @@ <h1>Side Content</h1>
 			var breakpoint = event.detail.currentBreakpoint,
 				disp = breakpoint === "S" ? "none" : "block";
 
-			document.querySelectorAll('.breakpointBadge').forEach(function(elem) { elem.style.display = "none"; });
+			document.querySelectorAll('.breakpointTag').forEach(function(elem) { elem.style.display = "none"; });
 			document.querySelector("#breakpoint" + breakpoint).style.display="block";
 			document.querySelectorAll('.hide-on-S').forEach(function(elem) { elem.style.display = disp; });
 			toggleButton.style.display = breakpoint !== "S" || dynamicSideContent.sideContentVisibility === "AlwaysShow" ? "none" : "block";

packages/fiori/test/pages/styles/DynamicSideContent.css

@@ -13,7 +13,7 @@ body, html {
 	padding: 0.5rem;
 }
 
-.breakpointBadge {
+.breakpointTag {
 	display: none;
 }
 

packages/main/README.md

@@ -13,11 +13,11 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 |--------------------------|-----------------------------|------------------------------------------------------------|
 | Avatar                   | `ui5-avatar`                | `import "@ui5/webcomponents/dist/Avatar.js";`              |
 | Avatar Group             | `ui5-avatar-group`          | `import "@ui5/webcomponents/dist/AvatarGroup.js";`         |
-| Badge                    | `ui5-badge`                 | `import "@ui5/webcomponents/dist/Badge.js";`               |
+| Tag                    | `ui5-tag`                 | `import "@ui5/webcomponents/dist/Tag.js";`               |
 | Bar                      | `ui5-bar`                   | `import "@ui5/webcomponents/dist/Bar.js";`                 |
 | Breadcrumbs              | `ui5-breadcrumbs`           | `import "@ui5/webcomponents/dist/Breadcrumbs.js";`         |
 | Breadcrumbs Item         | `ui5-breadcrumbs-item`      | comes with `ui5-breadcrumbs`                               |
-| Badge                    | `ui5-badge`                 | `import "@ui5/webcomponents/dist/Badge.js";`               |
+| Tag                    | `ui5-tag`                 | `import "@ui5/webcomponents/dist/Tag.js";`               |
 | Busy Indicator           | `ui5-busy-indicator`        | `import "@ui5/webcomponents/dist/BusyIndicator.js";`       |
 | Button                   | `ui5-button`                | `import "@ui5/webcomponents/dist/Button.js";`              |
 | Calendar                 | `ui5-calendar`              | `import "@ui5/webcomponents/dist/Calendar.js";`            |

packages/main/src/Avatar.ts

@@ -218,7 +218,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	 * Defines the optional badge that will be used for visual affordance.
 	 *
 	 * **Note:** While the slot allows for custom badges, to achieve
-	 * the Fiori design, please use `ui5-badge` with `ui5-icon`
+	 * the Fiori design, you can use the `ui5-tag` with `ui5-icon`
 	 * in the corresponding `icon` slot, without text nodes.
 	 * @public
 	 * @since 1.7.0

packages/main/src/Badge.hbs → packages/main/src/Tag.hbs

@@ -1,5 +1,5 @@
 {{#if interactive}}
-	<button class="ui5-badge-root"
+	<button class="ui5-tag-root"
 			title="{{_title}}"
 			aria-roledescription="{{_roleDescription}}"
 			aria-description="{{_valueState}}"
@@ -8,7 +8,7 @@
 		{{> content}}
 	</button>
 {{else}}
-	<div class="ui5-badge-root"
+	<div class="ui5-tag-root"
 		 title="{{_title}}">
 		{{> content}}
 	</div>
@@ -17,11 +17,11 @@
 {{#*inline "content"}}
 	<slot name="icon"></slot>
 	{{#if this._semanticIconName}}
-		<ui5-icon class="ui5-badge-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
+		<ui5-icon class="ui5-tag-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
 	{{/if}}
-	<span class="ui5-hidden-text">{{badgeDescription}}</span>
+	<span class="ui5-hidden-text">{{tagDescription}}</span>
 	{{#if hasText}}
-		<span class="ui5-badge-text"><bdi><slot></slot></bdi></span>
+		<span class="ui5-tag-text"><bdi><slot></slot></bdi></span>
 	{{/if}}
 {{/inline}}
 

packages/main/src/Badge.ts → packages/main/src/Tag.ts

@@ -18,29 +18,29 @@ 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";
-import BadgeSize from "./types/BadgeSize.js";
+import TagDesign from "./types/TagDesign.js";
+import TagSize from "./types/TagSize.js";
 // Template
-import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
+import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
 import {
-	BADGE_DESCRIPTION_BADGE,
-	BADGE_DESCRIPTION_TAG,
-	BADGE_ROLE_DESCRIPTION,
-	BADGE_ERROR,
-	BADGE_WARNING,
-	BADGE_SUCCESS,
-	BADGE_INFORMATION,
+	TAG_DESCRIPTION_BADGE,
+	TAG_DESCRIPTION_TAG,
+	TAG_ROLE_DESCRIPTION,
+	TAG_ERROR,
+	TAG_WARNING,
+	TAG_SUCCESS,
+	TAG_INFORMATION,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
-import badgeCss from "./generated/themes/Badge.css.js";
+import tagCss from "./generated/themes/Tag.css.js";
 
 /**
  * @class
  * ### Overview
  *
- * The `ui5-badge` is a component which serves
+ * The `ui5-tag` 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.
@@ -52,40 +52,40 @@ import badgeCss from "./generated/themes/Badge.css.js";
  *
  * ### ES6 Module Import
  *
- * `import "@ui5/webcomponents/dist/Badge.js";`
+ * `import "@ui5/webcomponents/dist/Tag.js";`
  * @constructor
  * @extends UI5Element
- * @since 0.12.0
+ * @since 2.0.0
  * @public
  */
 @customElement({
-	tag: "ui5-badge",
+	tag: "ui5-tag",
 	languageAware: true,
 	renderer: litRender,
-	template: BadgeTemplate,
-	styles: badgeCss,
+	template: TagTemplate,
+	styles: tagCss,
 	dependencies: [
 		Icon,
 	],
 })
 
 /**
- * Fired when the user clicks on an interactive badge.
+ * Fired when the user clicks on an interactive tag.
  *
  * **Note:** The event will be fired if the `interactive` property is `true`
  * @public
  * @since 1.22.0
  */
 @event("click")
-class Badge extends UI5Element {
+class Tag extends UI5Element {
 	/**
 	 * Defines the design type of the component.
 	 * @default "Neutral"
 	 * @public
 	 * @since 1.22.0
 	 */
-	@property({ defaultValue: BadgeDesign.Neutral })
-	design!: `${BadgeDesign}`;
+	@property({ defaultValue: TagDesign.Neutral })
+	design!: `${TagDesign}`;
 
 	/**
 	 * Defines the color scheme of the component.
@@ -109,8 +109,8 @@ class Badge extends UI5Element {
 	/**
 	 * Defines if the component is interactive (focusable and pressable).
 	 *
-	 * **Note:** The badge cannot be `interactive`
-	 * when `design` property is `BadgeDesign.Set3`
+	 * **Note:** The tag cannot be `interactive`
+	 * when `design` property is `TagDesign.Set3`
 	 * @default false
 	 * @public
 	 * @since 1.22.0
@@ -136,25 +136,25 @@ class Badge extends UI5Element {
 	 * @public
 	 * @since 2.0
 	 */
-	@property({ type: BadgeSize, defaultValue: BadgeSize.S })
-	size!: `${BadgeSize}`;
+	@property({ type: TagSize, defaultValue: TagSize.S })
+	size!: `${TagSize}`;
 
 	/**
-	 * Defines if the badge has an icon.
+	 * Defines if the tag has an icon.
 	 * @private
 	 */
 	@property({ type: Boolean })
 	_hasIcon!: boolean;
 
 	/**
-	 * Defines if the badge has only an icon (and no text).
+	 * Defines if the tag has only an icon (and no text).
 	 * @private
 	 */
 	@property({ type: Boolean })
 	_iconOnly!: boolean;
 
 	/**
-	 * Defines if the badge has "Tag" design type.
+	 * Defines if the tag has "Tag" design type.
 	 * @private
 	 */
 	@property({ type: Boolean })
@@ -179,7 +179,7 @@ class Badge extends UI5Element {
 	static i18nBundle: I18nBundle;
 
 	static async onDefine() {
-		Badge.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+		Tag.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
@@ -191,23 +191,23 @@ class Badge extends UI5Element {
 	onBeforeRendering() {
 		this._hasIcon = this.hasIcon || !!this._semanticIconName;
 		this._iconOnly = this.iconOnly;
-		this._isTagDesign = this.design !== BadgeDesign.Set3;
+		this._isTagDesign = this.design !== TagDesign.Set3;
 	}
 
 	get _roleDescription() {
-		return Badge.i18nBundle.getText(BADGE_ROLE_DESCRIPTION);
+		return Tag.i18nBundle.getText(TAG_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);
+		case TagDesign.Positive:
+			return Tag.i18nBundle.getText(TAG_SUCCESS);
+		case TagDesign.Negative:
+			return Tag.i18nBundle.getText(TAG_ERROR);
+		case TagDesign.Critical:
+			return Tag.i18nBundle.getText(TAG_WARNING);
+		case TagDesign.Information:
+			return Tag.i18nBundle.getText(TAG_INFORMATION);
 		}
 
 		return undefined;
@@ -229,17 +229,17 @@ class Badge extends UI5Element {
 		return this.title || undefined;
 	}
 
-	get badgeDescription() {
+	get tagDescription() {
 		if (this.interactive) {
 			return undefined;
 		}
 
-		if (this.design === BadgeDesign.Set3) {
-			return Badge.i18nBundle.getText(BADGE_DESCRIPTION_BADGE);
+		if (this.design === TagDesign.Set3) {
+			return Tag.i18nBundle.getText(TAG_DESCRIPTION_BADGE);
 		}
 
 		const valueState = this._valueState;
-		let description = Badge.i18nBundle.getText(BADGE_DESCRIPTION_TAG);
+		let description = Tag.i18nBundle.getText(TAG_DESCRIPTION_TAG);
 
 		if (valueState) {
 			description = `${description} ${valueState}`;
@@ -254,15 +254,15 @@ class Badge extends UI5Element {
 		}
 
 		switch (this.design) {
-		case BadgeDesign.Neutral:
+		case TagDesign.Neutral:
 			return "sys-help-2";
-		case BadgeDesign.Positive:
+		case TagDesign.Positive:
 			return "sys-enter-2";
-		case BadgeDesign.Negative:
+		case TagDesign.Negative:
 			return "error";
-		case BadgeDesign.Critical:
+		case TagDesign.Critical:
 			return "alert";
-		case BadgeDesign.Information:
+		case TagDesign.Information:
 			return "information";
 		default:
 			return null;
@@ -274,6 +274,6 @@ class Badge extends UI5Element {
 	}
 }
 
-Badge.define();
+Tag.define();
 
-export default Badge;
+export default Tag;

packages/main/src/bundle.esm.ts

@@ -98,7 +98,6 @@ import * as defaultTexts from "./generated/i18n/i18n-defaults.js";
 
 import Avatar from "./Avatar.js";
 import AvatarGroup from "./AvatarGroup.js";
-import Badge from "./Badge.js";
 import Bar from "./Bar.js";
 import Breadcrumbs from "./Breadcrumbs.js";
 import BusyIndicator from "./BusyIndicator.js";
@@ -144,10 +143,11 @@ import MessageStrip from "./MessageStrip.js";
 import MultiComboBox from "./MultiComboBox.js";
 import ProgressIndicator from "./ProgressIndicator.js";
 import RatingIndicator from "./RatingIndicator.js";
-import Text from "./Text.js";
+import Tag from "./Tag.js";
 import TabContainer from "./TabContainer.js";
 import Tab from "./Tab.js";
 import TabSeparator from "./TabSeparator.js";
+import Text from "./Text.js";
 import TextArea from "./TextArea.js";
 import TimePicker from "./TimePicker.js";
 import TimePickerClock from "./TimePickerClock.js";