fix(material-experimental/mdc-list): properly render leading and trai…

…ling icons on list items (#19201)
angular · May 13, 2020 · e408228 · e408228
1 parent 781051b
commit e408228
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "test": "node ./scripts/run-component-tests.js",
     "test-local": "yarn -s test --local",
     "test-firefox": "yarn -s test --firefox",
-    "lint": "yarn -s tslint && yarn -s bazel:format-lint && yarn -s ownerslint",
+    "lint": "yarn -s tslint && yarn -s stylelint && yarn -s bazel:format-lint && yarn -s ownerslint",
     "e2e": "bazel test //src/... --test_tag_filters=e2e",
     "deploy-dev-app": "node ./scripts/deploy-dev-app.js",
     "breaking-changes": "ts-node --project scripts scripts/breaking-changes.ts",

diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
@@ -40,6 +40,15 @@ <h2>Normal lists</h2>
         <div mat-line class="demo-secondary-text">{{message.message}} </div>
       </mat-list-item>
     </mat-list>
+
+    <mat-list>
+      <mat-list-item *ngFor="let link of links">
+        <span mat-line>{{ link.name }}</span>
+        <button mat-icon-button (click)="infoClicked=!infoClicked">
+          <mat-icon>info</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-list>
   </div>
 
   <div>
@@ -67,6 +76,15 @@ <h2>Dense lists</h2>
         <div mat-line class="demo-secondary-text">{{message.message}} </div>
       </mat-list-item>
     </mat-list>
+
+    <mat-list dense>
+      <mat-list-item *ngFor="let link of links">
+        <span mat-line>{{ link.name }}</span>
+        <button mat-icon-button (click)="infoClicked=!infoClicked">
+          <mat-icon class="material-icons">info</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-list>
   </div>
   <div>
     <h2>Nav lists</h2>
@@ -78,30 +96,12 @@ <h2>Nav lists</h2>
     <div *ngIf="infoClicked">
       More info!
     </div>
-    <mat-nav-list>
-      <mat-list-item *ngFor="let link of links">
-        <a mat-line href="http://www.google.com">{{ link.name }}</a>
-        <button mat-icon-button (click)="infoClicked=!infoClicked">
-          <mat-icon>info</mat-icon>
-        </button>
-      </mat-list-item>
-    </mat-nav-list>
     <mat-nav-list>
       <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>
-        <mat-divider inset *ngIf="!last"></mat-divider>
       </a>
     </mat-nav-list>
-    <mat-nav-list dense>
-      <mat-list-item *ngFor="let link of links">
-        <a mat-line href="http://www.google.com">{{ link.name }}</a>
-        <button mat-icon-button (click)="infoClicked=!infoClicked">
-          <mat-icon class="material-icons">info</mat-icon>
-        </button>
-      </mat-list-item>
-    </mat-nav-list>
   </div>
 
   <div>

diff --git a/src/dev-app/list/list-demo.scss b/src/dev-app/list/list-demo.scss
@@ -11,13 +11,12 @@
     margin-top: 20px;
   }
 
-  .mat-icon {
+  .mat-icon-button {
     color: rgba(0, 0, 0, 0.12);
   }
 
   .mat-list-icon {
-    color: white;
-    background: rgba(0, 0, 0, 0.3);
+    color: rgba(0, 0, 0, 0.38);
   }
 }
 

diff --git a/src/dev-app/mdc-list/mdc-list-demo.html b/src/dev-app/mdc-list/mdc-list-demo.html
@@ -40,6 +40,15 @@ <h2>Normal lists</h2>
         <div mat-line>{{message.message}}</div>
       </mat-list-item>
     </mat-list>
+
+    <mat-list>
+      <mat-list-item *ngFor="let link of links">
+        <span mat-line>{{ link.name }}</span>
+        <button mat-icon-button (click)="infoClicked=!infoClicked">
+          <mat-icon>info</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-list>
   </div>
 
   <div>
@@ -63,8 +72,17 @@ <h2>Dense lists</h2>
       <mat-list-item *ngFor="let message of messages">
         <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <div mat-line>{{message.from}}</div>
