Migrate `border` custom properties from v11 to v12 #10741

laurkim · 2023-09-28T00:02:14Z

WHY are these changes introduced?

Resolves #10525.

WHAT is this pull request doing?

Runs the following migration to migrate border custom properties from v11 to v12 with updated border migration snapshot that includes breaking changes. More detailed steps for migration process can be found in #10519.

npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230927173749 \
  v12-styles-replace-custom-property-border \
  'src/**/*.scss'

How to 🎩

Replacement maps

Deprecated CSS Custom Property	Replacement Value
`--p-border-radius-0-experimental`	`--p-border-radius-0`
`--p-border-radius-05`	`--p-border-radius-050`
`--p-border-radius-1`	`--p-border-radius-100`
`--p-border-radius-1_5-experimental`	`--p-border-radius-150`
`--p-border-radius-2`	`--p-border-radius-200`
`--p-border-radius-3`	`--p-border-radius-300`
`--p-border-radius-4`	`--p-border-radius-400`
`--p-border-radius-5`	`--p-border-radius-500`
`--p-border-radius-6`	`--p-border-radius-750`
`--p-border-width-1`	`--p-border-width-025`
`--p-border-width-1-experimental`	`--p-border-width-0165`
`--p-border-width-2`	`--p-border-width-050`
`--p-border-width-2-experimental`	`--p-border-width-025`
`--p-border-width-3`	`--p-border-width-050`
`--p-border-width-4`	`--p-border-width-100`
`--p-border-width-5`	`--p-border-width-100`

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

…11 to v12

laurkim · 2023-09-28T00:14:07Z

polaris-react/src/components/Box/Box.tsx

-   * padding='4'
-   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}


Added these JSDoc changes that I missed in the space migration PR 👀

laurkim · 2023-09-28T00:15:19Z

polaris-react/src/components/Tooltip/Tooltip.tsx

-  BorderRadiusScale,
-  '1' | '2' | '100' | '200'
->;
+export type Padding = 'default' | Extract<SpaceScale, '400'>;


Removed backwards compatibility for space token here as well as border after confirming that we want to remove backwards compatibility in v12 as we're doing migrations.

laurkim · 2023-09-28T00:16:52Z

polaris-react/src/components/Box/Box.stories.tsx

-        borderWidth="3"
-        borderColor="border-success"
-      >
-        <Text as="p">3px solid green</Text>
-      </Box>


Removed the borderWidth="3" example since --p-border-width-3 becomes --p-border-width-050 and that's redundant with the <Box borderWidth="2"> example.

--p-border-width-2 becomes --p-border-width-050.

laurkim · 2023-09-28T00:21:52Z

polaris-react/src/components/Box/Box.stories.tsx

-      <Box
-        background="bg"
-        padding="400"
-        borderWidth="5"
-        borderBlockStartWidth="1"
-        borderColor="border-critical"
-      >
-        <Text as="p">border-width: 5px solid red</Text>


Removed the borderWidth="5" example because --p-border-width-5 becomes --p-border-width-100 which is redundant with the <Box borderWidth="4"> example.

--p-border-width-4 maps to --p-border-width-100.

…to v12

…m v11 to v12

laurkim · 2023-09-28T00:39:12Z

polaris-react/src/components/Tooltip/Tooltip.tsx

