basic e2e checkbox test

ionic/components/checkbox/checkbox.scss

@@ -14,28 +14,6 @@
   left: -9999px;
 }
 
-.checkbox-on {
-  display: none;
-  pointer-events: none;
-}
-
-.checkbox-off {
-  display: block;
-  pointer-events: none;
-}
-
-.checkbox[aria-checked=true] {
-
-  .checkbox-on {
-    display: block;
-  }
-
-  .checkbox-off {
-    display: none;
-  }
-
-}
-
 .checkbox[aria-disabled=true] {
   opacity: 0.5;
   color: gray;

ionic/components/checkbox/checkbox.ts

@@ -20,17 +20,16 @@ import {Icon} from '../icon/icon';
   host: {
     '[class.item]': 'item',
     '[attr.aria-checked]': 'input.checked'
-  },
-  defaultProperties: {
-    'iconOff': 'ion-ios-circle-outline',
-    'iconOn': 'ion-ios-checkmark'
   }
+  // defaultProperties: {
+  //   'iconOff': 'ion-ios-circle-outline',
+  //   'iconOn': 'ion-ios-checkmark'
+  // }
 })
 @IonicView({
   template:
   '<div class="item-media media-checkbox">' +
-  '<icon [name]="iconOff" class="checkbox-off"></icon>' +
-    '<icon [name]="iconOn" class="checkbox-on"></icon>' +
+    '<div class="media-checkbox-outline"></div>' +
   '</div>' +
   '<div class="item-content">' +
     '<content></content>' +

ionic/components/checkbox/extensions/ios.scss

@@ -8,8 +8,14 @@ $checkbox-ios-color:          #007aff;
 .checkbox[mode="ios"] {
 
   .media-checkbox {
+    height: 20px;
     min-width: 20px;
     color: $checkbox-ios-color;
+    background-color: $checkbox-ios-color;
+  }
+
+  &[aria-checked=false] .media-checkbox {
+    background-color: red;
   }
 
 }

ionic/components/checkbox/extensions/material.scss

@@ -19,6 +19,7 @@ $checkbox-md-color:          #007aff;
   .media-checkbox-outline {
     min-width: 20px;
     color: $checkbox-md-color;
+    background-color: $checkbox-md-color;
 
     position: absolute;
     top: 3px;
@@ -35,4 +36,8 @@ $checkbox-md-color:          #007aff;
     z-index: 2;
   }
 
+  &[aria-checked=false] .media-checkbox-outline {
+    background-color: red;
+  }
+
 }

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

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

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

@@ -1,7 +1,7 @@
 <ion-content>
   <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
     <ion-list>
-      <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label>Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
+      <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label id="appleLabel">Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
       <ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox>
       <ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox>
       <ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox>