fix(material-experimental/mdc-list): fix styles for normal lists

Fixes up various styles for the lists under the "normal lists" section
of the demo. There are still some issues around the avatars and dividers
on the last list

Author: mmalerba

src/dev-app/mdc-list/mdc-list-demo.html

@@ -18,7 +18,7 @@ <h3 mat-subheader>Items</h3>
       <mat-list-item *ngFor="let contact of contacts">
         <h3 mat-line>{{contact.name}}</h3>
         <p mat-line *ngIf="thirdLine">extra line</p>
-        <p mat-line class="demo-secondary-text">{{contact.headline}}</p>
+        <p mat-line>{{contact.headline}}</p>
       </mat-list-item>
     </mat-list>
 
@@ -29,15 +29,15 @@ <h3 mat-subheader>Today</h3>
         <h4 mat-line>{{message.from}}</h4>
         <p mat-line>
           <span>{{message.subject}} -- </span>
-          <span class="demo-secondary-text">{{message.message}}</span>
+          <span>{{message.message}}</span>
         </p>
         <mat-divider inset *ngIf="!last"></mat-divider>
       </mat-list-item>
       <mat-divider></mat-divider>
       <mat-list-item *ngFor="let message of messages">
         <h4 mat-line>{{message.from}}</h4>
-        <p mat-line> {{message.subject}} </p>
-        <p mat-line class="demo-secondary-text">{{message.message}} </p>
+        <p mat-line>{{message.subject}}</p>
+        <p mat-line>{{message.message}}</p>
       </mat-list-item>
     </mat-list>
   </div>
@@ -54,7 +54,7 @@ <h3 mat-subheader>Items</h3>
     <mat-list dense>
       <mat-list-item *ngFor="let contact of contacts">
         <h3 mat-line>{{contact.name}}</h3>
-        <p mat-line class="demo-secondary-text">{{contact.headline}}</p>
+        <p mat-line>{{contact.headline}}</p>
       </mat-list-item>
     </mat-list>
 
@@ -64,7 +64,7 @@ <h3 mat-subheader>Today</h3>
         <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h4 mat-line>{{message.from}}</h4>
         <p mat-line> {{message.subject}} </p>
-        <p mat-line class="demo-secondary-text">{{message.message}} </p>
+        <p mat-line>{{message.message}} </p>
       </mat-list-item>
     </mat-list>
   </div>
@@ -90,7 +90,7 @@ <h2>Nav lists</h2>
       <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
         <mat-icon mat-list-icon>folder</mat-icon>
         <span mat-line>{{ link.name }}</span>
-        <span mat-line class="demo-secondary-text"> Description </span>
+        <span mat-line> Description </span>
         <mat-divider inset *ngIf="!last"></mat-divider>
       </a>
     </mat-nav-list>

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

@@ -6,6 +6,34 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {AfterContentInit, ElementRef, NgZone, OnDestroy, QueryList} from '@angular/core';
+import {setLines} from '@angular/material/core';
+import {Subscription} from 'rxjs';
+import {startWith} from 'rxjs/operators';
+
 export class MatListBase {}
 
-export class MatListItemBase {}
+export class MatListItemBase implements AfterContentInit, OnDestroy {
+  lines: QueryList<ElementRef<Element>>;
+
+  private _subscriptions = new Subscription();
+
+  constructor(protected _element: ElementRef, protected _ngZone: NgZone) {}
+
+  ngAfterContentInit() {
+    this._ngZone.runOutsideAngular(() => {
+      this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
+          .subscribe((lines: QueryList<ElementRef<Element>>) => {
+            lines.forEach((line: ElementRef<Element>, index: number) => {
+              line.nativeElement.classList.toggle('mdc-list-item__primary-text', index === 0);
+              line.nativeElement.classList.toggle('mdc-list-item__secondary-text', index !== 0);
+            });
+            setLines(lines, this._element, 'mat-mdc');
+          }));
+    });
+  }
+
+  ngOnDestroy() {
+    this._subscriptions.unsubscribe();
+  }
+}

src/material-experimental/mdc-list/list-item.html

@@ -1 +1,2 @@
+<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
 <span class="mdc-list-item__text"><ng-content></ng-content></span>

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

@@ -8,3 +8,53 @@
 .mat-mdc-list-base {
   display: block;
 }
+
+// While MDC expects only span elements under mdc-list-item__text, we have historically supported
+// using other elements (e.g. h1, h2, etc). This resets some common properties that might cause
+// problems.
+// TODO(mmalerba): Do we actually want to do this? We could switch to expecting spans like MDC and
+//  let people reset as necessary instead.
+.mat-mdc-list-base .mdc-list-item__text > *,
+.mat-mdc-list-base .mdc-list-item__text > * {
+  padding: 0;
+}
+
+// .mdc-list-item__secondary-text adds its own font settings, so only reset if it doesn't have that
+// class
+.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__secondary-text),
+.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__secondary-text) {
+  font-size: inherit;
+  font-weight: normal;
+}
+
+// .mdc-list-item__primary-text adds its own margin settings, so only reset if it doesn't have that
+// class
+.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text),
+.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text) {
+  margin: 0;
+
+  // Fixes the gap between the 2nd & 3rd lines.
+  &.mdc-list-item__secondary-text {
+    margin-top: -3px;
+  }
+}
+
+
+// MDC does have 2-line support, but it applies to the entire list, whereas ours applies to
+// individual items. Therefore, we need to add our own styles.
+.mat-mdc-2-line {
+  height: 72px;
+
+  .mdc-list-item__text {
+    align-self: flex-start;
+  }
+}
+
+// MDC does not support more than 2 lines, so we need to add our own styles.
+.mat-mdc-3-line {
+  height: 88px;
+
+  .mdc-list-item__text {
+    align-self: flex-start;
+  }
+}

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

