fix(material-experimental/mdc-button): rename state class (#17575)

Author: andrewseguin

src/material-experimental/mdc-button/_button-base.scss

@@ -6,7 +6,7 @@
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
 @mixin _mat-button-interactive() {
-  .mat-mdc-button-state::before, .mat-mdc-button-state::after {
+  .mdc-button__ripple::before, .mdc-button__ripple::after {
     content: '';
     pointer-events: none;
     position: absolute;
@@ -20,7 +20,7 @@
   }
 
   // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple, .mat-mdc-button-state {
+  .mat-mdc-button-ripple, .mdc-button__ripple {
     @include mat-fill;
 
     // Disable pointer events for the ripple container and state overlay because the container

src/material-experimental/mdc-button/_mdc-button.scss

@@ -9,7 +9,7 @@
 // Selector for the element that has a background color and opacity applied to its ::before and
 // ::after for state interactions (hover, active, focus). Their API calls this their
 // "ripple target", but we do not use it as our ripple, just state color.
-$mat-button-state-target: '.mat-mdc-button-state';
+$mat-button-state-target: '.mdc-button__ripple';
 
 // Applies the disabled theme color to the text color.
 @mixin _mat-button-disabled-color() {

src/material-experimental/mdc-button/button.html

@@ -1,4 +1,4 @@
-<span class="mat-mdc-button-state"></span>
+<span class="mdc-button__ripple"></span>
 
 <ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
 </ng-content>

src/material-experimental/mdc-button/button.scss

@@ -29,9 +29,11 @@
 // In order to work around this issue by *not* hiding overflow, we adjust the child elements
 // to fully cover the actual button element. This means that the border-radius would be correct
 // then. See: https://github.com/angular/components/issues/13738
-.mat-mdc-outlined-button .mat-mdc-button-ripple {
+.mat-mdc-outlined-button .mat-mdc-button-ripple,
+.mat-mdc-outlined-button .mdc-button__ripple {
   top: -$mdc-button-outlined-border-width;
   left: -$mdc-button-outlined-border-width;
   bottom: -$mdc-button-outlined-border-width;
   right: -$mdc-button-outlined-border-width;
+  border: none;
 }