From a2e94626dbe683b41516dbfccc10dea83ac07640 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Mon, 11 Dec 2017 13:23:56 -0500
Subject: [PATCH] test(components): update tests to match v3

---
 .../action-sheet/test/basic/index.html        |   2 +-
 .../components/badge/test/basic/index.html    |  70 +++--
 .../components/button/test/basic/index.html   |  78 +++++-
 .../components/button/test/round/index.html   |  43 ++-
 .../src/components/card/test/basic/index.html | 226 ++--------------
 .../card/test/translucent/index.html          | 245 ++++++++++++++++++
 .../components/item/test/buttons/index.html   | 127 +++++++--
 7 files changed, 522 insertions(+), 269 deletions(-)
 create mode 100644 packages/core/src/components/card/test/translucent/index.html

diff --git a/packages/core/src/components/action-sheet/test/basic/index.html b/packages/core/src/components/action-sheet/test/basic/index.html
index 9198c22449..418bb46944 100644
--- a/packages/core/src/components/action-sheet/test/basic/index.html
+++ b/packages/core/src/components/action-sheet/test/basic/index.html
@@ -21,12 +21,12 @@
         <ion-action-sheet-controller></ion-action-sheet-controller>
 
         <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
         <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
         <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
         <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
         <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
         <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+        <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
         <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
 
       </ion-content>
diff --git a/packages/core/src/components/badge/test/basic/index.html b/packages/core/src/components/badge/test/basic/index.html
index 886862f5f1..6951934c5b 100644
--- a/packages/core/src/components/badge/test/basic/index.html
+++ b/packages/core/src/components/badge/test/basic/index.html
@@ -19,44 +19,76 @@
 
       <ion-content>
         <ion-list>
+          <ion-list-header>Badges Right</ion-list-header>
           <ion-item>
-            <ion-badge slot="start" color="primary">11</ion-badge>
-            <ion-label>Primary</ion-label>
+            <ion-badge slot="end" color="primary">99</ion-badge>
+            <ion-label>Default Badge</ion-label>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="secondary">22</ion-badge>
-            <ion-label>Secondary</ion-label>
+            <ion-badge slot="end" color="primary">99</ion-badge>
+            <ion-label>Primary Badge</ion-label>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="danger">33</ion-badge>
-            <ion-label>Danger</ion-label>
+            <ion-badge slot="end" color="secondary">99</ion-badge>
+            <ion-label>Secondary Badge</ion-label>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="light">44</ion-badge>
-            <ion-label>Light</ion-label>
+            <ion-badge slot="end" color="danger">99</ion-badge>
+            <ion-label>Danger Badge</ion-label>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="dark">55</ion-badge>
-            <ion-label>Dark</ion-label>
+            <ion-badge slot="end" color="light">99</ion-badge>
+            <ion-label>Light Badge</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="end" color="dark">99</ion-badge>
+            <ion-label>Dark Badge</ion-label>
+          </ion-item>
+          <ion-item onclick="toggleColor()">
+            <ion-badge id="toggleColor" slot="end" color="primary">99</ion-badge>
+            <ion-label>Dynamic Badge Color (toggle)</ion-label>
           </ion-item>
         </ion-list>
 
-        <ion-button onclick="toggleColors()">Toggle Colors</ion-button>
+        <ion-list>
+          <ion-list-header>Badges Left</ion-list-header>
+          <ion-item>
+            <ion-badge slot="start" color="primary">99</ion-badge>
+            <ion-label>Default Badge</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="start" color="primary">99</ion-badge>
+            <ion-label>Primary Badge</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="start" color="secondary">99</ion-badge>
+            <ion-label>Secondary Badge</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="start" color="danger">99</ion-badge>
+            <ion-label>Danger Badge</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="start" color="light">99</ion-badge>
+            <ion-label>Light Badge</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-badge slot="start" color="dark">99</ion-badge>
+            <ion-label>Dark Badge</ion-label>
+          </ion-item>
+        </ion-list>
       </ion-content>
 
     </ion-page>
   </ion-app>
 
   <script>
