fix(ripple)!: remove shape token and will-change

BREAKING CHANGE: Use `border-radius` instead of `--md-ripple-shape` PiperOrigin-RevId: 535034875
material-components · May 25, 2023 · a6c988b · a6c988b
1 parent ead86ae
commit a6c988b
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,18 +42,14 @@
 
   :host,
   .surface {
+    border-radius: inherit;
     position: absolute;
     inset: 0;
     pointer-events: none;
     overflow: hidden;
   }
 
   .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
@@ -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
@@ -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 → tokens/_md-comp-ripple.scss b/ripple/lib/_md-comp-ripple.scss → tokens/_md-comp-ripple.scss
@@ -7,24 +7,38 @@
 @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'),
     'hover-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
     '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);
 }