fix(list): ensure list items are aligned vertically (#437)

Fixes #436

Author: dlabrecq

src/app/list/basic-list/list.component.html

@@ -15,7 +15,7 @@
       </div>
       <!-- content -->
       <div class="list-pf-content list-pf-content-flex">
-        <div class="pfng-list-content">
+        <div class="pfng-list-heading">
           <ng-template *ngIf="itemHeadingTemplate"
                        [ngTemplateOutlet]="itemHeadingTemplate"
                        [ngTemplateOutletContext]="{ item: item, index: i }">
@@ -74,7 +74,7 @@
       </div>
       <!-- content -->
       <div class="list-pf-content list-pf-content-flex">
-        <div class="pfng-list-content"
+        <div class="list-pf-content list-pf-content-flex"
              (click)="toggleSelection($event, item)"
              (dblclick)="dblClick($event, item)">
           <ng-template *ngIf="itemTemplate"

src/app/list/basic-list/list.component.less

@@ -3,8 +3,8 @@
   width: 12px;
 }
 
-// Container for item click events
-.pfng-list-content {
+// Container for item heading
+.pfng-list-heading {
   display: flex;
   flex-grow: 1;
 }

src/app/list/basic-list/list.component.spec.ts

@@ -117,7 +117,8 @@ describe('List component - ', () => {
   });
 
   it('should add active class to clicked list item', function() {
-    let listItems = fixture.debugElement.queryAll(By.css('.pfng-list-content'));
+    let listItems = fixture.debugElement.queryAll(By.css(
+      '.list-pf-content.list-pf-content-flex .list-pf-content.list-pf-content-flex'));
     let selectedItems = fixture.debugElement.queryAll(By.css('.active'));
 
     expect(selectedItems.length).toBe(0);
@@ -135,7 +136,8 @@ describe('List component - ', () => {
   });
 
   it('should manage selected items', function() {
-    let listItems = fixture.debugElement.queryAll(By.css('.pfng-list-content'));
+    let listItems = fixture.debugElement.queryAll(By.css(
+      '.list-pf-content.list-pf-content-flex .list-pf-content.list-pf-content-flex'));
     let selectedItems = fixture.debugElement.queryAll(By.css('.active'));
 
     // allow item selection
@@ -151,7 +153,8 @@ describe('List component - ', () => {
   });
 
   it('should respect the multiSelect setting', function() {
-    let listItems = fixture.debugElement.queryAll(By.css('.pfng-list-content'));
+    let listItems = fixture.debugElement.queryAll(By.css(
+      '.list-pf-content.list-pf-content-flex .list-pf-content.list-pf-content-flex'));
     let selectedItems = fixture.debugElement.queryAll(By.css('.active'));
 
     expect(selectedItems.length).toBe(0);