feat(slide-toggle): use ripple service (#3068)

* Removes the temporary ripple mixin and uses the new ripple service.
* Updates the ripple colors to match the specification images (no explicit opacity values are specified)
* Triggers ripple on label mousedown (similar as in the Android Nougat implementation)

Closes #2900.

Author: devversion

src/lib/slide-toggle/_slide-toggle-theme.scss

@@ -1,7 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 
-
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
   // Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
   // the disabled styles.
@@ -16,21 +15,14 @@
   }
 }
 
-// TODO(jelbourn): remove this when the real ripple has been applied to slide-toggle.
-@mixin _mat-slide-toggle-ripple($palette, $foreground, $thumb-checked-hue) {
-
-  &.mat-slide-toggle-focused {
-    &:not(.mat-checked) .mat-ink-ripple {
-      // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity
-      // of black in light themes and 12% of white in dark themes.
-      background-color: mat-color($foreground, divider);
-    }
-
-    .mat-ink-ripple {
-      background-color: mat-color($palette, $thumb-checked-hue, 0.26);
-    }
+// Applies the specified colors to the slide-toggle ripple elements.
+@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {
+  &:not(.mat-checked) .mat-ripple-element {
+    background-color: $ripple-unchecked-color;
+  }
+  .mat-ripple-element {
+    background-color: $ripple-checked-color;
   }
-
 }
 
 @mixin mat-slide-toggle-theme($theme) {
@@ -50,19 +42,26 @@
   $bar-normal-color: mat-color($foreground, disabled);
   $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));
 
+  // Ripple colors are based on the current palette and the state of the slide-toggle.
+  // See https://material.google.com/components/selection-controls.html#selection-controls-switch
+  $ripple-checked-opacity: 0.12;
+  $ripple-unchecked-color: mat-color($foreground, base, if($is-dark, 0.12, 0.06));
+  $ripple-primary-color: mat-color($primary, $thumb-checked-hue, $ripple-checked-opacity);
+  $ripple-accent-color: mat-color($accent, $thumb-checked-hue, $ripple-checked-opacity);
+  $ripple-warn-color: mat-color($warn, $thumb-checked-hue, $ripple-checked-opacity);
+
   .mat-slide-toggle {
     @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
-    @include _mat-slide-toggle-ripple($accent, $foreground, $thumb-checked-hue);
-    
+    @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);
 
     &.mat-primary {
       @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
-      @include _mat-slide-toggle-ripple($primary, $foreground, $thumb-checked-hue);
+      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
     }
 
     &.mat-warn {
       @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
-      @include _mat-slide-toggle-ripple($warn, $foreground, $thumb-checked-hue);
+      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
     }
 
   }

src/lib/slide-toggle/slide-toggle.html

@@ -1,4 +1,4 @@
-<label class="mat-slide-toggle-label">
+<label class="mat-slide-toggle-label" #label>
 
   <div class="mat-slide-toggle-container">
     <div class="mat-slide-toggle-bar"></div>
@@ -9,7 +9,12 @@
          (slideend)="_onDragEnd()">
 
       <div class="mat-slide-toggle-thumb">
-        <div class="mat-ink-ripple"></div>
+        <div class="mat-slide-toggle-ripple" md-ripple
+             [mdRippleTrigger]="label"
+             [mdRippleCentered]="true"
+             [mdRippleDisabled]="disabled"
+             [mdRippleSpeedFactor]="0.3">
+        </div>
       </div>
     </div>
 

src/lib/slide-toggle/slide-toggle.scss

@@ -10,14 +10,9 @@ $mat-slide-toggle-bar-height: 14px !default;
 $mat-slide-toggle-thumb-size: 20px !default;
 $mat-slide-toggle-margin: 16px !default;
 $mat-slide-toggle-spacing: 8px !default;
+$mat-slide-toggle-ripple-radius: 23px !default;
 
 
-@mixin mat-switch-ripple() {
-  // Temporary ripple effect for the thumb of the slide-toggle.
-  // Bind to the parent selector and specify the current palette.
-  @include mat-temporary-ink-ripple(slide-toggle, true);
-}
-
 .mat-slide-toggle {
   display: flex;
   height: $mat-slide-toggle-height;
@@ -39,8 +34,6 @@ $mat-slide-toggle-spacing: 8px !default;
     }
   }
 
-  @include mat-switch-ripple();
-
   &.mat-disabled {
 
     .mat-slide-toggle-label, .mat-slide-toggle-container {
@@ -169,3 +162,15 @@ $mat-slide-toggle-spacing: 8px !default;
   transition-property: background-color;
   transition-delay: 50ms;
 }
+
+// Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
+.mat-slide-toggle-ripple {
+  position: absolute;
+  top: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
+  left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
+  height: $mat-slide-toggle-ripple-radius * 2;
+  width: $mat-slide-toggle-ripple-radius * 2;
+  border-radius: 50%;
+  z-index: 1;
+  pointer-events: none;
+}

src/lib/slide-toggle/slide-toggle.ts

@@ -23,6 +23,7 @@ import {
   CompatibilityModule,
 } from '../core';
 import {Observable} from 'rxjs/Observable';
+import {MdRippleModule} from '../core/ripple/ripple';
 
 
 export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
@@ -339,7 +340,7 @@ class SlideToggleRenderer {
 
 
 @NgModule({
-  imports: [FormsModule, CompatibilityModule],
+  imports: [FormsModule, MdRippleModule, CompatibilityModule],
   exports: [MdSlideToggle, CompatibilityModule],
   declarations: [MdSlideToggle],
   providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}],