From 4293449d5e5d345bdd720a0f4504694f7045b1c0 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Tue, 4 Feb 2025 16:34:00 +0200
Subject: [PATCH] fix(ui5-button-badge): remove text when in attention dot mode
 (#10768)

---
 packages/main/src/ButtonBadge.ts          | 8 ++++++--
 packages/main/src/ButtonBadgeTemplate.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/ButtonBadge.ts b/packages/main/src/ButtonBadge.ts
index 647fabcd487d..6ee9df2544c9 100644
--- a/packages/main/src/ButtonBadge.ts
+++ b/packages/main/src/ButtonBadge.ts
@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import type ButtonBadgeDesign from "./types/ButtonBadgeDesign.js";
+import ButtonBadgeDesign from "./types/ButtonBadgeDesign.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ButtonBadgeTemplate from "./ButtonBadgeTemplate.js";
 
@@ -42,12 +42,16 @@ class ButtonBadge extends UI5Element {
 	/**
      * Defines the text of the component.
 	 *
-	 * **Note:** Text is not needed when the `design` property is set to `AttentionDot`.
+	 * **Note:** Text is not applied when the `design` property is set to `AttentionDot`.
      * @since 2.7.0
 	 * @public
 	*/
 	@property()
 	text: string = "";
+
+	get effectiveText() {
+		return this.design === ButtonBadgeDesign.AttentionDot ? "" : this.text;
+	}
 }
 
 ButtonBadge.define();
diff --git a/packages/main/src/ButtonBadgeTemplate.tsx b/packages/main/src/ButtonBadgeTemplate.tsx
index d6b63fe554b7..8d5138c4711f 100644
--- a/packages/main/src/ButtonBadgeTemplate.tsx
+++ b/packages/main/src/ButtonBadgeTemplate.tsx
@@ -2,5 +2,5 @@ import type ButtonBadge from "./ButtonBadge.js";
 import Tag from "./Tag.js";
 
 export default function ButtonTemplate(this: ButtonBadge) {
-	return <Tag design="Critical" hide-state-icon>{this.text}</Tag>;
+	return <Tag design="Critical" hide-state-icon>{this.effectiveText}</Tag>;
 }