New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preload inter on Storybook #10048

Merged

sophschneider merged 2 commits into next from sophie/storybook-inter-font-preload

Aug 15, 2023

Contributor

sophschneider commented Aug 14, 2023 •

edited

Loading

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:

Go to this story
Make sure the cache is empty (empty cache and hard reload)
Refresh (or rerender) to see popover overlay shift

Replicate Bug Demo

replicate-shift.mov

To tophat fix:

Go to this story on this PR's chromatic
Repeat steps 2-3 above

Fixed Bug Demo

replicate-shift-fixed.mov


          Preload inter on Storybook

781e838

sophschneider mentioned this pull request

[Storybook] Fix font-loading in Chromatic #9993

Closed

5 tasks


          Run a11y vrt CI on storybook changes

a33b39a

sophschneider force-pushed the sophie/storybook-inter-font-preload branch from c2c5c75 to a33b39a Compare

August 14, 2023 18:41

sophschneider marked this pull request as ready for review

August 14, 2023 19:13

sophschneider requested review from sam-b-rose, jesstelford, gwyneplaine and laurkim

August 14, 2023 19:13

sam-b-rose approved these changes

View reviewed changes

Member

sam-b-rose left a comment •

edited

Loading

Looks good, thank you for the Storybook font fix! Just one comment 👍

.changeset/tasty-turkeys-eat.md Outdated Show resolved Hide resolved

sophschneider force-pushed the sophie/storybook-inter-font-preload branch from d5aeebd to a33b39a Compare

August 14, 2023 19:36

sophschneider added the 🤖Skip Changelog label

sophschneider merged commit d28e1e7 into next

23 checks passed

sophschneider deleted the sophie/storybook-inter-font-preload branch

August 15, 2023 13:57

sophschneider mentioned this pull request

[Banner] Consolidate se23 logic and styles #10001

Merged

sophschneider added a commit that referenced this pull request


          Preload inter on Storybook (#10048)

eb30870

### 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>

sophschneider added a commit that referenced this pull request


          Revert "Preload inter on Storybook (#10048)"

d01294d

This reverts commit d28e1e7.

sophschneider restored the sophie/storybook-inter-font-preload branch

August 15, 2023 17:46

This was referenced Aug 15, 2023

Revert "Preload inter on Storybook" #10065

Closed

[Storybook] Revert inter preload #10066

Merged

sophschneider added a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

4d42cee

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sam-b-rose pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

fd822d5

### 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>

sam-b-rose pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

20ce66a

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sophschneider mentioned this pull request

[Storybook] Preload Inter stylesheet and font in Storybook #10073

Closed

sam-b-rose pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

746d7bf

### 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>

sam-b-rose pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

f3734b5

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sam-b-rose pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

4612cb0

### 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>

sam-b-rose pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

f6e3453

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sam-b-rose pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

415412d

### 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>

sam-b-rose pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

5d459f8

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sam-b-rose pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

eaa6cdc

### 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>

sam-b-rose pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

700a72f

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

kyledurand pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

8d4e9b7

### 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>

kyledurand pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

0f244d3

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

kyledurand pushed a commit that referenced this pull request


          Preload inter on Storybook (#10048)

90ae752

### 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>

kyledurand pushed a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

2ccf5d6

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sophschneider added a commit that referenced this pull request


          Preload inter on Storybook (#10048)

a256fd7

### 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>

sophschneider added a commit that referenced this pull request


          [Storybook] Revert inter preload (#10066)

8f675aa

### WHY are these changes introduced?

reverts the preload changes in
#10048 since storybook is now
loading the system font instead of inter

sam-b-rose mentioned this pull request

Remove nav level rule #10568

Merged

AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request


          Preload inter on Storybook (Shopify#10048)

4710caa

### WHY are these changes introduced?

Resolves Shopify#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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🤖Skip Changelog