fix(ui5-rating-indicator): correct half icon appearance

packages/main/cypress/specs/RatingIndicator.cy.ts

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import "../../src/RatingIndicator.js";
+
+describe("RatingIndicator", () => {
+	describe("Half Icon appearance", () => {
+		it("Half icon should be filled when rating indicator is disabled", () => {
+			const attributeValue = "favorite";
+
+			cy.mount(html`<ui5-rating-indicator value="2.5" disabled></ui5-rating-indicator>`);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+
+		it("Half icon should be filled when rating indicator is readonly", () => {
+			const attributeValue = "favorite";
+
+			cy.mount(html`<ui5-rating-indicator value="2.5" readonly></ui5-rating-indicator>`);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+
+		it("Half icon should be border only when rating indicator is regular", () => {
+			const attributeValue = "unfavorite";
+
+			cy.mount(html`<ui5-rating-indicator value="2.5"></ui5-rating-indicator>`);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+	});
+});

packages/main/src/RatingIndicator.hbs

@@ -27,7 +27,7 @@
 				</li>
 			{{else if this.halfStar}}
 				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
-					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<ui5-icon data-ui5-value="{{this.index}}" name="{{../halfStarIconName}}"></ui5-icon>
 					<div class="ui5-rating-indicator-half-icon-wrapper">
 						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
 					</div>

packages/main/src/RatingIndicator.ts

@@ -289,6 +289,10 @@ class RatingIndicator extends UI5Element {
 		this._focused = false;
 	}
 
+	get halfStarIconName() {
+		return this.disabled || this.readonly ? "favorite" : "unfavorite";
+	}
+
 	get effectiveTabIndex() {
 		const tabindex = this.getAttribute("tabindex");
 		return this.disabled ? "-1" : tabindex || "0";