feat(rating): enhance component's interactivity states (#11469)

**Related Issue:** [#10015](#10015) ## Summary - Update star icon to `fill` on `:hover`. - Update star icon color to `--calcite-color-brand-hover` on `:hover`. - Update star icon color to `--calcite-color-brand-press` on `:active`. - Add `--calcite-rating-color-press` css token.
Esri · Feb 20, 2025 · 17075a7 · 17075a7
1 parent 5ca8878
commit 17075a7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts
@@ -454,9 +454,9 @@ describe("calcite-rating", () => {
       expect(changeEvent).toHaveReceivedEventTimes(0);
 
       expect(await page.find("calcite-rating >>> .fraction")).toBeNull();
-      expect(icons[0]).toEqualAttribute("icon", "star");
-      expect(icons[1]).toEqualAttribute("icon", "star");
-      expect(icons[2]).toEqualAttribute("icon", "star");
+      expect(icons[0]).toEqualAttribute("icon", "star-f");
+      expect(icons[1]).toEqualAttribute("icon", "star-f");
+      expect(icons[2]).toEqualAttribute("icon", "star-f");
       expect(icons[3]).toEqualAttribute("icon", "star");
       expect(icons[4]).toEqualAttribute("icon", "star");
       expect(labels[0]).not.toHaveClass("selected");
@@ -499,7 +499,7 @@ describe("calcite-rating", () => {
       expect(icons[0]).toEqualAttribute("icon", "star-f");
       expect(icons[1]).toEqualAttribute("icon", "star-f");
       expect(icons[2]).toEqualAttribute("icon", "star-f");
-      expect(icons[3]).toEqualAttribute("icon", "star");
+      expect(icons[3]).toEqualAttribute("icon", "star-f");
       expect(icons[4]).toEqualAttribute("icon", "star");
       expect(labels[0]).toHaveClass("selected");
       expect(labels[1]).toHaveClass("selected");
@@ -675,7 +675,7 @@ describe("calcite-rating", () => {
       await page.keyboard.press("Tab");
       await page.waitForChanges();
 
-      expect(icons[0]).toEqualAttribute("icon", "star");
+      expect(icons[0]).toEqualAttribute("icon", "star-f");
       expect(icons[1]).toEqualAttribute("icon", "star");
       expect(icons[2]).toEqualAttribute("icon", "star");
       expect(icons[3]).toEqualAttribute("icon", "star");
@@ -810,21 +810,20 @@ describe("calcite-rating", () => {
           shadowSelector: `.${CSS.star}`,
           targetProp: "color",
         },
+        "--calcite-rating-color-press": {
+          shadowSelector: `.${CSS.star}`,
+          targetProp: "color",
+          state: { press: `calcite-rating >>> .${CSS.star}` },
+        },
       });
     });
     describe("selected", () => {
       themed(html`<calcite-rating value="2"></calcite-rating>`, {
-        "--calcite-rating-color-hover": [
-          {
-            shadowSelector: `.${CSS.star}[data-value='3']`,
-            targetProp: "color",
-            state: "hover",
-          },
-          {
-            shadowSelector: `.${CSS.selected}`,
-            targetProp: "color",
-          },
-        ],
+        "--calcite-rating-color-hover": {
+          shadowSelector: `.${CSS.star}[data-value='3']`,
+          targetProp: "color",
+          state: "hover",
+        },
       });
     });
     describe("average", () => {

diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
@@ -5,7 +5,8 @@
  *
  * @prop --calcite-rating-spacing-unit: [Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item.
  * @prop --calcite-rating-spacing: Specifies the amount of left and right margin spacing between each item.
- * @prop --calcite-rating-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-rating-color-hover: Specifies the component's item color when hovered.
+ * @prop --calcite-rating-color-press: Specifies the component's item color when active.
  * @prop --calcite-rating-color: Specifies the component's item color.
  * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.
  * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
@@ -58,6 +59,12 @@
   flex-direction: column;
   cursor: pointer;
   color: var(--calcite-rating-color, theme("borderColor.color.input"));
+  &:hover {
+    color: var(--calcite-rating-color-hover, var(--calcite-color-brand-hover));
+  }
+  &:active {
+    color: var(--calcite-rating-color-press, var(--calcite-color-brand-press));
+  }
   &:focus {
     @apply focus-outset;
   }
@@ -70,7 +77,7 @@
 
 .hovered,
 .selected {
-  color: var(--calcite-rating-color-hover, theme("colors.brand"));
+  color: var(--calcite-rating-color, theme("colors.brand"));
 }
 
 .fraction {

diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
@@ -424,7 +424,7 @@ export class Rating
                       type="radio"
                       value={value}
                     />
-                    <StarIcon full={selected || average} scale={this.scale} />
+                    <StarIcon full={selected || average || hovered} scale={this.scale} />
                     {partial && (
                       <div class="fraction" style={{ width: `${fraction * 100}%` }}>
                         <StarIcon full partial scale={this.scale} />

diff --git a/packages/calcite-components/src/custom-theme/rating.ts b/packages/calcite-components/src/custom-theme/rating.ts
@@ -3,6 +3,7 @@ import { html } from "../../support/formatting";
 export const ratingTokens = {
   calciteRatingSpacing: "",
   calciteRatingColorHover: "",
+  calciteRatingColorPress: "",
   calciteRatingColor: "",
   calciteRatingAverageColor: "",
   calciteRatingAverageTextColor: "",