From ba20209604666048619ae5f4358be0e65ef36e4f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 23 Apr 2020 12:18:32 -0400
Subject: [PATCH] feat(reorder): add parts support for icon (#20960)

---
 core/api.txt                                           |  1 +
 .../reorder-group/test/standalone/index.html           | 10 ++++++++--
 core/src/components/reorder/readme.md                  |  7 +++++++
 core/src/components/reorder/reorder.tsx                |  5 ++++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 6d82eeaf33..fb9c5c4191 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -889,6 +889,7 @@ ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular"
 ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
 
 ion-reorder,shadow
+ion-reorder,part,icon
 
 ion-reorder-group,none
 ion-reorder-group,prop,disabled,boolean,true,false,false
diff --git a/core/src/components/reorder-group/test/standalone/index.html b/core/src/components/reorder-group/test/standalone/index.html
index dd8bcc81a0..5258b0d9ea 100644
--- a/core/src/components/reorder-group/test/standalone/index.html
+++ b/core/src/components/reorder-group/test/standalone/index.html
@@ -29,8 +29,8 @@
     </div>
 
     <div>
-      Item 4 (default ion-reorder)
-      <ion-reorder></ion-reorder>
+      Item 4 (custom ion-reorder)
+      <ion-reorder class="reorder-part"></ion-reorder>
     </div>
 
     <div>
@@ -61,5 +61,11 @@
     </ion-reorder>
 
   </ion-reorder-group>
+  <style>
+    .reorder-part::part(icon) {
+      color: purple;
+      opacity: 1;
+    }
+  </style>
 </body>
 </html>
diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md
index e0b9703a94..fb58b1758d 100644
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -218,6 +218,13 @@ export const ReorderExample: React.FC = () => (
 
 
 
+## Shadow Parts
+
+| Part     | Description                     |
+| -------- | ------------------------------- |
+| `"icon"` | The icon of the reorder handle. |
+
+
 ## Dependencies
 
 ### Depends on
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index 7ccb4d9915..5e0c66db6c 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -2,6 +2,9 @@ import { Component, ComponentInterface, Host, Listen, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 
+/**
+ * @part icon - The icon of the reorder handle.
+ */
 @Component({
   tag: 'ion-reorder',
   styleUrls: {
@@ -24,7 +27,7 @@ export class Reorder implements ComponentInterface {
     return (
       <Host class={mode}>
         <slot>
-          <ion-icon name={reorderIcon} lazy={false} class="reorder-icon" />
+          <ion-icon name={reorderIcon} lazy={false} class="reorder-icon" part="icon" />
         </slot>
       </Host>
     );