feat(ripple): Remove old mixin and obsolete JS logic

packages/mdc-ripple/README.md

@@ -102,10 +102,6 @@ Mixin | Description
 `mdc-states-focus-opacity($opacity, $has-nested-focusable-element)` | Adds styles for focus state using the provided opacity. `$has-nested-focusable-element` defaults to `false` but should be set to `true` if the component contains a focusable element (e.g. an input) under the root node.
 `mdc-states-press-opacity($opacity)` | Adds styles for press state using the provided opacity
 
-#### Legacy Sass API
-
-The `mdc-ripple-color($color, $opacity)` mixin is deprecated. Use the basic or advanced states mixins (documented above) instead, which provide finer control over a component's opacity for different states of user interaction.
-
 ### Adding Ripple JS
 
 First import the ripple JS.

packages/mdc-ripple/_mixins.scss

@@ -201,46 +201,6 @@
   }
 }
 
-//
-// Legacy
-//
-
-@mixin mdc-ripple-color($color: black, $opacity: .06) {
-  // Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
-  // cases where this mixin is used to override another inherited use of itself,
-  // without needing to re-include mdc-ripple-surface.
-  &::before,
-  &::after {
-    @include mdc-ripple-color_($color, $opacity);
-
-    opacity: 0;
-  }
-
-  // Note: when :active is applied, :focus is already applied, which will effectively double the effect.
-  &:not(.mdc-ripple-upgraded) {
-    &:hover::before,
-    &:focus::before,
-    &:active::after {
-      transition-duration: 85ms;
-      opacity: .6;
-    }
-  }
-
-  &.mdc-ripple-upgraded--background-focused::before {
-    opacity: .99999;
-  }
-
-  &.mdc-ripple-upgraded--background-active-fill::before {
-    transition-duration: 120ms;
-    opacity: 1;
-  }
-
-  &.mdc-ripple-upgraded::after {
-    // Set this to 1 for backwards compatibility with how the keyframes were originally coded for use with this mixin
-    --mdc-ripple-fg-opacity: 1;
-  }
-}
-
 //
 // Private
 //
@@ -264,25 +224,3 @@
   @include mdc-states-focus-opacity(map-get($opacity-map, "focus") + $opacity-modifier, $has-nested-focusable-element);
   @include mdc-states-press-opacity(map-get($opacity-map, "press") + $opacity-modifier);
 }
