[SelectAllActions] fix console deprecation warning in StrictMode #11346
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? In order to run the `v12-react-avatar-component` migration as part of our beta release it needs to be merged and released on `main` instead of the `next` branch. ### WHAT is this pull request doing? Ports over `v12-react-avatar-component` migration from [[Avatar] Remove customer prop and experiemntal values Shopify#10283](Shopify#10283) to main branch --------- Co-authored-by: Lo Kim <[email protected]> Co-authored-by: Lo Kim <[email protected]>
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [Shopify#10874](Shopify#10874) [`471c3d5af`](Shopify@471c3d5) Thanks [@lgriffee](https://github.com/lgriffee)! - Ported `v12-react-avatar-component` migration from [Avatar] Remove customer prop and experimental values [Shopify#10283](Shopify#10283) to main branch Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Remove the `Space` page from the website --------- Co-authored-by: Sam Rose <[email protected]>
### WHY are these changes introduced? Part of Shopify#10693
<!-- ☝️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? The Inter font has several configurable font settings. By default, `calt` ligatures are not disabled. This causes unwanted change in the presentation of letters to be symbols, e.g., "x" appearing as a multiply symbol when between numbers like `7x8`. This is a problem for automated unique identifiers, like Hydrogen deploy hashes in the `/custom-storefronts` section of the admin: https://github.com/Shopify/polaris/assets/18447883/e8c4d2a1-9d22-42a7-a585-a158e9dcb1b5 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? This PR disables `calt` ligatures in the base styles of the `AppProvider`. | Before | After | |--------|--------| | <img width="239" alt="Screenshot 2023-10-04 at 2 25 05 PM" src="https://github.com/Shopify/polaris/assets/18447883/346bc486-866c-4d64-8fd2-1d13bcad8a0c">| <img width="237" alt="Screenshot 2023-10-04 at 2 24 50 PM" src="https://github.com/Shopify/polaris/assets/18447883/fc9f8cc4-d3bc-4d86-8ba4-dd466ed1f4ed"> | <!-- 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, Text} from '../src'; export function Playground() { return ( <Page title="Discounts"> <Text as="p">xguxh880x9klaslojoffihghgthslohfijkl</Text> </Page> ); } ``` </details> ### 🎩 checklist - [ ] 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
… and add menu ordering (Shopify#10880) <!-- ☝️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 Shopify#10691 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? - Changes the page from `Design principles` to `Pro design language` - Updates images and videos - Updates content - Changes the ordering of menu elements, so updated pages are first. - Adds `New` tag to all updated pages - Removes `New` tag from `Patterns` page because that section is no longer considered `New` <!-- 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 - [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? Table of contents was missing from the Motion and Layout `index.md` pages. Adding the `showTOC` property to both <img width="2032" alt="Screenshot 2023-10-04 at 4 57 36 PM" src="https://github.com/Shopify/polaris/assets/4642404/13c3d213-f565-41bf-a421-f6c9c2a0f5de"> <!-- 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
<!-- ☝️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[ hydration error following next guidance](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr). More info in the code comments <img width="2032" alt="Screenshot 2023-10-04 at 3 29 52 PM" src="https://github.com/Shopify/polaris/assets/4642404/5c1ce40e-2617-4d1c-8c27-a4fe9a20f5ea"> <!-- 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
<!-- ☝️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? The styles were removed in Shopify#10877 as they were conflicting with InlineGrid application. This PR removes the className application as well so that we don't have dead class references. Originally these were added to ensure Dos and Donts always render in the correct track (left for Dos and right for Donts), but the edge cases that this code accounted for no longer exist 👍, so this is safe to remove. ### 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
…ion mismatch error or rendering bugs.
This reverts commit e71df73.
…fy#10895) <!-- ☝️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 Shopify#10894 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Load the correct font weights for regular ~`400`~ `450` and semibold ~`600`~ `650` tokens. Updates migration guide and any other documentation (like the readme) where the Inter font load string is present to include the correct weights, and removes unnecessary weights (`100`, `200`, `300` and `800`, `900`) Before:  After:  ### 🎩 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
Fixes `hub: command not found issue`  We no longer need to use the `hub` command as the GitHub CLI now exposes the same behavior via [gh pr checkout <number>](https://cli.github.com/manual/gh_pr_checkout).
<!-- ☝️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 alignment issues between pages - Fixes some ordering issues in some sections - Adds icons for Motion pages - Fixes some typos <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? | Before | After | |--------|-------| |  |  | |  |  | |  |  | |  |  | ### 🎩 checklist - [x] 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? Adds an example of what's to be expected when migrating a `<Button primary plain monochrome />` element. I don't think we don't want to default to a new style, like `plain monochrome` which might be the safest, because consumers may want to opt for the `plain` variant. So we just insert a comment and defer to the team / section responsible
Fixes Shopify#10806 1. Added support for `<details>` toggles on markdown 2. Added support for `collabsibleTOC` pages (off by default) so you can quickly skip to the section you need. This isn't perfect yet (doesn't auto open when linking directly to an anchor) but is much better than what we currently have 3. Organized v11 to v12 styleguide into consistent steps 4. Put regex validation, mapping tables, and examples in details toggles to make the page less overwhelming and put migration commands at the forefront 5. Added introduction, glossary, and generalized the migration workflow section. Put these at the top to introduce builders to the migration 6. Added descriptive titles to all component migrations naming what they do 7. Added examples to each component migration and removed them from the "Whats new" page 8. Added regex validation snippets to all component migrations 9. Added alert text for stepped migrations that have to be run in order 10. Cleaned up copy and overall improved migration experience giving more context on how and why we are running the migrations. Aimed to make it clear enough that an intern could run a migration on their code base 11. Add padding to code blocks   --------- Co-authored-by: Lo Kim <[email protected]>
…ob path (Shopify#10913) Having a `<path>` placeholder on the migration commands can get pretty tedious to replace. I've added a default glob path so at least consumers with a ts/tsx/css/scss architecture can copy and paste the commands out of the box. I've also added a note that consumers can replace the default glob path if they need to
Co-authored-by: Sara Hill <[email protected]>
This PR introduces a generic migration for updating React component props. Features include: - Prop renames - Prop value updates: * `string` to `string` * `boolean` to `string` - Handles deeply nested compound components - Inserts Polaris migrator comments on known edge cases (e.g. components with a spread operator) Examples: - Prop rename: ```sh npx @shopify/polaris-migrator react-update-component-prop \ --componentName Component \ --fromProp prop \ --toProp newProp \ <glob> # <Component prop="value" /> -> <Component newProp="value" /> ``` - Prop value update (`string` to `string`): ```sh npx @shopify/polaris-migrator react-update-component-prop \ --componentName Component \ --fromProp prop \ --toValue new-value \ <glob> # <Component prop="value" /> -> <Component prop="new-value" /> ``` - Prop value update (`boolean` to `string`): ```sh npx @shopify/polaris-migrator react-update-component-prop \ --componentName Component \ --fromPropType boolean \ --fromProp prop \ --toProp newProp \ --toValue new-value \ <glob> # <Component prop /> -> <Component newProp="new-value" /> ``` - Prop specific value update: ```sh npx @shopify/polaris-migrator react-update-component-prop \ --componentName Component \ --fromProp prop \ --fromValue value \ --toValue new-value \ <glob> # <Component prop="value" /> -> <Component prop="new-value" /> # <Component prop="foo" /> -> <Component prop="foo" /> ``` - Prop rename and value update: ```sh npx @shopify/polaris-migrator react-update-component-prop \ --componentName Component \ --fromProp prop \ --toProp newProp \ --fromValue value \ --toValue new-value \ <glob> # <Component prop="value" /> -> <Component newProp="new-value" /> # <Component prop="foo" /> -> <Component prop="foo" /> ``` - Prop rename (nested compound component): ```sh npx @shopify/polaris-migrator react-update-component-prop \ --componentName Component.Nested.CompoundComponent \ --fromProp prop \ --toProp newProp \ <glob> # <Component.Nested.CompoundComponent prop="value" /> -> <Component.Nested.CompoundComponent newProp="value" /> ```
…a Hydration mismatch error or rendering bugs." (Shopify#10916) Reverts Shopify#10886 Moving this change to the `next` branch cc @jesstelford
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [Shopify#10878](Shopify#10878) [`f185fb99d`](Shopify@f185fb9) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added generic `react-update-component-prop` migration Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Closes Shopify/polaris-internal#1264 ### WHY are these changes introduced? Teams are copy pasting Polaris icons because they cannot modify the fill value based on text color. ### WHAT is this pull request doing? Safely without breaking changes unblocks the ability to use `currentColor` through the `inherit` property on the `<Icon>` component.
Ran `npx @turbo/codemod migrate` to upgrade `turbo` to v1.11.1 (see https://turbo.build/blog/turbo-1-11-0)
…#11308) <!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Relevant to Shopify#10104 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Implements [solution b ](https://www.chromatic.com/docs/resource-loading/#solution-a-preload-fonts) for deterministic font loading. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [Shopify#11292](Shopify#11292) [`2b5ecf8df`](Shopify@2b5ecf8) Thanks [@alex-page](https://github.com/alex-page)! - Add ClipboardCheckFilledMajor icon ### Patch Changes - [Shopify#11271](Shopify#11271) [`bd0cede27`](Shopify@bd0cede) Thanks [@alex-page](https://github.com/alex-page)! - - Remove fill as we already remove it as a plugin with rollup - Fix svgo config as the convertPathData was not correctly running with the overridden option - Add a new test to make sure that optimized svg code matches the code in the .svg file - Remove unnecessary tests that are resolved with svgo config - Reduce icons library SVG size by 383.75kb ## @shopify/[email protected] ### Minor Changes - [Shopify#11273](Shopify#11273) [`d514150b1`](Shopify@d514150) Thanks [@alex-page](https://github.com/alex-page)! - Add `inherit` to `<Icon>` tone property Fix appearance of `source="placeholder"` in `<Icon>` ### Patch Changes - Updated dependencies \[[`2b5ecf8df`](Shopify@2b5ecf8), [`bd0cede27`](Shopify@bd0cede)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`2b5ecf8df`](Shopify@2b5ecf8), [`bd0cede27`](Shopify@bd0cede), [`d514150b1`](Shopify@d514150)]: - @shopify/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…ge (Shopify#11303) We're adding a new Magic tone to the Badge component which includes the following changes: - Remap `bg-color-magic-fill-secondary` from `purple-6` to `purple-5` - Remap `bg-color-magic-fill-secondary-hover` from `purple-7` to `purple-6` - Remap `bg-color-magic-fill-secondary-active` from `purple-8` to `purple-7` - Adding a new `magic` tone to the Badge component <img width="774" alt="Screenshot 2023-12-08 at 18 47 43" src="https://github.com/Shopify/polaris/assets/8492201/ed78cad6-73bb-4679-a626-ba7d027f5b89"> <img width="650" alt="Screenshot 2023-12-08 at 18 48 05" src="https://github.com/Shopify/polaris/assets/8492201/c3e1780a-b902-4888-b786-f95de6927698"> <!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Fixes #0000 <!-- 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. Include a video if your changes include interactive content. 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> --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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 --------- Co-authored-by: Jon Rundle <[email protected]> Co-authored-by: Chloe Rice <[email protected]>
Co-authored-by: Alex Page <[email protected]>
<!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? [Fixes #0000](Shopify#11322) <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? The `nav.json` data was updated and the `Subnav` did not update to match the new structure, so we were not getting the data properly. This is updating to match by passing in `nav.children` https://github.com/Shopify/polaris/assets/4642404/ab987492-3888-42c3-9d46-a7c2e7f9168f <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. Include a video if your changes include interactive content. 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> --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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
<!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? The missing padding for `FooterHelp` leads to the text being completely at the edge of a screen on small devices. This doesn't happen on md and up. It's imho surprising to remove a padding for small screens and leads to issues in Web Admin. | Before | After | | - | - | |  |  | <!-- 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. Include a video if your changes include interactive content. 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> --> It unifies the padding for `FooterHelp` across all breakpoints. ### How to 🎩 - Go to `FooterHelp` story - Ensure the padding is applied regardless of the size of the screen. 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Relevant to Shopify/polaris-internal#1278 ### WHAT is this pull request doing? - Add pattern variants to site cache and normalise cache to be keyed by URLs - refactor gen-assets processes ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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
<!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Fixes: Shopify/polaris-internal#1311 <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Relies on the color CSS attribute so that the polaris Icon can inherit and apply the color properly ```css .Polaris-Icon svg { fill: currentColor; } ``` <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. Include a video if your changes include interactive content. 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> --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Charles <[email protected]>
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [Shopify#11316](Shopify#11316) [`235bc7d0c`](Shopify@235bc7d) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added `SkeletonMajor` ## @shopify/[email protected] ### Minor Changes - [Shopify#11303](Shopify#11303) [`d0babcc9b`](Shopify@d0babcc) Thanks [@ardakaracizmeli](https://github.com/ardakaracizmeli)! - - Remapped the `bg-fill-magic-secondary` token colors - Added a Magic `tone` to `Badge` ### Patch Changes - [Shopify#11299](Shopify#11299) [`e530a44f9`](Shopify@e530a44) Thanks [@fortmarek](https://github.com/fortmarek)! - Added padding for FooterHelp on small viewports - [Shopify#11329](Shopify#11329) [`a45dafb35`](Shopify@a45dafb) Thanks [@lbenie](https://github.com/lbenie)! - `TopBar` Fixed .NavigationIcon styles to ensure Icon color is properly inherited. - Updated dependencies \[[`d0babcc9b`](Shopify@d0babcc), [`235bc7d0c`](Shopify@235bc7d)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [Shopify#11303](Shopify#11303) [`d0babcc9b`](Shopify@d0babcc) Thanks [@ardakaracizmeli](https://github.com/ardakaracizmeli)! - - Remapped the `bg-fill-magic-secondary` token colors - Added a Magic `tone` to `Badge` ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`d0babcc9b`](Shopify@d0babcc)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`d0babcc9b`](Shopify@d0babcc)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`d0babcc9b`](Shopify@d0babcc)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`e530a44f9`](Shopify@e530a44), [`d0babcc9b`](Shopify@d0babcc), [`235bc7d0c`](Shopify@235bc7d), [`a45dafb35`](Shopify@a45dafb)]: - @shopify/[email protected] - @shopify/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…es. (Shopify#10958) ### WHY are these changes introduced? Relates to Shopify/web#101295 Merchants using a screen reader have no idea when pages change, so this PR adds a hidden live element which will announce to the merchant the page title followed by "This page is ready". ### 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) </details> ### 🎩 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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Chloe Rice <[email protected]>
<!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Fixes https://github.com/Shopify/polaris-internal/issues/1066 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? * Updated semantic tokens in `polaris-tokens` * Creating two new `badge` specialty tokens * Updating `Badge` to use new tokens | Before | After | | -- | -- | ||| <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. Include a video if your changes include interactive content. 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> --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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 --------- Co-authored-by: Laura Griffee <[email protected]>
Add color token documentation Fixes Shopify/polaris-internal#1274 
A part of Shopify#11337 ### WHY are these changes introduced? | Before | After | | --- | --- | | <img width="234" alt="290345776-525f1b14-b8ef-4066-9e9c-fc5b3ddaa684" src="https://github.com/Shopify/polaris/assets/19199063/4253765e-abad-4808-a826-2cf5d6d159c3"> |  | ### WHAT is this pull request doing? Uses the `inherit` property to properly render the icon with the parent color.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [Shopify#11275](Shopify#11275) [`4a7e090bc`](Shopify@4a7e090) Thanks [@yurm04](https://github.com/yurm04)! - Updated semantic tokens `fill-info-secondary`, `text-info`, `fill-success-secondary`, `fill-caution-secondary`, `fill-critical-secondary`. - [Shopify#10958](Shopify#10958) [`5c183e0e1`](Shopify@5c183e0) Thanks [@mrcthms](https://github.com/mrcthms)! - Added a live region to the `Page` `Header` to announce the `title` after navigation changes ### Patch Changes - [Shopify#11338](Shopify#11338) [`4ddba49c4`](Shopify@4ddba49) Thanks [@alex-page](https://github.com/alex-page)! - `<Toast>` Fix icon color to properly inherit the parent color - Updated dependencies \[[`4a7e090bc`](Shopify@4a7e090)]: - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [Shopify#11275](Shopify#11275) [`4a7e090bc`](Shopify@4a7e090) Thanks [@yurm04](https://github.com/yurm04)! - Updated semantic tokens `fill-info-secondary`, `text-info`, `fill-success-secondary`, `fill-caution-secondary`, `fill-critical-secondary`. ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`4a7e090bc`](Shopify@4a7e090)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`4a7e090bc`](Shopify@4a7e090)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`4a7e090bc`](Shopify@4a7e090)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - [Shopify#11334](Shopify#11334) [`ebff4315b`](Shopify@ebff431) Thanks [@sarahill](https://github.com/sarahill)! - Added color token documentation - Updated dependencies \[[`4ddba49c4`](Shopify@4ddba49), [`4a7e090bc`](Shopify@4a7e090), [`5c183e0e1`](Shopify@5c183e0)]: - @shopify/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
### WHY are these changes introduced? - Fixes Shopify/polaris-internal#1278 Our existing `gen-og-images` script creates an og-image layout using HTML markup and then runs puppeteer to take snapshots of each generated layout. This is relatively slow, this PR aims to swap this logic out for [Satori](https://github.com/vercel/satori) vercel's library for doing the exact same markup to og-image procedure but without having to spin up a puppeteer instance. ### WHAT is this pull request doing? * Convert our HTML markup to JSX * Convert `<style>` tag CSS to inline css for each of our JSX elements. (This is a limitation of satori, in that it does not support global <style> tags * Remove puppeteer logic in favor of a single call to satori ```tsx satori(someMarkup, someConfig) ``` * Leverage [@inter-ui](https://www.npmjs.com/package/inter-ui) to download non-variable versions of Inter for use in our generated layout. (A limitation of the underlying library that Satori leverages for type support (opentype.js) is that it does not support variable fonts) * Leverage [@napi-rs/image](https://www.npmjs.com/package/@napi-rs/image) to convert our generated svg from satori into a png file for use as an og-image. --------- Co-authored-by: Jess Telford <[email protected]>
<!--
☝️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
- Open it as a draft if it’s a work in progress
-->
### WHY are these changes introduced?
This PR introduces a `hidden` property to `FilterInterface`, allowing to
programmatically add extra filters to `IndexFilter`, while not making
them accessible through the dropdown
### 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.
Include a video if your changes include interactive content.
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>
-->
### How to 🎩
🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [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 a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [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)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---------
Co-authored-by: Chloe Rice <[email protected]>
…pify#11317) <!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Fixes Shopify#10216 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Before https://github.com/Shopify/polaris/assets/4642404/657acfd9-4b53-4860-999f-7527603eb357 After https://github.com/Shopify/polaris/assets/4642404/cfd07deb-7dc0-4435-95e4-91b06390dc96 <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. Include a video if your changes include interactive content. 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> --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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 --------- Co-authored-by: Alex Page <[email protected]>
this prevents the following deprecation warning: ``` Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition2 which is inside StrictMode. Instead, add a ref directly to the element you want to reference. ``` fixes Shopify#11016
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.
this prevents the following deprecation warning:
WHY are these changes introduced?
fixes #11016
WHAT is this pull request doing?
Before this fix:
before-fix.mp4
After this fix:
after-fix.mp4
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
🎩 checklist
README.mdwith documentation changes