@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  Directive, ElementRef,
+  QueryList,
+  ViewEncapsulation
+} from '@angular/core';
+import {MatLine} from '@angular/material/core';
 import {MatListBase, MatListItemBase} from './list-base';
 
 /**
@@ -15,7 +23,7 @@ import {MatListBase, MatListItemBase} from './list-base';
  */
 @Directive({
   selector: '[mat-list-avatar], [matListAvatar]',
-  host: {'class': 'mat-mdc-list-avatar'}
+  host: {'class': 'mat-mdc-list-avatar mdc-list-item__graphic'}
 })
 export class MatListAvatarCssMatStyler {}
 
@@ -25,7 +33,7 @@ export class MatListAvatarCssMatStyler {}
  */
 @Directive({
   selector: '[mat-list-icon], [matListIcon]',
-  host: {'class': 'mat-mdc-list-icon'}
+  host: {'class': 'mat-mdc-list-icon mdc-list-item__graphic'}
 })
 export class MatListIconCssMatStyler {}
 
@@ -35,7 +43,9 @@ export class MatListIconCssMatStyler {}
  */
 @Directive({
   selector: '[mat-subheader], [matSubheader]',
-  host: {'class': 'mat-mdc-subheader'}
+  // TODO(mmalerba): MDC's subheader font looks identical to the list item font, figure out why and
+  //  make a change in one of the repos to visually distinguish.
+  host: {'class': 'mat-mdc-subheader mdc-list-group__subheader'}
 })
 export class MatListSubheaderCssMatStyler {}
 
@@ -62,4 +72,7 @@ export class MatList extends MatListBase {}
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatListItem extends MatListItemBase {}
+export class MatListItem extends MatListItemBase {
+  @ContentChildren(MatLine, {read: ElementRef, descendants: true}) lines:
+      QueryList<ElementRef<Element>>;
+}

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

@@ -7,6 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
+import {MatLineModule} from '@angular/material/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatActionList} from './action-list';
 import {
@@ -20,6 +21,7 @@ import {MatNavList} from './nav-list';
 import {MatListOption, MatSelectionList} from './selection-list';
 
 @NgModule({
+  imports: [MatLineModule],
   exports: [
     MatList,
     MatActionList,
@@ -31,6 +33,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
     MatListIconCssMatStyler,
     MatListSubheaderCssMatStyler,
     MatDividerModule,
+    MatLineModule,
   ],
   declarations: [
     MatList,

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

@@ -6,8 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren, ElementRef,
+  forwardRef,
+  QueryList,
+  ViewEncapsulation
+} from '@angular/core';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
+import {MatLine} from '@angular/material/core';
 import {MatListBase, MatListItemBase} from './list-base';
 
 const MAT_SELECTION_LIST_VALUE_ACCESSOR: any = {
@@ -49,4 +57,7 @@ export class MatSelectionList extends MatListBase {}
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatListOption extends MatListItemBase {}
+export class MatListOption extends MatListItemBase {
+  @ContentChildren(MatLine, {read: ElementRef, descendants: true}) lines:
+      QueryList<ElementRef<Element>>;
+}

src/material/core/line/line.ts

@@ -31,18 +31,19 @@ export class MatLine {}
  * Helper that takes a query list of lines and sets the correct class on the host.
  * @docs-private
  */
-export function setLines(lines: QueryList<MatLine>, element: ElementRef<HTMLElement>) {
+export function setLines(lines: QueryList<unknown>, element: ElementRef<HTMLElement>,
+                         prefix = 'mat') {
   // Note: doesn't need to unsubscribe, because `changes`
   // gets completed by Angular when the view is destroyed.
   lines.changes.pipe(startWith(lines)).subscribe(({length}) => {
-    setClass(element, 'mat-2-line', false);
-    setClass(element, 'mat-3-line', false);
-    setClass(element, 'mat-multi-line', false);
+    setClass(element, `${prefix}-2-line`, false);
+    setClass(element, `${prefix}-3-line`, false);
+    setClass(element, `${prefix}-multi-line`, false);
 
     if (length === 2 || length === 3) {
-      setClass(element, `mat-${length}-line`, true);
+      setClass(element, `${prefix}-${length}-line`, true);
     } else if (length > 3) {
-      setClass(element, `mat-multi-line`, true);
+      setClass(element, `${prefix}-multi-line`, true);
     }
   });
 }