From 07e78103adc564ad9b293c5c41313ae25f9683dd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 2 Apr 2020 15:24:28 +0000
Subject: [PATCH 1/5] add shadow parts

---
 core/src/components/radio/radio.tsx           |  7 +++--
 .../components/radio/test/basic/index.html    | 29 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 49326b5d26c..5f40ebf38ef 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -7,6 +7,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @TODOpart icon - The outer radio icon.
+ * @TODOpart icon-inner - The inner checked dot of the radio icon.
  */
 @Component({
   tag: 'ion-radio',
@@ -136,8 +139,8 @@ export class Radio implements ComponentInterface {
           'radio-disabled': disabled,
         }}
       >
-        <div class="radio-icon">
-          <div class="radio-inner"/>
+        <div class="radio-icon" part="icon">
+          <div class="radio-inner" part="icon-inner" />
         </div>
         <button
           type="button"
diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
index e22fa3d542e..97652138c3c 100644
--- a/core/src/components/radio/test/basic/index.html
+++ b/core/src/components/radio/test/basic/index.html
@@ -75,7 +75,7 @@
             <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli"></ion-radio>
           </ion-item>
         </ion-radio-group>
-        
+
         <ion-radio-group allow-empty-selection value="custom">
           <ion-item>
             <ion-label>Custom</ion-label>
@@ -83,6 +83,13 @@
           </ion-item>
         </ion-radio-group>
 
+        <ion-radio-group allow-empty-selection value="custom">
+          <ion-item>
+            <ion-label>Radio ::part</ion-label>
+            <ion-radio slot="end" value="custom" class="radio-part"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+
         <ion-item>
           <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Checked</ion-button>
           <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Disabled</ion-button>
@@ -128,7 +135,7 @@
         <span id="standAloneCheckedSpan"></span>
       </p>
 
-      
+
       <ion-item>
         <ion-label>Checkbox / Toggle</ion-label>
         <ion-radio slot="start" id="checked"></ion-radio>
@@ -205,6 +212,24 @@
         margin-top: -20px;
       }
 
+      .radio-part::part(icon) {
+        background: rgba(255, 0, 0, 0.3);
+        border-color: darkred;
+      }
+
+      .radio-part::part(icon-inner) {
+        background: hotpink;
+      }
+
+      .radio-part.radio-checked::part(icon) {
+        background: rgba(0, 255, 0, 0.3);
+        border-color: darkgreen;
+      }
+
+      .radio-part.radio-checked::part(icon-inner) {
+        background: purple;
+      }
+
     </style>
 
   </ion-app>

From 0102cd47867de49195ef31fc661bc7f99a0a5165 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 22 Apr 2020 15:41:27 +0000
Subject: [PATCH 2/5] change icon-inner to mark

---
 core/src/components/radio/radio.tsx             | 4 ++--
 core/src/components/radio/test/basic/index.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 5f40ebf38ef..5033063740f 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -9,7 +9,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @TODOpart icon - The outer radio icon.
- * @TODOpart icon-inner - The inner checked dot of the radio icon.
+ * @TODOpart mark - The inner checked dot of the radio icon.
  */
 @Component({
   tag: 'ion-radio',
@@ -140,7 +140,7 @@ export class Radio implements ComponentInterface {
         }}
       >
         <div class="radio-icon" part="icon">
-          <div class="radio-inner" part="icon-inner" />
+          <div class="radio-inner" part="mark" />
         </div>
         <button
           type="button"
diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
index 97652138c3c..45d04c9de2b 100644
--- a/core/src/components/radio/test/basic/index.html
+++ b/core/src/components/radio/test/basic/index.html
@@ -217,7 +217,7 @@
         border-color: darkred;
       }
 
-      .radio-part::part(icon-inner) {
+      .radio-part::part(mark) {
         background: hotpink;
       }
 
@@ -226,7 +226,7 @@
         border-color: darkgreen;
       }
 
-      .radio-part.radio-checked::part(icon-inner) {
+      .radio-part.radio-checked::part(mark) {
         background: purple;
       }
 

From 490c6792554f5e0f6cbc0f25842c1b3e964f1200 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 22 Apr 2020 16:03:28 +0000
Subject: [PATCH 3/5] change icon to container

---
 core/src/components/radio/radio.tsx             | 4 ++--
 core/src/components/radio/test/basic/index.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 5033063740f..ccefa39027a 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -8,7 +8,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
- * @TODOpart icon - The outer radio icon.
+ * @TODOpart container - The outer radio icon.
  * @TODOpart mark - The inner checked dot of the radio icon.
  */
 @Component({
@@ -139,7 +139,7 @@ export class Radio implements ComponentInterface {
           'radio-disabled': disabled,
         }}
       >
-        <div class="radio-icon" part="icon">
+        <div class="radio-icon" part="container">
           <div class="radio-inner" part="mark" />
         </div>
         <button
diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
index 45d04c9de2b..412d88283a4 100644
--- a/core/src/components/radio/test/basic/index.html
+++ b/core/src/components/radio/test/basic/index.html
@@ -212,7 +212,7 @@
         margin-top: -20px;
       }
 
-      .radio-part::part(icon) {
+      .radio-part::part(container) {
         background: rgba(255, 0, 0, 0.3);
         border-color: darkred;
       }
@@ -221,7 +221,7 @@
         background: hotpink;
       }
 
-      .radio-part.radio-checked::part(icon) {
+      .radio-part.radio-checked::part(container) {
         background: rgba(0, 255, 0, 0.3);
         border-color: darkgreen;
       }

From e91472af7fbc98a555c209db18e4e0c3669e1ff8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 22 Apr 2020 14:25:51 -0400
Subject: [PATCH 4/5] Update core/src/components/radio/radio.tsx

Co-Authored-By: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 core/src/components/radio/radio.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index ccefa39027a..6f9beb572c8 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -8,8 +8,8 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
- * @TODOpart container - The outer radio icon.
- * @TODOpart mark - The inner checked dot of the radio icon.
+ * @TODOpart container - The container for the radio mark.
+ * @TODOpart mark - The checkmark or dot used to indicate the checked state.
  */
 @Component({
   tag: 'ion-radio',

From 5b3c6bc0141e9fde7e1e18c1dd46ee1364817e82 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 22 Apr 2020 15:58:52 -0400
Subject: [PATCH 5/5] build

---
 core/api.txt                        | 2 ++
 core/src/components/radio/radio.tsx | 4 ++--
 core/src/components/radio/readme.md | 8 ++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 260b420bf95..ba50d18b757 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -826,6 +826,8 @@ ion-radio,css-prop,--border-radius
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 ion-radio,css-prop,--inner-border-radius
+ion-radio,part,container
+ion-radio,part,mark
 
 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 6f9beb572c8..1131962725e 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -8,8 +8,8 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
- * @TODOpart container - The container for the radio mark.
- * @TODOpart mark - The checkmark or dot used to indicate the checked state.
+ * @part container - The container for the radio mark.
+ * @part mark - The checkmark or dot used to indicate the checked state.
  */
 @Component({
   tag: 'ion-radio',
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index 83690444f42..77e5d175617 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -137,6 +137,14 @@ export const RadioExamples: React.FC = () => {
 | `ionFocus` | Emitted when the radio button has focus.   | `CustomEvent<void>` |
 
 
+## Shadow Parts
+
+| Part          | Description                                              |
+| ------------- | -------------------------------------------------------- |
+| `"container"` | The container for the radio mark.                        |
+| `"mark"`      | The checkmark or dot used to indicate the checked state. |
+
+
 ## CSS Custom Properties
 
 | Name                    | Description                              |