From d2b772f19fde71bcec72300cb4cf8234321b35bc Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 23 Apr 2020 12:17:17 -0400
Subject: [PATCH] feat(toggle): add parts support for handle, track (#20962)

---
 core/api.txt                                  |  2 ++
 core/src/components/toggle/readme.md          |  8 +++++++
 .../components/toggle/test/basic/index.html   | 22 +++++++++++++++++--
 core/src/components/toggle/toggle.tsx         |  7 ++++--
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 748dcd8263..45a9452312 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1262,6 +1262,8 @@ ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
 ion-toggle,css-prop,--handle-border-radius
+ion-toggle,part,handle
+ion-toggle,part,track
 
 ion-toolbar,shadow
 ion-toolbar,prop,color,string | undefined,undefined,false,false
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index 2319ad6578..cfcbdf42dc 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -223,6 +223,14 @@ export const ToggleExamples: React.FC = () => {
 | `ionFocus`  | Emitted when the toggle has focus.           | `CustomEvent<void>`                    |
 
 
+## Shadow Parts
+
+| Part       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"handle"` | The toggle handle, or knob, used to change the checked state. |
+| `"track"`  | The background track of the toggle.                           |
+
+
 ## CSS Custom Properties
 
 | Name                          | Description                                  |
diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
index d7ebb98562..59980bc156 100644
--- a/core/src/components/toggle/test/basic/index.html
+++ b/core/src/components/toggle/test/basic/index.html
@@ -33,7 +33,7 @@
 
         <ion-item>
           <ion-label>Banana</ion-label>
-          <ion-toggle slot="start" name="banana" checked></ion-toggle>
+          <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
         </ion-item>
 
         <ion-item>
@@ -70,7 +70,7 @@
           <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
           <ion-icon name="information-circle" slot="end"></ion-icon>
         </ion-item>
-        
+
         <ion-item>
           <ion-label>Custom</ion-label>
           <ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
@@ -92,6 +92,24 @@
       </p>
     </ion-content>
 
+    <style>
+      .toggle-part.toggle-checked::part(handle) {
+        background: red;
+      }
+
+      .toggle-part.toggle-checked::part(track) {
+        background: purple;
+      }
+
+      .toggle-part::part(handle) {
+        background: green;
+      }
+
+      .toggle-part::part(track) {
+        background: hotpink;
+      }
+    </style>
+
     <script>
       function printForm(ev) {
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 94387be0e7..d13379d135 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -8,6 +8,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part track - The background track of the toggle.
+ * @part handle - The toggle handle, or knob, used to change the checked state.
  */
 @Component({
   tag: 'ion-toggle',
@@ -200,8 +203,8 @@ export class Toggle implements ComponentInterface {
           'interactive': true
         }}
       >
-        <div class="toggle-icon">
-          <div class="toggle-inner"/>
+        <div class="toggle-icon" part="track">
+          <div class="toggle-inner" part="handle" />
         </div>
         <button
           type="button"