From f8d1103eca4ed352d83ce4acf338a44489ad9bb4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 2 Jun 2016 15:35:05 -0400
Subject: [PATCH] docs(input): add clear input example to demo and update doc
 to reflect

closes driftyco/ionic-site#618
---
 demos/input/main.html               |  3 ++
 src/components/input/input.ios.scss |  1 -
 src/components/input/input.ts       | 51 ++++++++++++++++++-----------
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/demos/input/main.html b/demos/input/main.html
index 57c23cabbc..2a2c1d3c2e 100644
--- a/demos/input/main.html
+++ b/demos/input/main.html
@@ -33,5 +33,8 @@
       <ion-input></ion-input>
     </ion-item>
 
+    <ion-item>
+      <ion-input placeholder="Clear Input" clearInput></ion-input>
+    </ion-item>
   </ion-list>
 </ion-content>
diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss
index dabb02dd45..9f07c0e8b1 100644
--- a/src/components/input/input.ios.scss
+++ b/src/components/input/input.ios.scss
@@ -80,7 +80,6 @@ ion-input[clearInput] {
   bottom: 0;
 
   width: $text-input-ios-input-clear-icon-width;
-  height: 34px;
 
   background-size: $text-input-ios-input-clear-icon-size;
 }
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index b748e68545..6b4ada715a 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -30,33 +30,44 @@ import {Platform} from '../../platform/platform';
  * `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
  *
  * @property [type] - The HTML input type (text, password, email, number, search, tel, or url)
- * @property [clearInput] - A clear icon will appear in the input which clears it
+ * @property [clearInput] - A clear icon will appear in the input when there is a value. Clicking it clears the input.
  *
  * @usage
  * ```html
- *  <ion-item>
- *    <ion-label>Username</ion-label>
- *    <ion-input></ion-input>
- *  </ion-item>
+ * <ion-list>
+ *   <ion-item>
+ *     <ion-label primary>Inline Label</ion-label>
+ *     <ion-input placeholder="Text Input"></ion-input>
+ *   </ion-item>
  *
- *  <ion-item>
- *    <ion-label fixed>Website</ion-label>
- *    <ion-input type="url"></ion-input>
- *  </ion-item>
+ *   <ion-item>
+ *     <ion-label primary fixed>Fixed Label</ion-label>
+ *     <ion-input type="tel" placeholder="Tel Input"></ion-input>
+ *   </ion-item>
  *
- *  <ion-item>
- *    <ion-label floating>Email</ion-label>
- *    <ion-input type="email"></ion-input>
- *  </ion-item>
+ *   <ion-item>
+ *     <ion-input type="number" placeholder="Number Input with no label"></ion-input>
+ *   </ion-item>
  *
- *  <ion-item>
- *    <ion-label stacked>Phone</ion-label>
- *    <ion-input type="tel"></ion-input>
- *  </ion-item>
+ *   <ion-item>
+ *     <ion-label primary stacked>Stacked Label</ion-label>
+ *     <ion-input type="email" placeholder="Email Input"></ion-input>
+ *   </ion-item>
  *
- *  <ion-item>
- *    <ion-input placeholder="Username" clearInput></ion-input>
- *  </ion-item>
+ *   <ion-item>
+ *     <ion-label primary stacked>Stacked Label</ion-label>
+ *     <ion-input type="password" placeholder="Password Input"></ion-input>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label primary floating>Floating Label</ion-label>
+ *     <ion-input></ion-input>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-input placeholder="Clear Input" clearInput></ion-input>
+ *   </ion-item>
+ * </ion-list>
  * ```
  *
  * @demo /docs/v2/demos/input/