-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Closed
Test to trigger chromatic #10059
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
### 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? Resolves #9920. ### WHAT is this pull request doing? Consolidates se23 beta logic styles for `Breadcrumbs`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-eghgntjqfq.chromatic.com/?path=/story/all-components-page--with-back-action-on-action) [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-page--with-back-action-on-action&globals=polarisSummerEditions2023:true) 🖥 [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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
:🎩 checklist
README.md
with documentation changes