change label to ion-label

ionic/components.ts

@@ -11,7 +11,6 @@ export * from 'ionic/components/item/item'
 export * from 'ionic/components/item/item-group'
 export * from 'ionic/components/form/input'
 export * from 'ionic/components/form/text-input'
-export * from 'ionic/components/form/tap-input'
 export * from 'ionic/components/form/label'
 export * from 'ionic/components/list/list'
 export * from 'ionic/components/show-hide-when/show-hide-when'

ionic/components/form/form.ts

@@ -1,4 +1,3 @@
 export * from './focus-holder'
 export * from './input'
-export * from './tap-input'
 export * from './text-input'

ionic/components/form/input.scss

@@ -1,4 +1,7 @@
-$item-input-padding: 6px 0 5px 0px;
+
+// Input
+// --------------------------------------------------
+
 
 ion-input {
   display: block;
@@ -20,8 +23,7 @@ focus-holder input {
   align-items: flex-start;
 }
 
-.item.input input,
+.item.input .text-input {
-.item.input textarea {
   flex: 1;
 }
 
@@ -29,37 +31,7 @@ focus-holder input {
   padding-top: 9px;
 }
 
-.item .item-content label.input-label {
+.item .item-content .input-label {
   margin: 0;
   padding: 0;
 }
-
-/*ion-input {
-  display: block;
-
-
-  position: relative;
-  overflow: hidden;
-
-  display: flex;
-  align-items: center;
-
-  .item-label {
-    padding: $item-input-padding;
-  }
-
-  input, textarea {
-    width: 100%;
-    //font-size: 1.6rem;
-
-    border-radius: 0;
-
-    flex: 1 220px;
-    @include appearance(none);
-
-    margin: 0;
-    padding-right: 24px;
-    background-color: transparent;
-  }
-}
-*/

ionic/components/form/input.ts

@@ -111,8 +111,8 @@ export class IonInputItem extends Ion {
   onInit() {
     super.onInit();
     if (this.input && this.label) {
-      this.input.id = (this.input.id || 'input-' + this.id);
+      this.label.id = (this.label.id || 'label-' + this.id);
-      this.label.labelFor = this.input.id;
+      this.input.labelledBy = this.label.id;
     }
   }
 

ionic/components/form/label.scss

@@ -13,7 +13,7 @@ $input-label-color:         #888 !default;
   white-space: nowrap;
 }
 
-.fixed-inline-label  {
+[fixed-label] .input-label {
   display: block;
   max-width: 200px;
   width: 30%;
@@ -23,36 +23,17 @@ $input-label-color:         #888 !default;
   white-space: nowrap;
 }
 
-.item-stacked-label {
+.item-input[stacked-label] {
   flex-direction: column;
   align-items: flex-start;
 
   .input-label {
-    width: auto;
+    align-self: stretch;
     max-width: 100%;
   }
 
   .input-label + .input {
     margin-top: 0;
-  }
+    padding-left: 16px;
-}
-
-.item-floating-label {
-  display: block;
-  background-color: transparent;
-  box-shadow: none;
-
-  .input-label {
-    position: relative;
-    padding: 5px 0 0 0;
-    opacity: 0;
-    top: 10px;
-    transition: opacity .15s ease-in, top .2s linear;
-
-    &.has-input {
-      opacity: 1;
-      top: 0;
-      transition: opacity .15s ease-in, top .2s linear;
-    }
   }
 }

ionic/components/form/label.ts

@@ -9,9 +9,12 @@ import {Switch} from '../switch/switch';
 
 
 @Directive({
-  selector: 'label',
+  selector: 'ion-label',
+  properties: [
+    'id'
+  ],
   host: {
-    '[attr.for]': 'labelFor',
+    '[attr.id]': 'id',
     '[class.input-label]': 'inputLabel',
     '(touchstart)': 'pointerStart($event)',
     '(touchend)': 'pointerEnd($event)',
@@ -22,12 +25,9 @@ import {Switch} from '../switch/switch';
 export class Label {
   constructor(
     @Optional() @Host() textContainer: Input,
-    @Optional() @Host() checkboxContainer: Checkbox,
-    @Optional() @Host() radioContainer: RadioButton,
-    @Optional() @Host() switchContainer: Switch,
     config: IonicConfig
   ) {
-    this.container = textContainer || checkboxContainer || radioContainer || switchContainer;
+    this.container = textContainer;
 
     if (this.container) {
       this.container.registerLabel(this);
@@ -54,8 +54,7 @@ export class Label {
       if (!dom.hasPointerMoved(20, this.startCoord, endCoord)) {
         ev.preventDefault();
         ev.stopPropagation();
-
+        this.container.focus();
-        this.container instanceof Input ? this.container.focus() : this.container.toggle();
       }
 
       this.startCoord = null;

ionic/components/form/tap-input.ts

@@ -1,49 +0,0 @@
-import {Host, Optional, ElementRef, Attribute, Directive} from 'angular2/angular2';
-
-import {IonInput} from './input';
-import {IonicApp} from '../app/app';
-import {IonicConfig} from '../../config/config';
-import {Content} from '../content/content';
-import {Checkbox} from '../checkbox/checkbox';
-import {RadioButton} from '../radio/radio';
-
-
-@Directive({
-  selector: 'input[type=checkbox],input[type=radio]',
-  properties: [
-    'checked',
-    'name',
-    'value'
-  ],
-  host: {
-    '[checked]': 'checked',
-    '[value]': 'value',
-    '[attr.name]': 'name',
-    'class': 'tap-input input'
-  }
-})
-export class TapInput extends IonInput {
-  constructor(
-    @Optional() @Host() checkboxContainer: Checkbox,
-    @Optional() @Host() radioContainer: RadioButton,
-    @Optional() @Host() scrollView: Content,
-    @Attribute('type') type: string,
-    elementRef: ElementRef,
-    app: IonicApp,
-    config: IonicConfig
-  ) {
-    super(elementRef, app, config, scrollView);
-
-    let container = checkboxContainer || radioContainer;
-
-    if (container) {
-      container.registerInput(this);
-      this.container = container;
-    }
-
-    this.type = type;
-    this.elementRef = elementRef;
-    this.tabIndex = this.tabIndex || '';
-  }
-
-}

ionic/components/form/test/fixed-inline-labels/main.html

@@ -6,70 +6,70 @@
 
   <ion-list>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">To</label>
+      <ion-label>To</ion-label>
       <input value="Text 1" type="text">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">CC</label>
+      <ion-label>CC</ion-label>
       <input value="Text 2" type="text">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">From</label>
+      <ion-label>From</ion-label>
       <input value="Text 3" type="text">
       <button primary clear>
         <icon name="ion-power"></icon>
       </button>
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">Comments</label>
+      <ion-label>Comments</ion-label>
       <textarea>Comment value</textarea>
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
       <icon name="ion-earth"></icon>
-      <label class="fixed-inline-label">Website</label>
+      <ion-label>Website</ion-label>
       <input value="http://ionic.io/" type="url">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
       <icon name="ion-email"></icon>
-      <label class="fixed-inline-label">Email</label>
+      <ion-label>Email</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
       <icon name="ion-earth"></icon>
-      <label class="fixed-inline-label">Feedback</label>
+      <ion-label>Feedback</ion-label>
       <textarea placeholder="Placeholder Text"></textarea>
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">More Info</label>
+      <ion-label>More Info</ion-label>
       <input placeholder="Placeholder Text" type="text">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">Score</label>
+      <ion-label>Score</ion-label>
       <input value="10" type="number">
       <button primary outline>Update</button>
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">First Name</label>
+      <ion-label>First Name</ion-label>
       <input value="Buzz" type="text">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">Last Name</label>
+      <ion-label>Last Name</ion-label>
       <input value="Lightyear" type="text">
     </ion-input>
 
-    <ion-input>
+    <ion-input fixed-label>
-      <label class="fixed-inline-label">Message</label>
+      <ion-label>Message</ion-label>
       <textarea>To infinity and beyond</textarea>
     </ion-input>
 

ionic/components/form/test/inline-labels/main.html

@@ -7,17 +7,17 @@
   <ion-list>
 
     <ion-input>
-      <label>To:</label>
+      <ion-label>To:</ion-label>
       <input value="Text 1" type="text">
     </ion-input>
 
     <ion-input>
-      <label>CC:</label>
+      <ion-label>CC:</ion-label>
       <input value="Text 2" type="text">
     </ion-input>
 
     <ion-input>
-      <label>From:</label>
+      <ion-label>From:</ion-label>
       <input value="Text 3" type="text">
       <button primary clear>
         <icon name="ion-power"></icon>
@@ -25,52 +25,52 @@
     </ion-input>
 
     <ion-input>
-      <label>Comments:</label>
+      <ion-label>Comments:</ion-label>
       <textarea>Comment value</textarea>
     </ion-input>
 
     <ion-input>
       <icon name="ion-earth"></icon>
-      <label>Website:</label>
+      <ion-label>Website:</ion-label>
       <input value="http://ionic.io/" type="url">
     </ion-input>
 
     <ion-input>
       <icon name="ion-email"></icon>
-      <label>Email:</label>
+      <ion-label>Email:</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input>
       <icon name="ion-edit"></icon>
-      <label>Feedback:</label>
+      <ion-label>Feedback:</ion-label>
       <textarea placeholder="Placeholder Text"></textarea>
     </ion-input>
 
     <ion-input>
-      <label>More Info:</label>
+      <ion-label>More Info:</ion-label>
       <input placeholder="Placeholder Text" type="text">
       <icon name="ion-flag"></icon>
     </ion-input>
 
     <ion-input>
-      <label>Score:</label>
+      <ion-label>Score:</ion-label>
       <input value="10" type="number">
       <button primary outline>Update</button>
     </ion-input>
 
     <ion-input>
-      <label>First Name:</label>
+      <ion-label>First Name:</ion-label>
       <input value="Lightning" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Last Name:</label>
+      <ion-label>Last Name:</ion-label>
       <input value="McQueen" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Message:</label>
+      <ion-label>Message:</ion-label>
       <textarea>KA-CHOW!</textarea>
     </ion-input>
 

ionic/components/form/test/stacked-labels/main.html

@@ -6,53 +6,53 @@
 
   <ion-list>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 1</label>
+      <ion-label>Label 1</ion-label>
       <input value="Text 1" type="text">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 2</label>
+      <ion-label>Label 2</ion-label>
       <input value="Text 2" type="text">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 3</label>
+      <ion-label>Label 3</ion-label>
       <input value="3" type="number">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 4</label>
+      <ion-label>Label 4</ion-label>
       <textarea>Textarea 4</textarea>
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 5</label>
+      <ion-label>Label 5</ion-label>
       <input value="http://url5.com/" type="url">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 6</label>
+      <ion-label>Label 6</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 7</label>
+      <ion-label>Label 7</ion-label>
       <textarea>Textarea 7</textarea>
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 8</label>
+      <ion-label>Label 8</ion-label>
       <input value="Text 8" type="text">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 9</label>
+      <ion-label>Label 9</ion-label>
       <input value="9" type="number">
     </ion-input>
 
-    <ion-input class="item-stacked-label">
+    <ion-input stacked-label>
-      <label>Label 10</label>
+      <ion-label>Label 10</ion-label>
       <textarea>Textarea 10</textarea>
     </ion-input>
 

ionic/components/form/text-input.ts

@@ -45,7 +45,7 @@ export class Input extends IonInputItem {
     '(touchend)': 'pointerEnd($event)',
     '(mousedown)': 'pointerStart($event)',
     '(mouseup)': 'pointerEnd($event)',
-    '[attr.id]': 'id',
+    '[attr.aria-labelledby]': 'labelledBy',
     'class': 'text-input input'
   }
 })

ionic/components/show-hide-when/test/basic/e2e.ts

@@ -1,4 +0,0 @@
-
-it('should toggle checkbox state with label click', function() {
-  element(by.css('#appleLabel')).click();
-});

ionic/config/annotations.ts

@@ -12,7 +12,7 @@ import {
   Toolbar,
   Icon,
   IconDirective,
-  Checkbox, TapInput, Switch,
+  Checkbox, Switch,
   Input, TextInput, Label,
   Segment, SegmentButton, SegmentControlValueAccessor,
   RadioGroup, RadioButton, SearchBar,
@@ -73,7 +73,6 @@ export const IonicDirectives = [
   // Input
   forwardRef(() => Input),
   forwardRef(() => TextInput),
-  forwardRef(() => TapInput),
   forwardRef(() => Label),
 
   // Nav