fix(tabs, ripple): Correct scale factor calculations (#2008)

Author: rkaraivanov

src/components/common/util.ts

@@ -346,7 +346,7 @@ export function partition<T>(
 }
 
 /** Returns the center x/y coordinate of a given element. */
-export function getCenterPoint(element: Element) {
+export function getCenterPoint(element: Element): { x: number; y: number } {
   const { left, top, width, height } = element.getBoundingClientRect();
 
   return {
@@ -355,6 +355,13 @@ export function getCenterPoint(element: Element) {
   };
 }
 
+/** Returns the scale factor of a given element based on its bounding client rect and offset dimensions. */
+export function getScaleFactor(element: HTMLElement): { x: number; y: number } {
+  const { offsetWidth, offsetHeight } = element;
+  const { width, height } = element.getBoundingClientRect();
+  return { x: offsetWidth / width || 1, y: offsetHeight / height || 1 };
+}
+
 export function roundByDPR(value: number): number {
   const dpr = globalThis.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;

src/components/ripple/ripple.spec.ts

@@ -1,5 +1,4 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import IgcButtonComponent from '../button/button.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { simulatePointerDown } from '../common/utils.spec.js';
@@ -39,4 +38,16 @@ describe('Ripple', () => {
 
     simulatePointerDown(ripple);
   });
+
+  it('No ripple on non-primary pointer button', async () => {
+    ripple.addEventListener(
+      'animationstart',
+      () =>
+        expect.fail('Ripple animation should not start on non-primary button'),
+      { once: true }
+    );
+
+    simulatePointerDown(ripple, { button: 1 });
+    await elementUpdated(ripple);
+  });
 });

src/components/ripple/ripple.ts

@@ -1,7 +1,10 @@
-import { html, LitElement } from 'lit';
-
+import { LitElement, nothing } from 'lit';
 import { registerComponent } from '../common/definitions/register.js';
-import { addSafeEventListener } from '../common/util.js';
+import {
+  addSafeEventListener,
+  getScaleFactor,
+  setStyles,
+} from '../common/util.js';
 import { styles } from './ripple.material.css.js';
 
 const rippleFrames: Keyframe[] = [
@@ -17,7 +20,7 @@ const rippleAnimation: KeyframeAnimationOptions = {
 
 let rippleElement: HTMLElement;
 
-function getRippleElement() {
+function getRippleElement(): HTMLSpanElement {
   if (!rippleElement) {
     rippleElement = document.createElement('span');
   }
@@ -41,12 +44,19 @@ export default class IgcRippleComponent extends LitElement {
 
   constructor() {
     super();
-    addSafeEventListener(this, 'pointerdown', this.handler);
+    addSafeEventListener(this, 'pointerdown', this._handler);
   }
 
-  private handler = ({ clientX, clientY }: PointerEvent) => {
+  private async _handler(event: PointerEvent): Promise<void> {
+    if (event.button !== 0) {
+      return;
+    }
+
     const element = getRippleElement();
-    const { radius, top, left } = this.getDimensions(clientX, clientY);
+    const { radius, top, left } = this._getDimensions(
+      event.clientX,
+      event.clientY
+    );
 
     const styles: Partial<CSSStyleDeclaration> = {
       position: 'absolute',
@@ -55,8 +65,8 @@ export default class IgcRippleComponent extends LitElement {
       transformOrigin: 'center',
       transform: 'translate3d(0, 0, 0) scale(0)',
       willChange: 'opacity, transform',
-      margin: '0 !important',
-      border: 'none !important',
+      margin: '0',
+      border: 'none',
       width: `${radius}px`,
       height: `${radius}px`,
       borderRadius: '50%',
@@ -65,28 +75,28 @@ export default class IgcRippleComponent extends LitElement {
       background: 'var(--color, var(--ig-gray-800))',
     };
 
-    Object.assign(element.style, styles);
+    setStyles(element, styles);
     this.renderRoot.appendChild(element);
 
-    element
-      .animate(rippleFrames, rippleAnimation)
-      .finished.then(() => element.remove());
-  };
+    await element.animate(rippleFrames, rippleAnimation).finished;
+    element.remove();
+  }
 
-  private getDimensions(x: number, y: number) {
+  private _getDimensions(x: number, y: number) {
     const rect = this.getBoundingClientRect();
+    const factor = getScaleFactor(this);
     const radius = Math.max(rect.width, rect.height);
     const halfRadius = radius / 2;
 
     return {
       radius,
-      top: Math.round(y - rect.top - halfRadius),
-      left: Math.round(x - rect.left - halfRadius),
+      top: Math.round((y - rect.top) * factor.y - halfRadius),
+      left: Math.round((x - rect.left) * factor.x - halfRadius),
     };
   }
 
   protected override render() {
-    return html``;
+    return nothing;
   }
 }
 

src/components/tabs/tab-dom.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'lit/directives/ref.js';
-import { isLTR } from '../common/util.js';
+import { getScaleFactor, isLTR, setStyles } from '../common/util.js';
 import type IgcTabComponent from './tab.js';
 import type IgcTabsComponent from './tabs.js';
 
@@ -151,22 +151,23 @@ class TabsHelpers {
     await this._host.updateComplete;
 
     if (active) {
-      const tabHeader = getTabHeader(active);
-      const { width } = tabHeader.getBoundingClientRect();
+      const header = getTabHeader(active);
+      const { offsetLeft: containerLeft, offsetWidth: containerWidth } =
+        this.container;
+      const scaledWidth =
+        header.getBoundingClientRect().width * getScaleFactor(header).x;
 
       const offset = this._isLeftToRight
-        ? tabHeader.offsetLeft - this.container.offsetLeft
-        : width +
-          tabHeader.offsetLeft -
-          this.container.getBoundingClientRect().width;
+        ? header.offsetLeft - containerLeft
+        : header.offsetLeft + scaledWidth - containerWidth;
 
       Object.assign(styles, {
-        width: `${width}px`,
+        width: `${scaledWidth}px`,
         transform: `translateX(${offset}px)`,
       });
     }
 
-    Object.assign(this.indicator.style, styles);
+    setStyles(this.indicator, styles);
   }
 }