From c9533087602d767f939512c5aac4690a07bdf706 Mon Sep 17 00:00:00 2001
From: Vlad Rusu <vlad.rusu@gmail.com>
Date: Wed, 16 Oct 2024 11:41:02 +0300
Subject: [PATCH] Rating fixes: - readonly class not added to a "readonly"
 .rating element, making the stars to grow when hovering - hovering over a
 readonly or disabled rating now shows a default cursor, not pointer (since
 you cannot click on it)

---
 js/src/rating.js  | 5 +++++
 scss/_rating.scss | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/js/src/rating.js b/js/src/rating.js
index 2929a9eb1..28c61309e 100644
--- a/js/src/rating.js
+++ b/js/src/rating.js
@@ -34,6 +34,7 @@ const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`
 
 const CLASS_NAME_ACTIVE = 'active'
 const CLASS_NAME_DISABLED = 'disabled'
+const CLASS_NAME_READONLY = 'readonly'
 const CLASS_NAME_RATING = 'rating'
 const CLASS_NAME_RATING_ITEM = 'rating-item'
 const CLASS_NAME_RATING_ITEM_ICON = 'rating-item-icon'
@@ -355,6 +356,10 @@ class Rating extends BaseComponent {
       this._element.classList.add(CLASS_NAME_DISABLED)
     }
 
+    if (this._config.readOnly) {
+      this._element.classList.add(CLASS_NAME_READONLY)
+    }
+
     this._element.setAttribute('role', 'radiogroup')
     Array.from({ length: this._config.itemCount }, (_, index) => this._createRatingItem(index))
   }
diff --git a/scss/_rating.scss b/scss/_rating.scss
index d05676a14..52ef5aa64 100644
--- a/scss/_rating.scss
+++ b/scss/_rating.scss
@@ -18,7 +18,9 @@
 
   &:not(.disabled):not(.readonly) {
     .rating-item {
-      cursor: pointer;
+      .rating-item-label {
+        cursor: pointer;
+      }
 
       &:hover {
         transform: var(--#{$prefix}rating-item-scale-transform);
@@ -47,7 +49,7 @@
   font-size: var(--#{$prefix}rating-item-height);
   line-height: 0;
   color: var(--#{$prefix}rating-item-color);
-  cursor: pointer;
+  cursor: default;  // has cursor pointer only if the rating is not disabled or readonly (see above)
 
   * {
     pointer-events: none;
@@ -83,7 +85,7 @@
 .rating-item-icon {
   width: var(--#{$prefix}rating-item-height);
   height: var(--#{$prefix}rating-item-height);
-  cursor: pointer;
+  //cursor: pointer;  // has the cursor of rating-item-label (parent)
   background-color: var(--#{$prefix}rating-item-color);
   mask: var(--#{$prefix}rating-item-icon) center / var(--#{$prefix}rating-item-height) no-repeat;
 }