feat(ripple): Implement subset of improved interaction response guidelines for ripple

Background
===

When the ripple was originally designed from a motion perspective,
bounded and unbounded activation/deactivation used two different
animation styles, distinct from one another.

The UX updates to the ripple remove this distinction of bounded vs.
unbounded solely with regard to how the ripple animates in and out.
There is still a distinction between bounded vs. unbounded, but we no
longer have to account for this when animating the ripple. Thus, there
are no API changes; only UX changes.

Changes
===

- Implement UX changes for "tap" + "tap and hold" interactions
- Remove all references of "bounded" vs. "unbounded" from
  activation/deactivation code

Resolves #190

Author: traviskaufman

packages/mdc-ripple/_keyframes.scss

@@ -20,46 +20,37 @@
 
 @keyframes mdc-ripple-fg-radius-in {
   from {
-    transform: translate(0) scale(1);
+    // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
+    // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
+    // that custom properties are supported within the browser before adding this class, we can
+    // safely use them without a fallback.
     transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
     animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
   }
 
   to {
-    transform: translate(0) scale(0);
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 0));
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
   }
 }
 
-@keyframes mdc-ripple-fg-opacity-out {
+@keyframes mdc-ripple-fg-opacity-in {
   from {
-    opacity: 1;
+    opacity: 0;
     animation-timing-function: linear;
   }
 
   to {
-    opacity: 0;
+    opacity: 1;
   }
 }
 
-@keyframes mdc-ripple-fg-unbounded-opacity-deactivate {
+@keyframes mdc-ripple-fg-opacity-out {
   from {
     opacity: 1;
+    animation-timing-function: linear;
   }
 
   to {
     opacity: 0;
   }
 }
-
-@keyframes mdc-ripple-fg-unbounded-transform-deactivate {
-  from {
-    transform: 0;
-    transform: var(--mdc-ripple-fg-approx-xf, 0);
-  }
-
-  to {
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-  }
-}

packages/mdc-ripple/_mixins.scss

@@ -28,17 +28,14 @@
 }
 
 @mixin mdc-ripple-base() {
+  --mdc-ripple-surface-width: 0;
+  --mdc-ripple-surface-height: 0;
+  --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
   --mdc-ripple-top: 0;
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-surface-height: 0;
-  --mdc-ripple-surface-width: 0;
-  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
-  --mdc-ripple-xfo-x: center;
-  --mdc-ripple-xfo-y: center;
-  --mdc-ripple-fg-unbounded-opacity-duration: 0ms;
-  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
-  --mdc-ripple-fg-approx-xf: 0;
+  --mdc-ripple-fg-scale: 1;
+  --mdc-ripple-fg-translate-end: 0;
+  --mdc-ripple-fg-translate-start: 0;
 
   will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -121,18 +118,11 @@
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
-  &.mdc-ripple-upgraded--background-active#{$pseudo} {
+  &.mdc-ripple-upgraded--background-focused#{$pseudo} {
     opacity: .99999;
   }
 
-  // When an element goes active, a foreground ripple will be triggered.
-  // Therefore, we adjust the transition duration for the correct "wind-
-  // up" animation.
-  &.mdc-ripple-upgraded--background-active:active#{$pseudo} {
-    transition-duration: 600ms;
-  }
-
-  &.mdc-ripple-upgraded--background-bounded-active-fill#{$pseudo} {
+  &.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
     transition-duration: 120ms;
     opacity: 1;
   }
@@ -215,29 +205,13 @@
     transform-origin: center center;
   }
 
-  &.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
-    animation-fill-mode: forwards;
-    animation: 300ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
-  }
-
-  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-    transition:
-      opacity 110ms linear,
-      transform 0 linear 80ms;
-    transition:
-      opacity 110ms linear,
-      transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
-    opacity: 1;
+  &.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
+    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
   }
 
-  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
-    animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate 0 linear,
-      mdc-ripple-fg-unbounded-transform-deactivate 0 $mdc-animation-fast-out-slow-in-timing-function;
-    animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
-      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
+  &.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
+    // Retain transform from mdc-ripple-fg-radius-in activation
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+    animation: 250ms mdc-ripple-fg-opacity-out;
   }
 }

packages/mdc-ripple/constants.js

@@ -14,43 +14,31 @@
  * limitations under the License.
  */
 
-export const ROOT = 'mdc-ripple';
-export const UPGRADED = `${ROOT}-upgraded`;
-
 export const cssClasses = {
   // Ripple is a special case where the "root" component is really a "mixin" of sorts,
   // given that it's an 'upgrade' to an existing component. That being said it is the root
   // CSS class that all other CSS classes derive from.
-  ROOT: UPGRADED,
-  UNBOUNDED: `${UPGRADED}--unbounded`,
-  BG_ACTIVE: `${UPGRADED}--background-active`,
-  BG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--background-bounded-active-fill`,
-  FG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--foreground-bounded-active-fill`,
-  FG_UNBOUNDED_ACTIVATION: `${UPGRADED}--foreground-unbounded-activation`,
-  FG_UNBOUNDED_DEACTIVATION: `${UPGRADED}--foreground-unbounded-deactivation`,
+  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',
 };
 
 export const strings = {
-  VAR_SURFACE_WIDTH: `--${ROOT}-surface-width`,
-  VAR_SURFACE_HEIGHT: `--${ROOT}-surface-height`,
-  VAR_FG_SIZE: `--${ROOT}-fg-size`,
-  VAR_FG_UNBOUNDED_OPACITY_DURATION: `--${ROOT}-fg-unbounded-opacity-duration`,
-  VAR_FG_UNBOUNDED_TRANSFORM_DURATION: `--${ROOT}-fg-unbounded-transform-duration`,
-  VAR_LEFT: `--${ROOT}-left`,
-  VAR_TOP: `--${ROOT}-top`,
-  VAR_TRANSLATE_END: `--${ROOT}-translate-end`,
-  VAR_FG_APPROX_XF: `--${ROOT}-fg-approx-xf`,
-  VAR_FG_SCALE: `--${ROOT}-fg-scale`,
-  VAR_FG_TRANSLATE_START: `--${ROOT}-fg-translate-start`,
-  VAR_FG_TRANSLATE_END: `--${ROOT}-fg-translate-end`,
+  VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
+  VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
+  VAR_FG_SIZE: '--mdc-ripple-fg-size',
+  VAR_LEFT: '--mdc-ripple-left',
+  VAR_TOP: '--mdc-ripple-top',
+  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',
 };
 
 export const numbers = {
-  FG_TRANSFORM_DELAY_MS: 80,
-  OPACITY_DURATION_DIVISOR: 3,
-  ACTIVE_OPACITY_DURATION_MS: 110,
-  MIN_OPACITY_DURATION_MS: 200,
-  UNBOUNDED_TRANSFORM_DURATION_MS: 200,
   PADDING: 10,
   INITIAL_ORIGIN_SCALE: 0.6,
+  DEACTIVATION_TIMEOUT_MS: 300,
 };