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

Author: andrewseguin

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

@@ -2,6 +2,11 @@
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/theme/functions';
 
+// 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-chip-state-target: '.mdc-chip__ripple';
+
 @mixin mat-chips-theme-mdc($theme) {
   @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);
   @include mdc-chip-without-ripple($query: $mat-theme-styles-query);

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>
 <svg *ngIf="_chipListMultiple" class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
   <path class="mdc-chip__checkmark-path" fill="none" stroke="black"

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,23 +29,11 @@
 // 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%;
-
-      // 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;
-    }
-  }
+.mdc-chip__ripple::after, .mdc-chip__ripple::before {
+  @include mat-fill;
+  content: '';
+  pointer-events: none;
+  opacity: 0;
 }
 
 // Angular Material supports disabled chips, which MDC does not.
@@ -55,6 +44,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.