refactor(radio): converted ion-radio-group to an ion-list with radio-group attribute

Changed Sass to style ion-list instead of the list class. Removed list
class from radios and lists. Closes #650

demos/component-docs/inputs/radio/template.html

@@ -7,7 +7,7 @@
 </ion-navbar>
 
 <ion-content>
-  <ion-radio-group>
+  <ion-list radio-group>
 
     <ion-list-header>
       Language
@@ -61,5 +61,5 @@
       Erlang
     </ion-radio>
 
-  </ion-radio-group>
+  </ion-list>
 </ion-content>

ionic/components/card/modes/ios.scss

@@ -40,7 +40,7 @@ ion-card {
   box-shadow: $card-ios-box-shadow;
   border-radius: $card-ios-border-radius;
 
-  .list {
+  ion-list {
     margin-bottom: 0;
 
     .item {

ionic/components/card/modes/md.scss

@@ -43,7 +43,7 @@ ion-card {
   box-shadow: $card-md-box-shadow;
   border-radius: $card-md-border-radius;
 
-  .list {
+  ion-list {
     margin-bottom: 0;
 
     ion-item-content {

ionic/components/list/list.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 
-.list {
+ion-list {
   display: block;
   margin: 0;
   padding: 0;
@@ -18,7 +18,7 @@
   }
 }
 
-.list[inset] {
+ion-list[inset] {
   overflow: hidden;
   transform: translateZ(0);
 

ionic/components/list/list.ts

@@ -23,10 +23,7 @@ import * as util from 'ionic/util';
     'items',
     'virtual',
     'content'
-  ],
+  ]
-  host: {
-    'class': 'list'
-  }
 })
 export class List extends Ion {
 

ionic/components/list/modes/ios.scss

@@ -27,7 +27,7 @@ $list-ios-border-color:               $list-border-color !default;
 /* DEFAULT LIST */
 /****************/
 
-.list {
+ion-list {
   margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
 
   ion-list-header {
@@ -87,7 +87,7 @@ $list-ios-border-color:               $list-border-color !default;
   }
 }
 
-.list + .list {
+ion-list + ion-list {
   margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
 
   ion-list-header {
@@ -96,7 +96,7 @@ $list-ios-border-color:               $list-border-color !default;
   }
 }
 
-&.hairlines .list {
+&.hairlines ion-list {
 
   ion-item-options {
     border-width: 0.55px;
@@ -127,7 +127,7 @@ $list-ios-border-color:               $list-border-color !default;
 /* INSET LIST */
 /**************/
 
-.list[inset] {
+ion-list[inset] {
   margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
   border-radius: $list-inset-ios-border-radius;
 
@@ -150,11 +150,11 @@ $list-ios-border-color:               $list-border-color !default;
   }
 }
 
-.list[inset] + .list[inset] {
+ion-list[inset] + ion-list[inset] {
   margin-top: 0;
 }
 
-&.hairlines .list[inset] {
+&.hairlines ion-list[inset] {
   .item {
     border-width: 0.55px;
   }
@@ -165,8 +165,8 @@ $list-ios-border-color:               $list-border-color !default;
 /* NO LINES LIST */
 /*****************/
 
-.list[no-lines],
+ion-list[no-lines],
-&.hairlines .list[no-lines] {
+&.hairlines ion-list[no-lines] {
   ion-list-header,
   .item,
   .item .item-inner {

ionic/components/list/modes/md.scss

@@ -25,7 +25,7 @@ $list-md-border-color:          $item-md-border-color !default;
 /* DEFAULT LIST */
 /****************/
 
-.list {
+ion-list {
   margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
 
   ion-list-header,
@@ -82,7 +82,7 @@ $list-md-border-color:          $item-md-border-color !default;
     border-width: 0;
   }
 
-  + .list {
+  + ion-list {
     margin-top: $list-md-margin-top + $list-md-margin-bottom;
 
     ion-list-header {
@@ -97,7 +97,7 @@ $list-md-border-color:          $item-md-border-color !default;
 /* INSET LIST */
 /**************/
 
-.list[inset] {
+ion-list[inset] {
   margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
   border-radius: $list-inset-md-border-radius;
 
@@ -113,7 +113,7 @@ $list-md-border-color:          $item-md-border-color !default;
     border-bottom-left-radius: $list-inset-md-border-radius;
   }
 
-  + .list[inset] {
+  + ion-list[inset] {
     margin-top: 0;
   }
 }
@@ -123,7 +123,7 @@ $list-md-border-color:          $item-md-border-color !default;
 /* NO LINES LIST */
 /*****************/
 
-.list[no-lines] {
+ion-list[no-lines] {
   .item,
   .item .item-inner {
     border-width: 0;

ionic/components/radio/radio.ts

@@ -16,7 +16,7 @@ import {ListHeader} from '../list/list';
  *
  * @usage
  * ```html
- * <ion-radio-group ng-control="clientside">
+ * <ion-list radio-group ng-control="clientside">
  *
  *   <ion-list-header>
  *     Clientside
@@ -38,16 +38,15 @@ import {ListHeader} from '../list/list';
  *     React
  *   </ion-radio>
  *
- * </ion-radio-group>
+ * </ion-list>
  * ```
 */
 @Directive({
-  selector: 'ion-radio-group',
+  selector: '[radio-group]',
   host: {
     'role': 'radiogroup',
     '[attr.aria-activedescendant]': 'activeId',
     '[attr.aria-describedby]': 'describedById',
-    'class': 'list'
   }
 })
 export class RadioGroup extends Ion {

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

@@ -6,7 +6,7 @@
 
   <form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
 
-    <ion-radio-group ng-control="fruits">
+    <ion-list radio-group ng-control="fruits">
 
       <ion-list-header>
         Fruits
@@ -28,7 +28,7 @@
         Disabled
       </ion-radio>
 
-    </ion-radio-group>
+    </ion-list>
 
   </form>
 
@@ -44,22 +44,22 @@
   </div>
 
   <form (submit)="doSubmit($event)" [ng-form-model]="currencyForm">
-    <ion-radio-group ng-control="currenciesControl">
+    <ion-list radio-group ng-control="currenciesControl">
       <ion-list-header>
         Currencies
       </ion-list-header>
       <ion-radio *ng-for="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
-    </ion-radio-group>
+    </ion-list>
   </form>
 
   <div padding>
     <code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
   </div>
 
-  <ion-radio-group [(ng-model)]="relationship">
+  <ion-list radio-group [(ng-model)]="relationship">
     <ion-radio value="friends">Friends</ion-radio>
     <ion-radio value="enemies">Enemies</ion-radio>
-  </ion-radio-group>
+  </ion-list>
 
   <div padding>
     <code><b>relationship:</b> {{relationship}}</code>

ionic/components/text-input/modes/ios.scss

@@ -6,7 +6,7 @@
 $input-label-ios-color:         #7f7f7f !default;
 
 
-.list,
+ion-list,
 ion-card {
 
   [text-input] {

ionic/components/text-input/modes/md.scss

@@ -7,7 +7,7 @@ $text-input-highlight-color:      map-get($colors, primary) !default;
 $input-label-md-color:            #999 !default;
 
 
-.list,
+ion-list,
 ion-card {
 
   [text-input] {
@@ -74,7 +74,7 @@ ion-card {
   }
 }
 
-.list[inset] ion-input.item {
+ion-list[inset] ion-input.item {
   padding-right: 0;
   padding-left: 0;
 }