refactor(item): changed the ion-item-group-title to an ion-item-divider with a sticky attribute

Added a test for dividers. Closes #636

ionic/components/item/item.scss

@@ -49,14 +49,14 @@ ion-item-group {
   display: block;
 }
 
-ion-item-group-title {
+ion-item-divider {
   display: block;
   min-height: 30px;
   font-weight: 500;
   width: 100%;
   z-index: 1000;
 
-  &.sticky {
+  &[sticky] {
     position: -webkit-sticky;
     position: sticky;
   	top: 0px;

ionic/components/item/modes/ios.scss

@@ -32,12 +32,6 @@ $item-ios-sliding-transition:         transform 250ms ease-in-out !default;
 
 
 ion-item-group {
-  ion-item-group-title {
-    padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
-    background-color: $item-ios-divider-bg;
-    color: $item-ios-divider-color;
-  }
-
   .item:first-child {
     .item-inner {
       border-top-width: 0;
@@ -50,6 +44,12 @@ ion-item-group {
   }
 }
 
+ion-item-divider {
+  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+  background-color: $item-ios-divider-bg;
+  color: $item-ios-divider-color;
+}
+
 ion-note {
   color: $item-ios-note-color;
 }

ionic/components/item/modes/md.scss

@@ -33,7 +33,7 @@ $item-md-sliding-content-bg:         $background-color !default;
 $item-md-sliding-transition:         transform 250ms ease-in-out !default;
 
 
-ion-item-group-title {
+ion-item-divider {
   padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
   background-color: $item-md-divider-bg;
   color: $item-md-divider-color;

ionic/components/item/test/dividers/index.ts

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

ionic/components/item/test/dividers/main.html

@@ -0,0 +1,59 @@
+<ion-toolbar><ion-title>Item Divider</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-item>
+    Plain Ol' div with some text
+  </ion-item>
+
+  <ion-item>
+    Single line text that should have ellipses when it doesn't all fit in the item
+  </ion-item>
+
+  <ion-item-divider>
+    Item Divider
+  </ion-item-divider>
+
+  <ion-item text-wrap>
+    Multiline text that should wrap when it is too long
+    to fit on one line in the item. Attribute on .item
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h1>H1 Title Text</h1>
+    <p>Paragraph line 1</p>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h2>H2 Title Text</h2>
+    <p>Paragraph line 1</p>
+  </ion-item>
+
+  <ion-item-divider></ion-item-divider>
+
+  <ion-item text-wrap>
+    <h3>H3 Title Text</h3>
+    <p>Paragraph line 1</p>
+    <p>Paragraph line 2</p>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h4>H4 Title Text</h4>
+    <p>Paragraph line 1</p>
+    <p>Paragraph line 2</p>
+    <p>Paragraph line 3</p>
+  </ion-item>
+
+  <ion-item>
+    <ion-item-content>
+      Column 1
+    </ion-item-content>
+    <ion-item-content>
+      Column 2
+    </ion-item-content>
+    <ion-item-content>
+      Column 3
+    </ion-item-content>
+  </ion-item>
+
+</ion-content>

ionic/components/item/test/groups/session-list.html

@@ -10,9 +10,9 @@
   <ion-list>
     <ion-item-group *ng-for="#timeSlot of data">
 
-      <ion-item-group-title>
+      <ion-item-divider sticky>
         {{timeSlot.time}}
-      </ion-item-group-title>
+      </ion-item-divider>
 
       <ion-item-sliding *ng-for="#session of timeSlot.talks" [attr.category]="session.category" #sliding-item>
         <button ion-item (click)="openSession(session)">

ionic/components/list/modes/md.scss

@@ -29,7 +29,7 @@ $list-md-border-color:          $item-md-border-color !default;
   margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
 
   ion-header,
-  ion-item-group-title {
+  ion-item-divider {
     border-bottom: 1px solid $list-md-border-color;
     margin-left: 0;
     padding: $list-md-header-padding;

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

@@ -1,7 +1,7 @@
 <ion-content>
   <ion-list>
     <ion-item-group *ng-for="#group of groups">
-      <ion-item-group-title>{{group.title}}</ion-item-group-title>
+      <ion-item-divider sticky>{{group.title}}</ion-item-divider>
       <ion-item *ng-for="#item of group.items">
         {{item.title}}
       </ion-item>