-    const badges = [...document.querySelectorAll('ion-badge')];
-    const baseColors = badges.map(el => el.getAttribute('color'));
+    const badge = document.querySelector('#toggleColor');
 
-    function toggleColors() {
-      badges.forEach((el, i) => {
-        const prev = el.getAttribute('color');
-        const base = baseColors[i];
-        el.setAttribute('color', prev === base ? null : base);
-      });
+    function toggleColor() {
+      const prev = badge.getAttribute('color');
+      const base = 'secondary';
+      badge.setAttribute('color', prev === base ? null : base);
     }
   </script>
 </body>
diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
index 07e1c85fc0..1aa319ade0 100644
--- a/packages/core/src/components/button/test/basic/index.html
+++ b/packages/core/src/components/button/test/basic/index.html
@@ -9,22 +9,72 @@
 <body>
   <ion-app>
     <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Button - Basic</ion-title>
-          </ion-toolbar>
-        </ion-header>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Button - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-        <ion-content padding no-bounce>
-          <p><ion-button>Default</ion-button></p>
-          <p><ion-button color="primary">Primary</ion-button></p>
-          <p><ion-button color="secondary">Secondary</ion-button></p>
-          <p><ion-button color="danger">Danger</ion-button></p>
-          <p><ion-button color="light">Light</ion-button></p>
-          <p><ion-button color="dark">Dark</ion-button></p>
-          <p><ion-button disabled>Disabled</ion-button></p>
-        </ion-content>
+      <ion-content padding no-bounce text-center>
+        <p>
+          <ion-button>Default</ion-button>
+          <ion-button class="activated">Default.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="primary">Primary</ion-button>
+          <ion-button color="primary" class="activated">Primary.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="secondary">Secondary</ion-button>
+          <ion-button color="secondary" class="activated">Secondary.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="danger">Danger</ion-button>
+          <ion-button color="danger" class="activated">Danger.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="light">Light</ion-button>
+          <ion-button color="light" class="activated">Light.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="dark">Dark</ion-button>
+          <ion-button color="dark" class="activated">Dark.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button disabled>Button Disabled</ion-button>
+          <ion-button color="secondary" disabled>Secondary Disabled</ion-button>
+        </p>
+
+        <p>
+          <ion-button id="dynamicColor1" onclick="changeColor(event)">Change Color</ion-button>
+          <ion-button id="dynamicColor2" onclick="changeColor(event)" fill="outline">Change Color</ion-button>
+        </p>
+
+      </ion-content>
     </ion-page>
   </ion-app>
+
+  <script>
+    testingColors = ['primary', 'secondary', 'danger', 'dark'];
+    testingColorIndex = {
+      dynamicColor1: 0,
+      dynamicColor2: 0
+    };
+
+    function changeColor(ev) {
+      el = ev.currentTarget;
+
+      testingColorIndex[el.id] = (testingColorIndex[el.id] >= testingColors.length - 1 ? 0 : testingColorIndex[el.id] + 1);
+      newColor = testingColors[testingColorIndex[el.id]];
+
+      el.color = newColor;
+    }
+  </script>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/round/index.html b/packages/core/src/components/button/test/round/index.html
index 23c9707a8a..a2cfa12e08 100644
--- a/packages/core/src/components/button/test/round/index.html
+++ b/packages/core/src/components/button/test/round/index.html
@@ -9,21 +9,38 @@
 <body>
   <ion-app>
     <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Button - Round</ion-title>
-          </ion-toolbar>
-        </ion-header>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Button - Round</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-        <ion-content padding no-bounce>
-          <p><ion-button round>Default</ion-button></p>
-          <p><ion-button round fill="outline" color="secondary">Outline</ion-button></p>
-          <p><ion-button round fill="clear">Clear</ion-button></p>
-          <p><ion-button round expand="block" color="danger">Block</ion-button></p>
-          <p><ion-button round expand="full" color="dark">Full</ion-button></p>
-          <p><ion-button round strong>Strong</ion-button></p>
-        </ion-content>
+      <ion-content padding text-center no-bounce>
+        <ion-button round>Button</ion-button>
+        <ion-button round color="light">Button Light</ion-button>
+        <ion-button round color="secondary">Button Secondary</ion-button>
+        <ion-button round color="danger">Button Danger</ion-button>
+        <ion-button round color="dark">Button Dark</ion-button>
+
+        <ion-button fill="outline" round>Button</ion-button>
+        <ion-button fill="outline" round color="light">Button Light</ion-button>
+        <ion-button fill="outline" round color="secondary">Button Secondary</ion-button>
+        <ion-button fill="outline" round color="danger">Button Danger</ion-button>
+        <ion-button fill="outline" round color="dark">Button Dark</ion-button>
+
+        <ion-button round fill="clear">Clear</ion-button>
+        <ion-button round expand="block" color="danger">Block</ion-button>
+        <ion-button round expand="full" color="dark">Full</ion-button>
+        <ion-button round strong>Strong</ion-button>
+      </ion-content>
     </ion-page>
   </ion-app>
+
+  <style>
+    ion-button {
+      display: block !important;
+      margin: 8px auto !important;
+    }
+  </style>
 </body>
 </html>
diff --git a/packages/core/src/components/card/test/basic/index.html b/packages/core/src/components/card/test/basic/index.html
index cd1bfe5606..45ea106f58 100644
--- a/packages/core/src/components/card/test/basic/index.html
+++ b/packages/core/src/components/card/test/basic/index.html
@@ -17,225 +17,51 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content fullscreen="true">
-        <ion-card>
-          <ion-card-content>
-            This is just your basic card with some text to boot. Like it? Keep scrolling...
-          </ion-card-content>
-        </ion-card>
-
+      <ion-content>
         <ion-card>
           <ion-card-header>
-            <ion-card-subtitle>
-              Subtitle
-            </ion-card-subtitle>
-            <ion-card-title>
-              Title
-            </ion-card-title>
+            <ion-card-title>Card Header</ion-card-title>
           </ion-card-header>
 
           <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+            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.
           </ion-card-content>
         </ion-card>
 
         <ion-card>
-          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
-            <img style="transform: rotate(145deg) scale(1.5)" src="http://images.all-free-download.com/images/graphiclarge/travel_icons_6813629.jpg">
-          </div>
-          <ion-card-header translucent>
-            <ion-card-subtitle>
-              Subtitle
-            </ion-card-subtitle>
-            <ion-card-title>
-              Title
-            </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content style="min-height: 200px">
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card style="color: white;">
-          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
-            <img style="transform: scale(2)" src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
-          </div>
-          <ion-card-header translucent>
-            <ion-card-subtitle>
-              Subtitle
-            </ion-card-subtitle>
-            <ion-card-title>
-              Title
-            </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content style="padding-top: 100px">
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
-            <img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
-          </div>
-
-          <ion-card-header>
-            <ion-card-subtitle>
-              Subtitle
-            </ion-card-subtitle>
-            <ion-card-title>
-              Title
-            </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-content>
-            <ion-card-title>
-              Card Title Goes Here
-            </ion-card-title>
-            <p>
-              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element.
-            </p>
-          </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col no-padding>
-                <ion-button clear small>
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-col>
-              <ion-col no-padding text-right>
-                <ion-button clear small class="activated">
-                  <ion-icon slot="start" name="share"></ion-icon>
-                  Activated
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-        </ion-card>
-
-        <ion-card class="cards-list-demo">
-          <ion-card-header>
-            Explore Nearby
-          </ion-card-header>
-
-          <ion-list>
-            <ion-item>
-              <ion-icon name='cart' item-start></ion-icon>
-              Shopping
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name='medical' item-start></ion-icon>
-              Hospital
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name='cafe' item-start></ion-icon>
-              Cafe
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name='paw' item-start></ion-icon>
-              Dog Park
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name='beer' item-start></ion-icon>
-              Pub
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name='planet' item-start></ion-icon>
-              Space
-            </ion-item>
-
-          </ion-list>
-        </ion-card>
-
-        <ion-card>
-
           <ion-item>
-            <ion-avatar item-start>
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-            </ion-avatar>
-            <h2>Card With An Inset Picture</h2>
-            <p>Isn't it beautiful</p>
+            <ion-icon name="pin" slot="start"></ion-icon>
+            ion-item in a card, icon left, button right
+            <ion-button fill="outline" slot="end">View</ion-button>
           </ion-item>
 
-          <div>
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-          </div>
-
           <ion-card-content>
-            <p>Hello. I am a paragraph.</p>
+            This is content, without any paragraph or header tags,
+            within an ion-card-content element.
           </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col no-padding>
-                <ion-button clear small>
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Favorite
-                </ion-button>
-              </ion-col>
-              <ion-col no-padding text-center>
-                <ion-button clear small>
-                  <ion-icon slot="start" name="musical-notes"></ion-icon>
-                  Listen
-                </ion-button>
-              </ion-col>
-              <ion-col no-padding align-self-center padding-right text-right>
-                <ion-note>
-                  11h ago
-                </ion-note>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
         </ion-card>
 
-        <ion-card no-margin>
+        <ion-card>
+          <ion-item href="#" class="activated">
+            <ion-icon name="wifi" slot="start"></ion-icon>
+            Card Link Item 1 .activated
+          </ion-item>
 
-          <div>
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-          </div>
+          <ion-item href="#">
+            <ion-icon name="wine" slot="start"></ion-icon>
+            Card Link Item 2
+          </ion-item>
 
-          <ion-card-content>
-            ion-card[no-margin] This card was breaking the border radius.
-          </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col no-padding>
-                <ion-button clear small dark>
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Favorite
-                </ion-button>
-              </ion-col>
-
-              <ion-col no-padding text-center>
-                <ion-button clear small dark>
-                  <ion-icon slot="start" name="musical-notes"></ion-icon>
-                  Listen
-                </ion-button>
-              </ion-col>
-              <ion-col no-padding text-right>
-                <ion-button clear small dark>
-                  <ion-icon slot="start" name="share-alt"></ion-icon>
-                  Share
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
+          <ion-item class="activated">
+            <ion-icon name="warning" slot="start"></ion-icon>
+            Card Button Item 1 .activated
+          </ion-item>
 
+          <ion-item>
+            <ion-icon name="walk" slot="start"></ion-icon>
+            Card Button Item 2
+          </ion-item>
         </ion-card>
       </ion-content>
     </ion-page>
diff --git a/packages/core/src/components/card/test/translucent/index.html b/packages/core/src/components/card/test/translucent/index.html
new file mode 100644
index 0000000000..cd1bfe5606
--- /dev/null
+++ b/packages/core/src/components/card/test/translucent/index.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Card - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Card - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content fullscreen="true">
+        <ion-card>
+          <ion-card-content>
+            This is just your basic card with some text to boot. Like it? Keep scrolling...
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title>
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
+            <img style="transform: rotate(145deg) scale(1.5)" src="http://images.all-free-download.com/images/graphiclarge/travel_icons_6813629.jpg">
+          </div>
+          <ion-card-header translucent>
+            <ion-card-subtitle>
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title>
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content style="min-height: 200px">
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card style="color: white;">
+          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
+            <img style="transform: scale(2)" src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          </div>
+          <ion-card-header translucent>
+            <ion-card-subtitle>
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title>
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content style="padding-top: 100px">
+            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
+            <img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          </div>
+
+          <ion-card-header>
+            <ion-card-subtitle>
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title>
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <ion-card-content>
+            <ion-card-title>
+              Card Title Goes Here
+            </ion-card-title>
+            <p>
+              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element.
+            </p>
+          </ion-card-content>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col no-padding>
+                <ion-button clear small>
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding text-right>
+                <ion-button clear small class="activated">
+                  <ion-icon slot="start" name="share"></ion-icon>
+                  Activated
+                </ion-button>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+        </ion-card>
+
+        <ion-card class="cards-list-demo">
+          <ion-card-header>
+            Explore Nearby
+          </ion-card-header>
+
+          <ion-list>
+            <ion-item>
+              <ion-icon name='cart' item-start></ion-icon>
+              Shopping
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='medical' item-start></ion-icon>
+              Hospital
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='cafe' item-start></ion-icon>
+              Cafe
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='paw' item-start></ion-icon>
+              Dog Park
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='beer' item-start></ion-icon>
+              Pub
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='planet' item-start></ion-icon>
+              Space
+            </ion-item>
+
+          </ion-list>
+        </ion-card>
+
+        <ion-card>
+
+          <ion-item>
+            <ion-avatar item-start>
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+            </ion-avatar>
+            <h2>Card With An Inset Picture</h2>
+            <p>Isn't it beautiful</p>
+          </ion-item>
+
+          <div>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </div>
+
+          <ion-card-content>
+            <p>Hello. I am a paragraph.</p>
+          </ion-card-content>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col no-padding>
+                <ion-button clear small>
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Favorite
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding text-center>
+                <ion-button clear small>
+                  <ion-icon slot="start" name="musical-notes"></ion-icon>
+                  Listen
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding align-self-center padding-right text-right>
+                <ion-note>
+                  11h ago
+                </ion-note>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </ion-card>
+
+        <ion-card no-margin>
+
+          <div>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </div>
+
+          <ion-card-content>
+            ion-card[no-margin] This card was breaking the border radius.
+          </ion-card-content>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col no-padding>
+                <ion-button clear small dark>
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Favorite
+                </ion-button>
+              </ion-col>
+
+              <ion-col no-padding text-center>
+                <ion-button clear small dark>
+                  <ion-icon slot="start" name="musical-notes"></ion-icon>
+                  Listen
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding text-right>
+                <ion-button clear small dark>
+                  <ion-icon slot="start" name="share-alt"></ion-icon>
+                  Share
+                </ion-button>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+        </ion-card>
+      </ion-content>
+    </ion-page>
+  </ion-app>
+</body>
+
+</html>
diff --git a/packages/core/src/components/item/test/buttons/index.html b/packages/core/src/components/item/test/buttons/index.html
index 64ba69cd4b..e3239df6da 100644
--- a/packages/core/src/components/item/test/buttons/index.html
+++ b/packages/core/src/components/item/test/buttons/index.html
@@ -25,48 +25,131 @@
       </ion-header>
 
       <ion-content>
-        <ion-item>
-          <ion-label>Item Icons</ion-label>
-          <ion-icon name="heart" slot="end"></ion-icon>
-          <ion-icon name="star" slot="start"></ion-icon>
+        <ion-item href="#" onclick="testClick(event)">
+          a[ion-item]
+        </ion-item>
+
+        <ion-item class="activated" href="#" onclick="testClick(event)">
+          a[ion-item].activated
+        </ion-item>
+
+        <ion-item color="secondary" href="#" onclick="testClick(event)">
+          a[ion-item] secondary
+        </ion-item>
+
+        <ion-item onclick="testClick(event)">
+          button[ion-item]
+        </ion-item>
+
+        <ion-item class="activated" (click)="testClick(event)">
+          button[ion-item].activated
+        </ion-item>
+
+        <ion-item color="danger" (click)="testClick(event)">
+          button[ion-item] danger
+        </ion-item>
+
+        <ion-item onclick="testClickOutsize(event)">
+          <ion-button slot="start" onclick="testClick(event)">Default</ion-button>
+          Inner Buttons
+          <ion-button fill="outline" slot="end" onclick="testClick(event)">Outline</ion-button>
+        </ion-item>
+
+        <ion-item disabled>
+          <ion-button slot="start" onclick="testClick(event)">
+            <ion-icon slot="start" name="home"></ion-icon>
+            Left Icon
+          </ion-button>
+          disabled left icon buttons
+          <ion-button fill="outline" slot="end" onclick="testClick(event)">
+            <ion-icon slot="start" name="star"></ion-icon>
+            Left Icon
+          </ion-button>
         </ion-item>
 
         <ion-item>
-          <ion-label>Item No Size Button</ion-label>
-          <ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
-          <ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+          <ion-button slot="start" icon-end onclick="testClick(event)">
+            Right Icon
+            <ion-icon name="home"></ion-icon>
+          </ion-button>
+          right icon buttons
+          <ion-button fill="outline" slot="end" icon-end onclick="testClick(event)">
+            Right Icon
+            <ion-icon name="star"></ion-icon>
+          </ion-button>
         </ion-item>
 
         <ion-item>
-          <ion-label>Item Outline Button</ion-label>
-          <ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
-          <ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+          <ion-button fill="clear" slot="start" size="default" onclick="testClick(event)">
+            <ion-icon slot="icon-only" name="navigate"></ion-icon>
+          </ion-button>
+          icon only buttons default
+          <ion-button fill="clear" slot="end" size="default" onclick="testClick(event)">
+            <ion-icon slot="icon-only" name="navigate"></ion-icon>
+          </ion-button>
+        </ion-item>
+
+        <ion-item disabled onclick="testClick(event)">
+          ion-item disabled right icon/text button large
+          <ion-button slot="end" size="large" onclick="testClick(event)">
+            <ion-icon slot="start" name="refresh"></ion-icon>
+            Refresh
+          </ion-button>
         </ion-item>
 
         <ion-item>
-          <ion-label>Item Large Button</ion-label>
-          <ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
+          <ion-button fill="clear" slot="start" size="small" onclick="testClick(event)">
+            <ion-icon slot="start" name="settings"></ion-icon>
+            Settings
+          </ion-button>
+          ion-item left fill="clear" button small
         </ion-item>
 
         <ion-item>
-          <ion-label>Item Large Button</ion-label>
-          <ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+          ion-item right fill="clear" button
+          <ion-button secondary fill="clear" slot="end" onclick="testClick(event)">
+            Edit
+          </ion-button>
         </ion-item>
 
-        <ion-item>
-          <ion-label>Item Small Button</ion-label>
-          <ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
-          <ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+        <ion-item text-wrap>
+          This is multiline text that has a
+          long description of about how the text is really long
+          and a <a href="#" onclick="testClick(event)">link</a>.
+          <ion-button fill="outline" slot="end" onclick="testClick(event)">View</ion-button>
         </ion-item>
 
-        <ion-item>
-          <ion-label>Item Default Button</ion-label>
-          <ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
-          <ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+        <ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" onclick="testClick(event)">
+          <ion-avatar slot="start">
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-avatar>
+          <h3>ng-for {{i}}</h3>
+          <ion-badge slot="end">260k</ion-badge>
+        </ion-button>
+
+        <ion-item onclick="testClickOutsize(event)">
+          <div>
+            <ion-button fill="clear" slot="end" onclick="testClick(event)">
+              <ion-icon slot="icon-only" name="remove-circle"></ion-icon>
+            </ion-button>
+            <ion-button fill="clear" slot="end" onclick="testClick(event)">
+              <ion-icon slot="icon-only" name="add-circle"></ion-icon>
+            </ion-button>
+          </div>
         </ion-item>
 
       </ion-content>
     </ion-page>
   </ion-app>
+
+  <script>
+    function testClick(ev) {
+      console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
+    }
+
+    function testClickOutsize(ev) {
+      console.log('CLICK OUTSIDE!', ev.target.tagName, ev.target.textContent.trim());
+    }
+  </script>
 </body>
 </html>