inset lists, card updates

ionic/components/list/test/headers-footers/main.html

@@ -2,9 +2,9 @@
 
 <ion-list>
 
-  <ion-list-header>
+  <ion-header>
     List Header
-  </ion-list-header>
+  </ion-header>
 
   <div class="item">
     <icon name="ion-wifi"></icon>
@@ -30,9 +30,9 @@
 
 <ion-list>
 
-  <ion-list-header>
+  <ion-header>
     List Header
-  </ion-list-header>
+  </ion-header>
 
   <div class="item">
     <icon name="ion-wand"></icon>
@@ -44,17 +44,17 @@
     </div>
   </div>
 
-  <ion-list-footer>
+  <ion-footer>
     List Footer
-  </ion-list-footer>
+  </ion-footer>
 
 </ion-list>
 
 <ion-list>
 
-  <ion-list-header>
+  <ion-header>
     List Header with text that is too long to fit inside the list header
-  </ion-list-header>
+  </ion-header>
 
   <div class="item">
     <icon name="ion-pizza"></icon>
@@ -76,8 +76,8 @@
     </div>
   </div>
 
-  <ion-list-footer>
+  <ion-footer>
     List Footer with text that is also too long why do you do this all the time plz stop its too long!
-  </ion-list-footer>
+  </ion-footer>
 
 </ion-list>

ionic/components/list/test/inset/e2e.ts

@@ -0,0 +1 @@
+

ionic/components/list/test/inset/index.ts

@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {}

ionic/components/list/test/inset/main.html

@@ -0,0 +1,67 @@
+
+<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar>
+
+
+<ion-list inset>
+  <ion-header>
+    Inset List Header
+  </ion-header>
+  <div class="item item-text-wrap">
+    <div class="item-content">
+      Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
+    </div>
+  </div>
+  <ion-footer>
+    List Footer
+  </ion-footer>
+</ion-list>
+
+
+<ion-list inset>
+
+  <div class="item">
+    <icon name="ion-location"></icon>
+    <div class="item-content">
+      All Out Inset List
+    </div>
+    <button outline>View</button>
+  </div>
+
+  <div class="item item-text-wrap">
+    <div class="item-content">
+      This is a multiline content within a list that should
+      take up multiple lines and stuff.
+    </div>
+  </div>
+
+  <div class="item">
+    <div class="item-content">
+      <icon small name="ion-star"></icon>
+      <span>255</span>
+    </div>
+    <div class="item-content">
+      <icon small name="ion-reply"></icon>
+      <span>Reply</span>
+    </div>
+    <div class="item-content">
+      <icon small name="ion-forward"></icon>
+      Forward
+    </div>
+  </div>
+
+  <ion-footer>
+    list Footer
+  </ion-footer>
+
+</ion-list>
+
+
+<ion-list inset>
+
+  <div class="item">
+    <div class="item-content">
+      Inset List, no header or footer
+    </div>
+  </div>
+
+</ion-list>