diff --git a/checkbox/lib/checkbox.ts b/checkbox/lib/checkbox.ts index 8173550a16..840aaac78d 100644 --- a/checkbox/lib/checkbox.ts +++ b/checkbox/lib/checkbox.ts @@ -184,7 +184,7 @@ export class Checkbox extends LitElement { }; private readonly renderRipple = () => { // bind to this - return html``; + return html``; }; /** @private */ diff --git a/chips/lib/_trailing-icon.scss b/chips/lib/_trailing-icon.scss index b4d3864edd..7c9f63698c 100644 --- a/chips/lib/_trailing-icon.scss +++ b/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%); diff --git a/chips/lib/trailing-actions.ts b/chips/lib/trailing-actions.ts index 7fe720eaf0..26cd49ea4e 100644 --- a/chips/lib/trailing-actions.ts +++ b/chips/lib/trailing-actions.ts @@ -25,7 +25,7 @@ export function renderRemoveButton({disabled}: {disabled: boolean}) { ${ripple(() => rippleRef.value || null)} > - + diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss index 83f8f59603..06d87803ae 100644 --- a/radio/lib/_radio.scss +++ b/radio/lib/_radio.scss @@ -72,7 +72,6 @@ $_md-sys-motion: tokens.md-sys-motion-values(); } input, - md-ripple, .icon { inset: 0; margin: auto; diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts index 555d07e982..9130be7a22 100644 --- a/radio/lib/radio.ts +++ b/radio/lib/radio.ts @@ -162,7 +162,7 @@ export class Radio extends LitElement { }; private readonly renderRipple = () => { - return html``; + return html``; }; /** @private */ diff --git a/ripple/demo/demo.ts b/ripple/demo/demo.ts index 4da23b77e7..8bf57b4d25 100644 --- a/ripple/demo/demo.ts +++ b/ripple/demo/demo.ts @@ -25,7 +25,6 @@ function cssCustomPropertyAsNumber( const collection = new MaterialCollection>('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}), diff --git a/ripple/demo/stories.ts b/ripple/demo/stories.ts index aa1aca97cd..6a9175bb96 100644 --- a/ripple/demo/stories.ts +++ b/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 = { - name: 'Ripple', +const bounded: MaterialStoryInit = { + 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(); return html` -
rippleRef.value || null)}> - +
rippleRef.value || null)}> + +
+ `; + } +}; + +const unbounded: MaterialStoryInit = { + 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(); + return html` +
rippleRef.value || null)}> +
+ +
+
`; } }; /** Ripple stories. */ -export const stories = [standard]; +export const stories = [bounded, unbounded]; diff --git a/ripple/lib/ripple.ts b/ripple/lib/ripple.ts index 40b60bf504..b6625b0fd3 100644 --- a/ripple/lib/ripple.ts +++ b/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`
`; @@ -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): diff --git a/slider/lib/_slider.scss b/slider/lib/_slider.scss index 6b28add57d..625fed21ef 100644 --- a/slider/lib/_slider.scss +++ b/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); } diff --git a/slider/lib/slider.ts b/slider/lib/slider.ts index 63d5d37898..9145db0dae 100644 --- a/slider/lib/slider.ts +++ b/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 {
- ${ - when(this.range, () => this.renderHandle(handleAProps))} + ${when(this.range, () => this.renderHandle(handleAProps))} ${this.renderHandle(handleBProps)}
@@ -396,8 +395,8 @@ export class Slider extends LitElement { ${ripple(getRipple)}>`; } - private readonly renderRipple = (id: string) => html``; + private readonly renderRipple = (id: string) => + html``; private readonly getRippleA = () => { // bind to this if (!this.handleAHover) { diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss index 03d3ba5f95..3e524cad6a 100644 --- a/switch/lib/_handle.scss +++ b/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), diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss index 547edd71be..ee99b2c316 100644 --- a/switch/lib/_switch.scss +++ b/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 diff --git a/switch/lib/switch.ts b/switch/lib/switch.ts index f6c117c0b5..8cbe61d3a2 100644 --- a/switch/lib/switch.ts +++ b/switch/lib/switch.ts @@ -152,14 +152,7 @@ export class Switch extends LitElement { } private readonly renderRipple = () => { - return html` - - - - - `; + return html``; }; private readonly getRipple = () => {