fix(material-experimental/mdc-tabs): add .mdc-tab__ripple container (…

…#17498)

This matches how MDC shows states, except we do not apply the MDC ripple
styles to it for now.

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

@@ -62,7 +62,7 @@
     @include mdc-theme-prop(color, $foreground-color);
   }
 
-  .mat-ripple-element, .mat-mdc-tab::before {
+  .mat-ripple-element, .mdc-tab__ripple::before {
     @include mdc-theme-prop(background-color, $foreground-color);
   }
 
@@ -76,8 +76,7 @@
   @include mdc-tab-indicator-underline-color($color, $query: $mat-theme-styles-query);
   @include mdc-tab-indicator-icon-color($color, $query: $mat-theme-styles-query);
 
-  .mat-mdc-tab::before,
-  .mat-mdc-tab-link::before,
+  .mdc-tab__ripple::before,
   .mat-mdc-tab .mat-ripple-element,
   .mat-mdc-tab-header-pagination .mat-ripple-element,
   .mat-mdc-tab-link .mat-ripple-element {

src/material-experimental/mdc-tabs/_tabs-common.scss

@@ -24,7 +24,7 @@ $mat-tab-animation-duration: 500ms !default;
 
   // Used to render out the background tint when hovered/focused. Usually this is done by
   // MDC's ripple styles, however we're using our own ripples due to size concerns.
-  &::before {
+  .mdc-tab__ripple::before {
     content: '';
     display: block;
     position: absolute;
@@ -37,13 +37,13 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
-  &:hover::before {
+  &:hover .mdc-tab__ripple::before {
     opacity: map-get($mdc-ripple-dark-ink-opacities, hover);
   }
 
   &.cdk-program-focused,
   &.cdk-keyboard-focused {
-    &::before {
+    .mdc-tab__ripple::before {
       opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
     }
   }

src/material-experimental/mdc-tabs/tab-group.html

@@ -21,6 +21,7 @@
        [class.mdc-tab--active]="selectedIndex == i"
        [disabled]="tab.disabled"
        (click)="_handleClick(tab, tabHeader, i)">
+    <span class="mdc-tab__ripple"></span>
 
     <!-- Needs to be a separate element, because we can't put
          `overflow: hidden` on tab due to the ink bar. -->

src/material-experimental/mdc-tabs/tab-nav-bar/tab-link.html

@@ -1,3 +1,5 @@
+<span class="mdc-tab__ripple"></span>
+
 <div
   class="mat-mdc-tab-ripple"
   mat-ripple
@@ -9,3 +11,4 @@
     <ng-content></ng-content>
   </span>
 </span>
+