From 7b2a85ac60b4992971428afe85794d8d980c958b Mon Sep 17 00:00:00 2001
From: Nia Peeva <nia.peeva@sap.com>
Date: Thu, 23 Sep 2021 23:38:08 +0300
Subject: [PATCH 1/2] fix(ui5-ratiing-inddicator): Apply correct color for
 readonly unselected icon

---
 packages/main/src/RatingIndicator.hbs        |  2 ++
 packages/main/src/RatingIndicator.js         |  1 +
 packages/main/src/themes/RatingIndicator.css | 14 +++++++++-----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
index 301ca56bdfd3..34fa1f4d57ea 100644
--- a/packages/main/src/RatingIndicator.hbs
+++ b/packages/main/src/RatingIndicator.hbs
@@ -23,6 +23,8 @@
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else if this.halfStar}}
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+			{{else if this.readonly}}
+				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else}}
 				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
 			{{/if}}
diff --git a/packages/main/src/RatingIndicator.js b/packages/main/src/RatingIndicator.js
index 4675838f7178..2cbf457a3f46 100644
--- a/packages/main/src/RatingIndicator.js
+++ b/packages/main/src/RatingIndicator.js
@@ -207,6 +207,7 @@ class RatingIndicator extends UI5Element {
 				selected: i <= tempValue,
 				index: i,
 				halfStar,
+				readonly: this.readonly,
 			});
 		}
 	}
diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
index 0aa7b162fb43..70d55ea5d688 100644
--- a/packages/main/src/themes/RatingIndicator.css
+++ b/packages/main/src/themes/RatingIndicator.css
@@ -14,6 +14,10 @@
 	cursor: initial;
 }
 
+:host([readonly]) .ui5-rating-indicator-icon.ui5-rating-indicator-readonly-unselected-icon {
+	color: var(--sapContent_UnratedColor);
+}
+
 :host([_focused]) {
 	outline: 1px dotted var(--sapContent_FocusColor);
 }
@@ -34,11 +38,11 @@
 
 .ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before {
 	content: "\2605";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 50%;
-    height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 50%;
+	height: 100%;
 	color: var(--sapContent_RatedColor);
 	overflow: hidden;
 }

From b040b91690450bd5cf6f9140f0eec345ea923914 Mon Sep 17 00:00:00 2001
From: Nia Peeva <nia.peeva@sap.com>
Date: Fri, 24 Sep 2021 10:51:32 +0300
Subject: [PATCH 2/2] comments reflected

---
 packages/main/src/RatingIndicator.hbs | 2 +-
 packages/main/src/RatingIndicator.js  | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
index 34fa1f4d57ea..9f70863b67b6 100644
--- a/packages/main/src/RatingIndicator.hbs
+++ b/packages/main/src/RatingIndicator.hbs
@@ -23,7 +23,7 @@
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else if this.halfStar}}
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
-			{{else if this.readonly}}
+			{{else if ../readonly}}
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else}}
 				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
diff --git a/packages/main/src/RatingIndicator.js b/packages/main/src/RatingIndicator.js
index 2cbf457a3f46..4675838f7178 100644
--- a/packages/main/src/RatingIndicator.js
+++ b/packages/main/src/RatingIndicator.js
@@ -207,7 +207,6 @@ class RatingIndicator extends UI5Element {
 				selected: i <= tempValue,
 				index: i,
 				halfStar,
-				readonly: this.readonly,
 			});
 		}
 	}