From 8d5e18c3ac5ee666fa06edd5c90777f396992f2f Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 2 Feb 2022 13:00:01 -0800 Subject: [PATCH 1/8] Include migration guidance on css custom properties --- .../guides/migrating-from-v8-to-v9.md | 58 ++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index c0d09148896..ffae2494bb6 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -1,9 +1,48 @@ -# Migrating from v8 to v9 +https://lonsdaleleather.com/collections/workshops# Migrating from v8 to v9 Polaris v9.0.0 ([full release notes](https://github.com/Shopify/polaris-react/releases/tag/v9.0.0)) features removal of the public scss api and removal of scss functions and mixins. ## Theme provider +## CSS Custom Properties + +### Global CSS Custom Properties + +| Before | After | +| :------------------------------------: | :--------------------------------: | +| `--p-badge-font-weight` | removed | +| `--p-button-font-weight` | removed | +| `--p-override-*` | removed | +| `--p-non-null-content` | removed | +| `--p-badge-mix-blend-mode` | removed | +| `--p-range-slider-thumb-scale` | removed | +| `--global-ribbon-height` | removed | +| `--top-bar-background` | removed | +| `--Polaris-RangeSlider-progress-lower` | removed | +| `--Polaris-RangeSlider-progress-upper` | removed | +| `--Polaris-RangeSlider-progress` | removed | +| `--Polaris-RangeSlider-output-factor` | removed | +| `--top-bar-color` | removed | +| `--top-bar-background-lighter` | removed | +| `--top-bar-background-darker` | removed | +| `--top-bar-border` | removed | +| `--p-frame-offset` | removed | +| `--p-checkbox-offset` | removed | +| `--p-scroll-bar-content-width` | removed | +| `--p-shadow-from-ambient-light` | removed | +| `--p-shadow-from-direct-light` | removed | +| `--p-shadow-from-dim-light` | removed | +| `--p-duration-1-0-0` | `--p-duration-100` | +| `--p-duration-1-5-0` | `--p-duration-150` | +| `--p-card-shadow` | `--p-shadow-card` | +| `--p-popover-shadow` | `--p-shadow-popover` | +| `--p-modal-shadow` | `--p-shadow-modal` | +| `--p-top-bar-shadow` | `--p-shadow-top-bar` | +| `--p-button-drop-shadow` | `--p-shadow-button` | +| `--p-button-inner-shadow` | `--p-shadows-inset-button` | +| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` | +| `--p-icon-size` | `--p-icon-size-small` | + ## Removal of the public scss api Any functions that were being consumed from `build/styles/_public-api.scss` have been removed. The functions can be found in the following permalinks. @@ -35,3 +74,20 @@ Any functions that were being consumed from `build/styles/_public-api.scss` have [`./shared/interaction-state`](https://github.com/Shopify/polaris-react/blob/e2e6cb263bac1c5c1e607a6f6bd949a2d349d197/src/styles/shared/_interaction-state.scss) [`./shared/printing`](https://github.com/Shopify/polaris-react/blob/e2e6cb263bac1c5c1e607a6f6bd949a2d349d197/src/styles/shared/_printing.scss) + +## Development Workflow + +Addition of a custom stylelint plugin to validate custom property usage across `polaris-react`. + +`@shopify/custom-properties-allowed-list` Plugin Features: + +- Specify a list of allowed custom property names permitted in a `.scss` file. +- Specify a list of allowed custom property values permitted in a `.scss` file. + (Note: Allowed custom property values can be configured per CSS property) + +The `@shopify/custom-properties-allowed-list` plugin has been configured in `polaris-react` to: + +- Ensure local component custom properties have a `--pc-` prefix. +- Ensure local component custom properties do NOT set the `--p-` prefix. + (Note: `--p-` custom properties are auto generated from our Polaris tokens) +- Validates `--p-*` custom properties match existing Polaris tokens. From cee27d5c88977e7ee22b85f68f64bbbacb2e56f1 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 2 Feb 2022 13:05:05 -0800 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=99=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index ffae2494bb6..24f01d54c0b 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -1,4 +1,4 @@ -https://lonsdaleleather.com/collections/workshops# Migrating from v8 to v9 +# Migrating from v8 to v9 Polaris v9.0.0 ([full release notes](https://github.com/Shopify/polaris-react/releases/tag/v9.0.0)) features removal of the public scss api and removal of scss functions and mixins. From aed0d2114be43dd71fb7957c6a8d734c7afb1218 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 2 Feb 2022 13:06:18 -0800 Subject: [PATCH 3/8] Update migrating-from-v8-to-v9.md --- documentation/guides/migrating-from-v8-to-v9.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 24f01d54c0b..9750b668177 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -6,8 +6,6 @@ Polaris v9.0.0 ([full release notes](https://github.com/Shopify/polaris-react/re ## CSS Custom Properties -### Global CSS Custom Properties - | Before | After | | :------------------------------------: | :--------------------------------: | | `--p-badge-font-weight` | removed | From 99cecc2d611030163247e1b58133fad3cf9e497c Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 2 Feb 2022 14:06:52 -0800 Subject: [PATCH 4/8] Update migrating-from-v8-to-v9.md --- .../guides/migrating-from-v8-to-v9.md | 96 +++++++++---------- 1 file changed, 45 insertions(+), 51 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 9750b668177..64cad4527f8 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -6,40 +6,51 @@ Polaris v9.0.0 ([full release notes](https://github.com/Shopify/polaris-react/re ## CSS Custom Properties -| Before | After | -| :------------------------------------: | :--------------------------------: | -| `--p-badge-font-weight` | removed | -| `--p-button-font-weight` | removed | -| `--p-override-*` | removed | -| `--p-non-null-content` | removed | -| `--p-badge-mix-blend-mode` | removed | -| `--p-range-slider-thumb-scale` | removed | -| `--global-ribbon-height` | removed | -| `--top-bar-background` | removed | -| `--Polaris-RangeSlider-progress-lower` | removed | -| `--Polaris-RangeSlider-progress-upper` | removed | -| `--Polaris-RangeSlider-progress` | removed | -| `--Polaris-RangeSlider-output-factor` | removed | -| `--top-bar-color` | removed | -| `--top-bar-background-lighter` | removed | -| `--top-bar-background-darker` | removed | -| `--top-bar-border` | removed | -| `--p-frame-offset` | removed | -| `--p-checkbox-offset` | removed | -| `--p-scroll-bar-content-width` | removed | -| `--p-shadow-from-ambient-light` | removed | -| `--p-shadow-from-direct-light` | removed | -| `--p-shadow-from-dim-light` | removed | -| `--p-duration-1-0-0` | `--p-duration-100` | -| `--p-duration-1-5-0` | `--p-duration-150` | -| `--p-card-shadow` | `--p-shadow-card` | -| `--p-popover-shadow` | `--p-shadow-popover` | -| `--p-modal-shadow` | `--p-shadow-modal` | -| `--p-top-bar-shadow` | `--p-shadow-top-bar` | -| `--p-button-drop-shadow` | `--p-shadow-button` | -| `--p-button-inner-shadow` | `--p-shadows-inset-button` | -| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` | -| `--p-icon-size` | `--p-icon-size-small` | +CSS Custom Properties that were renamed can be replaced with the new CSS custom property name. + +| Before | After | +| :-------------------------------: | :--------------------------------: | +| `--p-badge-font-weight` | `--p-font-weight-regular` | +| `--p-button-font-weight` | `--p-font-weight-medium` | +| `--p-duration-1-0-0` | `--p-duration-100` | +| `--p-duration-1-5-0` | `--p-duration-150` | +| `--p-card-shadow` | `--p-shadow-card` | +| `--p-popover-shadow` | `--p-shadow-popover` | +| `--p-modal-shadow` | `--p-shadow-modal` | +| `--p-top-bar-shadow` | `--p-shadow-top-bar` | +| `--p-button-drop-shadow` | `--p-shadow-button` | +| `--p-button-inner-shadow` | `--p-shadows-inset-button` | +| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` | +| `--p-icon-size` | `--p-icon-size-small` | + +CSS Custom Properties that have been deprecated can be replaced with the CSS property value. + +| Before | Value | +| :------------------------------------: | :----------------------: | +| `--p-override-none` | `none` | +| `--p-override-transparent` | `transparent` | +| `--p-override-one` | `1` | +| `--p-override-visible` | `visible` | +| `--p-override-zero` | `0` | +| `--p-non-null-content` | `''` | +| `--p-badge-mix-blend-mode` | `luminosity` | +| `--p-range-slider-thumb-scale` | `1.5` | +| `--global-ribbon-height` | removed | +| `--Polaris-RangeSlider-progress-lower` | removed | +| `--Polaris-RangeSlider-progress-upper` | removed | +| `--Polaris-RangeSlider-progress` | removed | +| `--Polaris-RangeSlider-output-factor` | removed | +| `--top-bar-color` | removed | +| `--top-bar-background` | removed | +| `--top-bar-background-lighter` | removed | +| `--top-bar-background-darker` | removed | +| `--top-bar-border` | removed | +| `--p-frame-offset` | `0px` | +| `--p-checkbox-offset` | removed | +| `--p-scroll-bar-content-width` | removed | +| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` | +| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` | +| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` | ## Removal of the public scss api @@ -72,20 +83,3 @@ Any functions that were being consumed from `build/styles/_public-api.scss` have [`./shared/interaction-state`](https://github.com/Shopify/polaris-react/blob/e2e6cb263bac1c5c1e607a6f6bd949a2d349d197/src/styles/shared/_interaction-state.scss) [`./shared/printing`](https://github.com/Shopify/polaris-react/blob/e2e6cb263bac1c5c1e607a6f6bd949a2d349d197/src/styles/shared/_printing.scss) - -## Development Workflow - -Addition of a custom stylelint plugin to validate custom property usage across `polaris-react`. - -`@shopify/custom-properties-allowed-list` Plugin Features: - -- Specify a list of allowed custom property names permitted in a `.scss` file. -- Specify a list of allowed custom property values permitted in a `.scss` file. - (Note: Allowed custom property values can be configured per CSS property) - -The `@shopify/custom-properties-allowed-list` plugin has been configured in `polaris-react` to: - -- Ensure local component custom properties have a `--pc-` prefix. -- Ensure local component custom properties do NOT set the `--p-` prefix. - (Note: `--p-` custom properties are auto generated from our Polaris tokens) -- Validates `--p-*` custom properties match existing Polaris tokens. From 3d96dbc5f5682d9c261c1d3fab6dd6fa30d4dcb2 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 2 Feb 2022 14:14:16 -0800 Subject: [PATCH 5/8] Update migrating-from-v8-to-v9.md --- .../guides/migrating-from-v8-to-v9.md | 42 +++++++------------ 1 file changed, 16 insertions(+), 26 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 64cad4527f8..c4d7f11d0dd 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -25,32 +25,22 @@ CSS Custom Properties that were renamed can be replaced with the new CSS custom CSS Custom Properties that have been deprecated can be replaced with the CSS property value. -| Before | Value | -| :------------------------------------: | :----------------------: | -| `--p-override-none` | `none` | -| `--p-override-transparent` | `transparent` | -| `--p-override-one` | `1` | -| `--p-override-visible` | `visible` | -| `--p-override-zero` | `0` | -| `--p-non-null-content` | `''` | -| `--p-badge-mix-blend-mode` | `luminosity` | -| `--p-range-slider-thumb-scale` | `1.5` | -| `--global-ribbon-height` | removed | -| `--Polaris-RangeSlider-progress-lower` | removed | -| `--Polaris-RangeSlider-progress-upper` | removed | -| `--Polaris-RangeSlider-progress` | removed | -| `--Polaris-RangeSlider-output-factor` | removed | -| `--top-bar-color` | removed | -| `--top-bar-background` | removed | -| `--top-bar-background-lighter` | removed | -| `--top-bar-background-darker` | removed | -| `--top-bar-border` | removed | -| `--p-frame-offset` | `0px` | -| `--p-checkbox-offset` | removed | -| `--p-scroll-bar-content-width` | removed | -| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` | -| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` | -| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` | +| Before | Value | +| :-----------------------------: | :----------------------: | +| `--p-override-none` | `none` | +| `--p-override-transparent` | `transparent` | +| `--p-override-one` | `1` | +| `--p-override-visible` | `visible` | +| `--p-override-zero` | `0` | +| `--p-non-null-content` | `''` | +| `--p-badge-mix-blend-mode` | `luminosity` | +| `--p-range-slider-thumb-scale` | `1.5` | +| `--p-frame-offset` | `0px` | +| `--p-checkbox-offset` | removed | +| `--p-scroll-bar-content-width` | removed | +| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` | +| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` | +| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` | ## Removal of the public scss api From 6d8b55683140f9d2b40c6ce72a9ed28b5cb63fe8 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 2 Feb 2022 14:17:27 -0800 Subject: [PATCH 6/8] Update migrating-from-v8-to-v9.md --- documentation/guides/migrating-from-v8-to-v9.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index c4d7f11d0dd..f9e4832f5d9 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -36,8 +36,6 @@ CSS Custom Properties that have been deprecated can be replaced with the CSS pro | `--p-badge-mix-blend-mode` | `luminosity` | | `--p-range-slider-thumb-scale` | `1.5` | | `--p-frame-offset` | `0px` | -| `--p-checkbox-offset` | removed | -| `--p-scroll-bar-content-width` | removed | | `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` | | `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` | | `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` | From 72b1a47eef3c225a1d17d236c60b56fca42505a6 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 3 Feb 2022 09:30:35 -0800 Subject: [PATCH 7/8] Update documentation/guides/migrating-from-v8-to-v9.md Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index f9e4832f5d9..55977356540 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -6,7 +6,7 @@ Polaris v9.0.0 ([full release notes](https://github.com/Shopify/polaris-react/re ## CSS Custom Properties -CSS Custom Properties that were renamed can be replaced with the new CSS custom property name. +CSS custom properties that were renamed can be replaced with the new CSS custom property name. | Before | After | | :-------------------------------: | :--------------------------------: | From 8ef3922913672299d4c8e8019d8d1e9987c0e681 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 3 Feb 2022 09:31:28 -0800 Subject: [PATCH 8/8] Update migrating-from-v8-to-v9.md --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 55977356540..73e5501cbf3 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -23,7 +23,7 @@ CSS custom properties that were renamed can be replaced with the new CSS custom | `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` | | `--p-icon-size` | `--p-icon-size-small` | -CSS Custom Properties that have been deprecated can be replaced with the CSS property value. +CSS custom properties that have been deprecated can be replaced with the CSS property value. | Before | Value | | :-----------------------------: | :----------------------: |