From 2268cd84c0be48be9210692ea28bcf1a2ae2606e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 15 Sep 2017 17:39:38 -0400
Subject: [PATCH] fix(item): reset child styles each time they are passed

---
 packages/core/src/components/item/item.tsx    | 21 +++++++++++++------
 packages/core/src/components/radio/radio.tsx  |  5 +++++
 .../core/src/components/radio/test/basic.html | 17 +++++++++++----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index de49905001..afedda314e 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -4,8 +4,6 @@ import { createThemedClasses } from '../../utils/theme';
 
 import { CssClassMap } from '../../index';
 
-import { RadioEvent } from '../radio/radio';
-
 @Component({
   tag: 'ion-item',
   styleUrls: {
@@ -19,7 +17,7 @@ export class Item {
   private id: string;
   private inputs: any = [];
 
-  private childStyles: CssClassMap = Object.create(null);
+  private itemStyles: { [key: string]: CssClassMap } = Object.create(null);
   private label: any;
 
   // TODO get reorder from a parent list/group
@@ -36,15 +34,20 @@ export class Item {
     ev.stopPropagation();
 
     let hasChildStyleChange = false;
+
+    let tagName: string = (ev.target as HTMLElement).tagName;
     let updatedStyles: any = ev.detail;
 
     for (var key in updatedStyles) {
-      if (updatedStyles[key] !== this.childStyles['item-' + key]) {
-        this.childStyles['item-' + key] = updatedStyles[key];
+      if (('item-' + key) !== key) {
+        Object.defineProperty(updatedStyles, 'item-' + key, Object.getOwnPropertyDescriptor(updatedStyles, key));
+        delete updatedStyles[key];
         hasChildStyleChange = true;
       }
     }
 
+    this.itemStyles[tagName] = updatedStyles;
+
     // returning true tells the renderer to queue an update
     return hasChildStyleChange;
   }
@@ -105,8 +108,14 @@ export class Item {
   }
 
   render() {
+    let childStyles = {};
+
+    for (var key in this.itemStyles) {
+      childStyles = Object.assign(childStyles, this.itemStyles[key]);
+    }
+
     let themedClasses = {
-      ...this.childStyles,
+      ...childStyles,
       ...createThemedClasses(this.mode, this.color, 'item'),
       'item-block': true
     };
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index e57d2da094..4cbd4a4e61 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -114,6 +114,11 @@ export class Radio {
     this.ionRadioDidLoad.emit({ radio: this });
   }
 
+  @PropDidChange('color')
+  colorChanged() {
+    this.emitStyle();
+  }
+
   @PropDidChange('checked')
   checkedChanged(val: boolean) {
     this.ionRadioCheckedDidChange.emit({ radio: this });
diff --git a/packages/core/src/components/radio/test/basic.html b/packages/core/src/components/radio/test/basic.html
index e4f9c14b28..987ba39be2 100644
--- a/packages/core/src/components/radio/test/basic.html
+++ b/packages/core/src/components/radio/test/basic.html
@@ -66,14 +66,15 @@
 
           <ion-item>
             <ion-label>Broccoli</ion-label>
-            <ion-radio slot="end" color="danger" value="broccoli" checked></ion-radio>
+            <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
           </ion-item>
         </ion-radio-group>
 
         <ion-item>
-            <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
-            <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
-            <ion-button onClick="printRadioValues()" outline small>Print Values</ion-button>
+          <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Checked</ion-button>
+          <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Disabled</ion-button>
+          <ion-button slot="end" onClick="printRadioValues()" outline small>Print</ion-button>
+          <ion-button slot="end" onClick="toggleString('dangerRadio', 'color', 'danger', 'secondary')" outline small color="danger">Color</ion-button>
         </ion-item>
       </ion-list>
 
@@ -161,6 +162,14 @@
         ele[prop] = isTrue;
         console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
       }
+
+      function toggleString(id, prop, firstVal, secondVal) {
+        var ele = document.getElementById(id);
+
+        var stringVal = ele[prop] == firstVal ? secondVal : firstVal;
+        ele[prop] = stringVal;
+        console.debug('in toggleString, setting', prop, 'to', stringVal);
+      }
     </script>
 
     <style>