From a6c988beddccf6101ab7ba43ed392f30bb58eb57 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 24 May 2023 17:13:35 -0700 Subject: [PATCH] fix(ripple)!: remove shape token and will-change BREAKING CHANGE: Use `border-radius` instead of `--md-ripple-shape` PiperOrigin-RevId: 535034875 --- checkbox/lib/_checkbox.scss | 2 +- iconbutton/lib/_shared.scss | 1 - iconbutton/lib/_standard-icon-button.scss | 5 ++- radio/lib/_radio.scss | 1 + ripple/lib/_ripple.scss | 36 ++++++++------------- switch/lib/_handle.scss | 8 ++--- tokens/_index.scss | 1 + {ripple/lib => tokens}/_md-comp-ripple.scss | 30 ++++++++++++----- 8 files changed, 45 insertions(+), 39 deletions(-) rename {ripple/lib => tokens}/_md-comp-ripple.scss (56%) diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss index 1484a4026d..42c1d0ae6f 100644 --- a/checkbox/lib/_checkbox.scss +++ b/checkbox/lib/_checkbox.scss @@ -169,6 +169,7 @@ $_checkmark-bottom-left: 7px, -14px; // Ripple md-ripple { + border-radius: var(--_state-layer-shape); height: var(--_state-layer-size); width: var(--_state-layer-size); @@ -180,7 +181,6 @@ $_checkmark-bottom-left: 7px, -14px; hover-opacity: var(--_unselected-hover-state-layer-opacity), pressed-color: var(--_unselected-pressed-state-layer-color), pressed-opacity: var(--_unselected-pressed-state-layer-opacity), - shape: var(--_state-layer-shape), ) ); } diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss index 81b9627c9b..d6448f79c0 100644 --- a/iconbutton/lib/_shared.scss +++ b/iconbutton/lib/_shared.scss @@ -72,7 +72,6 @@ md-ripple { z-index: -1; // Place behind content - // TODO(b/263517885): replace with ripple.theme(container-shape) border-start-start-radius: var(--_container-shape-start-start); border-start-end-radius: var(--_container-shape-start-end); border-end-start-radius: var(--_container-shape-end-start); diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss index a24600a51e..1705138929 100644 --- a/iconbutton/lib/_standard-icon-button.scss +++ b/iconbutton/lib/_standard-icon-button.scss @@ -57,7 +57,6 @@ hover-opacity: var(--_unselected-hover-state-layer-opacity), pressed-color: var(--_unselected-pressed-state-layer-color), pressed-opacity: var(--_unselected-pressed-state-layer-opacity), - shape: var(--_state-layer-shape), ) ); @@ -78,6 +77,10 @@ } } + md-ripple { + border-radius: var(--_state-layer-shape); + } + .standard:disabled .icon { opacity: var(--_disabled-icon-opacity); } diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss index 8320a2c7c5..83f8f59603 100644 --- a/radio/lib/_radio.scss +++ b/radio/lib/_radio.scss @@ -85,6 +85,7 @@ $_md-sys-motion: tokens.md-sys-motion-values(); } md-ripple { + border-radius: 50%; height: var(--_state-layer-size); width: var(--_state-layer-size); } diff --git a/ripple/lib/_ripple.scss b/ripple/lib/_ripple.scss index 46e2f678f2..066e22ea35 100644 --- a/ripple/lib/_ripple.scss +++ b/ripple/lib/_ripple.scss @@ -4,32 +4,35 @@ // // go/keep-sorted start +@use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../sass/theme'; @use '../../tokens'; -@use './md-comp-ripple'; // go/keep-sorted end @mixin theme($tokens) { - $tokens: theme.validate-theme(md-comp-ripple.values(), $tokens); - $tokens: theme.create-theme-vars($tokens, ripple); + $supported-tokens: tokens.$md-comp-ripple-supported-tokens; + @each $token, $value in $tokens { + @if list.index($supported-tokens, $token) == null { + @error 'Token `#{$token}` is not a supported token.'; + } - @include theme.emit-theme-vars($tokens); + @if $value { + --md-ripple-#{$token}: #{$value}; + } + } } @mixin styles() { - $tokens: md-comp-ripple.values(); - $tokens: theme.create-theme-vars($tokens, ripple); + $tokens: tokens.md-comp-ripple-values(); :host { @each $token, $value in $tokens { - --_#{$token}: #{$value}; + --_#{$token}: var(--md-ripple-#{$token}, #{$value}); } - } - :host { display: flex; } @@ -39,6 +42,7 @@ :host, .surface { + border-radius: inherit; position: absolute; inset: 0; pointer-events: none; @@ -46,11 +50,6 @@ } .surface { - // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546) - // Remove Safari workaround for incorrect ripple overflow when addressed. - // This addresses `hover` and `pressed` state oveflow. - will-change: transform; - border-radius: var(--_shape); outline: none; -webkit-tap-highlight-color: transparent; @@ -97,15 +96,6 @@ transition-duration: 105ms; } - .unbounded { - $unbounded: ( - shape: map.get(tokens.md-sys-shape-values(), 'corner-full'), - ); - $unbounded: theme.create-theme-vars($unbounded, ripple); - - --_shape: #{map.get($unbounded, 'shape')}; - } - @media screen and (forced-colors: active) { :host { display: none; diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss index f4c7c5448c..03d3ba5f95 100644 --- a/switch/lib/_handle.scss +++ b/switch/lib/_handle.scss @@ -135,12 +135,10 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard'); transform: translate(-50%, -50%); height: var(--_state-layer-size); width: var(--_state-layer-size); + } - @include ripple.theme( - ( - 'shape': var(--_state-layer-shape), - ) - ); + md-ripple { + border-radius: var(--_state-layer-shape); } .switch--selected .ripple { diff --git a/tokens/_index.scss b/tokens/_index.scss index 2758d5a282..277033737d 100644 --- a/tokens/_index.scss +++ b/tokens/_index.scss @@ -61,6 +61,7 @@ @forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*; @forward './md-comp-radio-button' as md-comp-radio-button-*; @forward './md-comp-rich-tooltip' as md-comp-rich-tooltip-*; +@forward './md-comp-ripple' as md-comp-ripple-*; @forward './md-comp-scrim' as md-comp-scrim-*; @forward './md-comp-search-bar' as md-comp-search-bar-*; @forward './md-comp-search-view' as md-comp-search-view-*; diff --git a/ripple/lib/_md-comp-ripple.scss b/tokens/_md-comp-ripple.scss similarity index 56% rename from ripple/lib/_md-comp-ripple.scss rename to tokens/_md-comp-ripple.scss index a9c25a9e44..542af4dfd1 100644 --- a/ripple/lib/_md-comp-ripple.scss +++ b/tokens/_md-comp-ripple.scss @@ -7,17 +7,30 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start -@use '../../tokens'; +@use './md-sys-color'; +@use './md-sys-shape'; +@use './md-sys-state'; +@use './values'; // go/keep-sorted end -$_default-deps: ( - 'md-sys-color': tokens.md-sys-color-values-light(), - 'md-sys-shape': tokens.md-sys-shape-values(), - 'md-sys-state': tokens.md-sys-state-values(), +$supported-tokens: ( + // go/keep-sorted start + 'focus-color', + 'focus-opacity', + 'hover-color', + 'hover-opacity', + 'pressed-color', + 'pressed-opacity', + // go/keep-sorted end ); -@function values($deps: $_default-deps) { - @return ( +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default) { + $tokens: ( 'focus-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-color': map.get($deps, 'md-sys-color', 'on-surface'), @@ -25,6 +38,7 @@ $_default-deps: ( 'pressed-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), - 'shape': map.get($deps, 'md-sys-shape', 'corner-none') ); + + @return values.validate($tokens, $supported-tokens: $supported-tokens); }