diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx index e8c19301f5..f0550daf7e 100644 --- a/packages/core/src/components/item-divider/item-divider.tsx +++ b/packages/core/src/components/item-divider/item-divider.tsx @@ -8,7 +8,6 @@ import { Component } from '@stencil/core'; md: 'item-divider.md.scss', wp: 'item-divider.wp.scss' }, - shadow: false, host: { theme: 'item item-divider' } diff --git a/packages/core/src/components/radio/radio-group.tsx b/packages/core/src/components/radio/radio-group.tsx index b492d34f51..22cd38acb7 100644 --- a/packages/core/src/components/radio/radio-group.tsx +++ b/packages/core/src/components/radio/radio-group.tsx @@ -110,8 +110,19 @@ export class RadioGroup { } } + @Listen('ionRadioCheckedDidChange') + protected radioCheckedDidChange(ev: RadioEvent) { + const radio = ev.detail.radio; + + // TODO shouldn't be able to set radio checked to false + // if allowEmptySelection is false + if (radio.checked && this.value !== radio.value) { + this.value = radio.checked ? radio.value : ''; + } + } + @Listen('ionRadioDidToggle') - protected radioToggle(ev: RadioEvent) { + protected radioDidToggle(ev: RadioEvent) { const radio = ev.detail.radio; // If the group does not allow empty selection then checked diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx index 08338a70fd..e57d2da094 100644 --- a/packages/core/src/components/radio/radio.tsx +++ b/packages/core/src/components/radio/radio.tsx @@ -76,6 +76,11 @@ export class Radio { */ @Event() ionRadioDidToggle: EventEmitter; + /** + * @output {EventEmitter} Emitted when the radio checked property is changed. + */ + @Event() ionRadioCheckedDidChange: EventEmitter; + /** * @output {EventEmitter} Emitted when the styles of the radio change. */ @@ -111,6 +116,7 @@ export class Radio { @PropDidChange('checked') checkedChanged(val: boolean) { + this.ionRadioCheckedDidChange.emit({ radio: this }); this.ionSelect.emit({ checked: val }); this.emitStyle(); } diff --git a/packages/core/src/components/radio/test/basic.html b/packages/core/src/components/radio/test/basic.html index 5256c00171..e4f9c14b28 100644 --- a/packages/core/src/components/radio/test/basic.html +++ b/packages/core/src/components/radio/test/basic.html @@ -14,11 +14,11 @@ - - - - Fruits (Group w/ values) - + + + + Fruits (Group w/ values) + Apple @@ -33,36 +33,27 @@ Cherry - - + - - - - Extra Pizza Topping (Group w/ no values) - + + + Extra Pizza Topping (Group w/ no values) + Pepperoni - - Pineapple - - - Sausage - - + - - - - Veggies (Group w/ allow empty) - + + + Veggies (Group w/ allow empty) + Carrot @@ -77,14 +68,14 @@ Broccoli - - + - + + Grape Checked + Grape Disabled + Print Values + +

 
@@ -164,13 +155,11 @@
       }
 
       function toggleBoolean(id, prop) {
-        console.log('toggleBoolean', id);
         var ele = document.getElementById(id);
-        console.log('toggleBoolean', ele);
 
         var isTrue = ele[prop] ? false : true;
         ele[prop] = isTrue;
-        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+        console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
       }
     
 
@@ -179,6 +168,7 @@
         background: #f6f6f6;
         border: 1px solid #ddd;
         padding: 15px 10px;
+        margin-top: -20px;
       }
     
 
diff --git a/packages/ionic-angular/BREAKING.md b/packages/ionic-angular/BREAKING.md
index 24917fcc49..a4765e6882 100644
--- a/packages/ionic-angular/BREAKING.md
+++ b/packages/ionic-angular/BREAKING.md
@@ -274,7 +274,7 @@ Item should now be written as an `` element. Ionic will determine when
 
 ### Label Required
 
-Previously an `ion-label` would automatically get added to an `ion-item` if one wasn't provided. Now an `ion-label` should always be added if the item is used to display text.
+Previously an `ion-label` would automatically get added to an `ion-item`, `ion-item-divider` and `ion-list-header` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
 
 ```html