fix(ripple)!: remove unbounded

BREAKING CHANGE: Set `border-radius: 50%` and remove `unbounded` attribute

PiperOrigin-RevId: 535301943

checkbox/lib/checkbox.ts

@@ -184,7 +184,7 @@ export class Checkbox extends LitElement {
   };
 
   private readonly renderRipple = () => {  // bind to this
-    return html`<md-ripple ?disabled=${this.disabled} unbounded></md-ripple>`;
+    return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;
   };
 
   /** @private */

chips/lib/_trailing-icon.scss

@@ -27,6 +27,7 @@
   }
 
   .trailing.action md-ripple {
+    border-radius: 50%;
     height: calc(4 / 3 * var(--_icon-size)); // 24px default
     inset: 50% 0 0 50%;
     transform: translateX(-50%) translateY(-50%);

chips/lib/trailing-actions.ts

@@ -25,7 +25,7 @@ export function renderRemoveButton({disabled}: {disabled: boolean}) {
       ${ripple(() => rippleRef.value || null)}
     >
       <md-focus-ring></md-focus-ring>
-      <md-ripple ${ref(rippleRef)} unbounded></md-ripple>
+      <md-ripple ${ref(rippleRef)}></md-ripple>
       <svg class="trailing icon" viewBox="0 96 960 960">
         <path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
       </svg>

radio/lib/_radio.scss

@@ -72,7 +72,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   input,
-  md-ripple,
   .icon {
     inset: 0;
     margin: auto;

radio/lib/radio.ts

@@ -162,7 +162,7 @@ export class Radio extends LitElement {
   };
 
   private readonly renderRipple = () => {
-    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;
+    return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;
   };
 
   /** @private */

ripple/demo/demo.ts

@@ -25,7 +25,6 @@ function cssCustomPropertyAsNumber(
 const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Ripple', [
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-      new Knob('unbounded', {ui: boolInput(), defaultValue: false}),
       new Knob(
           '--md-ripple-pressed-color',
           {ui: colorPicker(), wiring: cssCustomProperty}),

ripple/demo/stories.ts

@@ -15,36 +15,79 @@ import {createRef, ref} from 'lit/directives/ref.js';
 /** Knob types for ripple stories. */
 export interface StoryKnobs {
   disabled: boolean;
-  unbounded: boolean;
   '--md-ripple-pressed-color': string;
   '--md-ripple-pressed-opacity': number;
   '--md-ripple-hover-color': string;
   '--md-ripple-hover-opacity': number;
 }
 
-const standard: MaterialStoryInit<StoryKnobs> = {
-  name: 'Ripple',
+const bounded: MaterialStoryInit<StoryKnobs> = {
+  name: 'Bounded',
   styles: css`
-    .root {
-      border: 2px solid black;
-      box-sizing: border-box;
-      height: 100px;
-      width: 100px;
+    .container {
+      border-radius: 16px;
+      height: 64px;
+      outline: 1px solid var(--md-sys-color-outline);
       position: relative;
+      width: 64px;
     }
   `,
-  render({disabled, unbounded}) {
+  render({disabled}) {
     const rippleRef = createRef<MdRipple>();
     return html`
-      <div class="root" ${ripple(() => rippleRef.value || null)}>
-        <md-ripple
-          ?disabled=${disabled}
-          ?unbounded=${unbounded}
-          ${ref(rippleRef)}></md-ripple>
+      <div class="container" ${ripple(() => rippleRef.value || null)}>
+        <md-ripple ?disabled=${disabled} ${ref(rippleRef)}></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);
+      padding: 16px;
+    }
+
+    .icon {
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: 50%;
+      display: grid;
+      height: 24px;
+      place-items: center;
+      position: relative;
+      width: 24px;
+    }
+
+    .anchor {
+      background: var(--md-sys-color-primary-container);
+    }
+
+    md-ripple {
+      border-radius: 50%;
+      height: 40px;
+      inset: unset;
+      width: 40px;
+    }
+  `,
+  render({disabled}) {
+    const rippleRef = createRef<MdRipple>();
+    return html`
+      <div class="container" ${ripple(() => rippleRef.value || null)}>
+        <div class="icon anchor">
+          <md-ripple ?disabled=${disabled} ${ref(rippleRef)}></md-ripple>
+        </div>
+        <div class="icon"></div>
       </div>
     `;
   }
 };
 
 /** Ripple stories. */
-export const stories = [standard];
+export const stories = [bounded, unbounded];

ripple/lib/ripple.ts

@@ -74,14 +74,6 @@ const TOUCH_DELAY_MS = 150;
  * A ripple component.
  */
 export class Ripple extends LitElement {
-  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
-  // Remove Safari workaround that requires reflecting `unbounded` so
-  // it can be styled against.
-  /**
-   * Sets the ripple to be an unbounded circle.
-   */
-  @property({type: Boolean, reflect: true}) unbounded = false;
-
   /**
    * Disables the ripple.
    */
@@ -222,7 +214,6 @@ export class Ripple extends LitElement {
       'hovered': this.hovered,
       'focused': this.focused,
       'pressed': this.pressed,
-      'unbounded': this.unbounded,
     };
 
     return html`<div class="surface ${classMap(classes)}"></div>`;
@@ -247,21 +238,13 @@ export class Ripple extends LitElement {
     const softEdgeSize =
         Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
 
-
-    let maxRadius = maxDim;
-    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
-
+    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
     const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
-    maxRadius = hypotenuse + PADDING;
-
-    // ensure `initialSize` is even for unbounded
-    if (this.unbounded) {
-      initialSize = initialSize - (initialSize % 2);
-    }
+    const maxRadius = hypotenuse + PADDING;
 
     this.initialSize = initialSize;
     this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;
-    this.rippleSize = `${this.initialSize}px`;
+    this.rippleSize = `${initialSize}px`;
   }
 
   private getNormalizedPointerEventCoords(pointerEvent: PointerEvent):

slider/lib/_slider.scss

@@ -468,6 +468,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   md-ripple {
+    border-radius: 50%;
     height: var(--_state-layer-size);
     width: var(--_state-layer-size);
   }

slider/lib/slider.ts

@@ -209,7 +209,7 @@ export class Slider extends LitElement {
   // value coerced to a string
   [getFormValue]() {
     return this.range ? `${this.valueStart}, ${this.valueEnd}` :
-                                 `${this.value}`;
+                        `${this.value}`;
   }
 
   // indicates input values are crossed over each other from initial rendering.
@@ -317,8 +317,7 @@ export class Slider extends LitElement {
         <div class="handleContainerPadded">
           <div class="handleContainerBlock">
             <div class="handleContainer ${classMap(handleContainerClasses)}">
-              ${
-        when(this.range, () => this.renderHandle(handleAProps))}
+              ${when(this.range, () => this.renderHandle(handleAProps))}
               ${this.renderHandle(handleBProps)}
             </div>
           </div>
@@ -396,8 +395,8 @@ export class Slider extends LitElement {
       ${ripple(getRipple)}>`;
   }
 
-  private readonly renderRipple = (id: string) => html`<md-ripple class=${
-      id} ?disabled=${this.disabled} unbounded></md-ripple>`;
+  private readonly renderRipple = (id: string) =>
+      html`<md-ripple class=${id} ?disabled=${this.disabled}></md-ripple>`;
 
   private readonly getRippleA = () => {  // bind to this
     if (!this.handleAHover) {

switch/lib/_handle.scss

@@ -16,10 +16,11 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
   .handle-container {
+    display: grid;
+    place-items: center;
     position: relative;
     // this easing is custom to perform the "overshoot" animation
     transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    display: flex;
   }
 
   $margin: calc(var(--_track-width) - var(--_track-height));
@@ -127,21 +128,14 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     opacity: var(--_disabled-unselected-handle-opacity);
   }
 
-  .ripple {
-    position: absolute;
-    display: inline-flex;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
-  }
-
   md-ripple {
     border-radius: var(--_state-layer-shape);
+    height: var(--_state-layer-size);
+    inset: unset;
+    width: var(--_state-layer-size);
   }
 
-  .switch--selected .ripple {
+  .switch--selected md-ripple {
     @include ripple.theme(
       (
         'hover-color': var(--_selected-hover-state-layer-color),
@@ -154,7 +148,7 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     );
   }
 
-  .switch--unselected .ripple {
+  .switch--unselected md-ripple {
     @include ripple.theme(
       (
         'hover-color': var(--_unselected-hover-state-layer-color),

switch/lib/_switch.scss

@@ -122,11 +122,8 @@
   // Touch target
   .touch {
     position: absolute;
-    top: 50%;
     height: 48px;
-    left: 50%;
     width: 48px;
-    transform: translate(-50%, -50%);
   }
 
   // Disabled

switch/lib/switch.ts

@@ -152,14 +152,7 @@ export class Switch extends LitElement {
   }
 
   private readonly renderRipple = () => {
-    return html`
-      <span class="ripple">
-        <md-ripple
-          ?disabled="${this.disabled}"
-          unbounded>
-        </md-ripple>
-      </span>
-    `;
+    return html`<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
   };
 
   private readonly getRipple = () => {