fix(material-experimental/mdc-chips): use ripple target for state interactions (#17681)

Author: andrewseguin

src/material-experimental/mdc-chips/chip-option.html

@@ -1,3 +1,4 @@
+<span class="mdc-chip__ripple"></span>
 <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
 <div class="mdc-chip__checkmark" *ngIf="_chipListMultiple">
   <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">

src/material-experimental/mdc-chips/chip-row.html

@@ -1,5 +1,6 @@
 <div role="gridcell">
   <div #chipContent tabindex="-1" class="mat-chip-row-focusable-text-content">
+     <span class="mdc-chip__ripple"></span>
   	 <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
   	 <span class="mdc-chip__text"><ng-content></ng-content></span>
   	 <ng-content select="mat-chip-trailing-icon,[matChipTrailingIcon]"></ng-content>

src/material-experimental/mdc-chips/chip.html

@@ -1,3 +1,4 @@
+<span class="mdc-chip__ripple"></span>
 <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
 <div class="mdc-chip__text mdc-chip__action--primary"><ng-content></ng-content></div>
 <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>

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

@@ -1,4 +1,5 @@
 @import '@material/chips/mixins';
+@import '../../material/core/style/layout-common';
 @import '../../material/core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 @import '../mdc-helpers/mdc-helpers';
@@ -28,22 +29,14 @@
 // The MDC chip styles related to hover and focus states are intertwined with the MDC ripple styles.
 // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
 // additional styles to restore these states.
-.mat-mdc-chip:not(.mat-mdc-chip-disabled) {
-  &:hover, &:focus, div:focus {
-    .mdc-chip__text::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
+.mdc-chip__ripple {
+  @include mdc-ripple-target-common($query: structure);
 
-      // Note that we use a `background` and `opacity`, instead of an `rgba` background, because
-      // `rgba` backgrounds get converted into solid colors in high contrast mode.
-      background: #000;
-      opacity: 0.2;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-    }
+  &::after, &::before {
+    @include mat-fill;
+    content: '';
+    pointer-events: none;
+    opacity: 0;
   }
 }
 
@@ -55,6 +48,11 @@
   .mat-mdc-chip-trailing-icon, .mat-chip-row-focusable-text-content {
     pointer-events: none;
   }
+
+  // Do not show state interactions for disabled chips.
+  .mdc-chip__ripple::after, .mdc-chip__ripple::before {
+    display: none;
+  }
 }
 
 // Angular Material supports vertically-stacked chips, which MDC does not.