radio iOS

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

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

ionic/components/radio/extensions/ios.scss

@@ -2,13 +2,40 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-color:          #007aff;
+$radio-ios-foreground-color:       get-color(primary, base) !default;
 
 
-.radio-group[mode="ios"] {
+.radio[mode="ios"] {
 
-  .media-radio {
-    color: $radio-ios-color;
+  .radio-icon {
+    position: relative;
+    width: 16px;
+    height: 21px;
+  }
+
+  &[aria-checked=true] .radio-icon {
+    border-color: $radio-ios-foreground-color;
+
+    &::after {
+      position: absolute;
+      border: 2px solid $radio-ios-foreground-color;
+      top: 3px;
+      left: 7px;
+      width: 4px;
+      height: 10px;
+      border-left: none;
+      border-top: none;
+      content: '';
+      transform: rotate(45deg);
+    }
+  }
+
+  &[aria-checked=true] {
+    color: $radio-ios-foreground-color;
+  }
+
+  .input-label {
+    color: inherit;
   }
 
 }

ionic/components/radio/radio.scss

@@ -2,49 +2,28 @@
 // Radio
 // --------------------------------------------------
 
-$radio-padding:                   0 15px !default;
-
-
-.radio .item-media {
-  padding: $radio-padding;
+.radio {
+  position: relative;
+  cursor: pointer;
+  @include user-select-none();
 }
 
 .radio input {
-  position: relative;
-  left: -9999px;
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  border: none;
+  @include appearance(none);
 }
 
-.radio-on {
-  display: none;
-}
-
-.radio-off {
-  display: block;
-}
-
-.radio[aria-checked=true] {
-
-  .radio-on {
-    display: block;
-  }
-
-  .radio-off {
-    display: none;
-  }
-
+.radio .input-label {
+  max-width: 100%;
 }
 
 .radio[aria-disabled=true] {
-  pointer-events: none;
   opacity: 0.5;
   color: gray;
-
-  .media-radio {
-    color: inherit;
-  }
 }
-
-// .radio .item-media,
-// .radio .item-content {
-//   pointer-events: none;
-// }

ionic/components/radio/radio.ts

@@ -10,7 +10,7 @@ let groupName = -1;
 @IonicDirective({
   selector: 'ion-radio-group',
   host: {
-    '[class.list]': 'list'
+    'class': 'list'
   }
 })
 export class RadioGroup extends Ion {
@@ -33,7 +33,6 @@ export class RadioGroup extends Ion {
     cd.valueAccessor = this;
 
     this.value = "";
-    this.list = true;
   }
 
   registerButton(radioButton) {
@@ -73,22 +72,16 @@ export class RadioGroup extends Ion {
   selector: 'ion-radio',
   host: {
     '[class.item]': 'item',
-    '[class.active]': 'input.checked',
     '[attr.aria-checked]': 'input.checked',
-  },
-  defaultProperties: {
-    'iconOff': 'ion-ios-circle-outline',
-    'iconOn': 'ion-ios-checkmark'
   }
 })
 @IonicView({
   template:
-  '<div class="item-media media-radio">' +
-    '<icon [name]="iconOff" class="radio-off"></icon>' +
-    '<icon [name]="iconOn" class="radio-on"></icon>' +
-  '</div>' +
   '<div class="item-content">' +
     '<content></content>' +
+  '</div>' +
+  '<div class="item-media media-radio">' +
+    '<div class="radio-icon"></div>' +
   '</div>'
 })
 export class RadioButton extends IonInputItem {

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

@@ -0,0 +1,8 @@
+
+it('should check Banana', function() {
+  element(by.css('#e2eBanana')).click();
+});
+
+it('should check Cherry', function() {
+  element(by.css('#e2eSelectCherry')).click();
+});

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

@@ -1,24 +1,43 @@
 
-<ion-view nav-title="Radio Buttons">
+<ion-toolbar><ion-title>Radio Group</ion-title></ion-toolbar>
 
-  <ion-content>
 
-    <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+<ion-content>
+
+  <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+
+    <ion-radio-group ng-control="fruits">
+
       <div class="list-header">
         Fruits
       </div>
 
-      <ion-radio-group ng-control="fruits">
-        <ion-radio><label>APPLE</label><input value="apple" type="radio"></ion-radio>
-        <ion-radio><label>BANANA</label><input value="banana" type="radio"></ion-radio>
-        <ion-radio><label>CHERRY</label><input value="cherry" type="radio"></ion-radio>
-      </ion-radio-group>
+      <ion-radio>
+        <label>Apple</label>
+        <input value="apple" checked="true" type="radio">
+      </ion-radio>
 
-      fruits.dirty: {{fruitsForm.controls.fruits.dirty}}<br>
-      fruits.value: {{fruitsForm.controls.fruits.value}}<br>
-    </form>
-    <button (click)="setApple()">Select Apple</button>
-    <button (click)="setBanana()">Select Banana</button>
-    <button (click)="setCherry()">Select Cherry</button>
-  </ion-content>
-</ion-view>
+      <ion-radio id="e2eBanana">
+        <label>Banana</label>
+        <input value="banana" type="radio">
+      </ion-radio>
+
+      <ion-radio>
+        <label>Cherry</label>
+        <input value="cherry" type="radio">
+      </ion-radio>
+
+    </ion-radio-group>
+
+    <p>
+      <code>fruits.dirty: {{fruitsForm.controls.fruits.dirty}}</code><br>
+      <code>fruits.value: {{fruitsForm.controls.fruits.value}}</code><br>
+    </p>
+
+  </form>
+
+  <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>
+
+</ion-content>