feat(chip): add dynamic type support

core/src/components/chip/chip.ios.scss

@@ -0,0 +1,11 @@
+@import "./chip";
+@import "./chip.vars";
+
+:host {
+  /**
+   * Main content should be prioritized on iOS,
+   * so we set max font size for chips.
+   * We add a min font size to keep the text legible.
+   */
+  font-size: clamp(13px, $chip-base-font-size-rem, 22px);
+}

core/src/components/chip/chip.md.scss

@@ -0,0 +1,6 @@
+@import "./chip";
+@import "./chip.vars";
+
+:host {
+  font-size: $chip-base-font-size-rem;
+}

core/src/components/chip/chip.scss

@@ -1,31 +1,31 @@
 @import "../../themes/ionic.globals";
+@import "./chip.vars";
 
 :host {
   /**
    * @prop --background: Background of the chip
    * @prop --color: Color of the chip
    */
-  --background: #{rgba($text-color-rgb, .12)};
-  --color: #{rgba($text-color-rgb, .87)};
+  --background: #{rgba($text-color-rgb, 0.12)};
+  --color: #{rgba($text-color-rgb, 0.87)};
 
   @include border-radius(16px);
   @include font-smoothing();
   @include margin(4px);
-  @include padding(7px, 12px);
+  @include padding(6px, 12px);
 
   display: inline-flex;
 
   position: relative;
 
   align-items: center;
 
-  height: 32px;
+  min-height: 32px;
 
   background: var(--background);
   color: var(--color);
 
   font-family: $font-family-base;
-  font-size: 14px;
 
   cursor: pointer;
 
@@ -37,27 +37,26 @@
 
 :host(.chip-disabled) {
   cursor: default;
-  opacity: .4;
+  opacity: 0.4;
   pointer-events: none;
 }
 
 // Chip Colors
 // ---------------------------------------------
 
 :host(.ion-color) {
-  background: current-color(base, .08);
+  background: current-color(base, 0.08);
   color: current-color(shade);
 }
 
 :host(.ion-color:focus) {
-  background: current-color(base, .12);
+  background: current-color(base, 0.12);
 }
 
 :host(.ion-color.ion-activated) {
-  background: current-color(base, .16);
+  background: current-color(base, 0.16);
 }
 
-
 // Outline Chip
 // ---------------------------------------------
 
@@ -67,33 +66,32 @@
 }
 
 :host(.chip-outline) {
-  border-color: rgba($text-color-rgb, .32);
+  border-color: rgba($text-color-rgb, 0.32);
 
   background: transparent;
 }
 
 :host(.chip-outline.ion-color) {
-  border-color: current-color(base, .32);
+  border-color: current-color(base, 0.32);
 }
 
 :host(.chip-outline:not(.ion-color):focus) {
-  background: rgba($text-color-rgb, .04);
+  background: rgba($text-color-rgb, 0.04);
 }
 
 :host(.chip-outline.ion-activated:not(.ion-color)) {
-  background: rgba($text-color-rgb, .08);
+  background: rgba($text-color-rgb, 0.08);
 }
 
-
 // Chip Icon
 // ---------------------------------------------
 
 ::slotted(ion-icon) {
-  font-size: 20px;
+  font-size: $chip-icon-size;
 }
 
 :host(:not(.ion-color)) ::slotted(ion-icon) {
-  color: rgba($text-color-rgb, .54);
+  color: rgba($text-color-rgb, 0.54);
 }
 
 ::slotted(ion-icon:first-child) {
@@ -104,13 +102,14 @@
   @include margin(-4px, -4px, -4px, 8px);
 }
 
-
 // Chip Avatar
 // ---------------------------------------------
 
 ::slotted(ion-avatar) {
-  width: 24px;
-  height: 24px;
+  flex-shrink: 0;
+
+  width: $chip-avatar-size;
+  height: $chip-avatar-size;
 }
 
 ::slotted(ion-avatar:first-child) {
@@ -121,7 +120,6 @@
   @include margin(-4px, -8px, -4px, 8px);
 }
 
-
 // Chip: Focus
 // ---------------------------------------------
 
@@ -130,31 +128,29 @@
 }
 
 :host(:focus) {
-  --background: #{rgba($text-color-rgb, .16)};
+  --background: #{rgba($text-color-rgb, 0.16)};
 }
 
-
 // Chip: Activated
 // ---------------------------------------------
 
 :host(.ion-activated) {
-  --background: #{rgba($text-color-rgb, .20)};
+  --background: #{rgba($text-color-rgb, 0.2)};
 }
 
-
 // Chip: Hover
 // ---------------------------------------------
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --background: #{rgba($text-color-rgb, .16)};
+    --background: #{rgba($text-color-rgb, 0.16)};
   }
 
   :host(.ion-color:hover) {
-    background: current-color(base, .12);
+    background: current-color(base, 0.12);
   }
 
   :host(.chip-outline:not(.ion-color):hover) {
-    background: rgba($text-color-rgb, .04);
+    background: rgba($text-color-rgb, 0.04);
   }
 }

core/src/components/chip/chip.tsx

@@ -10,7 +10,10 @@ import { createColorClasses } from '../../utils/theme';
  */
 @Component({
   tag: 'ion-chip',
-  styleUrl: 'chip.scss',
+  styleUrls: {
+    ios: 'chip.ios.scss',
+    md: 'chip.md.scss',
+  },
   shadow: true,
 })
 export class Chip implements ComponentInterface {

core/src/components/chip/chip.vars.scss

@@ -0,0 +1,13 @@
+@use "sass:math";
+
+/// @prop - Unitless font size of the chip before scaling
+$chip-base-font-size: 14;
+
+/// @prop - Font size of the chip in rem before scaling
+$chip-base-font-size-rem: #{math.div($chip-base-font-size, 16)}rem;
+
+/// @prop - Size of an icon within a chip (in em to scale as the font size of the chip scales)
+$chip-icon-size: math.div(20em, $chip-base-font-size);
+
+/// @prop - Size of an avatar within a chip (in em to scale as the font size of the chip scales)
+$chip-avatar-size: math.div(24em, $chip-base-font-size);

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

@@ -0,0 +1,67 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * Font scaling does not vary across directions.
+   */
+  test.describe(title('chip: font scaling'), () => {
+    test('should scale text', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 30px;
+          }
+        </style>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot('chip-scale'));
+    });
+  });
+});
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * Font scaling does not vary across directions
+   * ios mode has a min font size
+   */
+  test.describe(title('chip: contents at large scale'), () => {
+    test('should handle contents wider than chip', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 48px;
+          }
+        </style>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot('chip-large-contents'));
+    });
+  });
+});