From a39e71a434e12340ae11e9ab7ab22046077800a4 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 16 Feb 2024 11:20:01 -0700 Subject: [PATCH 01/10] Add console.warn for deprecated prop values Co-Authored-By: aveline --- polaris-react/src/components/Text/Text.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index 400caa9f73e..4fd0c7edfdb 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -88,6 +88,19 @@ export const Text = ({ visuallyHidden = false, textDecorationLine, }: TextProps) => { + const deprecatedVariants = ['heading2xl', 'heading3xl']; + + if ( + process.env.NODE_ENV === 'development' && + variant && + deprecatedVariants.includes(variant) + ) { + // eslint-disable-next-line no-console + console.warn( + `Deprecation: . The value "${variant}" will be removed in a future major version of Polaris. Use "displayXl" instead.`, + ); + } + const Component = as || (visuallyHidden ? 'span' : 'p'); const className = classNames( From 22d8042b1f82bf494170e9cd7fbdc8f48e07ba42 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 10:08:25 -0700 Subject: [PATCH 02/10] Add DEPRECATED.md file --- polaris-react/DEPRECATED.md | 104 ++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 polaris-react/DEPRECATED.md diff --git a/polaris-react/DEPRECATED.md b/polaris-react/DEPRECATED.md new file mode 100644 index 00000000000..cc7a1dadd59 --- /dev/null +++ b/polaris-react/DEPRECATED.md @@ -0,0 +1,104 @@ +# Deprecated + +## Component migrations + +### Text + +#### Replace `variant="heading2xl"` prop with `variant="headingXl"` + +```bash +npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading2xl --toValue headingXl "**/*.{ts,tsx}" +``` + +
✅ Post-migration RegExp validation +``` +\w](?:[^>]|\n)*?variant="heading2xl" +``` +
+ +
💡 Migration example +```diff +- ++ +``` +
+ +#### Replace `variant="heading3xl"` prop with `variant="headingXl"` + +```bash +npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading3xl --toValue headingXl "**/*.{ts,tsx}" +``` + +
✅ Post-migration RegExp validation +``` +\w](?:[^>]|\n)*?variant="heading3xl" +``` +
+ +
💡 Migration example +```diff +- ++ +``` +
+ +## Token migrations + +### Font + +To replace deprecated `font` custom properties, you can run the [v13-styles-replace-custom-property-font](/tools/polaris-migrator#v13-styles-replace-custom-property-font) migration then validate with RegExp. Please reference the [recommended migration workflow](#migration-workflow) section below for additional migration support. + +
💡 Migration example +```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); +``` + +
+ +```bash +npx @shopify/polaris-migrator v13-styles-replace-custom-property-font "**/*.{css,scss}" +``` + +
✅ Post-migration RegExp validation + +After migrating, use the following RegExp to check for any additional instances of `font` custom properties across all file types: + +`(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-])` + +
+ +
➡️ Token replacement mappings + +| Deprecated Token | Replacement Value | +| ------------------------------------------ | ----------------------------------------- | +| `--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` | +| `--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` | +| `--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` | + +
From 2ff84e373882b0ccb1eee680280428936e8c887b Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 10:08:34 -0700 Subject: [PATCH 03/10] Update deprecation guidance --- documentation/Deprecation guidelines.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/documentation/Deprecation guidelines.md b/documentation/Deprecation guidelines.md index 89668d53927..cc8043fe763 100644 --- a/documentation/Deprecation guidelines.md +++ b/documentation/Deprecation guidelines.md @@ -17,6 +17,7 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) +- Add supporting documentation for deprecation in DEPRECATED.md - Remove component in next major Polaris version branch ## Props @@ -37,11 +38,30 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) +- Add supporting documentation for deprecation in DEPRECATED.md - Remove prop in next major Polaris version branch ## Prop values - Mark the prop value(s) as deprecated + + - Add a console.warn() for deprecated prop value(s) to component + + ```tsx + const deprecatedVariants = ['value1', 'value2']; + + if ( + process.env.NODE_ENV === 'development' && + variant && + deprecatedVariants.includes(variant) + ) { + // eslint-disable-next-line no-console + console.warn( + `Deprecation: . The value "${variant}" will be removed in a future major version of Polaris. Use "value3" instead.`, + ); + } + ``` + - Add component, prop, and deprecated prop value(s) to `componentUnionTypeDeprecations` ([example](https://github.com/Shopify/polaris/tree/main/polaris.shopify.com/pages/components/%5Bgroup%5D/%5Bcomponent%5D/index.tsx#L80)) ```tsx const componentUnionTypeDeprecations: { @@ -55,12 +75,14 @@ Follow these guidelines for deprecating [components](#components), [props](#prop }; ``` - Check documentation is updated on polaris.shopify.com + - Create automated migration(s) ([examples](https://github.com/Shopify/polaris/tree/main/polaris-migrator/src/migrations)) - Add supporting documentation for deprecation in next major version guide ([examples](https://github.com/Shopify/polaris/tree/main/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.mdx#L122)) - Document deprecation reason - Document any alternatives - Document automated migration(s) - Document manual migration(s) +- Add supporting documentation for deprecation in DEPRECATED.md - Remove prop value in next major Polaris version branch ## Tokens @@ -71,4 +93,5 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) +- Add supporting documentation for deprecation in DEPRECATED.md - Remove token in next major Polaris version branch From 4b717389ee80fc168414e9002706b1ebb6b2055f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 10:10:33 -0700 Subject: [PATCH 04/10] Add changeset --- .changeset/slimy-tips-smash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slimy-tips-smash.md diff --git a/.changeset/slimy-tips-smash.md b/.changeset/slimy-tips-smash.md new file mode 100644 index 00000000000..b99b7631d3e --- /dev/null +++ b/.changeset/slimy-tips-smash.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Deprecated `heading2xl` and `heading3xl` variants in `Text` component From 95bb99be144b64dcb8cbca7d06ae25bcc0cdad3e Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 10:14:17 -0700 Subject: [PATCH 05/10] Fix formatting --- polaris-react/DEPRECATED.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/polaris-react/DEPRECATED.md b/polaris-react/DEPRECATED.md index cc7a1dadd59..471c4b2ad54 100644 --- a/polaris-react/DEPRECATED.md +++ b/polaris-react/DEPRECATED.md @@ -11,16 +11,20 @@ npx @shopify/polaris-migrator react-update-component-prop --componentName Text - ```
✅ Post-migration RegExp validation + ``` \w](?:[^>]|\n)*?variant="heading2xl" ``` +
💡 Migration example + ```diff - + ``` +
#### Replace `variant="heading3xl"` prop with `variant="headingXl"` @@ -30,16 +34,20 @@ npx @shopify/polaris-migrator react-update-component-prop --componentName Text - ```
✅ Post-migration RegExp validation + ``` \w](?:[^>]|\n)*?variant="heading3xl" ``` +
💡 Migration example + ```diff - + ``` +
## Token migrations @@ -49,6 +57,7 @@ npx @shopify/polaris-migrator react-update-component-prop --componentName Text - To replace deprecated `font` custom properties, you can run the [v13-styles-replace-custom-property-font](/tools/polaris-migrator#v13-styles-replace-custom-property-font) migration then validate with RegExp. Please reference the [recommended migration workflow](#migration-workflow) section below for additional migration support.
💡 Migration example + ```diff - font-size: var(--p-font-size-750); + font-size: var(--p-font-size-600); From 643f13923d1f8795a1a9f819c7c9c2a2bbdd77b9 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 10:16:18 -0700 Subject: [PATCH 06/10] Fix formatting --- polaris-react/DEPRECATED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/DEPRECATED.md b/polaris-react/DEPRECATED.md index 471c4b2ad54..1bc579efd07 100644 --- a/polaris-react/DEPRECATED.md +++ b/polaris-react/DEPRECATED.md @@ -83,7 +83,7 @@ npx @shopify/polaris-migrator v13-styles-replace-custom-property-font "**/*.{css After migrating, use the following RegExp to check for any additional instances of `font` custom properties across all file types: -`(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-])` +```(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-])```
From a499e6ab3146d78692036f10e704b39d64eba43a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 10:17:16 -0700 Subject: [PATCH 07/10] Fix formatting --- polaris-react/DEPRECATED.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/polaris-react/DEPRECATED.md b/polaris-react/DEPRECATED.md index 1bc579efd07..0d940d879b4 100644 --- a/polaris-react/DEPRECATED.md +++ b/polaris-react/DEPRECATED.md @@ -83,7 +83,9 @@ npx @shopify/polaris-migrator v13-styles-replace-custom-property-font "**/*.{css After migrating, use the following RegExp to check for any additional instances of `font` custom properties across all file types: -```(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-])``` +``` +(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-]) +``` From 7950ee06c849107ebbf6a978818a2a6f54441cb5 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 13:49:59 -0700 Subject: [PATCH 08/10] Remove deprecated file Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- documentation/Deprecation guidelines.md | 4 - polaris-react/DEPRECATED.md | 115 ------------------------ 2 files changed, 119 deletions(-) delete mode 100644 polaris-react/DEPRECATED.md diff --git a/documentation/Deprecation guidelines.md b/documentation/Deprecation guidelines.md index cc8043fe763..8661a784583 100644 --- a/documentation/Deprecation guidelines.md +++ b/documentation/Deprecation guidelines.md @@ -17,7 +17,6 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) -- Add supporting documentation for deprecation in DEPRECATED.md - Remove component in next major Polaris version branch ## Props @@ -38,7 +37,6 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) -- Add supporting documentation for deprecation in DEPRECATED.md - Remove prop in next major Polaris version branch ## Prop values @@ -82,7 +80,6 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) -- Add supporting documentation for deprecation in DEPRECATED.md - Remove prop value in next major Polaris version branch ## Tokens @@ -93,5 +90,4 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Document any alternatives - Document automated migration(s) - Document manual migration(s) -- Add supporting documentation for deprecation in DEPRECATED.md - Remove token in next major Polaris version branch diff --git a/polaris-react/DEPRECATED.md b/polaris-react/DEPRECATED.md deleted file mode 100644 index 0d940d879b4..00000000000 --- a/polaris-react/DEPRECATED.md +++ /dev/null @@ -1,115 +0,0 @@ -# Deprecated - -## Component migrations - -### Text - -#### Replace `variant="heading2xl"` prop with `variant="headingXl"` - -```bash -npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading2xl --toValue headingXl "**/*.{ts,tsx}" -``` - -
✅ Post-migration RegExp validation - -``` -\w](?:[^>]|\n)*?variant="heading2xl" -``` - -
- -
💡 Migration example - -```diff -- -+ -``` - -
- -#### Replace `variant="heading3xl"` prop with `variant="headingXl"` - -```bash -npx @shopify/polaris-migrator react-update-component-prop --componentName Text --fromProp variant --fromValue heading3xl --toValue headingXl "**/*.{ts,tsx}" -``` - -
✅ Post-migration RegExp validation - -``` -\w](?:[^>]|\n)*?variant="heading3xl" -``` - -
- -
💡 Migration example - -```diff -- -+ -``` - -
- -## Token migrations - -### Font - -To replace deprecated `font` custom properties, you can run the [v13-styles-replace-custom-property-font](/tools/polaris-migrator#v13-styles-replace-custom-property-font) migration then validate with RegExp. Please reference the [recommended migration workflow](#migration-workflow) section below for additional migration support. - -
💡 Migration example - -```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); -``` - -
- -```bash -npx @shopify/polaris-migrator v13-styles-replace-custom-property-font "**/*.{css,scss}" -``` - -
✅ Post-migration RegExp validation - -After migrating, use the following RegExp to check for any additional instances of `font` custom properties across all file types: - -``` -(?:--p-font-size-750|--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-denser|--p-font-letter-spacing-densest|--p-font-line-height-1000|--p-font-line-height-1200)|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height|--p-text-heading-2xl-font-family|--p-text-heading-2xl-font-size|--p-text-heading-2xl-font-weight|--p-text-heading-2xl-font-letter-spacing|--p-text-heading-2xl-font-line-height(?![\w-]) -``` - -
- -
➡️ Token replacement mappings - -| Deprecated Token | Replacement Value | -| ------------------------------------------ | ----------------------------------------- | -| `--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` | -| `--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` | -| `--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` | - -
From 9b24a61a52b0a2539dcca7ccb5dd3564b040754f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 13:52:04 -0700 Subject: [PATCH 09/10] Restructure deprecatedVariants Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- polaris-react/src/components/Text/Text.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index 4fd0c7edfdb..97a0c16d5e6 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -47,6 +47,10 @@ type Tone = type TextDecorationLine = 'line-through'; +const deprecatedVariants: {[V in Variant]?: Variant} = { + heading2xl: 'headingXl', + heading3xl: 'headingXl', +}; export interface TextProps { /** Adjust horizontal alignment of text */ alignment?: Alignment; @@ -88,16 +92,14 @@ export const Text = ({ visuallyHidden = false, textDecorationLine, }: TextProps) => { - const deprecatedVariants = ['heading2xl', 'heading3xl']; - if ( process.env.NODE_ENV === 'development' && variant && - deprecatedVariants.includes(variant) + variant in deprecatedVariants ) { // eslint-disable-next-line no-console console.warn( - `Deprecation: . The value "${variant}" will be removed in a future major version of Polaris. Use "displayXl" instead.`, + `Deprecation: . The value "${variant}" will be removed in a future major version of Polaris. Use "${deprecatedVariants[variant]}" instead.`, ); } From 46d09079e5c54a96cf3719c94627148cd6c31073 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 21 Feb 2024 13:59:22 -0700 Subject: [PATCH 10/10] Use hasOwnProperty Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- documentation/Deprecation guidelines.md | 10 ++++++---- polaris-react/src/components/Text/Text.tsx | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/documentation/Deprecation guidelines.md b/documentation/Deprecation guidelines.md index 8661a784583..324785cbeb2 100644 --- a/documentation/Deprecation guidelines.md +++ b/documentation/Deprecation guidelines.md @@ -46,16 +46,18 @@ Follow these guidelines for deprecating [components](#components), [props](#prop - Add a console.warn() for deprecated prop value(s) to component ```tsx - const deprecatedVariants = ['value1', 'value2']; + const deprecatedVariants: {[V in Variant]?: Variant} = { + heading2xl: 'headingXl', + heading3xl: 'headingXl', + }; if ( process.env.NODE_ENV === 'development' && variant && - deprecatedVariants.includes(variant) + Object.prototype.hasOwnProperty.call(deprecatedVariants, variant) ) { - // eslint-disable-next-line no-console console.warn( - `Deprecation: . The value "${variant}" will be removed in a future major version of Polaris. Use "value3" instead.`, + `Deprecation: . The value "${variant}" will be removed in a future major version of Polaris. Use "${deprecatedVariants[variant]}" instead.`, ); } ``` diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index 97a0c16d5e6..666acf3d7d3 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -95,7 +95,7 @@ export const Text = ({ if ( process.env.NODE_ENV === 'development' && variant && - variant in deprecatedVariants + Object.prototype.hasOwnProperty.call(deprecatedVariants, variant) ) { // eslint-disable-next-line no-console console.warn(