-        <div mat-line> {{message.subject}} </div>
-        <div mat-line>{{message.message}} </div>
+        <div mat-line>{{message.subject}}</div>
+        <div mat-line>{{message.message}}</div>
+      </mat-list-item>
+    </mat-list>
+
+    <mat-list dense>
+      <mat-list-item *ngFor="let link of links">
+        <span mat-line>{{ link.name }}</span>
+        <button mat-icon-button (click)="infoClicked=!infoClicked">
+          <mat-icon class="material-icons">info</mat-icon>
+        </button>
       </mat-list-item>
     </mat-list>
   </div>
@@ -78,30 +96,12 @@ <h2>Nav lists</h2>
     <div *ngIf="infoClicked">
       More info!
     </div>
-    <mat-nav-list>
-      <mat-list-item *ngFor="let link of links">
-        <a mat-line href="http://www.google.com">{{ link.name }}</a>
-        <button mat-icon-button (click)="infoClicked=!infoClicked">
-          <mat-icon>info</mat-icon>
-        </button>
-      </mat-list-item>
-    </mat-nav-list>
     <mat-nav-list>
       <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> Description </span>
-        <mat-divider inset *ngIf="!last"></mat-divider>
       </a>
     </mat-nav-list>
-    <mat-nav-list dense>
-      <mat-list-item *ngFor="let link of links">
-        <a mat-line href="http://www.google.com">{{ link.name }}</a>
-        <button mat-icon-button (click)="infoClicked=!infoClicked">
-          <mat-icon class="material-icons">info</mat-icon>
-        </button>
-      </mat-list-item>
-    </mat-nav-list>
   </div>
 
   <div>

diff --git a/src/dev-app/mdc-list/mdc-list-demo.scss b/src/dev-app/mdc-list/mdc-list-demo.scss
@@ -12,14 +12,9 @@
     margin-top: 20px;
   }
 
-  .mat-icon {
+  .mat-mdc-icon-button {
     color: rgba(0, 0, 0, 0.12);
   }
-
-  .mat-mdc-list-icon {
-    color: white;
-    background: rgba(0, 0, 0, 0.3);
-  }
 }
 
 .demo-secondary-text {

diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
@@ -2,6 +2,8 @@
 @import '@material/ripple/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 
+// TODO: implement mat-list[dense] once density system is in master
+
 @mixin mat-mdc-list-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
   $state-opacities:

diff --git a/src/material-experimental/mdc-list/list-base.ts b/src/material-experimental/mdc-list/list-base.ts
@@ -20,17 +20,27 @@ import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/mat
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 
+function toggleClass(el: Element, className: string, on: boolean) {
+  if (on) {
+    el.classList.add(className);
+  } else {
+    el.classList.remove(className);
+  }
+}
+
 @Directive()
-export class MatListBase {
+/** @docs-private */
+export abstract class MatListBase {
   // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator
   // metadata is not inherited by child classes, instead the host binding data is defined in a way
   // that can be inherited.
   // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostBinding('class.mdc-list--non-interactive')
-  _isNonInteractive: boolean;
+  _isNonInteractive: boolean = false;
 }
 
 @Directive()
+/** @docs-private */
 export abstract class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
   lines: QueryList<ElementRef<Element>>;
 
@@ -67,8 +77,9 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
       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);
+              toggleClass(line.nativeElement,
+                  'mdc-list-item__primary-text', index === 0 && lines.length > 1);
+              toggleClass(line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
             });
             setLines(lines, this._element, 'mat-mdc');
           }));

diff --git a/src/material-experimental/mdc-list/list-item.html b/src/material-experimental/mdc-list/list-item.html
@@ -1,3 +1,16 @@
 <ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
-<span class="mdc-list-item__text"><ng-content></ng-content></span>
+
+<!-- If lines were explicitly given, use those as the text. -->
+<ng-container *ngIf="lines.length">
+  <span class="mdc-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
+</ng-container>
+
+<!--
+  If lines were not explicitly given, assume the remaining content is the text, otherwise assume it
+  is an action that belongs in the "meta" section.
+-->
+<span [class.mdc-list-item__text]="!lines.length" [class.mdc-list-item__meta]="lines.length">
+  <ng-content></ng-content>
+</span>
+
 <ng-content select="mat-divider"></ng-content>
diff --git a/src/material-experimental/mdc-list/module.ts b/src/material-experimental/mdc-list/module.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatLineModule, MatRippleModule} from '@angular/material/core';
 import {MatDividerModule} from '@angular/material/divider';
@@ -22,6 +23,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
 
 @NgModule({
   imports: [
+    CommonModule,
     MatLineModule,
     MatRippleModule,
   ],