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 976dee370ed9..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?: string;
+ 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?: string;
+ unratedIcon = "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..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.effectiveIconSelected : this.effectiveIconUnselected;
+ 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 @@
-
-
-
+
+
+