-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrate
shadow
custom properties from v11 to v12 (#10778)
### WHY are these changes introduced? Resolves #10641. Migrates `shadow` custom properties from v11 to v12. Updates types on Box component `shadow` prop and ShadowBevel component `boxShadow` prop. ### WHAT is this pull request doing? To migrate `shadow` custom properties, the flow was to: - Handle automatic migrations ```sh # Space migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230922144839 \ v12-styles-replace-custom-property-shadow \ 'src/**/*.scss' # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate shadow custom properties from v11 to v12" ``` - Handle manual migrations ```sh # Bring back the files with "polaris-migrator:" comments git stash pop ``` - Search for "polaris-migrator:" comments and handle manual migrations - Search for and handle manual migrations (e.g. <Box shadow="md">) <br> ```sh # Stage all manually migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit manual migrations git commit -m "Manually migrate shadow custom properties from v11 to v12" ``` - Check for errors after all custom property migrations are finished ```sh # Run stylelint against polaris-react npx stylelint 'polaris-react/src/**/*.scss' ``` ### How to 🎩 #### Post-migration validation After migrating use the following RegExp to check for any additional instances of `space` custom properties across all file types: <details> <summary>[V12] Check RegExp for hardcoded <code>shadow</code> custom properties across all file types</summary> ``` (?:--p-shadow-inset-lg|--p-shadow-inset-md|--p-shadow-inset-sm|--p-shadow-none|--p-shadow-xs|--p-shadow-sm|--p-shadow-md|--p-shadow-lg|--p-shadow-xl|--p-shadow-2xl|--p-shadow-bevel-experimental|--p-shadow-card-sm-experimental|--p-shadow-card-md-experimental|--p-shadow-card-lg-experimental|--p-shadow-button-experimental|--p-shadow-button-hover-experimental|--p-shadow-button-disabled-experimental|--p-shadow-button-primary-strong-experimental|--p-shadow-button-primary-strong-inset-experimental|--p-shadow-button-primary-strong-hover-experimental|--p-shadow-border-inset-experimental|--p-shadow-button-primary-experimental|--p-shadow-button-primary-hover-experimental|--p-shadow-button-inset-experimental)(?![\w-]) ``` </details> <details> <summary>Check RegExp for outdated <code><Box shadow="..." /></code> props</summary> ``` <Box[^>\w](?:[^>]|\n)*?shadow ``` </details> <details> <summary>Check RegExp for outdated <code><ShadowBevel boxShadow="..." /></code> props</summary> ``` <ShadowBevel[^>\w](?:[^>]|\n)*?boxShadow ``` </details> #### Replacement maps | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-shadow-inset-lg` | `--p-shadow-inset-200` | | `--p-shadow-inset-md` | `--p-shadow-inset-200` | | `--p-shadow-inset-sm` | `--p-shadow-inset-100` | | `--p-shadow-none` | `--p-shadow-0` | | `--p-shadow-xs` | `--p-shadow-100` | | `--p-shadow-sm` | `--p-shadow-200` | | `--p-shadow-md` | `--p-shadow-300` | | `--p-shadow-lg` | `--p-shadow-400` | | `--p-shadow-xl` | `--p-shadow-500` | | `--p-shadow-2xl` | `--p-shadow-600` | | `--p-shadow-bevel-experimental` | `--p-shadow-bevel-100` | | `--p-shadow-card-sm-experimental` | `--p-shadow-100` | | `--p-shadow-card-md-experimental` | `--p-shadow-200` | | `--p-shadow-card-lg-experimental` | `--p-shadow-300` | | `--p-shadow-button-experimental` | `--p-shadow-button` | | `--p-shadow-button-hover-experimental` | `--p-shadow-button-hover` | | `--p-shadow-button-disabled-experimental` | `inset 0 0 0 1px rgba(227, 227, 227, 1)` | | `--p-shadow-button-primary-strong-experimental` | `--p-shadow-button-primary` | | `--p-shadow-button-primary-strong-inset-experimental` | `--p-shadow-button-primary-inset` | | `--p-shadow-button-primary-strong-hover-experimental` | `--p-shadow-button-primary-hover` | | `--p-shadow-border-inset-experimental` | `--p-shadow-border-inset` | > [!IMPORTANT] > The following values were manually migrated based on context: | Deprecated CSS Custom Property | Replacement Value | | ------------------------- | ------------------------ | | `--p-shadow-button-primary-experimental` | `--p-shadow-button-primary-critical`<br>`--p-shadow-button-primary-success` | | `--p-shadow-button-primary-hover-experimental` | `--p-shadow-button-primary-critical-hover`<br>`--p-shadow-button-primary-success-hover` | | `--p-shadow-button-inset-experimental` | `--p-shadow-button-primary-critical-inset`<br>`--p-shadow-button-primary-success-inset` | ### 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) - [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
- Loading branch information
Showing
38 changed files
with
106 additions
and
80 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/polaris': major | ||
--- | ||
|
||
Migrated `shadow` custom properties from v11 to v12 |
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Oops, something went wrong.