From f2668b6889259c7295b06fe47f846b434510f671 Mon Sep 17 00:00:00 2001
From: Elena Stoyanova <elena.stoyanova@sap.com>
Date: Thu, 12 Oct 2023 15:25:31 +0300
Subject: [PATCH] feat(ui5-rating-indicator): introduce tooltip property
 (#7687)

---
 packages/main/src/RatingIndicator.hbs            |  2 +-
 packages/main/src/RatingIndicator.ts             | 16 ++++++++++++++--
 packages/main/test/pages/RatingIndicator.html    |  2 +-
 packages/main/test/specs/RatingIndicator.spec.js |  4 ++--
 .../RatingIndicator/RatingIndicator.stories.ts   |  1 +
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
index 0d6ff1443021..29c1d3fda23b 100644
--- a/packages/main/src/RatingIndicator.hbs
+++ b/packages/main/src/RatingIndicator.hbs
@@ -14,7 +14,7 @@
 	@focusout="{{_onfocusout}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
-	title="{{tooltip}}"
+	title="{{ratingTooltip}}"
 	aria-label="{{_ariaLabel}}"
 >
 	<ul class="ui5-rating-indicator-list"
diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts
index 7d80a7353242..424b8911a9bd 100644
--- a/packages/main/src/RatingIndicator.ts
+++ b/packages/main/src/RatingIndicator.ts
@@ -187,6 +187,18 @@ class RatingIndicator extends UI5Element {
 	@property({ type: Boolean })
 	required!: boolean;
 
+	/**
+	 * Defines the tooltip of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.RatingIndicator.prototype.tooltip
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.19.0
+	 */
+	@property()
+	tooltip!: string;
+
 	/**
 	 * @private
 	 */
@@ -315,8 +327,8 @@ class RatingIndicator extends UI5Element {
 		return this.disabled ? "-1" : tabindex || "0";
 	}
 
-	get tooltip() {
-		return this.getAttribute("title") || this.defaultTooltip;
+	get ratingTooltip() {
+		return this.tooltip || this.defaultTooltip;
 	}
 
 	get defaultTooltip() {
diff --git a/packages/main/test/pages/RatingIndicator.html b/packages/main/test/pages/RatingIndicator.html
index cd29364b42ef..9fb1a77f1782 100644
--- a/packages/main/test/pages/RatingIndicator.html
+++ b/packages/main/test/pages/RatingIndicator.html
@@ -63,7 +63,7 @@ <h3>disabled</h3>
 	<br>
 
 	<h3>RatingIndicator with title</h3>
-	<ui5-rating-indicator id="rating-indicator-title" title="Test" accessible-name="Hello World"></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator-title" tooltip="Test" accessible-name="Hello World"></ui5-rating-indicator>
 	<br>
 	<br>
 	<br>
diff --git a/packages/main/test/specs/RatingIndicator.spec.js b/packages/main/test/specs/RatingIndicator.spec.js
index c2ad42bc698f..1aa8c519ce55 100644
--- a/packages/main/test/specs/RatingIndicator.spec.js
+++ b/packages/main/test/specs/RatingIndicator.spec.js
@@ -116,11 +116,11 @@ describe("Rating Indicator general interaction", () => {
 		assert.strictEqual(await ratingIndicatorList.getAttribute("aria-hidden"), "true", "aria-hidden is set");
 	});
 
-	it("Tests ACC attrs - title attribute provided", async () => {
+	it("Tests ACC attrs - tooltip property", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator-title").shadow$(".ui5-rating-indicator-root");
 		const TOOLTIP = "Test";
 
-		assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The title attribute is rendered in the inner div as well.");
+		assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The tooltip property is rendered as a title in the inner div.");
 	});
 
 	it("Tests ACC attrs - required property add aria-description", async () => {
diff --git a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
index 2d946a72a88c..a638a9f3f322 100644
--- a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
+++ b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
@@ -32,6 +32,7 @@ const Template: UI5StoryArgs<RatingIndicator, StoryArgsSlots> = (args) => html`
 	?disabled="${ifDefined(args.disabled)}"
 	?readonly="${ifDefined(args.readonly)}"
 	?required="${ifDefined(args.required)}"
+	tooltip="${ifDefined(args.tooltip)}"
 	accessible-name="${ifDefined(args.accessibleName)}"
 	accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
 ></ui5-rating-indicator>`;