From dbae87e5844811ea4e6c8dd83e71c19b41444b18 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 3 Oct 2023 09:28:29 -0600 Subject: [PATCH] Create migration for replacing v11 `shadow` custom properties (#10306) ### WHY are these changes introduced? Fixes #10513 ### WHAT is this pull request doing? This PR creates a migration for deprecated `shadow` custom properties in v12 using the generic codemod [`styles-replace-custom-property`](https://github.com/Shopify/polaris/pull/8265). #### v12-styles-replace-custom-property-shadow | 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 tokens need to be manually migrated because their values are context dependent. | Deprecated CSS Custom Property | Replacement Value | | ----------------------------------------- | ---------------------------------- | | `--p-shadow-button-primary-experimental` | `--p-shadow-button-primary-critical`
`--p-shadow-button-primary-success` | | `--p-shadow-button-primary-hover-experimental` | `--p-shadow-button-primary-critical-hover`
`--p-shadow-button-primary-success-hover` | | `--p-shadow-button-inset-experimental` | `--p-shadow-button-primary-critical-inset`
`--p-shadow-button-primary-success-inset` | --- .changeset/silent-guests-occur.md | 5 +++ .../tests/transform.test.ts | 12 ++++++ ...-replace-custom-property-shadow.input.scss | 23 ++++++++++++ ...replace-custom-property-shadow.output.scss | 23 ++++++++++++ .../transform.ts | 37 +++++++++++++++++++ 5 files changed, 100 insertions(+) create mode 100644 .changeset/silent-guests-occur.md create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/transform.test.ts create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.input.scss create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.output.scss create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/transform.ts diff --git a/.changeset/silent-guests-occur.md b/.changeset/silent-guests-occur.md new file mode 100644 index 00000000000..92f1e037854 --- /dev/null +++ b/.changeset/silent-guests-occur.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': minor +--- + +Created migration to replace deprecated `shadow` custom properties in polaris-react v12.0.0 diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/transform.test.ts new file mode 100644 index 00000000000..352fee103d5 --- /dev/null +++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/transform.test.ts @@ -0,0 +1,12 @@ +import {check} from '../../../utilities/check'; + +const transform = 'v12-styles-replace-custom-property-shadow'; +const fixtures = ['v12-styles-replace-custom-property-shadow']; + +for (const fixture of fixtures) { + check(__dirname, { + fixture, + transform, + extension: 'scss', + }); +} diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.input.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.input.scss new file mode 100644 index 00000000000..43429a5be8d --- /dev/null +++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.input.scss @@ -0,0 +1,23 @@ +.shadow { + box-shadow: var(--p-shadow-inset-lg); + box-shadow: var(--p-shadow-inset-md); + box-shadow: var(--p-shadow-inset-sm); + box-shadow: var(--p-shadow-none); + box-shadow: var(--p-shadow-xs); + box-shadow: var(--p-shadow-sm); + box-shadow: var(--p-shadow-md); + box-shadow: var(--p-shadow-lg); + box-shadow: var(--p-shadow-xl); + box-shadow: var(--p-shadow-2xl); + box-shadow: var(--p-shadow-bevel-experimental); + box-shadow: var(--p-shadow-card-sm-experimental); + box-shadow: var(--p-shadow-card-md-experimental); + box-shadow: var(--p-shadow-card-lg-experimental); + box-shadow: var(--p-shadow-button-experimental); + box-shadow: var(--p-shadow-button-hover-experimental); + box-shadow: var(--p-shadow-button-disabled-experimental); + box-shadow: var(--p-shadow-button-primary-strong-experimental); + box-shadow: var(--p-shadow-button-primary-strong-inset-experimental); + box-shadow: var(--p-shadow-button-primary-strong-hover-experimental); + box-shadow: var(--p-shadow-border-inset-experimental); +} diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.output.scss new file mode 100644 index 00000000000..fd88940e0ef --- /dev/null +++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.output.scss @@ -0,0 +1,23 @@ +.shadow { + box-shadow: var(--p-shadow-inset-200); + box-shadow: var(--p-shadow-inset-200); + box-shadow: var(--p-shadow-inset-100); + box-shadow: var(--p-shadow-0); + box-shadow: var(--p-shadow-100); + box-shadow: var(--p-shadow-200); + box-shadow: var(--p-shadow-300); + box-shadow: var(--p-shadow-400); + box-shadow: var(--p-shadow-500); + box-shadow: var(--p-shadow-600); + box-shadow: var(--p-shadow-bevel-100); + box-shadow: var(--p-shadow-100); + box-shadow: var(--p-shadow-200); + box-shadow: var(--p-shadow-300); + box-shadow: var(--p-shadow-button); + box-shadow: var(--p-shadow-button-hover); + box-shadow: inset 0 0 0 1px rgba(227, 227, 227, 1); + box-shadow: var(--p-shadow-button-primary); + box-shadow: var(--p-shadow-button-primary-inset); + box-shadow: var(--p-shadow-button-primary-hover); + box-shadow: var(--p-shadow-border-inset); +} diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/transform.ts b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/transform.ts new file mode 100644 index 00000000000..ee2e0d71f97 --- /dev/null +++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/transform.ts @@ -0,0 +1,37 @@ +import type {FileInfo, API} from 'jscodeshift'; + +import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform'; + +export default function transformer(fileInfo: FileInfo, _: API) { + return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps}); +} + +const replacementMaps = { + '/.+/': { + '--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', + }, +};