feat(material-experimental/mdc-list): rework API to support secondary…

… text with wrapping Reworks the API to support secondary text with wrapping into the third line. The overall API changes are made to ease the integration with the MDC-list foundation/component. https://docs.google.com/document/d/15yC_W2-NuNvVqHgA1zjpE8V28-Y5XRpdFOMdLjMbWAo/edit
angular · Dec 17, 2021 · 871a500 · 871a500
1 parent 2cc0640
commit 871a500
Show file tree

Hide file tree

Showing 21 changed files with 571 additions and 311 deletions.
diff --git a/scripts/check-mdc-exports-config.ts b/scripts/check-mdc-exports-config.ts
@@ -5,6 +5,18 @@ export const config = {
   // Exclude them from this check since they aren't part of the public API.
   skippedSymbols: [/^_/],
   skippedExports: {
+    'mdc-core': [
+      // The line directive is not used by the MDC-based list and therefore does
+      // not need to be re-exposed.
+      'MatLine',
+      'MatLineModule',
+    ],
+    'mdc-list': [
+      // These classes are docs-private and have actual public classes in the
+      // MDC-based list, such as `MatListItemIcon` or `MatListItemAvatar`.
+      'MatListAvatarCssMatStyler',
+      'MatListIconCssMatStyler',
+    ],
     'mdc-chips': [
       // These components haven't been implemented for MDC due to a different accessibility pattern.
       'MatChipListChange',

diff --git a/scripts/check-mdc-tests-config.ts b/scripts/check-mdc-tests-config.ts
@@ -100,13 +100,11 @@ export const config = {
       'should not change focus when pressing HOME with a modifier key',
       'should not change focus when pressing END with a modifier key',
 
-      // MDC does not support the common CTRL + A keyboard shortcut.
-      // Tracked with: https://github.com/material-components/material-components-web/issues/6366
-      'should select all items using ctrl + a',
-      'should not select disabled items when pressing ctrl + a',
-      'should select all items using ctrl + a if some items are selected',
-      'should deselect all with ctrl + a if all options are selected',
-      'should dispatch the selectionChange event when selecting via ctrl + a',
+      // The indirect descendant test scenario never worked (even in the non-MDC list) and
+      // therefore this test has been removed.
+      'should pick up indirect descendant lines',
+      // MDC-based list does not support more than three lines.
+      'should apply a particular class to lists with more than 3 lines',
     ],
     'mdc-progress-bar': [
       // These tests are verifying implementation details that are not relevant for MDC.

diff --git a/scripts/check-mdc-tests.ts b/scripts/check-mdc-tests.ts
@@ -91,7 +91,7 @@ function getTestNames(files: string[]): string[] {
       if (
         ts.isCallExpression(node) &&
         ts.isIdentifier(node.expression) &&
-        node.expression.text === 'it'
+        (node.expression.text === 'it' || node.expression.text === 'xit')
       ) {
         // Note that this is a little naive since it'll take the literal text of the test
         // name expression which could include things like string concatenation. It's fine

diff --git a/src/dev-app/mdc-list/mdc-list-demo.html b/src/dev-app/mdc-list/mdc-list-demo.html
@@ -1,9 +1,11 @@
 
 <h1>mat-list demo</h1>
 
-<button mat-raised-button (click)="thirdLine=!thirdLine">Show third line</button>
+<button mat-raised-button (click)="thirdLine = !thirdLine">Show third line</button>
+<button mat-raised-button (click)="showBoxes = !showBoxes">Show item boxes</button>
+
+<div class="demo-list" [class.demo-show-boxes]="showBoxes">
 
-<div class="demo-list">
   <div>
     <h2>Normal lists</h2>
 
@@ -16,35 +18,35 @@ <h2>Normal lists</h2>
 
     <mat-list>
       <mat-list-item *ngFor="let contact of contacts">
-        <div mat-line>{{contact.name}}</div>
-        <div mat-line *ngIf="thirdLine">extra line</div>
-        <div mat-line>{{contact.headline}}</div>
+        <div matListItemTitle>{{contact.name}}</div>
+        <div matListItemLine *ngIf="thirdLine">extra line</div>
+        <div matListItemLine>{{contact.headline}}</div>
       </mat-list-item>
     </mat-list>
 
     <mat-list>
       <div mat-subheader>Today</div>
       <mat-list-item *ngFor="let message of messages; last as last">
-        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
-        <div mat-line>{{message.from}}</div>
-        <div mat-line>
+        <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
+        <div matListItemTitle>{{message.from}}</div>
+        <div matListItemLine>
           <span>{{message.subject}} -- </span>
           <span>{{message.message}}</span>
         </div>
         <mat-divider inset *ngIf="!last"></mat-divider>
       </mat-list-item>
       <mat-divider></mat-divider>
       <mat-list-item *ngFor="let message of messages">
-        <div mat-line>{{message.from}}</div>
-        <div mat-line>{{message.subject}}</div>
-        <div mat-line>{{message.message}}</div>
+        <div matListItemTitle>{{message.from}}</div>
+        <div matListItemLine>{{message.subject}}</div>
+        <div matListItemLine>{{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">
+        <span matListItemTitle>{{ link.name }}</span>
+        <button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
           <mat-icon>info</mat-icon>
         </button>
       </mat-list-item>
@@ -62,25 +64,25 @@ <h2>Dense lists</h2>
 
     <mat-list dense>
       <mat-list-item *ngFor="let contact of contacts">
-        <div mat-line>{{contact.name}}</div>
-        <div mat-line>{{contact.headline}}</div>
+        <div matListItemTitle>{{contact.name}}</div>
+        <div matListItemLine>{{contact.headline}}</div>
       </mat-list-item>
     </mat-list>
 
     <mat-list dense>
       <div mat-subheader>Today</div>
       <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>
+        <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
+        <div matListItemTitle>{{message.from}}</div>
+        <div matListItemLine>{{message.subject}}</div>
+        <div matListItemLine>{{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">
+        <span matListItemTitle>{{ link.name }}</span>
+        <button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
           <mat-icon class="material-icons">info</mat-icon>
         </button>
       </mat-list-item>
@@ -98,8 +100,8 @@ <h2>Nav lists</h2>
     </div>
     <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>
+        <mat-icon matListItemIcon>folder</mat-icon>
+        <span matListItemTitle>{{ link.name }}</span>
       </a>
     </mat-nav-list>
   </div>
@@ -134,13 +136,13 @@ <h2>Selection list</h2>
       <div mat-subheader>Dogs</div>
 
       <mat-list-option checkboxPosition="before">
-        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
-        <span matLine>Shiba Inu</span>
+        <img matListItemAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
+        <span matListItemTitle>Shiba Inu</span>
       </mat-list-option>
 
       <mat-list-option checkboxPosition="after">
-        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
-        <span matLine>Other Shiba Inu</span>
+        <img matListItemAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
+        <span matListItemTitle>Other Shiba Inu</span>
       </mat-list-option>
     </mat-selection-list>
 
@@ -183,21 +185,52 @@ <h2>Single Selection list</h2>
     <p>Selected: {{favoriteOptions | json}}</p>
   </div>
 
+  <div>
+    <h2>Line scenarios</h2>
+
+    <mat-list>
+      <mat-list-item>Title</mat-list-item>
+      <mat-list-item lines="2">
+        <span matListItemTitle>Title</span>
+        <span>This is unscoped text content that is supposed to not wrap. The list has only
+        acquired two lines and therefore there is no space for wrapping.</span>
+      </mat-list-item>
+      <mat-list-item lines="3">
+        <span matListItemTitle>Title</span>
+        <span>This is unscoped text content that is supposed to wrap to the third line.
+          The list item acquire spaces for three lines and text should have an ellipsis in the
+          third line upon text overflow.</span>
+      </mat-list-item>
+      <mat-list-item>
+        <span matListItemTitle>Title</span>
+        <span>This is unscoped text content that is supposed to not wrap. The list has only
+        acquired two lines (automatically) and therefore there is no space for wrapping.</span>
+      </mat-list-item>
+      <mat-list-item>
+        <span matListItemTitle>Title</span>
+        <span matListItemLine>Secondary line</span>
+        <span matListItemLine>Tertiary line</span>
+      </mat-list-item>
+    </mat-list>
+
+    <button mat-raised-button (click)="showBoxes = !showBoxes">Show item boxes</button>
+  </div>
+
   <div>
     <h2>Line alignment</h2>
 
     <mat-list>
       <mat-list-item *ngFor="let link of links">
-        <span mat-line>{{ link.name }}</span>
-        <span>Not in an <i>matLine</i></span>
+        <span matListItemTitle>{{ link.name }}</span>
+        <span>Unscoped content</span>
       </mat-list-item>
     </mat-list>
 
     <mat-selection-list>
       <mat-list-option value="first">First</mat-list-option>
       <mat-list-option value="second">
-        <span matLine>Second</span>
-        <span>Not in an <i>matLine</i></span>
+        <span matListItemTitle>Second</span>
+        <span>Unscoped content</span>
       </mat-list-option>
     </mat-selection-list>
   </div>
@@ -207,19 +240,19 @@ <h2>Icon alignment in selection list</h2>
 
     <mat-selection-list>
       <mat-list-option value="bananas" [checkboxPosition]="checkboxPosition">
-        <mat-icon matListIcon>info</mat-icon>
+        <mat-icon matListItemIcon>info</mat-icon>
         Bananas
       </mat-list-option>
       <mat-list-option value="oranges" [checkboxPosition]="checkboxPosition">
-        <mat-icon matListIcon #ok>info</mat-icon>
+        <mat-icon matListItemIcon #ok>info</mat-icon>
         Oranges
       </mat-list-option>
       <mat-list-option value="cake" [checkboxPosition]="checkboxPosition">
-        <mat-icon matListIcon>info</mat-icon>
+        <mat-icon matListItemIcon>info</mat-icon>
         Cake
       </mat-list-option>
       <mat-list-option value="fries" [checkboxPosition]="checkboxPosition">
-        <mat-icon matListIcon>info</mat-icon>
+        <mat-icon matListItemIcon>info</mat-icon>
         Fries
       </mat-list-option>
     </mat-selection-list>

diff --git a/src/dev-app/mdc-list/mdc-list-demo.scss b/src/dev-app/mdc-list/mdc-list-demo.scss
@@ -15,6 +15,10 @@
   .mat-mdc-icon-button {
     color: rgba(0, 0, 0, 0.12);
   }
+
+  &.demo-show-boxes .mat-mdc-list-item {
+    border: 1px solid grey;
+  }
 }
 
 .demo-secondary-text {

diff --git a/src/dev-app/mdc-list/mdc-list-demo.ts b/src/dev-app/mdc-list/mdc-list-demo.ts
@@ -27,10 +27,10 @@ export class MdcListDemo {
 
   messages: {from: string; subject: string; message: string; image: string}[] = [
     {
-      from: 'Nancy',
+      from: 'John',
       subject: 'Brunch?',
       message: 'Did you want to go on Sunday? I was thinking that might work.',
-      image: 'https://angular.io/generated/images/bios/cindygreenekaplan.jpg',
+      image: 'https://angular.io/generated/images/bios/devversion.jpg',
     },
     {
       from: 'Mary',
@@ -49,6 +49,7 @@ export class MdcListDemo {
   links: {name: string}[] = [{name: 'Inbox'}, {name: 'Outbox'}, {name: 'Spam'}, {name: 'Trash'}];
 
   thirdLine = false;
+  showBoxes = false;
   infoClicked = false;
   selectionListDisabled = false;
   selectionListRippleDisabled = false;

diff --git a/src/material-experimental/mdc-core/public-api.ts b/src/material-experimental/mdc-core/public-api.ts
@@ -29,8 +29,6 @@ export {
   MatCommonModule,
   MatDateFormats,
   MATERIAL_SANITY_CHECKS,
-  MatLine,
-  MatLineModule,
   MatNativeDateModule,
   MatPseudoCheckbox,
   MatPseudoCheckboxModule,

diff --git a/src/material-experimental/mdc-list/BUILD.bazel b/src/material-experimental/mdc-list/BUILD.bazel
@@ -26,6 +26,7 @@ ng_module(
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/collections",
+        "//src/cdk/observers",
         "//src/material-experimental/mdc-core",
         "//src/material/divider",
         "//src/material/list",