add state styles

Author: mmalerba

src/material-experimental/mdc-list/_list-theme.scss

@@ -1,10 +1,31 @@
 @import '@material/list/mixins.import';
+@import '@material/ripple/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-mdc-list-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $state-opacities:
+      if($is-dark-theme, $mdc-ripple-light-ink-opacities, $mdc-ripple-dark-ink-opacities);
+
   @include mat-using-mdc-theme($theme) {
     @include mdc-list-without-ripple($query: $mat-theme-styles-query);
   }
+
+  // MDC's state styles are tied in with their ripple. Since we don't use the MDC ripple, we need to
+  // add the hover and focus states manually.
+  .mat-mdc-list-item-interactive {
+    &::before {
+      background: if($is-dark-theme, #fff, #000);
+    }
+
+    &:hover::before {
+      opacity: map-get($state-opacities, hover);
+    }
+
+    &:focus::before {
+      opacity: map-get($state-opacities, focus);
+    }
+  }
 }
 
 @mixin mat-mdc-list-typography($config) {

src/material-experimental/mdc-list/action-list.ts

@@ -23,6 +23,4 @@ import {MatListBase} from './list-base';
     {provide: MatListBase, useExisting: MatActionList},
   ]
 })
-export class MatActionList extends MatListBase {
-  _hasRipple = true;
-}
+export class MatActionList extends MatListBase {}

src/material-experimental/mdc-list/list-base.ts

@@ -9,8 +9,9 @@
 import {Platform} from '@angular/cdk/platform';
 import {
   AfterContentInit,
+  Directive,
   ElementRef,
-  Injectable,
+  HostBinding,
   NgZone,
   OnDestroy,
   QueryList
@@ -19,9 +20,10 @@ import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/mat
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 
-@Injectable()
+@Directive()
 export class MatListBase {
-  _hasRipple = false;
+  @HostBinding('class.mdc-list--non-interactive')
+  _isNonInteractive: boolean;
 }
 
 export class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
@@ -37,7 +39,10 @@ export class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarge
 
   constructor(protected _element: ElementRef, protected _ngZone: NgZone, listBase: MatListBase,
               platform: Platform) {
-    this.rippleDisabled = !listBase._hasRipple;
+    this.rippleDisabled = listBase._isNonInteractive;
+    if (!listBase._isNonInteractive) {
+      this._element.nativeElement.classList.add('mat-mdc-list-item-interactive');
+    }
     this._rippleRenderer =
         new RippleRenderer(this, this._ngZone, this._element.nativeElement, platform);
     this._rippleRenderer.setupTriggerEvents(this._element.nativeElement);

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

@@ -95,3 +95,15 @@
     }
   }
 }
+
+// MDC's state styles are included with their ripple which we don't use. Instead we add the focus
+// and hover styles ourselves using this pseudo-element
+.mat-mdc-list-item-interactive::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+}

src/material-experimental/mdc-list/list.ts

@@ -66,7 +66,9 @@ export class MatListSubheaderCssMatStyler {}
     {provide: MatListBase, useExisting: MatList},
   ]
 })
-export class MatList extends MatListBase {}
+export class MatList extends MatListBase {
+  _isNonInteractive = true;
+}
 
 @Component({
   selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]',

src/material-experimental/mdc-list/nav-list.ts

@@ -33,6 +33,4 @@ import {MatListBase} from './list-base';
     {provide: MatList, useExisting: MatNavList},
   ]
 })
-export class MatNavList extends MatListBase {
-  _hasRipple = true;
-}
+export class MatNavList extends MatListBase {}