-
-// Note: This can be removed when we remove the legacy mdc-ripple-color mixin.
-@mixin mdc-ripple-color_($color, $opacity) {
-  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
-  @if type-of($color) == "color" {
-    background-color: rgba($color, $opacity);
-  } @else {
-    // Assume $color is a theme property name
-    $theme-value: map-get($mdc-theme-property-values, $color);
-    $css-var: var(--mdc-theme-#{$color}, $theme-value);
-
-    background-color: rgba($theme-value, $opacity);
-
-    // See: https://drafts.csswg.org/css-color/#modifying-colors
-    // While this is currently unsupported as of now, it will begin to work by default as browsers
-    // begin to implement the CSS 4 color spec.
-    @supports (background-color: color(green a(10%))) {
-      background-color: color(#{$css-var} a(#{percentage($opacity)}));
-    }
-  }
-  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
-}

packages/mdc-ripple/constants.js

@@ -22,15 +22,14 @@ const cssClasses = {
   ROOT: 'mdc-ripple-upgraded',
   UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
   BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
-  BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill',
   FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
   FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
 };
 
 const strings = {
-  VAR_FG_SIZE: '--mdc-ripple-fg-size',
   VAR_LEFT: '--mdc-ripple-left',
   VAR_TOP: '--mdc-ripple-top',
+  VAR_FG_SIZE: '--mdc-ripple-fg-size',
   VAR_FG_SCALE: '--mdc-ripple-fg-scale',
   VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
   VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',

packages/mdc-ripple/foundation.js

@@ -69,7 +69,6 @@ const DEACTIVATION_ACTIVATION_PAIRS = {
   pointerup: 'pointerdown',
   touchend: 'touchstart',
   keyup: 'keydown',
-  blur: 'focus',
 };
 
 /**
@@ -277,11 +276,7 @@ class MDCRippleFoundation extends MDCFoundation {
   /** @private */
   animateActivation_() {
     const {VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END} = MDCRippleFoundation.strings;
-    const {
-      BG_ACTIVE_FILL,
-      FG_DEACTIVATION,
-      FG_ACTIVATION,
-    } = MDCRippleFoundation.cssClasses;
+    const {FG_DEACTIVATION, FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
     const {DEACTIVATION_TIMEOUT_MS} = MDCRippleFoundation.numbers;
 
     let translateStart = '';
@@ -303,7 +298,6 @@ class MDCRippleFoundation extends MDCFoundation {
 
     // Force layout in order to re-trigger the animation.
     this.adapter_.computeBoundingRect();
-    this.adapter_.addClass(BG_ACTIVE_FILL);
     this.adapter_.addClass(FG_ACTIVATION);
     this.activationTimer_ = setTimeout(() => this.activationTimerCallback_(), DEACTIVATION_TIMEOUT_MS);
   }
@@ -344,9 +338,12 @@ class MDCRippleFoundation extends MDCFoundation {
 
   /** @private */
   runDeactivationUXLogicIfReady_() {
+    // This method is called both when a pointing device is released, and when the activation animation ends.
+    // The deactivation animation should only run after both of those occur.
     const {FG_DEACTIVATION} = MDCRippleFoundation.cssClasses;
     const {hasDeactivationUXRun, isActivated} = this.activationState_;
     const activationHasEnded = hasDeactivationUXRun || !isActivated;
+
     if (activationHasEnded && this.activationAnimationHasEnded_) {
       this.rmBoundedActivationClasses_();
       this.adapter_.addClass(FG_DEACTIVATION);
@@ -358,8 +355,7 @@ class MDCRippleFoundation extends MDCFoundation {
 
   /** @private */
   rmBoundedActivationClasses_() {
-    const {BG_ACTIVE_FILL, FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
-    this.adapter_.removeClass(BG_ACTIVE_FILL);
+    const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
     this.adapter_.removeClass(FG_ACTIVATION);
     this.activationAnimationHasEnded_ = false;
     this.adapter_.computeBoundingRect();
@@ -422,10 +418,7 @@ class MDCRippleFoundation extends MDCFoundation {
    * @private
    */
   animateDeactivation_(e, {wasActivatedByPointer, wasElementMadeActive}) {
-    const {BG_FOCUSED} = MDCRippleFoundation.cssClasses;
     if (wasActivatedByPointer || wasElementMadeActive) {
-      // Remove class left over by element being focused
-      this.adapter_.removeClass(BG_FOCUSED);
       this.runDeactivationUXLogicIfReady_();
     }
   }

test/unit/mdc-ripple/foundation-activation.test.js

@@ -31,7 +31,6 @@ testFoundation('does nothing if component if isSurfaceDisabled is true',
 
     handlers.mousedown();
 
-    td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL), {times: 0});
     td.verify(adapter.addClass(cssClasses.FG_ACTIVATION), {times: 0});
   });
 
@@ -42,7 +41,6 @@ testFoundation('adds activation classes on mousedown', ({foundation, adapter, mo
 
   handlers.mousedown();
   mockRaf.flush();
-  td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL));
   td.verify(adapter.addClass(cssClasses.FG_ACTIVATION));
 });
 
@@ -90,7 +88,6 @@ testFoundation('adds activation classes on touchstart', ({foundation, adapter, m
 
   handlers.touchstart({changedTouches: [{pageX: 0, pageY: 0}]});
   mockRaf.flush();
-  td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL));
   td.verify(adapter.addClass(cssClasses.FG_ACTIVATION));
 });
 
@@ -138,7 +135,6 @@ testFoundation('adds activation classes on pointerdown', ({foundation, adapter,
 
   handlers.pointerdown();
   mockRaf.flush();
-  td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL));
   td.verify(adapter.addClass(cssClasses.FG_ACTIVATION));
 });
 
@@ -189,7 +185,6 @@ testFoundation('adds activation classes on keydown when surface is made active',
     handlers.keydown();
     mockRaf.flush();
 
-    td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL));
     td.verify(adapter.addClass(cssClasses.FG_ACTIVATION));
   });
 
@@ -229,7 +224,6 @@ testFoundation('adds activation classes on programmatic activation', ({foundatio
   foundation.activate();
   mockRaf.flush();
 
-  td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL));
   td.verify(adapter.addClass(cssClasses.FG_ACTIVATION));
 });
 
@@ -271,7 +265,6 @@ testFoundation('does not redundantly add classes on touchstart followed by mouse
     mockRaf.flush();
     handlers.mousedown();
     mockRaf.flush();
-    td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL), {times: 1});
     td.verify(adapter.addClass(cssClasses.FG_ACTIVATION), {times: 1});
   });
 
@@ -285,7 +278,6 @@ testFoundation('does not redundantly add classes on touchstart followed by point
     mockRaf.flush();
     handlers.pointerdown();
     mockRaf.flush();
-    td.verify(adapter.addClass(cssClasses.BG_ACTIVE_FILL), {times: 1});
     td.verify(adapter.addClass(cssClasses.FG_ACTIVATION), {times: 1});
   });