feat(icon): support for dynamic type (#1246)

ionic-team · Aug 9, 2023 · 45c04dd · 45c04dd
1 parent b123558
commit 45c04dd
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 5 deletions.
diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
@@ -9,6 +9,8 @@
   fill: currentColor;
 
   box-sizing: content-box !important;
+
+  font-size: 1rem;
 }
 
 :host .ionicon {
@@ -36,7 +38,7 @@ svg {
 /* Icon RTL
  * -----------------------------------------------------------
  */
- 
+
 /**
  * Safari <16.4 incorrectly reports
  * that it supports :dir(rtl) when it does not.
@@ -53,7 +55,7 @@ svg {
     transform: scaleX(-1);
   }
 }
- 
+
 /**
  * Fallback for browsers that support
  * neither :host-context nor :dir.
@@ -91,11 +93,11 @@ svg {
  */
 
 :host(.icon-small) {
-  font-size: 18px !important;
+  font-size: 1.125rem !important;
 }
 
 :host(.icon-large) {
-  font-size: 32px !important;
+  font-size: 2rem !important;
 }
 
 /* Icon Colors

diff --git a/src/components/icon/test/icon.e2e.ts b/src/components/icon/test/icon.e2e.ts
@@ -67,4 +67,5 @@ test.describe('icon: basic', () => {
     await expect(iconLoc).toHaveAttribute('name', 'brush');
     await expect(iconLoc).not.toHaveClass(/flip-rtl/);
   });
+
 });
diff --git a/src/components/test/dynamic-type/icon.e2e.ts b/src/components/test/dynamic-type/icon.e2e.ts
@@ -0,0 +1,19 @@
+import { expect } from '@playwright/test';
+import { test } from '../../../utils/test/playwright';
+
+test.describe('icon: dynamic type', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/test/dynamic-type');
+  });
+
+  test('should scale text on larger font sizes', async ({ page }) => {
+    // Wait for all SVGs to be lazily loaded before taking screenshots
+    await page.waitForLoadState('networkidle');
+
+    const icons = page.locator('#icons');
+
+    expect(await icons.screenshot()).toMatchSnapshot(`icon-dynamic-type-diff.png`);
+  });
+
+});
diff --git a/...namic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Chrome-linux.png b/...namic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Chrome-linux.png
diff --git a/...amic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Firefox-linux.png b/...amic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Firefox-linux.png
diff --git a/...namic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Safari-linux.png b/...namic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Safari-linux.png
diff --git a/src/components/test/dynamic-type/index.html b/src/components/test/dynamic-type/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en" mode="ios">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/*; img-src 'self'; connect-src 'self'; font-src https://fonts.gstatic.com/*'"
+    />
+    <title>IonIcon - Dynamic Type</title>
+    <script type="module" src="../../build/ionicons.esm.js"></script>
+    <script nomodule src="../../build/ionicons.js"></script>
+    <style>
+      html {
+        font-size: 28px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="icons">
+      <ion-icon name="star"></ion-icon>
+      <ion-icon name="star" size="small"></ion-icon>
+      <ion-icon name="star" size="large"></ion-icon>
+    </div>
+  </body>
+</html>
diff --git a/src/index.html b/src/index.html
@@ -151,10 +151,13 @@ <h2>Base64 url</h2>
     </p>
 
     <style>
+      html {
+        font-size: 32px;
+      }
+
       body {
         margin: 0;
         padding: 16px;
-        font-size: 32px;
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       }