feat(ripple): no longer require additional setup when using MatRipple directive (#11913)

Author: devversion

src/lib/button-toggle/button-toggle.scss

@@ -93,7 +93,9 @@ $mat-button-toggle-border-radius: 2px !default;
   }
 }
 
-.mat-button-toggle-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-button-toggle .mat-button-toggle-ripple {
   @include mat-fill;
 
   // Disable pointer events for the ripple container, because the container will overlay the user

src/lib/button/button.scss

@@ -75,8 +75,11 @@
   }
 }
 
-// The ripple container should match the bounds of the entire button.
-.mat-button-ripple, .mat-button-focus-overlay {
+// The ripple container and focus overlay should match the bounds of the entire button.
+// Increase specificity for the ripple container because ripple styles are part of
+// the `mat-core` mixin and can potentially overwrite the absolute position of the container.
+.mat-button-ripple.mat-ripple,
+.mat-button-focus-overlay {
   @include mat-fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container

src/lib/checkbox/checkbox.scss

@@ -431,7 +431,9 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   left: 50%;
 }
 
-.mat-checkbox-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-checkbox .mat-checkbox-ripple {
   position: absolute;
   left: calc(50% - #{$_mat-checkbox-ripple-radius});
   top: calc(50% - #{$_mat-checkbox-ripple-radius});

src/lib/core/option/option.scss

@@ -58,7 +58,9 @@
   text-overflow: ellipsis;
 }
 
-.mat-option-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-option .mat-option-ripple {
   @include mat-fill;
 
   // Disable pointer events for the ripple container because the container will overlay the

src/lib/core/ripple/_ripple.scss

@@ -4,10 +4,15 @@
 $mat-ripple-color-opacity: 0.1;
 
 @mixin mat-ripple() {
+
   // The host element of an mat-ripple directive should always have a position of "absolute" or
-  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  // "relative" so that the ripples inside are correctly positioned relatively to the container.
   .mat-ripple {
     overflow: hidden;
+
+    // By default, every ripple container should have position: relative in favor of creating an
+    // easy API for developers using the MatRipple directive.
+    position: relative;
   }
 
   .mat-ripple.mat-ripple-unbounded {

src/lib/menu/menu.scss

@@ -83,7 +83,9 @@ button.mat-menu-item {
   width: 100%;
 }
 
-.mat-menu-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-menu-item .mat-menu-ripple {
   @include mat-fill;
 
   // Prevent any pointer events on the ripple container for a menu item. The ripple container is

src/lib/radio/radio.scss

@@ -115,7 +115,9 @@ $mat-radio-ripple-radius: 25px;
   cursor: default;
 }
 
-.mat-radio-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-radio-button .mat-radio-ripple {
   position: absolute;
   left: calc(50% - #{$mat-radio-ripple-radius});
   top: calc(50% - #{$mat-radio-ripple-radius});

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

@@ -179,7 +179,9 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 }
 
 // Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
-.mat-slide-toggle-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-slide-toggle .mat-slide-toggle-ripple {
   position: absolute;
   top: calc(50% - #{$mat-slide-toggle-ripple-radius});
   left: calc(50% - #{$mat-slide-toggle-ripple-radius});

src/lib/stepper/step-header.scss

@@ -52,7 +52,9 @@ $mat-step-header-icon-size: 16px !default;
   overflow: hidden;
 }
 
-.mat-step-header-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-step-header .mat-step-header-ripple {
   @include mat-fill;
   pointer-events: none;
 }

src/material-examples/ripple-overview/ripple-overview-example.css

@@ -1,7 +1,4 @@
 .example-ripple-container {
-  /** Necessary until: https://github.com/angular/material2/pull/11913*/
-  position: relative;
-
   cursor: pointer;
   text-align: center;