feat(reorder): support dynamic type (#27838)

core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts

@@ -0,0 +1,36 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('reorder-group: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-reorder-group disabled="false">
+          <ion-item>
+            <ion-label>Default Reorder</ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Custom Icon</ion-label>
+            <ion-reorder slot="end">
+              <ion-icon name="pizza"></ion-icon>
+            </ion-reorder>
+          </ion-item>
+        </ion-reorder-group>
+      `,
+        config
+      );
+
+      const reorderGroup = page.locator('ion-reorder-group');
+
+      await expect(reorderGroup).toHaveScreenshot(screenshot(`reorder-group-scale`));
+    });
+  });
+});

core/src/components/reorder/reorder.ios.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the reorder icon
-$reorder-ios-icon-font-size:      34px !default;
+$reorder-ios-icon-font-size:      2.125rem !default;
 
 /// @prop - Opacity of the reorder icon
 $reorder-ios-icon-opacity:        .4 !default;

core/src/components/reorder/reorder.md.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the reorder icon
-$reorder-md-icon-font-size:      31px !default;
+$reorder-md-icon-font-size:      1.9375rem !default;
 
 /// @prop - Opacity of the reorder icon
 $reorder-md-icon-opacity:        .3 !default;

core/src/components/reorder/reorder.scss

@@ -17,6 +17,12 @@
 
 .reorder-icon {
   display: block;
-
-  font-size: 22px;
+}
+
+/**
+ * This ensures that custom reorder
+ * icons resize with Dynamic Type.
+ */
+::slotted(ion-icon) {
+  font-size: 1rem;
 }