fix(ripple): wrong start point for pressing unbounded ripples

PiperOrigin-RevId: 537965121
material-components · Jun 5, 2023 · 88b5cfe · 88b5cfe
1 parent 0e94e28
commit 88b5cfe
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 44 deletions.
diff --git a/ripple/demo/stories.ts b/ripple/demo/stories.ts
@@ -17,71 +17,70 @@ export interface StoryKnobs {
   '--md-ripple-hover-opacity': number;
 }
 
-const bounded: MaterialStoryInit<StoryKnobs> = {
-  name: 'Bounded',
+const ripples: MaterialStoryInit<StoryKnobs> = {
+  name: 'Ripples',
   styles: css`
-    .container {
-      border-radius: 16px;
-      height: 64px;
-      outline: 1px solid var(--md-sys-color-outline);
-      position: relative;
-      width: 64px;
+    .row {
+      align-items: center;
+      display: flex;
+      gap: 32px;
     }
-  `,
-  render() {
-    return html`
-      <div class="container">
-        <md-ripple></md-ripple>
-      </div>
-    `;
-  }
-};
 
-const unbounded: MaterialStoryInit<StoryKnobs> = {
-  name: 'Unbounded',
-  styles: css`
     .container {
       align-items: center;
       border-radius: 24px;
       display: flex;
-      gap: 16px;
-      height: 48px;
-      outline: 1px dashed var(--md-sys-color-outline);
+      height: 64px;
+      justify-content: center;
+      outline: 1px solid var(--md-sys-color-outline);
       padding: 16px;
+      position: relative;
+      width: 64px;
     }
 
-    .icon {
+    .container:has(.unbounded) {
+      border-radius: 50%;
+      outline-style: dashed;
+    }
+
+    .anchor {
+      background: var(--md-sys-color-primary-container);
       border: 1px solid var(--md-sys-color-outline);
       border-radius: 50%;
-      display: grid;
       height: 24px;
+      width: 24px;
+
+      /* Recommended styles for an unbounded ripple's anchor. */
+      display: grid;
       place-items: center;
       position: relative;
-      width: 24px;
     }
 
-    .anchor {
-      background: var(--md-sys-color-primary-container);
-    }
+    md-ripple.unbounded {
+      height: 64px;
+      width: 64px;
 
-    md-ripple {
+      /* Recommended styles for an unbounded ripple. */
       border-radius: 50%;
-      height: 40px;
       inset: unset;
-      width: 40px;
     }
   `,
   render() {
     return html`
-      <div id="touch" class="container">
-        <div class="icon anchor">
-          <md-ripple for="touch"></md-ripple>
+      <div class="row">
+        <div class="container">
+          <md-ripple></md-ripple>
+        </div>
+
+        <div class="container" id="touch">
+          <div class="anchor">
+            <md-ripple for="touch" class="unbounded"></md-ripple>
+          </div>
         </div>
-        <div class="icon"></div>
       </div>
     `;
   }
 };
 
 /** Ripple stories. */
-export const stories = [bounded, unbounded];
+export const stories = [ripples];
diff --git a/ripple/lib/ripple.ts b/ripple/lib/ripple.ts
@@ -256,12 +256,8 @@ export class Ripple extends LitElement implements Attachable {
     this.endPressAnimation();
   }
 
-  private getDimensions() {
-    return (this.parentElement ?? this).getBoundingClientRect();
-  }
-
   private determineRippleSize() {
-    const {height, width} = this.getDimensions();
+    const {height, width} = this.getBoundingClientRect();
     const maxDim = Math.max(height, width);
     const softEdgeSize =
         Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
@@ -278,15 +274,15 @@ export class Ripple extends LitElement implements Attachable {
   private getNormalizedPointerEventCoords(pointerEvent: PointerEvent):
       {x: number, y: number} {
     const {scrollX, scrollY} = window;
-    const {left, top} = this.getDimensions();
+    const {left, top} = this.getBoundingClientRect();
     const documentX = scrollX + left;
     const documentY = scrollY + top;
     const {pageX, pageY} = pointerEvent;
     return {x: pageX - documentX, y: pageY - documentY};
   }
 
   private getTranslationCoordinates(positionEvent?: Event) {
-    const {height, width} = this.getDimensions();
+    const {height, width} = this.getBoundingClientRect();
     // end in the center
     const endPoint = {
       x: (width - this.initialSize) / 2,