From eb30870e252ace8e4235e14bced69774f3bbbe69 Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Tue, 15 Aug 2023 09:57:09 -0400
Subject: [PATCH] Preload inter on Storybook (#10048)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Resolves https://github.com/Shopify/polaris/issues/10038

### WHAT is this pull request doing?

* Preloads the `inter` font to avoid flakey width/postion calculations
in chromatic snapshots (more context in the issue)
* Run chromatic in CI when `polaris-react/.storybook` changes
* Accept chromatic baseline UI snapshots using inter

> Note: I think inter now shows when the beta flag is off as well but
this is ok as we are on the `next` branch and in the process of removing
the beta flag

### How to 🎩

#### To duplicate the original bug:
1. Go to [this
story](https://storybook.polaris.shopify.com/?path=/story/all-components-legacycard--with-separate-header&globals=polarisSummerEditions2023:true)
2. Make sure the cache is empty (empty cache and hard reload)
3. Refresh (or rerender) to see popover overlay shift

<details>
<summary>Replicate Bug Demo</summary>


https://github.com/Shopify/polaris/assets/20652326/53ed5e19-7c8d-4ee4-ab95-81a2c08e279d
</details>

#### To tophat fix:
1. Go to [this story on this PR's
chromatic](https://5d559397bae39100201eedc1-qhkfhdyjuo.chromatic.com/?path=/story/all-components-legacycard--with-separate-header)
2. Repeat steps 2-3 above

<details>
<summary>Fixed Bug Demo</summary>


https://github.com/Shopify/polaris/assets/20652326/de28ff59-84ab-46bd-b28a-31dbede8f001
</details>
---
 .github/workflows/ci-a11y-vrt-experimental.yml | 2 ++
 polaris-react/.storybook/preview-head.html     | 1 +
 2 files changed, 3 insertions(+)

diff --git a/.github/workflows/ci-a11y-vrt-experimental.yml b/.github/workflows/ci-a11y-vrt-experimental.yml
index 39818259c5d..7ae641d77c9 100644
--- a/.github/workflows/ci-a11y-vrt-experimental.yml
+++ b/.github/workflows/ci-a11y-vrt-experimental.yml
@@ -8,11 +8,13 @@ on:
     paths:
       - 'polaris-react/src/**'
       - 'polaris-react/playground/**'
+      - 'polaris-react/.storybook/**'
       - 'polaris-tokens/src/**'
   pull_request:
     paths:
       - 'polaris-react/src/**'
       - 'polaris-react/playground/**'
+      - 'polaris-react/.storybook/**'
       - 'polaris-tokens/src/**'
 
 jobs:
diff --git a/polaris-react/.storybook/preview-head.html b/polaris-react/.storybook/preview-head.html
index cf8231066e5..bc5c03ff3f3 100644
--- a/polaris-react/.storybook/preview-head.html
+++ b/polaris-react/.storybook/preview-head.html
@@ -5,6 +5,7 @@
   crossorigin="anonymous"
 />
 <link
+  rel="preload"
   href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
   rel="stylesheet"
 />