From 0a0f3c69a8001e5f308ed5b0dd84209b6f7a1fb1 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 13 Feb 2024 09:12:58 -0700 Subject: [PATCH 1/5] Add v13 primitive font token migration --- .../tests/transform.test.ts | 12 +++++++++++ ...es-replace-custom-property-font.input.scss | 10 ++++++++++ ...s-replace-custom-property-font.output.scss | 10 ++++++++++ .../transform.ts | 20 +++++++++++++++++++ 4 files changed, 52 insertions(+) create mode 100644 polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts create mode 100644 polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss create mode 100644 polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss create mode 100644 polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts new file mode 100644 index 00000000000..0011d1ab654 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts @@ -0,0 +1,12 @@ +import {check} from '../../../utilities/check'; + +const transform = 'v13-styles-replace-custom-property-font'; +const fixtures = ['v13-styles-replace-custom-property-font']; + +for (const fixture of fixtures) { + check(__dirname, { + fixture, + transform, + extension: 'scss', + }); +} diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss new file mode 100644 index 00000000000..3b1ae935f6f --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss @@ -0,0 +1,10 @@ +.font { + font-size: var(--p-font-size-750); + font-size: var(--p-font-size-800); + font-size: var(--p-font-size-900); + font-size: var(--p-font-size-1000); + letter-spacing: var(--p-font-letter-spacing-denser); + letter-spacing: var(--p-font-letter-spacing-densest); + line-height: var(--p-font-line-height-1000); + line-height: var(--p-font-line-height-1200); +} diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss new file mode 100644 index 00000000000..826591a9b96 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss @@ -0,0 +1,10 @@ +.font { + font-size: var(--p-font-size-600); + font-size: var(--p-font-size-600); + font-size: var(--p-font-size-600); + font-size: var(--p-font-size-600); + letter-spacing: var(--p-font-letter-spacing-dense); + letter-spacing: var(--p-font-letter-spacing-dense); + line-height: var(--p-font-line-height-800); + line-height: var(--p-font-line-height-800); +} diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts new file mode 100644 index 00000000000..a551469e4b5 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts @@ -0,0 +1,20 @@ +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-font-size-750': '--p-font-size-600', + '--p-font-size-800': '--p-font-size-600', + '--p-font-size-900': '--p-font-size-600', + '--p-font-size-1000': '--p-font-size-600', + '--p-font-letter-spacing-denser': '--p-font-letter-spacing-dense', + '--p-font-letter-spacing-densest': '--p-font-letter-spacing-dense', + '--p-font-line-height-1000': '--p-font-line-height-800', + '--p-font-line-height-1200': '--p-font-line-height-800', + }, +}; From 59b6c9d74a42b573685f68bacffb0f87c4070045 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 13 Feb 2024 09:41:57 -0700 Subject: [PATCH 2/5] Add migration documentation --- .../content/tools/polaris-migrator.mdx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/polaris.shopify.com/content/tools/polaris-migrator.mdx b/polaris.shopify.com/content/tools/polaris-migrator.mdx index 72dca3558ab..3e91218e9c0 100644 --- a/polaris.shopify.com/content/tools/polaris-migrator.mdx +++ b/polaris.shopify.com/content/tools/polaris-migrator.mdx @@ -37,6 +37,35 @@ npx @shopify/polaris-migrator ## Migrations +### @shopify/polaris-react v13.0.0 + +If you are upgrading Polaris from v12 to v13 please follow our [migration guide](/version-guides/migrating-from-v12-to-v13). + +#### `v13-styles-replace-custom-property-font` + +Replace deprecated font CSS custom properties with corresponding Polaris custom property replacement values. + +```diff +- font-size: var(--p-font-size-750); ++ font-size: var(--p-font-size-600); +``` + +```diff +- letter-spacing: var(--p-font-letter-spacing-denser); ++ letter-spacing: var(--p-font-letter-spacing-dense); +``` + +```diff +- line-height: var(--p-font-line-height-1000); ++ line-height: var(--p-font-line-height-800); +``` + +
+ +```sh +npx @shopify/polaris-migrator v13-styles-replace-custom-property-font +``` + ### @shopify/polaris-icons v8.0.0 #### `icons-v8-update-names` From 7433a33fa68aa50f71a62ced1436bdd123c3dba5 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 13 Feb 2024 09:47:24 -0700 Subject: [PATCH 3/5] Add changeset --- .changeset/spicy-dryers-nail.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/spicy-dryers-nail.md diff --git a/.changeset/spicy-dryers-nail.md b/.changeset/spicy-dryers-nail.md new file mode 100644 index 00000000000..34a4115437d --- /dev/null +++ b/.changeset/spicy-dryers-nail.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris-migrator': minor +'polaris.shopify.com': minor +--- + +Created migration to replace deprecated `font` custom properties in polaris-react v13.0.0 From 55ca59f9f63c3edbf985ba6abc7a66117667a8f6 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 13 Feb 2024 12:28:46 -0700 Subject: [PATCH 4/5] Add migrations for composite text tokens --- ...-styles-replace-custom-property-font.input.scss | 10 ++++++++++ ...styles-replace-custom-property-font.output.scss | 10 ++++++++++ .../transform.ts | 14 ++++++++++++++ 3 files changed, 34 insertions(+) diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss index 3b1ae935f6f..db0849ebb32 100644 --- a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss @@ -3,8 +3,18 @@ font-size: var(--p-font-size-800); font-size: var(--p-font-size-900); font-size: var(--p-font-size-1000); + font-size: var(--p-text-heading-2xl-font-size); + font-size: var(--p-text-heading-3xl-font-size); letter-spacing: var(--p-font-letter-spacing-denser); letter-spacing: var(--p-font-letter-spacing-densest); + letter-spacing: var(--p-text-heading-2xl-font-letter-spacing); + letter-spacing: var(--p-text-heading-3xl-font-letter-spacing); line-height: var(--p-font-line-height-1000); line-height: var(--p-font-line-height-1200); + line-height: var(--p-text-heading-2xl-font-line-height); + line-height: var(--p-text-heading-3xl-font-line-height); + font-family: var(--p-text-heading-2xl-font-family); + font-family: var(--p-text-heading-3xl-font-family); + font-weight: var(--p-text-heading-2xl-font-weight); + font-weight: var(--p-text-heading-3xl-font-weight); } diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss index 826591a9b96..adba971ea78 100644 --- a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss @@ -3,8 +3,18 @@ font-size: var(--p-font-size-600); font-size: var(--p-font-size-600); font-size: var(--p-font-size-600); + font-size: var(--p-text-heading-xl-font-size); + font-size: var(--p-text-heading-xl-font-size); letter-spacing: var(--p-font-letter-spacing-dense); letter-spacing: var(--p-font-letter-spacing-dense); + letter-spacing: var(--p-text-heading-xl-font-letter-spacing); + letter-spacing: var(--p-text-heading-xl-font-letter-spacing); line-height: var(--p-font-line-height-800); line-height: var(--p-font-line-height-800); + line-height: var(--p-text-heading-xl-font-line-height); + line-height: var(--p-text-heading-xl-font-line-height); + font-family: var(--p-text-heading-xl-font-family); + font-family: var(--p-text-heading-xl-font-family); + font-weight: var(--p-text-heading-xl-font-weight); + font-weight: var(--p-text-heading-xl-font-weight); } diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts index a551469e4b5..1e5eea07ee8 100644 --- a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts @@ -16,5 +16,19 @@ const replacementMaps = { '--p-font-letter-spacing-densest': '--p-font-letter-spacing-dense', '--p-font-line-height-1000': '--p-font-line-height-800', '--p-font-line-height-1200': '--p-font-line-height-800', + '--p-text-heading-3xl-font-family': '--p-text-heading-xl-font-family', + '--p-text-heading-3xl-font-size': '--p-text-heading-xl-font-size', + '--p-text-heading-3xl-font-weight': '--p-text-heading-xl-font-weight', + '--p-text-heading-3xl-font-letter-spacing': + '--p-text-heading-xl-font-letter-spacing', + '--p-text-heading-3xl-font-line-height': + '--p-text-heading-xl-font-line-height', + '--p-text-heading-2xl-font-family': '--p-text-heading-xl-font-family', + '--p-text-heading-2xl-font-size': '--p-text-heading-xl-font-size', + '--p-text-heading-2xl-font-weight': '--p-text-heading-xl-font-weight', + '--p-text-heading-2xl-font-letter-spacing': + '--p-text-heading-xl-font-letter-spacing', + '--p-text-heading-2xl-font-line-height': + '--p-text-heading-xl-font-line-height', }, }; From 4115beb9380f865e3ab80a4213c11e3264aa3e3b Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 13 Feb 2024 15:17:46 -0700 Subject: [PATCH 5/5] Remove unneeded migration --- .../tests/v13-styles-replace-custom-property-font.input.scss | 1 - .../tests/v13-styles-replace-custom-property-font.output.scss | 1 - .../v13-styles-replace-custom-property-font/transform.ts | 1 - 3 files changed, 3 deletions(-) diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss index db0849ebb32..1831c4c25b4 100644 --- a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss @@ -1,6 +1,5 @@ .font { font-size: var(--p-font-size-750); - font-size: var(--p-font-size-800); font-size: var(--p-font-size-900); font-size: var(--p-font-size-1000); font-size: var(--p-text-heading-2xl-font-size); diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss index adba971ea78..56a297448d6 100644 --- a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss @@ -2,7 +2,6 @@ font-size: var(--p-font-size-600); font-size: var(--p-font-size-600); font-size: var(--p-font-size-600); - font-size: var(--p-font-size-600); font-size: var(--p-text-heading-xl-font-size); font-size: var(--p-text-heading-xl-font-size); letter-spacing: var(--p-font-letter-spacing-dense); diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts index 1e5eea07ee8..a8f492c2424 100644 --- a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts @@ -9,7 +9,6 @@ export default function transformer(fileInfo: FileInfo, _: API) { const replacementMaps = { '/.+/': { '--p-font-size-750': '--p-font-size-600', - '--p-font-size-800': '--p-font-size-600', '--p-font-size-900': '--p-font-size-600', '--p-font-size-1000': '--p-font-size-600', '--p-font-letter-spacing-denser': '--p-font-letter-spacing-dense',