From fcd8a34dff95129f73353af0b79b8e4cdd8e5d7f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 6 Oct 2015 13:30:58 -0400
Subject: [PATCH] refactor(item): changed notes from a class to an element

Closes #251
---
 demos/component-docs/main.html               | 13 +++++------
 demos/icons/main.html                        | 24 ++++++++++----------
 demos/list/main.html                         | 24 ++++++++++----------
 ionic/components/item/item.ts                |  4 ++--
 ionic/components/item/modes/ios.scss         |  2 +-
 ionic/components/item/modes/md.scss          |  2 +-
 ionic/components/list/test/headers/main.html | 24 ++++++++++----------
 7 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index 0a42ef51b9..34e7fd0f9e 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -204,7 +204,7 @@
         </button>
       </ion-card-content>
 
-    </ion-card> 
+    </ion-card>
 
 
     <ion-card>
@@ -229,9 +229,9 @@
 
 
   </section>
-   
+
   <section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }" class="components-icons">
-    
+
     <ion-row>
       <ion-col><icon ionic></icon></ion-col>
       <ion-col><icon ion-social-angular></icon></ion-col>
@@ -344,7 +344,7 @@
       <ion-item>
         <icon call item-left></icon>
         Call Ron
-        <div class="item-note" item-right>Maybe later</div>
+        <ion-note item-right>Maybe later</ion-note>
       </ion-item>
 
     </ion-list>
@@ -389,9 +389,9 @@
 
 
   </section>
-  
+
   <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
-   
+
    <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
       <ion-slide>
         <div class="demo-slide demo-slide-1">
@@ -415,4 +415,3 @@
   </section>
 
 </ion-content>
-
diff --git a/demos/icons/main.html b/demos/icons/main.html
index 3ad3e73ac7..db1d77eaa9 100644
--- a/demos/icons/main.html
+++ b/demos/icons/main.html
@@ -19,17 +19,17 @@
   <ion-item>
     <icon heart item-left></icon>
     Affection
-    <div class="item-note" item-right>
+    <ion-note item-right>
       Very Little
-    </div>
+    </ion-note>
   </ion-item>
 
   <ion-item>
     <icon home item-left></icon>
     Home
-    <div class="item-note" item-right>
+    <ion-note item-right>
       Where the heart is
-    </div>
+    </ion-note>
   </ion-item>
 
   <ion-switch checked="true">
@@ -40,33 +40,33 @@
   <ion-item>
     <icon star item-left></icon>
     Star status
-    <div class="item-note" item-right>
+    <ion-note item-right>
       Super
-    </div>
+    </ion-note>
   </ion-item>
 
   <ion-item>
     <icon pizza item-left></icon>
     Pizza
-    <div class="item-note" item-right>
+    <ion-note item-right>
       Always
-    </div>
+    </ion-note>
   </ion-item>
 
   <ion-item>
     <icon beer item-left></icon>
     Beer
-    <div class="item-note" item-right>
+    <ion-note item-right>
       Yes Plz
-    </div>
+    </ion-note>
   </ion-item>
 
   <ion-item>
     <icon wine item-left></icon>
     Wine
-    <div class="item-note" item-right>
+    <ion-note item-right>
       All the time
-    </div>
+    </ion-note>
   </ion-item>
 
 </ion-list>
diff --git a/demos/list/main.html b/demos/list/main.html
index 02234cf7f5..1e3d7f18d6 100644
--- a/demos/list/main.html
+++ b/demos/list/main.html
@@ -16,17 +16,17 @@
     <ion-item>
       <icon heart item-left></icon>
       Affection
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Very Little
-      </div>
+      </ion-note>
     </ion-item>
 
     <ion-item>
       <icon home item-left></icon>
       Home
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Where the heart is
-      </div>
+      </ion-note>
     </ion-item>
 
   </ion-list>
@@ -46,9 +46,9 @@
     <ion-item>
       <icon star item-left></icon>
       Star status
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Super
-      </div>
+      </ion-note>
     </ion-item>
 
   </ion-list>
@@ -63,25 +63,25 @@
     <ion-item>
       <icon pizza item-left></icon>
       Pizza
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Always
-      </div>
+      </ion-note>
     </ion-item>
 
     <ion-item>
       <icon beer item-left></icon>
       Beer
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Yes Plz
-      </div>
+      </ion-note>
     </ion-item>
 
     <ion-item>
       <icon wine item-left></icon>
       Wine
-      <div class="item-note" item-right>
+      <ion-note item-right>
         All the time
-      </div>
+      </ion-note>
     </ion-item>
 
   </ion-list>
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index bac77e55a8..c68d3afea2 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -14,9 +14,9 @@ import {dom} from 'ionic/util';
  * <ion-list>
  *   <ion-item *ng-for="#item of items" (click)="itemTapped($event, item)">
  *     {{item.title}}
- *     <div class="item-note" item-right>
+ *     <ion-note item-right>
  *       {{item.note}}
- *     </div>
+ *     </ion-note>
  *   </ion-item>
  * </ion-list>
  *  ```
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 855325dbd0..3e9b89a20f 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -134,7 +134,7 @@ $item-ios-divider-padding:            5px 15px !default;
     margin-bottom: 1px;
   }
 
-  .item-note {
+  ion-note {
     color: $item-ios-note-color;
   }
 
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 384836a2ef..13339401c2 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -137,7 +137,7 @@ $item-md-divider-padding:            5px 15px !default;
     line-height: $item-md-body-text-line-height;
   }
 
-  .item-note {
+  ion-note {
     color: $item-md-note-color;
   }
 
diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html
index 02234cf7f5..1e3d7f18d6 100644
--- a/ionic/components/list/test/headers/main.html
+++ b/ionic/components/list/test/headers/main.html
@@ -16,17 +16,17 @@
     <ion-item>
       <icon heart item-left></icon>
       Affection
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Very Little
-      </div>
+      </ion-note>
     </ion-item>
 
     <ion-item>
       <icon home item-left></icon>
       Home
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Where the heart is
-      </div>
+      </ion-note>
     </ion-item>
 
   </ion-list>
@@ -46,9 +46,9 @@
     <ion-item>
       <icon star item-left></icon>
       Star status
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Super
-      </div>
+      </ion-note>
     </ion-item>
 
   </ion-list>
@@ -63,25 +63,25 @@
     <ion-item>
       <icon pizza item-left></icon>
       Pizza
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Always
-      </div>
+      </ion-note>
     </ion-item>
 
     <ion-item>
       <icon beer item-left></icon>
       Beer
-      <div class="item-note" item-right>
+      <ion-note item-right>
         Yes Plz
-      </div>
+      </ion-note>
     </ion-item>
 
     <ion-item>
       <icon wine item-left></icon>
       Wine
-      <div class="item-note" item-right>
+      <ion-note item-right>
         All the time
-      </div>
+      </ion-note>
     </ion-item>
 
   </ion-list>