feat(list): allow avatar in selection list options (#10316)

Author: tinayuangao

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

@@ -119,6 +119,20 @@ <h3 mat-subheader>Groceries</h3>
       <mat-list-option value="strawberries">Strawberries</mat-list-option>
     </mat-selection-list>
 
+    <mat-selection-list>
+      <h3 mat-subheader>Dogs</h3>
+
+      <mat-list-option checkboxPosition="before">
+        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
+        <span matLine>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>
+      </mat-list-option>
+    </mat-selection-list>
+
     <p>Selected: {{selectedOptions | json}}</p>
     <p>Change Event Count {{changeEventCount}}</p>
     <p>Model Change Event Count {{modelChangeEventCount}}</p>

src/lib/list/list-option.html

@@ -12,4 +12,7 @@
 
   <div class="mat-list-text" #text><ng-content></ng-content></div>
 
+  <ng-content select="[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]">
+  </ng-content>
+
 </div>

src/lib/list/list.scss

@@ -102,27 +102,36 @@ $mat-list-item-inset-divider-offset: 72px;
     padding: 0;
   }
 
-  // There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
-  // list-item. This means that there should be a padding for the mat-list-text on the start-side.
-  .mat-list-item-content .mat-list-text:not(:nth-child(2)) {
-    padding-right: 0;
-    padding-left: $mat-list-side-padding;
+  &.mat-list-item-with-avatar,
+  &.mat-list-option {
+    .mat-list-item-content .mat-list-text {
+      padding-right: 0;
+      padding-left: $mat-list-side-padding;
 
-    [dir='rtl'] & {
-      padding-right: $mat-list-side-padding;
-      padding-left: 0;
+      [dir='rtl'] & {
+        padding-right: $mat-list-side-padding;
+        padding-left: 0;
+      }
     }
-  }
 
-  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
-  // end of the list option. Since there is a secondary item (checkbox) at the end of the
-  // option, there needs to be a padding for the mat-list-text on the end-side.
-  .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)) {
-    padding-left: 0;
-    padding-right: $mat-list-side-padding;
+    // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
+    // end of the list option. Since there is a secondary item (checkbox) at the end of the
+    // option, there needs to be a padding for the mat-list-text on the end-side.
+    .mat-list-item-content-reverse .mat-list-text {
+      padding-left: 0;
+      padding-right: $mat-list-side-padding;
 
-    [dir='rtl'] & {
-      padding-right: 0;
+      [dir='rtl'] & {
+        padding-right: 0;
+        padding-left: $mat-list-side-padding;
+      }
+    }
+   }
+
+  &.mat-list-item-with-avatar.mat-list-option {
+    .mat-list-item-content-reverse .mat-list-text,
+    .mat-list-item-content .mat-list-text {
+      padding-right: $mat-list-side-padding;
       padding-left: $mat-list-side-padding;
     }
   }

src/lib/list/list.ts

@@ -97,8 +97,8 @@ export class MatListSubheaderCssMatStyler {}
   host: {
     'class': 'mat-list-item',
     // @deletion-target 7.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`.
-    '[class.mat-list-item-avatar]': '_avatar',
-    '[class.mat-list-item-with-avatar]': '_avatar',
+    '[class.mat-list-item-avatar]': '_avatar || _icon',
+    '[class.mat-list-item-with-avatar]': '_avatar || _icon',
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
   },
@@ -113,6 +113,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
 
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
   @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
+  @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;
 
   constructor(private _element: ElementRef,
               @Optional() private _navList: MatNavList) {

src/lib/list/selection-list.ts

@@ -16,6 +16,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ContentChild,
   ContentChildren,
   ElementRef,
   EventEmitter,
@@ -37,6 +38,7 @@ import {
 } from '@angular/material/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Subscription} from 'rxjs';
+import {MatListAvatarCssMatStyler} from './list';
 
 
 /** @docs-private */
@@ -82,6 +84,7 @@ export class MatSelectionListChange {
     'tabindex': '-1',
     '[class.mat-list-item-disabled]': 'disabled',
     '[class.mat-list-item-focus]': '_hasFocus',
+    '[class.mat-list-item-with-avatar]': '_avatar',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
   },
@@ -98,6 +101,7 @@ export class MatListOption extends _MatListOptionMixinBase
   /** Whether the option has focus. */
   _hasFocus: boolean = false;
 
+  @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
 
   /** DOM element containing the item's text. */