From 45c04dda6c905e535083b171cead374b1c993afa Mon Sep 17 00:00:00 2001
From: Sean Perkins
Date: Wed, 9 Aug 2023 09:57:03 -0500
Subject: [PATCH] feat(icon): support for dynamic type (#1246)
---
src/components/icon/icon.css | 10 ++++---
src/components/icon/test/icon.e2e.ts | 1 +
src/components/test/dynamic-type/icon.e2e.ts | 19 ++++++++++++
...-dynamic-type-diff-Mobile-Chrome-linux.png | Bin 0 -> 7658 bytes
...dynamic-type-diff-Mobile-Firefox-linux.png | Bin 0 -> 2763 bytes
...-dynamic-type-diff-Mobile-Safari-linux.png | Bin 0 -> 8534 bytes
src/components/test/dynamic-type/index.html | 27 ++++++++++++++++++
src/index.html | 5 +++-
8 files changed, 57 insertions(+), 5 deletions(-)
create mode 100644 src/components/test/dynamic-type/icon.e2e.ts
create mode 100644 src/components/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Chrome-linux.png
create mode 100644 src/components/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Firefox-linux.png
create mode 100644 src/components/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Safari-linux.png
create mode 100644 src/components/test/dynamic-type/index.html
diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
index 9b5fe680d..f9dc41791 100644
--- 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
index d7c04e04a..f92a2ebbe 100644
--- 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
new file mode 100644
index 000000000..5097720d0
--- /dev/null
+++ 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/src/components/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Chrome-linux.png b/src/components/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-diff-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..da8e93bc6d8ffef9a5f9695c7d41c2f425a74797
GIT binary patch
literal 7658
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
yU}%bz|GUw@0G4z@j={jR7Ja_U_$
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
MlJXMy4-8-Z51n8CMF0Q*
literal 0
HcmV?d00001
diff --git a/src/components/test/dynamic-type/index.html b/src/components/test/dynamic-type/index.html
new file mode 100644
index 000000000..17682cabb
--- /dev/null
+++ b/src/components/test/dynamic-type/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ IonIcon - Dynamic Type
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.html b/src/index.html
index b6ae618cc..729317e5e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -151,10 +151,13 @@ Base64 url