feat(ripple): Split radius mixin into bounded/unbounded versions (#2112)

BREAKING CHANGE: mdc-ripple-radius is replaced by mdc-ripple-radius-bounded and mdc-ripple-radius-unbounded; use one or the other as appropriate for the surface. The default 100% value of the unbounded mixin now results in a smaller, more appropriate radius.

Author: kfranqueiro

packages/mdc-button/_mixins.scss

@@ -87,7 +87,7 @@
 @mixin mdc-button-base_() {
   @include mdc-typography(button);
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
 
   display: inline-block;
   position: relative;

packages/mdc-checkbox/_variables.scss

@@ -29,7 +29,6 @@ $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;
 $mdc-checkbox-item-spacing: 4px;
 $mdc-checkbox-ripple-opacity: .14;
-$mdc-checkbox-ripple-radius: 50%;
 $mdc-checkbox-focus-indicator-opacity: .26;
 
 // Manual calculation done on SVG

packages/mdc-checkbox/mdc-checkbox.scss

@@ -26,7 +26,7 @@
   @include mdc-checkbox-base_;
   @include mdc-ripple-surface;
   @include mdc-states($mdc-checkbox-baseline-theme-color);
-  @include mdc-ripple-radius($mdc-checkbox-ripple-radius);
+  @include mdc-ripple-radius-unbounded;
 
   @include mdc-theme-dark {
     @include mdc-checkbox-container-colors($unmarked-stroke-color: $mdc-checkbox-border-color-dark);

packages/mdc-fab/_mixins.scss

@@ -47,7 +47,7 @@ $mdc-fab-icon-enter-duration_: 180ms;
 
 @mixin mdc-fab-base_ {
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
   @include mdc-elevation(6);
 
   display: inline-flex;

packages/mdc-icon-toggle/mdc-icon-toggle.scss

@@ -24,7 +24,7 @@
 
 .mdc-icon-toggle {
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-unbounded;
   @include mdc-states(black);
   @include mdc-icon-toggle-ink-color(text-primary-on-light);
 

packages/mdc-list/mdc-list.scss

@@ -143,7 +143,7 @@
 // Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
 :not(.mdc-list--non-interactive) > .mdc-list-item {
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
   @include mdc-states;
   @include mdc-states-activated(primary);
   @include mdc-states-selected(primary);

packages/mdc-radio/_variables.scss

@@ -19,5 +19,4 @@ $mdc-radio-ui-size: 20px;
 $mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
 $mdc-radio-transition-duration: 120ms;
 $mdc-radio-ripple-opacity: .14;
-$mdc-radio-ripple-radius: 50%;
 $mdc-radio-baseline-theme-color: secondary;

packages/mdc-radio/mdc-radio.scss

@@ -34,7 +34,7 @@
   @include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
   @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius($mdc-radio-ripple-radius);
+  @include mdc-ripple-radius-unbounded;
   @include mdc-states($mdc-radio-baseline-theme-color);
 
   display: inline-block;

packages/mdc-ripple/README.md

@@ -46,13 +46,17 @@ CSS Class | Description
 
 ### Sass Mixins
 
-In order to fully style the ripple effect for different states (hover/focus/pressed), both `mdc-ripple` mixins, as well as either the basic or advanced `mdc-states` mixins must be included.
+In order to fully style the ripple effect for different states (hover/focus/pressed), the following mixins must be included:
+
+* `mdc-ripple-surface`, for base styles
+* Either `mdc-ripple-radius-bounded` or `mdc-ripple-radius-unbounded`, to appropriately size the ripple on the surface
+* Either the basic or advanced `mdc-states` mixins, as explained below
 
 ##### Using basic states mixins
 ```css
 .my-surface {
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
   @include mdc-states;
 }
 ```
@@ -61,7 +65,7 @@ In order to fully style the ripple effect for different states (hover/focus/pres
 ```css
 .my-surface {
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
   @include mdc-states-base-color(black);
   @include mdc-states-hover-opacity(.1);
   @include mdc-states-focus-opacity(.3);
@@ -76,7 +80,10 @@ These APIs use pseudo-elements for the ripple effect: `::before` for the backgro
 Mixin | Description
 --- | ---
 `mdc-ripple-surface` | Mandatory. Adds base styles for a ripple surface
-`mdc-ripple-radius($radius)` | Mandatory. Adds styles for the radius of the ripple effect,<br>for both bounded and unbounded ripples
+`mdc-ripple-radius-bounded($radius)` | Adds styles for the radius of the ripple effect,<br>for bounded ripple surfaces
+`mdc-ripple-radius-unbounded($radius)` | Adds styles for the radius of the ripple effect,<br>for unbounded ripple surfaces
+
+> _NOTE_: It is mandatory to include _either_ `mdc-ripple-radius-bounded` or `mdc-ripple-radius-unbounded`. In both cases, `$radius` is optional and defaults to `100%`.
 
 #### Basic States Mixins
 
@@ -156,7 +163,7 @@ Method Signature | Description
 | `computeBoundingRect() => ClientRect` | Returns the ClientRect for the surface |
 | `getWindowPageOffset() => {x: number, y: number}` | Returns the `page{X,Y}Offset` values for the window object |
 
-> _NOTE_: When implementing `browserSupportsCssVars`, please take the [Edge](#caveat-edge) and [Safari 9](#caveat-safari) considerations into account. We provide a `supportsCssVariables` function within the `util.js` which we recommend using, as it handles this for you. 
+> _NOTE_: When implementing `browserSupportsCssVars`, please take the [Edge](#caveat-edge) and [Safari 9](#caveat-safari) considerations into account. We provide a `supportsCssVariables` function within the `util.js` which we recommend using, as it handles this for you.
 
 ### `MDCRippleFoundation`
 
@@ -223,7 +230,7 @@ class MyMDCComponent extends MDCComponent {
 
 ### Handling keyboard events for custom UI components
 
-Different keyboard events activate different elements. For example, the space key activates buttons, while the enter key activates links. 
+Different keyboard events activate different elements. For example, the space key activates buttons, while the enter key activates links.
 
 `MDCRipple` uses the `adapter.isSurfaceActive()` method to detect whether or not a keyboard event has activated the surface the ripple is on. Our vanilla implementation of the adapter does this by checking whether the `:active` pseudo-class has been applied to the ripple surface. However, this approach will _not_ work for custom components that the browser does not apply this pseudo-class to.
 

packages/mdc-ripple/_mixins.scss

@@ -45,6 +45,10 @@
 
   // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)
 
+  &.mdc-ripple-upgraded::before {
+    transform: scale(var(--mdc-ripple-fg-scale, 1));
+  }
+
   &.mdc-ripple-upgraded::after {
     top: 0;
     left: 0;
@@ -166,7 +170,7 @@
   }
 }
 
-@mixin mdc-ripple-radius($radius: 100%) {
+@mixin mdc-ripple-radius-bounded($radius: 100%) {
   &::before,
   &::after {
     top: calc(50% - #{$radius});
@@ -175,34 +179,29 @@
     height: $radius * 2;
   }
 
-  &[data-mdc-ripple-is-unbounded]:not(.mdc-ripple-upgraded--unbounded)::before,
-  &[data-mdc-ripple-is-unbounded]:not(.mdc-ripple-upgraded--unbounded)::after {
+  &.mdc-ripple-upgraded::after {
+    width: var(--mdc-ripple-fg-size, $radius);
+    height: var(--mdc-ripple-fg-size, $radius);
+  }
+}
+
+@mixin mdc-ripple-radius-unbounded($radius: 100%) {
+  &::before,
+  &::after {
     top: calc(50% - #{$radius / 2});
     left: calc(50% - #{$radius / 2});
     width: $radius;
     height: $radius;
   }
 
-  // Background ripple styles
-
-  &.mdc-ripple-upgraded::before {
-    top: calc(50% - #{$radius});
-    left: calc(50% - #{$radius});
-    width: $radius * 2;
-    height: $radius * 2;
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-  }
-
-  &.mdc-ripple-upgraded--unbounded::before {
+  &.mdc-ripple-upgraded::before,
+  &.mdc-ripple-upgraded::after {
     top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
     left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
     width: var(--mdc-ripple-fg-size, $radius);
     height: var(--mdc-ripple-fg-size, $radius);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
-  // Foreground ripple styles
-
   &.mdc-ripple-upgraded::after {
     width: var(--mdc-ripple-fg-size, $radius);
     height: var(--mdc-ripple-fg-size, $radius);

packages/mdc-ripple/mdc-ripple.scss

@@ -25,13 +25,15 @@
 .mdc-ripple-surface {
   @include mdc-ripple-surface;
   @include mdc-states;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
 
   position: relative;
   outline: none;
   overflow: hidden;
 
   &[data-mdc-ripple-is-unbounded] {
+    @include mdc-ripple-radius-unbounded;
+
     overflow: visible;
   }
 

packages/mdc-select/mdc-select.scss

@@ -70,7 +70,7 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
     @include mdc-typography(subheading2);
     @include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding, ".mdc-select");
     @include mdc-ripple-surface;
-    @include mdc-ripple-radius;
+    @include mdc-ripple-radius-bounded;
     @include mdc-states;
 
     &::-ms-expand {

packages/mdc-tabs/tab/mdc-tab.scss

@@ -127,7 +127,7 @@ $mdc-tab-with-icon-and-text-height: 72px;
 .mdc-tab.mdc-ripple-upgraded {
   @include mdc-ripple-surface;
   @include mdc-states;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
 
   // stylelint-disable plugin/selector-bem-pattern
   &:focus {

packages/mdc-textfield/_mixins.scss

@@ -266,7 +266,7 @@
 @mixin mdc-text-field-box_ {
   @include mdc-ripple-surface;
   @include mdc-states(text-primary-on-light, $has-nested-focusable-element: true);
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
   @include mdc-text-field-label-float_($mdc-text-field-box-label-position-y);

packages/mdc-textfield/outline/mdc-text-field-outline.scss

@@ -36,7 +36,7 @@
 
 .mdc-text-field__outline {
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
   @include mdc-states-base-color(text-primary-on-light);
   @include mdc-states-press-opacity(map-get($mdc-ripple-dark-ink-opacities, "press"));
   @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);