@@ -53,7 +50,7 @@ export interface TooltipProps {
  padding?: Padding;
  /**
   * Border radius of the tooltip
-   * @default '1'
+   * @default '200'


--p-border-radius-1 doesn't map to --p-border-radius-200 but I think this JSDoc default was a typo because border radius defaults to 2 in the diff below.

sam-b-rose · 2023-09-28T13:05:30Z

Searched for deprecated values using the following RegExp and didn't see anything in polaris-react/src 👍 💯

Custom properties RegExp

(?:--p-border-radius-1|--p-border-radius-1_5-experimental|--p-border-radius-2|--p-border-radius-3|--p-border-radius-4|--p-border-radius-5|--p-border-radius-6|--p-border-width-1|--p-border-width-1-experimental|--p-border-width-2|--p-border-width-2-experimental|--p-border-width-4)(?!\d)

Component props RegExp

<(Box|Divider|Tooltip|ShadowBevel)[^>\w](?:[^>]|\n)*?border(Block|Inline)?(Start|End)?(Radius|Width)(Start|End)?(Start|End)?="(05|1|2|4||1-experimental|2-experimental)"

polaris-react/src/components/Box/Box.stories.tsx

lgriffee

✨❤️

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @shopify/polaris@12.0.0-beta.2 ### Major Changes - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` ### Minor Changes - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 ## @shopify/polaris-tokens@8.0.0-beta.1 ### Major Changes - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values ### Minor Changes - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer ## @shopify/stylelint-polaris@14.1.2-beta.1 ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

### WHY are these changes introduced? Resolves Shopify#10525. ### WHAT is this pull request doing? Runs the following migration to migrate `border` custom properties from v11 to v12 with updated border migration snapshot that includes breaking changes. More detailed steps for migration process can be found in [Shopify#10519](Shopify#10519). ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230927173749 \ v12-styles-replace-custom-property-border \ 'src/**/*.scss' ``` ### How to 🎩 #### Replacement maps | Deprecated CSS Custom Property | Replacement Value | | ----------------------------------------- | ---------------------------------- | | `--p-border-radius-0-experimental` | `--p-border-radius-0` | | `--p-border-radius-05` | `--p-border-radius-050` | | `--p-border-radius-1` | `--p-border-radius-100` | | `--p-border-radius-1_5-experimental` | `--p-border-radius-150` | | `--p-border-radius-2` | `--p-border-radius-200` | | `--p-border-radius-3` | `--p-border-radius-300` | | `--p-border-radius-4` | `--p-border-radius-400` | | `--p-border-radius-5` | `--p-border-radius-500` | | `--p-border-radius-6` | `--p-border-radius-750` | | `--p-border-width-1` | `--p-border-width-025` | | `--p-border-width-1-experimental` | `--p-border-width-0165` | | `--p-border-width-2` | `--p-border-width-050` | | `--p-border-width-2-experimental` | `--p-border-width-025` | | `--p-border-width-3` | `--p-border-width-050` | | `--p-border-width-4` | `--p-border-width-100` | | `--p-border-width-5` | `--p-border-width-100` | 🖥 [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) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] 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

laurkim added 3 commits September 27, 2023 18:03

Migrate border custom properties from v11 to v12

1da8f28

[polaris.shopify.com] Fix typo on border styles for Card

4561713

[legacy-polaris-v8] Manually migrate border custom properties for v…

60bbc6a

…11 to v12

laurkim self-assigned this Sep 28, 2023

laurkim added the #gsd:36565 label Sep 28, 2023

laurkim commented Sep 28, 2023

View reviewed changes

laurkim added 2 commits September 27, 2023 20:33

[polaris-react] Manually migrate border custom properties from v11 …

bb1642b

…to v12

[polaris.shopify.com] Manually migrate border custom properties fro…

fe8d9e1

…m v11 to v12

laurkim force-pushed the lo/migrate-border-custom-properties branch from 998be13 to 8950158 Compare September 28, 2023 00:33

laurkim commented Sep 28, 2023

View reviewed changes

laurkim force-pushed the lo/migrate-border-custom-properties branch 2 times, most recently from 4833c98 to fa35065 Compare September 28, 2023 00:47

laurkim added 2 commits September 27, 2023 20:51

Add changeset for border migrations

bb0752a

Update space migration changeset

d8f0629

laurkim force-pushed the lo/migrate-border-custom-properties branch from fa35065 to d8f0629 Compare September 28, 2023 00:51

laurkim marked this pull request as ready for review September 28, 2023 01:13

laurkim requested review from a team as code owners September 28, 2023 01:13

laurkim requested review from sam-b-rose, chloerice, lgriffee, heyjoethomas and sarahill and removed request for a team September 28, 2023 01:14

sam-b-rose approved these changes Sep 28, 2023

View reviewed changes

heyjoethomas approved these changes Sep 28, 2023

View reviewed changes

lgriffee reviewed Sep 28, 2023

View reviewed changes

polaris-react/src/components/Box/Box.stories.tsx Show resolved Hide resolved

lgriffee reviewed Sep 28, 2023

View reviewed changes

polaris-react/src/components/Box/Box.stories.tsx Show resolved Hide resolved

lgriffee approved these changes Sep 28, 2023

View reviewed changes

laurkim merged commit 2c2bb0e into next Sep 28, 2023
12 checks passed

laurkim deleted the lo/migrate-border-custom-properties branch September 28, 2023 14:55

shopify-github-actions-access bot mentioned this pull request Sep 28, 2023

Version Packages (beta) #10718

Merged

shopify-github-actions-access bot mentioned this pull request Oct 9, 2023

Version Packages #10931

Merged

oksanashopify mentioned this pull request Mar 12, 2024

[VF][Polaris] IndexTable row borders is configurable #11676

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate `border` custom properties from v11 to v12 #10741

Migrate `border` custom properties from v11 to v12 #10741

laurkim commented Sep 28, 2023 •

edited by lgriffee

laurkim Sep 28, 2023

laurkim Sep 28, 2023 •

edited

laurkim Sep 28, 2023 •

edited

laurkim Sep 28, 2023 •

edited

laurkim Sep 28, 2023

sam-b-rose commented Sep 28, 2023

lgriffee left a comment

		* padding='4'
		* padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}

Migrate border custom properties from v11 to v12 #10741

Migrate border custom properties from v11 to v12 #10741

Conversation

laurkim commented Sep 28, 2023 • edited by lgriffee

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

Replacement maps

🎩 checklist

laurkim Sep 28, 2023

Choose a reason for hiding this comment

laurkim Sep 28, 2023 • edited

Choose a reason for hiding this comment

laurkim Sep 28, 2023 • edited

Choose a reason for hiding this comment

laurkim Sep 28, 2023 • edited

Choose a reason for hiding this comment

laurkim Sep 28, 2023

Choose a reason for hiding this comment

sam-b-rose commented Sep 28, 2023

lgriffee left a comment

Choose a reason for hiding this comment

Migrate `border` custom properties from v11 to v12 #10741

Migrate `border` custom properties from v11 to v12 #10741

laurkim commented Sep 28, 2023 •

edited by lgriffee

laurkim Sep 28, 2023 •

edited

laurkim Sep 28, 2023 •

edited

laurkim Sep 28, 2023 •

edited