refactor(rating): Skip default symbols when there are projected ones (#1381)

This commit prevents the default rating symbols from being
rendered in the shadow DOM when there are user projected ones.

Updated some internal event handlers and types to use pointer
events instead of mouse ones as well as unit tests adjustments
to these changes.

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: rkaraivanov

src/components/rating/rating.spec.ts

@@ -8,11 +8,6 @@ import {
 import { nothing } from 'lit';
 import { spy } from 'sinon';
 
-import {
-  IgcRatingComponent,
-  type IgcRatingSymbolComponent,
-  defineComponents,
-} from '../../index.js';
 import {
   arrowDown,
   arrowLeft,
@@ -21,34 +16,38 @@ import {
   endKey,
   homeKey,
 } from '../common/controllers/key-bindings.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   FormAssociatedTestBed,
+  simulateClick,
   simulateKeyboard,
+  simulatePointerMove,
 } from '../common/utils.spec.js';
+import IgcRatingSymbolComponent from './rating-symbol.js';
+import IgcRatingComponent from './rating.js';
 
 describe('Rating component', () => {
   before(() => {
     defineComponents(IgcRatingComponent);
   });
 
+  let el: IgcRatingComponent;
+
   const getRatingSymbols = (el: IgcRatingComponent) =>
-    el.shadowRoot!.querySelectorAll(
-      'igc-rating-symbol'
-    ) as NodeListOf<IgcRatingSymbolComponent>;
-  const getProjectedSymbols = (el: IgcRatingComponent) => {
-    const slot = el.shadowRoot!.querySelector(
-      'slot[name="symbol"]'
-    ) as HTMLSlotElement;
-    return slot
-      .assignedElements()
-      .filter((el) => el.matches('igc-rating-symbol'));
-  };
+    el.renderRoot.querySelectorAll(IgcRatingSymbolComponent.tagName);
+
+  const getProjectedSymbols = (el: IgcRatingComponent) =>
+    el.renderRoot
+      .querySelector<HTMLSlotElement>('slot[name="symbol"]')
+      ?.assignedElements()
+      .filter((each) =>
+        each.matches(IgcRatingSymbolComponent.tagName)
+      ) as IgcRatingSymbolComponent[];
+
   const getRatingWrapper = (el: IgcRatingComponent) =>
-    el.shadowRoot!.querySelector(`[part='base']`) as HTMLElement;
-  const fireMouseEvent = (type: string, opts: MouseEventInit) =>
-    new MouseEvent(type, opts);
+    el.renderRoot.querySelector<HTMLElement>('[part="base"]')!;
+
   const getBoundingRect = (el: Element) => el.getBoundingClientRect();
-  let el: IgcRatingComponent;
 
   describe('', () => {
     beforeEach(async () => {
@@ -280,13 +279,8 @@ describe('Rating component', () => {
       const eventSpy = spy(el, 'emitEvent');
       const symbol = getRatingSymbols(el).item(2);
       const { x, width } = getBoundingRect(symbol);
-      symbol.dispatchEvent(
-        fireMouseEvent('click', {
-          bubbles: true,
-          composed: true,
-          clientX: x + width / 2,
-        })
-      );
+      simulateClick(symbol, { clientX: x + width / 2 });
+
       expect(eventSpy).calledOnceWithExactly('igcChange', { detail: 3 });
       expect(el.value).to.equal(3);
     });
@@ -298,13 +292,8 @@ describe('Rating component', () => {
 
       const symbol = getRatingSymbols(el).item(2);
       const { x, width } = getBoundingRect(symbol);
-      symbol.dispatchEvent(
-        fireMouseEvent('click', {
-          bubbles: true,
-          composed: true,
-          clientX: x + width / 4,
-        })
-      );
+      simulateClick(symbol, { clientX: x + width / 4 });
+
       expect(eventSpy).calledOnceWithExactly('igcChange', { detail: 2.5 });
       expect(el.value).to.equal(2.5);
     });
@@ -316,14 +305,8 @@ describe('Rating component', () => {
       await elementUpdated(el);
       const symbol = getRatingSymbols(el).item(2);
       const { x, width } = getBoundingRect(symbol);
+      simulatePointerMove(symbol, { clientX: x + width / 2 });
 
-      symbol.dispatchEvent(
-        fireMouseEvent('mousemove', {
-          bubbles: true,
-          composed: true,
-          clientX: x + width / 2,
-        })
-      );
       expect(eventSpy).calledOnceWithExactly('igcHover', { detail: 3 });
       expect(el.value).to.equal(2);
     });
@@ -335,14 +318,7 @@ describe('Rating component', () => {
 
       el.value = 5;
       await elementUpdated(el);
-
-      symbol.dispatchEvent(
-        fireMouseEvent('click', {
-          bubbles: true,
-          composed: true,
-          clientX: x + width / 2,
-        })
-      );
+      simulateClick(symbol, { clientX: x + width / 2 });
 
       expect(el.value).to.equal(5);
       expect(eventSpy).not.to.be.called;
@@ -357,13 +333,7 @@ describe('Rating component', () => {
       el.allowReset = true;
       await elementUpdated(el);
 
-      symbol.dispatchEvent(
-        fireMouseEvent('click', {
-          bubbles: true,
-          composed: true,
-          clientX: x + width / 2,
-        })
-      );
+      simulateClick(symbol, { clientX: x + width / 2 });
 
       expect(el.value).to.equal(0);
       expect(eventSpy).to.have.been.calledOnceWith('igcChange', { detail: 0 });

src/components/rating/rating.ts

@@ -237,7 +237,7 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
       .set(endKey, () => this.emitValueUpdate(this.max));
   }
 
-  protected handleClick({ clientX }: MouseEvent) {
+  protected handleClick({ clientX }: PointerEvent) {
     const value = this.calcNewValue(clientX);
     const sameValue = this.value === value;
 
@@ -248,11 +248,11 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
     }
   }
 
-  protected handleMouseMove({ clientX }: MouseEvent) {
+  protected handlePointerMove({ clientX }: PointerEvent) {
     const value = this.calcNewValue(clientX);
 
     if (this.hoverValue !== value) {
-      // Since mousemove spams a lot, only emit on a value change
+      // Since pointermove spams a lot, only emit on a value change
       this.hoverValue = value;
       this.emitEvent('igcHover', { detail: this.hoverValue });
     }
@@ -358,26 +358,22 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
   }
 
   protected clipProjected() {
-    if (this.hasProjectedSymbols) {
-      const ltr = isLTR(this);
-      this.ratingSymbols.forEach((symbol: IgcRatingSymbolComponent, i) => {
-        const full = symbol.shadowRoot?.querySelector(
-          '[part="symbol full"]'
-        ) as HTMLElement;
-
-        const empty = symbol.shadowRoot?.querySelector(
-          '[part="symbol empty"]'
-        ) as HTMLElement;
-        const { forward, backward } = this.clipSymbol(i, ltr);
-
-        if (full) {
-          full.style.clipPath = forward;
-        }
-
-        if (empty) {
-          empty.style.clipPath = backward;
-        }
-      });
+    const ltr = isLTR(this);
+    const partFull = '[part="symbol full"]';
+    const partEmpty = '[part="symbol empty"]';
+
+    for (const [i, symbol] of this.ratingSymbols.entries()) {
+      const full = symbol.renderRoot.querySelector<HTMLElement>(partFull);
+      const empty = symbol.renderRoot.querySelector<HTMLElement>(partEmpty);
+      const { forward, backward } = this.clipSymbol(i, ltr);
+
+      if (full) {
+        full.style.clipPath = forward;
+      }
+
+      if (empty) {
+        empty.style.clipPath = backward;
+      }
     }
   }
 
@@ -412,15 +408,16 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
           aria-hidden="true"
           part="symbols"
           @click=${this.isInteractive ? this.handleClick : nothing}
-          @mouseenter=${hoverActive ? this.handleHoverEnabled : nothing}
-          @mouseleave=${hoverActive ? this.handleHoverDisabled : nothing}
-          @mousemove=${hoverActive ? this.handleMouseMove : nothing}
+          @pointerenter=${hoverActive ? this.handleHoverEnabled : nothing}
+          @pointerleave=${hoverActive ? this.handleHoverDisabled : nothing}
+          @pointermove=${hoverActive ? this.handlePointerMove : nothing}
         >
           <slot name="symbol" @slotchange=${this.handleSlotChange}>
-            ${guard(props, () => {
-              this.clipProjected();
-              return this.renderSymbols();
-            })}
+            ${guard(props, () =>
+              this.hasProjectedSymbols
+                ? this.clipProjected()
+                : this.renderSymbols()
+            )}
           </slot>
         </div>
         <label part="value-label" ?hidden=${this.valueLabel.length === 0}>