feat(reorder): add parts support for icon (#20960)

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

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>

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

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>
     );