Skip to content
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.

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

Test to trigger chromatic #10059

Closed
wants to merge 20 commits into from
Closed

Conversation

sophschneider
Copy link
Contributor

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

sam-b-rose and others added 20 commits August 8, 2023 13:45
### WHY are these changes introduced?

Related to #9899 

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Removes beta flag logic and merge override styles for Avatar component.
### WHY are these changes introduced?

Resolves #9909.

### WHAT is this pull request doing?

Removes se23 beta conditional logic for `AccountConnection`.

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-ljctfsyeaf.chromatic.com/?path=/story/all-components-accountconnection--all)

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
### WHY are these changes introduced?

Resolves #9910 .

### WHAT is this pull request doing?

Removes se23 beta conditional logic for `ActionList`.
Consolidates se23 beta styles for `ActionList`.

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-xfazrnicvb.chromatic.com/?path=/story/all-components-actionlist--all)

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
### WHY are these changes introduced?

Resolves #9916.

### WHAT is this pull request doing?

Removes se23 beta conditional logic for `ActionMenu`.
Consolidates se23 beta styles for `ActionMenu`.

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-okamtncmqt.chromatic.com/?path=/story/all-components-page--default)
<img width="1025" alt="10-20-em6hu-q856q"
src="https://github.com/Shopify/polaris/assets/26749317/6075dd5a-ff6e-4b86-aec4-fa935600e841">
> Note: There is no storybook specifically for ActionMenu but it is used
in the Page Header subcomponent.

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #9971

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
### WHY are these changes introduced?

Resolves #9917 .

### WHAT is this pull request doing?

Consolidates se23 beta styles for `Autocomplete`.

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-ztmfqwvbxv.chromatic.com/?path=/story/all-components-autocomplete--with-action)

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
### WHY are these changes introduced?

Fixes #9941

### WHAT is this pull request doing?

Consolidates se23 beta styles for `KeyboardKey`.

### How to 🎩

Compare:

* This PR's
[Storybook](https://5d559397bae39100201eedc1-xmguxoqurw.chromatic.com/?path=/story/all-components-keyboardkey--all)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-keyboardkey--all&globals=polarisSummerEditions2023:true)
### WHY are these changes introduced?

Fixes #9933

### WHAT is this pull request doing?

Consolidates se23 beta styles for `EmptyState`.

### How to 🎩

Compare and make sure they are the same:

* This PR's
[Storybook](https://5d559397bae39100201eedc1-xyztablchw.chromatic.com/?path=/story/all-components-emptystate--default)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-emptystate--default&globals=polarisSummerEditions2023:true)
### WHY are these changes introduced?

Fixes #9921

### WHAT is this pull request doing?

Consolidates se23 beta styles for `BulkActions`.

### How to 🎩

Compare the bulk actions shadow bevel (make sure they are the same):

* This PR's
[Storybook](https://5d559397bae39100201eedc1-vxezcfotko.chromatic.com/?path=/story/all-components-indextable--default)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-indextable--default&globals=polarisSummerEditions2023:true)
### WHY are these changes introduced?

Fixes #9918

### WHAT is this pull request doing?

Removing flagged se23 code from badge

### How to 🎩

Compare and make sure they are the same:

* This PR's
[Storybook](https://5d559397bae39100201eedc1-fqebvmxjcw.chromatic.com/?path=/story/all-components-badge--all&globals=polarisSummerEditions2023:false)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-badge--all&globals=polarisSummerEditions2023:true)
### WHY are these changes introduced?

Resolves #9922.

### WHAT is this pull request doing?

Consolidates se23 beta logic and styles for `Button` and `_button.scss`.
Adds new styles where necessary in `Button.scss` to fix specificity
issues with styling.
Fixes Button tests.

### How to 🎩

[Storybook](https://5d559397bae39100201eedc1-uauurpoyku.chromatic.com/?path=/story/all-components-button--all)
[Prod
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-button--all&globals=polarisSummerEditions2023:true)

> Things to tophat: UI and interactive states (i.e., focus, pressed,
hover) at different breakpoints

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #9928 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

- Consolidate styles in Choice.scss
- Consolidates logic in Choice.tsx

### How to 🎩

* [Branch
Storybook](https://5d559397bae39100201eedc1-ltqoskeqza.chromatic.com/?path=/story/all-components-checkbox--default)
* [Prod
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-checkbox--default&globals=polarisSummerEditions2023:true)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
### 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants