feat(buttons): support dynamic type (#27896)

- Adds support for dynamic type by converting `font-size` to use `rem` units.
- Updates the button width/height for icon only buttons in `md` to use `rem` units to scale the icon larger
- Adds test for scaling the font which checks default buttons, clear buttons (because they use a different `font-size`), buttons with an icon, and a button containing only an icon

core/src/components/button/button.ios.scss

@@ -24,20 +24,6 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
-/**
- * The default buttons in a toolbar
- * have a different font size/weight
- * than buttons outside of a toolbar on iOS.
- * However, we still want the "size"/"strong"
- * properties to be usable in a toolbar, so we add
- * the .in-buttons selector such that we
- * can add the different font size/weight in a toolbar
- * but still let "size"/"strong" override it.
- */
-:host(.in-buttons) {
-  font-size: #{$toolbar-ios-button-font-size};
-  font-weight: 400;
-}
 
 // iOS Solid Button
 // --------------------------------------------------
@@ -82,6 +68,25 @@
 }
 
 
+// iOS Toolbar Buttons
+// --------------------------------------------------
+
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+ :host(.in-buttons) {
+   font-size: #{$toolbar-ios-button-font-size};
+   font-weight: 400;
+ }
+
+
 // iOS Button Sizes
 // --------------------------------------------------
 
@@ -122,7 +127,7 @@
 }
 
 
-// iOS strong Button
+// iOS Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {

core/src/components/buttons/buttons.ios.scss

@@ -81,7 +81,10 @@
   @include margin(0);
   @include margin-horizontal(null, .3em);
 
-  font-size: 24px;
+  // This value is calculated by dividing the font size the
+  // icon should be in px (24px) by the font size of its
+  // parent button (17px). e.g. 24 / 17 = 1.4117
+  font-size: 1.41em;
 
   line-height: .67;
 }
@@ -90,7 +93,10 @@
   @include margin(0);
   @include margin-horizontal(.4em, null);
 
-  font-size: 24px;
+  // This value is calculated by dividing the font size the
+  // icon should be in px (24px) by the font size of its
+  // parent button (17px). e.g. 24 / 17 = 1.4117
+  font-size: 1.41em;
 
   line-height: .67;
 }
@@ -99,7 +105,10 @@
   @include padding(0);
   @include margin(0);
 
-  font-size: 28px;
+  // This value is calculated by dividing the font size the
+  // icon should be in px (28px) by the font size of its
+  // parent button (17px). e.g. 28 / 17 = 1.647
+  font-size: 1.65em;
 
   line-height: .67;
 }

core/src/components/buttons/buttons.md.scss

@@ -60,8 +60,8 @@
 
   @include margin(0);
 
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
 }
 
 

core/src/components/buttons/test/a11y/buttons.e2e.ts

@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('buttons: font scaling'), () => {
+    test('should scale default button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button>Default</ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-default-scale`));
+    });
+
+    test('should scale clear button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button fill="clear">Clear</ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-clear-scale`));
+    });
+
+    test('should scale button with icon on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button>
+            <ion-icon slot="start" name="star"></ion-icon>
+            Default
+          </ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-scale`));
+    });
+
+    test('should scale button with icon only on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-only-scale`));
+    });
+  });
+});

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

@@ -32,7 +32,9 @@ $toolbar-ios-padding-bottom:                        $toolbar-ios-padding-top !de
 $toolbar-ios-padding-start:                         $toolbar-ios-padding-end !default;
 
 /// @prop - Font size of the toolbar button
-$toolbar-ios-button-font-size:                      17px !default;
+/// The minimum and maximum font sizes for a toolbar button are
+/// 100% and 135%, respectively, of their default font size
+$toolbar-ios-button-font-size:                      clamp(17px, 1.0625rem, 21px) !default;
 
 /// @prop - Border radius of the toolbar button
-$toolbar-ios-button-border-radius:                  4px !default;
+$toolbar-ios-button-border-radius:                  4px !default;

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

@@ -16,7 +16,7 @@ $toolbar-order-md: (
 );
 
 /// @prop - Font size of the toolbar button
-$toolbar-md-button-font-size:                     14px !default;
+$toolbar-md-button-font-size:                     0.875rem !default;
 
 /// @prop - Text color of the toolbar button
 $toolbar-md-button-color:                         $toolbar-md-color !default;