Skip to content

Commit

Permalink
Preload inter on Storybook (#10048)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Resolves #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>
  • Loading branch information
sophschneider authored and sam-b-rose committed Aug 15, 2023
1 parent 40fc2c1 commit eaa6cdc
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/ci-a11y-vrt-experimental.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions polaris-react/.storybook/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>

0 comments on commit eaa6cdc

Please sign in to comment.