ion-list-header directive

ionic/components/app/test/sink/pages/list.ts

@@ -18,9 +18,11 @@ import {SinkPage} from '../sink-page';
     </p>
 
     <ion-list inset>
-      <div class="list-header">
+
+      <ion-list-header>
         List Header
-      </div>
+      </ion-list-header>
+
       <ion-item>
         <input control="email" type="email" placeholder="Your email">
       </ion-item>
@@ -32,9 +34,11 @@ import {SinkPage} from '../sink-page';
         </div>
       </div>
       <ion-item>Item</ion-item>
-      <div class="list-footer">
+
+      <ion-list-footer>
         List Footer
-      </div>
+      </ion-list-footer>
+
     </ion-list>
   </ion-content>
   `

ionic/components/checkbox/test/basic/e2e.ts

@@ -1,4 +1,10 @@
 
-it('should toggle checkbox state with label click', function() {
-  element(by.css('#appleLabel')).click();
+it('should check apple via checkbox element click', function() {
+  element(by.css('#e2eAppleCheckbox')).click();
+});
+
+
+it('should enable/check grape via buttons', function() {
+  element(by.css('#e2eGrapeDisabled')).click();
+  element(by.css('#e2eGrapeChecked')).click();
 });

ionic/components/checkbox/test/basic/main.html

@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <ion-checkbox value="apple" checked="true" ng-control="appleCtrl">
+      <ion-checkbox value="apple" checked="true" ng-control="appleCtrl" id="e2eAppleCheckbox">
         Apple, value=apple, init checked
       </ion-checkbox>
 
@@ -29,8 +29,8 @@
   </form>
 
   <p aria-hidden="true" class="align-center">
-    <button (click)="toggleGrapeChecked()" outline primary small>Grape Checked</button>
-    <button (click)="toggleGrapeDisabled()" outline primary small>Grape Disabled</button>
+    <button (click)="toggleGrapeChecked()" outline primary small id="e2eGrapeChecked">Grape Checked</button>
+    <button (click)="toggleGrapeDisabled()" outline primary small id="e2eGrapeDisabled">Grape Disabled</button>
     <button (click)="doSubmit($event)" outline primary small>Submit</button>
   </p>
 

ionic/components/list/extensions/ios.scss

@@ -17,7 +17,7 @@ $list-ios-footer-color:           #333 !default;
 
 .list[mode="ios"] {
 
-  .list-header {
+  ion-list-header {
     padding: $list-ios-header-padding;
     font-size: $list-ios-header-font-size;
     font-weight: $list-ios-header-font-weight;
@@ -26,7 +26,7 @@ $list-ios-footer-color:           #333 !default;
     color: $list-ios-header-color;
   }
 
-  .list-footer {
+  ion-list-footer {
     padding: $list-ios-footer-padding;
     font-size: $list-ios-footer-font-size;
     font-weight: $list-ios-footer-font-weight;

ionic/components/list/extensions/material.scss

@@ -13,14 +13,14 @@ $list-md-footer-color:          #8f8f94 !default;
 
 .list[mode="md"] {
 
-  .list-header {
+  ion-list-header {
     padding: $list-md-header-padding;
     font-size: $list-md-header-font-size;
     text-transform: uppercase;
     color: $list-md-header-color;
   }
 
-  .list-footer {
+  ion-list-footer {
     padding: $list-md-footer-padding;
     font-size: $list-md-footer-font-size;
     text-transform: uppercase;

ionic/components/list/list.scss

@@ -10,8 +10,9 @@
   list-style-type: none;
 }
 
-.list-header,
-.list-footer {
+ion-list-header,
+ion-list-footer {
+  display: block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

ionic/components/list/list.ts

@@ -1,4 +1,4 @@
-import {ElementRef} from 'angular2/angular2';
+import {Directive, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -42,3 +42,17 @@ export class List extends Ion {
     this.itemTemplate = item;
   }
 }
+
+
+@Directive({
+  selector: 'ion-list-header',
+  properties: [
+    'id'
+  ],
+  host: {
+    '[attr.id]': 'id'
+  }
+})
+export class ListHeader {
+
+}

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

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

ionic/components/radio/radio.ts

@@ -1,10 +1,11 @@
-import {ElementRef, Ancestor, Optional, NgControl} from 'angular2/angular2';
+import {ElementRef, Ancestor, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
 
 import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
 import {Ion} from '../ion';
 import {IonInputItem} from '../form/form';
 import {TapClick} from '../button/button';
+import {ListHeader} from '../list/list';
 
 
 @IonicDirective({
@@ -12,7 +13,8 @@ import {TapClick} from '../button/button';
   host: {
     'class': 'list',
     'role': 'radiogroup',
-    '[attr.aria-activedescendant]': 'activeId'
+    '[attr.aria-activedescendant]': 'activeId',
+    '[attr.aria-describedby]': 'describedById'
   }
 })
 export class RadioGroup extends Ion {
@@ -21,7 +23,8 @@ export class RadioGroup extends Ion {
   constructor(
     elementRef: ElementRef,
     config: IonicConfig,
-    @Optional() cd: NgControl
+    @Optional() cd: NgControl,
+    @Query(ListHeader) private headerQuery: QueryList<ListHeader>
   ) {
     super(elementRef, config);
     this.id = ++radioGroupIds;
@@ -32,6 +35,17 @@ export class RadioGroup extends Ion {
     if (cd) cd.valueAccessor = this;
   }
 
+  onInit() {
+    let header = this.headerQuery.first;
+    if (header) {
+      debugger
+      if (!header.id) {
+        header.id = 'radio-header-' + this.id;
+      }
+      this.describedById = header.id;
+    }
+  }
+
   registerRadio(radio) {
     radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
     this.radios.push(radio);

ionic/components/radio/test/basic/e2e.ts

@@ -4,5 +4,5 @@ it('should check Banana', function() {
 });
 
 it('should check Cherry', function() {
-  element(by.css('#e2eSelectCherry')).click();
+  element(by.css('#e2eCherry')).click();
 });

ionic/components/radio/test/basic/main.html

@@ -8,9 +8,9 @@
 
     <ion-radio-group ng-control="fruits">
 
-      <div class="list-header">
+      <ion-list-header>
         Fruits
-      </div>
+      </ion-list-header>
 
       <ion-radio value="apple" checked="true">
         Apple
@@ -20,7 +20,7 @@
         Banana
       </ion-radio>
 
-      <ion-radio value="cherry" id="my-id">
+      <ion-radio value="cherry">
         Cherry
       </ion-radio>
 
@@ -35,6 +35,6 @@
 
   <button (click)="setApple()" outline primary small>Select Apple</button>
   <button (click)="setBanana()" outline primary small>Select Banana</button>
-  <button id="e2eSelectCherry" (click)="setCherry()" outline primary small>Select Cherry</button>
+  <button id="e2eCherry" (click)="setCherry()" outline primary small>Select Cherry</button>
 
 </ion-content>

ionic/config/annotations.ts

@@ -8,7 +8,7 @@ import {
   Aside, Button, Content, Scroll, Refresher,
   Slides, Slide, SlidePager,
   Tabs, Tab,
-  Card, List, Item, ItemGroup, ItemGroupTitle,
+  Card, List, ListHeader, Item, ItemGroup, ItemGroupTitle,
   Toolbar,
   Icon,
   IconDirective,
@@ -41,6 +41,7 @@ export const IonicDirectives = [
   // Lists
   forwardRef(() => Card),
   forwardRef(() => List),
+  forwardRef(() => ListHeader),
   forwardRef(() => Item),
   forwardRef(() => ItemGroup),
   forwardRef(() => ItemGroupTitle),