From 5fcd5c569de4241e7491e4a81013098eefc52cd9 Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Thu, 26 Feb 2026 10:26:15 +0200 Subject: [PATCH 1/2] fix(ui5-rating-indicator): set correct default icon values Set default values for iconSelected and iconUnselected properties to "favourite" and "unfavorite". --- packages/main/src/RatingIndicator.ts | 12 ++---------- packages/main/src/RatingIndicatorTemplate.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts index 976dee370ed9..6e21980b988f 100644 --- a/packages/main/src/RatingIndicator.ts +++ b/packages/main/src/RatingIndicator.ts @@ -185,7 +185,7 @@ class RatingIndicator extends UI5Element { * @since 2.20 */ @property() - iconSelected?: string; + iconSelected = "favorite"; /** * Defines the icon to be displayed for the unselected (empty) rating symbol. @@ -194,7 +194,7 @@ class RatingIndicator extends UI5Element { * @since 2.20 */ @property() - iconUnselected?: string; + iconUnselected = "unfavorite"; /** * @private @@ -360,14 +360,6 @@ class RatingIndicator extends UI5Element { get ariaReadonly() { return this.readonly ? "true" : undefined; } - - get effectiveIconSelected() { - return this.iconSelected || "favorite"; - } - - get effectiveIconUnselected() { - return this.iconUnselected || "unfavorite"; - } } RatingIndicator.define(); diff --git a/packages/main/src/RatingIndicatorTemplate.tsx b/packages/main/src/RatingIndicatorTemplate.tsx index d5843ec80a8f..d7457c704f35 100644 --- a/packages/main/src/RatingIndicatorTemplate.tsx +++ b/packages/main/src/RatingIndicatorTemplate.tsx @@ -35,14 +35,14 @@ function starLi(this: RatingIndicator, star: Star) { if (star.selected) { return (
  • - +
    • ); } if (star.halfStar) { return (
  • - +
    @@ -52,23 +52,23 @@ function starLi(this: RatingIndicator, star: Star) { } if (this.readonly) { return (
  • - +
    • ); } if (this.disabled) { return (
  • - +
    • ); } return (
  • - +
    • ); } function halfStarIconName(this: RatingIndicator) { - return this.disabled || this.readonly ? this.effectiveIconSelected : this.effectiveIconUnselected; + return this.disabled || this.readonly ? this.iconSelected : this.iconUnselected; } From 23b29b9583bd2ed2467f739ac13a765e44bb39b3 Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Fri, 27 Feb 2026 12:49:39 +0200 Subject: [PATCH 2/2] fix(ui5-rating-indicator): update custom icon properties names Rename properties for selected and unselected custom icons to 'ratedIcon' and 'unratedIcon'. Update their default values to 'favorite' and 'unfavorite'. --- .../main/cypress/specs/RatingIndicator.cy.tsx | 18 +++++++++--------- packages/main/src/RatingIndicator.ts | 4 ++-- packages/main/src/RatingIndicatorTemplate.tsx | 12 ++++++------ packages/main/test/pages/RatingIndicator.html | 10 +++++----- .../_components_pages/main/RatingIndicator.mdx | 2 +- .../RatingIndicator/CustomIcons/sample.html | 6 +++--- 6 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/main/cypress/specs/RatingIndicator.cy.tsx b/packages/main/cypress/specs/RatingIndicator.cy.tsx index 6af958374c92..b9150fb65efd 100644 --- a/packages/main/cypress/specs/RatingIndicator.cy.tsx +++ b/packages/main/cypress/specs/RatingIndicator.cy.tsx @@ -23,8 +23,8 @@ describe("RatingIndicator", () => { .should("have.attr", "name", "unfavorite"); }); - it("should render custom icons for selected and unselected states", () => { - cy.mount(); + it("should render custom icons for rated and unrated states", () => { + cy.mount(); cy.get("[ui5-rating-indicator]") .shadow() @@ -39,8 +39,8 @@ describe("RatingIndicator", () => { .should("have.attr", "name", "heart-2"); }); - it("should render custom icon with default unselected icon when only iconSelected is specified", () => { - cy.mount(); + it("should render custom icon with default unrated icon when only ratedIcon is specified", () => { + cy.mount(); cy.get("[ui5-rating-indicator]") .shadow() @@ -55,8 +55,8 @@ describe("RatingIndicator", () => { .should("have.attr", "name", "unfavorite"); }); - it("should render custom unselected icon with default selected icon when only iconUnselected is specified", () => { - cy.mount(); + it("should render custom unrated icon with default rated icon when only unratedIcon is specified", () => { + cy.mount(); cy.get("[ui5-rating-indicator]") .shadow() @@ -72,7 +72,7 @@ describe("RatingIndicator", () => { }); it("should render custom icons in half-star state", () => { - cy.mount(); + cy.mount(); cy.get("[ui5-rating-indicator]") .shadow() @@ -86,7 +86,7 @@ describe("RatingIndicator", () => { }); it("should render custom icon (filled) in half-star state when readonly", () => { - cy.mount(); + cy.mount(); cy.get("[ui5-rating-indicator]") .shadow() @@ -100,7 +100,7 @@ describe("RatingIndicator", () => { }); it("should render custom icon (filled) in half-star state when disabled", () => { - cy.mount(); + cy.mount(); cy.get("[ui5-rating-indicator]") .shadow() diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts index 6e21980b988f..42a9e5f41e73 100644 --- a/packages/main/src/RatingIndicator.ts +++ b/packages/main/src/RatingIndicator.ts @@ -185,7 +185,7 @@ class RatingIndicator extends UI5Element { * @since 2.20 */ @property() - iconSelected = "favorite"; + ratedIcon = "favorite"; /** * Defines the icon to be displayed for the unselected (empty) rating symbol. @@ -194,7 +194,7 @@ class RatingIndicator extends UI5Element { * @since 2.20 */ @property() - iconUnselected = "unfavorite"; + unratedIcon = "unfavorite"; /** * @private diff --git a/packages/main/src/RatingIndicatorTemplate.tsx b/packages/main/src/RatingIndicatorTemplate.tsx index d7457c704f35..8bfb554c804a 100644 --- a/packages/main/src/RatingIndicatorTemplate.tsx +++ b/packages/main/src/RatingIndicatorTemplate.tsx @@ -35,14 +35,14 @@ function starLi(this: RatingIndicator, star: Star) { if (star.selected) { return (
  • - +
    • ); } if (star.halfStar) { return (
  • - +
    @@ -52,23 +52,23 @@ function starLi(this: RatingIndicator, star: Star) { } if (this.readonly) { return (
  • - +
    • ); } if (this.disabled) { return (
  • - +
    • ); } return (
  • - +
    • ); } function halfStarIconName(this: RatingIndicator) { - return this.disabled || this.readonly ? this.iconSelected : this.iconUnselected; + return this.disabled || this.readonly ? this.ratedIcon : this.unratedIcon; } diff --git a/packages/main/test/pages/RatingIndicator.html b/packages/main/test/pages/RatingIndicator.html index f9b4568f774c..bcb73ec16cf3 100644 --- a/packages/main/test/pages/RatingIndicator.html +++ b/packages/main/test/pages/RatingIndicator.html @@ -136,27 +136,27 @@

    sizes

    Custom Icons - Hearts

    - +

    Custom Icons - Thumbs Up

    - +

    Custom Icons - Hearts (readonly)

    - +

    Custom Icons - Hearts (disabled)

    - +

    Custom Icons - Only selected icon (circles)

    - +

    diff --git a/packages/website/docs/_components_pages/main/RatingIndicator.mdx b/packages/website/docs/_components_pages/main/RatingIndicator.mdx index b5e57d650446..c5533cda98c5 100644 --- a/packages/website/docs/_components_pages/main/RatingIndicator.mdx +++ b/packages/website/docs/_components_pages/main/RatingIndicator.mdx @@ -21,6 +21,6 @@ The RatingIndicator supports several sizes of the Icons (S, M and L). ### Custom Icons -The RatingIndicator supports custom icons for both selected and unselected states using the `icon-selected` and `icon-unselected` properties. +The RatingIndicator supports custom icons for both selected and unselected states using the `rated-icon` and `unrated-icon` properties. diff --git a/packages/website/docs/_samples/main/RatingIndicator/CustomIcons/sample.html b/packages/website/docs/_samples/main/RatingIndicator/CustomIcons/sample.html index d296752be125..4ef959c0e958 100644 --- a/packages/website/docs/_samples/main/RatingIndicator/CustomIcons/sample.html +++ b/packages/website/docs/_samples/main/RatingIndicator/CustomIcons/sample.html @@ -10,9 +10,9 @@ -
    -
    - +
    +
    +