From e7b872ac2a943e357ab2954d1098b0ff199a5fb1 Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Tue, 11 Oct 2016 09:02:58 -0700
Subject: [PATCH] fix(list): ensure multi-line lists expand to fill space
 (#1466)

---
 src/lib/core/line/line.ts |  3 +++
 src/lib/list/list.scss    |  8 ++++++++
 src/lib/list/list.spec.ts | 21 +++++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts
index 985814c9c4ed..38b34fa17de1 100644
--- a/src/lib/core/line/line.ts
+++ b/src/lib/core/line/line.ts
@@ -30,12 +30,15 @@ export class MdLineSetter {
     this._resetClasses();
     if (count === 2 || count === 3) {
       this._setClass(`md-${count}-line`, true);
+    } else if (count > 3) {
+      this._setClass(`md-multi-line`, true);
     }
   }
 
   private _resetClasses(): void {
     this._setClass('md-2-line', false);
     this._setClass('md-3-line', false);
+    this._setClass('md-multi-line', false);
   }
 
   private _setClass(className: string, bool: boolean): void {
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index ac7190559c98..f09ac26b357f 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -50,10 +50,18 @@ $md-dense-three-line-height: 76px;
     height: $two-line-height;
   }
 
+
   &.md-3-line .md-list-item {
     height: $three-line-height;
   }
 
+  // list items with more than 3 lines should expand to match
+  // the height of its contained text
+  &.md-multi-line .md-list-item {
+    height: 100%;
+    padding: 8px $md-list-side-padding;
+  }
+
   .md-list-text {
     @include md-line-wrapper-base();
     padding: 0 $md-list-side-padding;
diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
index b74a839a04c6..d8ebef1c604b 100644
--- a/src/lib/list/list.spec.ts
+++ b/src/lib/list/list.spec.ts
@@ -18,6 +18,7 @@ describe('MdList', () => {
         ListWithItemWithCssClass,
         ListWithDynamicNumberOfLines,
         ListWithMultipleItems,
+        ListWithManyLines,
       ],
     });
 
@@ -65,6 +66,15 @@ describe('MdList', () => {
     expect(listItems[1].nativeElement.className).toBe('md-3-line');
   });
 
+  it('should apply md-multi-line class to lists with more than 3 lines', () => {
+    let fixture = TestBed.createComponent(ListWithManyLines);
+    fixture.detectChanges();
+
+    let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
+    expect(listItems[0].nativeElement.className).toBe('md-multi-line');
+    expect(listItems[1].nativeElement.className).toBe('md-multi-line');
+  });
+
   it('should apply md-list-avatar class to list items with avatars', () => {
     let fixture = TestBed.createComponent(ListWithAvatar);
     fixture.detectChanges();
@@ -152,6 +162,17 @@ class ListWithTwoLineItem extends BaseTestList { }
   </md-list>`})
 class ListWithThreeLineItem extends BaseTestList { }
 
+@Component({template: `
+  <md-list>
+    <md-list-item *ngFor="let item of items">
+      <h3 md-line>Line 1</h3>
+      <p md-line>Line 2</p>
+      <p md-line>Line 3</p>
+      <p md-line>Line 4</p>
+    </md-list-item>
+  </md-list>`})
+class ListWithManyLines extends BaseTestList { }
+
 @Component({template: `
   <md-list>
     <md-list-item>