fix(list): align avatar size in dense list with spec (#10028)

* Fixes the dense list avatar being slightly larger than the spec. * Removes an unnecessary setter from the `MatListItem` class. Fixes #10019.
angular · Feb 26, 2018 · d4a4f61 · d4a4f61
1 parent 77c8d8f
commit d4a4f61
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
@@ -28,13 +28,14 @@ $mat-dense-two-line-height: 60px;
 $mat-dense-three-line-height: 76px;
 $mat-dense-multi-line-padding: 16px;
 $mat-dense-list-icon-size: 20px;
+$mat-dense-avatar-size: 36px;
 
 $mat-list-item-inset-divider-offset: 72px;
 
 // This mixin provides all list-item styles, changing font size and height
 // based on whether the list is in dense mode.
-@mixin mat-list-item-base($base-height, $avatar-height, $two-line-height,
-  $three-line-height, $multi-line-padding, $icon-size) {
+@mixin mat-list-item-base($base-height, $height-with-avatar, $two-line-height,
+  $three-line-height, $multi-line-padding, $icon-size, $avatar-size) {
 
   // Prevents the wrapper `mat-list-item-content` from collapsing due to it
   // being `inline` by default.
@@ -68,8 +69,8 @@ $mat-list-item-inset-divider-offset: 72px;
     pointer-events: none;
   }
 
-  &.mat-list-item-avatar {
-    height: $avatar-height;
+  &.mat-list-item-with-avatar {
+    height: $height-with-avatar;
   }
 
   &.mat-2-line {
@@ -128,12 +129,12 @@ $mat-list-item-inset-divider-offset: 72px;
 
   .mat-list-avatar {
     flex-shrink: 0;
-    width: $mat-list-avatar-size;
-    height: $mat-list-avatar-size;
+    width: $avatar-size;
+    height: $avatar-size;
     border-radius: 50%;
 
     ~ .mat-divider-inset {
-      @include mat-inset-divider-offset($mat-list-avatar-size, $mat-list-side-padding);
+      @include mat-inset-divider-offset($avatar-size, $mat-list-side-padding);
     }
   }
 
@@ -210,7 +211,8 @@ $mat-list-item-inset-divider-offset: 72px;
       $mat-list-two-line-height,
       $mat-list-three-line-height,
       $mat-list-multi-line-padding,
-      $mat-list-icon-size
+      $mat-list-icon-size,
+      $mat-list-avatar-size
     );
   }
 }
@@ -232,7 +234,8 @@ $mat-list-item-inset-divider-offset: 72px;
       $mat-dense-two-line-height,
       $mat-dense-three-line-height,
       $mat-dense-multi-line-padding,
-      $mat-dense-list-icon-size
+      $mat-dense-list-icon-size,
+      $mat-dense-avatar-size
     );
   }
 }

diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
@@ -77,13 +77,13 @@ describe('MatList', () => {
     expect(listItems[1].nativeElement.className).toContain('mat-multi-line');
   });
 
-  it('should apply mat-list-avatar class to list items with avatars', () => {
+  it('should apply a class to list items with avatars', () => {
     let fixture = TestBed.createComponent(ListWithAvatar);
     fixture.detectChanges();
 
     let listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item'));
-    expect(listItems[0].nativeElement.className).toContain('mat-list-item-avatar');
-    expect(listItems[1].nativeElement.className).not.toContain('mat-list-item-avatar');
+    expect(listItems[0].nativeElement.className).toContain('mat-list-item-with-avatar');
+    expect(listItems[1].nativeElement.className).not.toContain('mat-list-item-with-avatar');
   });
 
   it('should not clear custom classes provided by user', () => {

diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
@@ -98,6 +98,9 @@ export class MatListSubheaderCssMatStyler {}
   exportAs: 'matListItem',
   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',
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
   },
@@ -112,15 +115,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
   private _isNavList: boolean = false;
 
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
-
-  @ContentChild(MatListAvatarCssMatStyler)
-  set _hasAvatar(avatar: MatListAvatarCssMatStyler) {
-    if (avatar != null) {
-      this._element.nativeElement.classList.add('mat-list-item-avatar');
-    } else {
-      this._element.nativeElement.classList.remove('mat-list-item-avatar');
-    }
-  }
+  @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
 
   constructor(private _element: ElementRef,
               @Optional() private _navList: MatNavList) {