fix(icon): use pixel sizes for icons (#8009)

**Related Issue:** #8006 ## Summary - Use fixed pixel sizes for icons - Add screenshot test
Esri · Oct 13, 2023 · 49085d5 · 49085d5
1 parent e0ed54e
commit 49085d5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
@@ -10,22 +10,29 @@
   @apply text-color-icon inline-flex;
 }
 
+$icon-size-s: 16px;
+$icon-size-m: 24px;
+$icon-size-l: 32px;
+
 :host([scale="s"]) {
-  @apply h-4 w-4;
-  min-inline-size: theme("spacing.4");
-  min-block-size: theme("spacing.4");
+  inline-size: $icon-size-s;
+  block-size: $icon-size-s;
+  min-inline-size: $icon-size-s;
+  min-block-size: $icon-size-s;
 }
 
 :host([scale="m"]) {
-  @apply h-6 w-6;
-  min-inline-size: theme("spacing.6");
-  min-block-size: theme("spacing.6");
+  inline-size: $icon-size-m;
+  block-size: $icon-size-m;
+  min-inline-size: $icon-size-m;
+  min-block-size: $icon-size-m;
 }
 
 :host([scale="l"]) {
-  @apply h-8 w-8;
-  min-inline-size: theme("spacing.8");
-  min-block-size: theme("spacing.8");
+  inline-size: $icon-size-l;
+  block-size: $icon-size-l;
+  min-inline-size: $icon-size-l;
+  min-block-size: $icon-size-l;
 }
 
 .flip-rtl {

diff --git a/packages/calcite-components/src/components/icon/icon.stories.ts b/packages/calcite-components/src/components/icon/icon.stories.ts
@@ -19,6 +19,16 @@ export const simple = (): string => html`
   ></calcite-icon>
 `;
 
+export const customBaseFontSize = (): string => html`
+  <style>
+    html {
+      font-size: 62.5%;
+    }</style
+  ><calcite-icon icon="banana" scale="s"></calcite-icon>
+  <calcite-icon icon="banana" scale="m"></calcite-icon>
+  <calcite-icon icon="banana" scale="l"></calcite-icon>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-icon
     class="calcite-mode-dark"