Migrate space custom properties from v11 to v12

[laurkim]

WHY are these changes introduced?

Resolves #10535.
Migrates space custom properties from v11 to v12.
This PR includes both automated and manual migrations.

WHAT is this pull request doing?

To migrate space custom properties, the flow was to:

• Handle automatic migrations

  # Space migration
  npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230918165951 \
  v12-styles-replace-custom-property-space \
  'src/**/*.scss'
  # Stash files with "polaris-migrator:" comments
  git stash push $(grep -r -l "polaris-migrator:" $(git ls-files -m))
  # Stage all migrated files
  git add .
  # Format staged files only
  git diff --staged --name-only | xargs npx prettier --write
  # Commit automated migrations
  git commit -m "Migrate space custom properties from v11 to v12" 

• Handle manual migrations

  # Bring back the files with "polaris-migrator:" comments
  git stash pop

  • Search for "polaris-migrator:" comments and handle manual migrations
  • Search for and handle manual migrations (e.g. )
  
  

  # Stage all manually migrated files 
  git add .
  # Format staged files only
  git diff --staged --name-only | xargs npx prettier --write 
  #  Commit manual migrations
  git commit -m "Manually migrate space custom properties from v11 to v12"
  

• Check for errors after all custom property migrations are finished

  # Run stylelint against polaris-react
  npx stylelint 'polaris-react/src/**/*.scss'

How to 🎩

Post-migration validation

After migrating use the following RegExp to check for any additional instances of space custom properties across all file types:

Check RegExp for hardcoded space custom properties across all file types

(?:--p-space-05|--p-space-1|--p-space-1_5-experimental|--p-space-2|--p-space-3|--p-space-4|--p-space-5|--p-space-6|--p-space-8|--p-space-10|--p-space-12|--p-space-16|--p-space-20|--p-space-24|--p-space-28|--p-space-32)(?![\w-])

Check RegExp for outdated <Tooltip padding="..." /> props

<Tooltip[^>\w](?:[^>]|\n)*?padding

Check RegExp for outdated <HorizontalGrid gap="..." /> props

<HorizontalGrid[^>\w](?:[^>]|\n)*?gap

Check RegExp for outdated <Box padding="..." /> props

<Box[^>\w](?:[^>]|\n)*?padding

Check RegExp for outdated <Box paddingBlockStart="..." /> props

<Box[^>\w](?:[^>]|\n)*?paddingBlockStart

Check RegExp for outdated <Box paddingBlockEnd="..." /> props

<Box[^>\w](?:[^>]|\n)*?paddingBlockEnd

Check RegExp for outdated <Box paddingInlineStart="..." /> props

<Box[^>\w](?:[^>]|\n)*?paddingInlineStart

Check RegExp for outdated <Box paddingInlineEnd="..." /> props

<Box[^>\w](?:[^>]|\n)*?paddingInlineEnd

Check RegExp for outdated <Box insetBlockStart="..." /> props

<Box[^>\w](?:[^>]|\n)*?insetBlockStart

Check RegExp for outdated <Box insetBlockEnd="..." /> props

<Box[^>\w](?:[^>]|\n)*?insetBlockEnd

Check RegExp for outdated <Box insetInlineStart="..." /> props

<Box[^>\w](?:[^>]|\n)*?insetInlineStart

Check RegExp for outdated <Box insetInlineEnd="..." /> props

<Box[^>\w](?:[^>]|\n)*?insetInlineEnd

Check RegExp for outdated <VerticalStack gap="..." /> props

<VerticalStack[^>\w](?:[^>]|\n)*?gap

Check RegExp for outdated <HorizontalStack gap="..." /> props

<HorizontalStack[^>\w](?:[^>]|\n)*?gap

Check RegExp for outdated <Choice bleed="..." /> props

<Choice[^>\w](?:[^>]|\n)*?bleed

Check RegExp for outdated <Choice bleedBlockStart="..." /> props

<Choice[^>\w](?:[^>]|\n)*?bleedBlockStart

Check RegExp for outdated <Choice bleedBlockEnd="..." /> props

<Choice[^>\w](?:[^>]|\n)*?bleedBlockEnd

Check RegExp for outdated <Choice bleedInlineStart="..." /> props

<Choice[^>\w](?:[^>]|\n)*?bleedInlineStart

Check RegExp for outdated <Choice bleedInlineEnd="..." /> props

<Choice[^>\w](?:[^>]|\n)*?bleedInlineEnd

Check RegExp for outdated <RadioButton bleed="..." /> props

<RadioButton[^>\w](?:[^>]|\n)*?bleed

Check RegExp for outdated <RadioButton bleedBlockStart="..." /> props

<RadioButton[^>\w](?:[^>]|\n)*?bleedBlockStart

Check RegExp for outdated <RadioButton bleedBlockEnd="..." /> props

<RadioButton[^>\w](?:[^>]|\n)*?bleedBlockEnd

Check RegExp for outdated <RadioButton bleedInlineStart="..." /> props

<RadioButton[^>\w](?:[^>]|\n)*?bleedInlineStart

Check RegExp for outdated <RadioButton bleedInlineEnd="..." /> props

<RadioButton[^>\w](?:[^>]|\n)*?bleedInlineEnd

Check RegExp for outdated <Checkbox bleed="..." /> props

<Checkbox[^>\w](?:[^>]|\n)*?bleed

Check RegExp for outdated <Checkbox bleedBlockStart="..." /> props

<Checkbox[^>\w](?:[^>]|\n)*?bleedBlockStart

Check RegExp for outdated <Checkbox bleedBlockEnd="..." /> props

<Checkbox[^>\w](?:[^>]|\n)*?bleedBlockEnd

Check RegExp for outdated <Checkbox bleedInlineStart="..." /> props

<Checkbox[^>\w](?:[^>]|\n)*?bleedInlineStart

Check RegExp for outdated <Checkbox bleedInlineEnd="..." /> props

<Checkbox[^>\w](?:[^>]|\n)*?bleedInlineEnd

Check RegExp for outdated <Stack gap="..." /> props

<Stack[^>\w](?:[^>]|\n)*?gap

Check RegExp for outdated <Grid gap="..." /> props

<Grid[^>\w](?:[^>]|\n)*?gap

Check RegExp for outdated <Grid gapX="..." /> props

<Grid[^>\w](?:[^>]|\n)*?gapX

Check RegExp for outdated <Grid gapY="..." /> props

<Grid[^>\w](?:[^>]|\n)*?gapY

Check RegExp for outdated <Card padding="..." /> props

<Card[^>\w](?:[^>]|\n)*?padding

Check RegExp for outdated <Bleed marginInline="..." /> props

<Bleed[^>\w](?:[^>]|\n)*?marginInline

Check RegExp for outdated <Bleed marginBlock="..." /> props

<Bleed[^>\w](?:[^>]|\n)*?marginBlock

Check RegExp for outdated <Bleed marginBlockStart="..." /> props

<Bleed[^>\w](?:[^>]|\n)*?marginBlockStart

Check RegExp for outdated <Bleed marginBlockEnd="..." /> props

<Bleed[^>\w](?:[^>]|\n)*?marginBlockEnd

Check RegExp for outdated <Bleed marginInlineStart="..." /> props

<Bleed[^>\w](?:[^>]|\n)*?marginInlineStart

Check RegExp for outdated <Bleed marginInlineEnd="..." /> props

<Bleed[^>\w](?:[^>]|\n)*?marginInlineEnd

Replacement maps

Deprecated CSS Custom Property	Replacement Value
--p-space-05	--p-space-050
--p-space-1	--p-space-100
--p-space-1_5-experimental	--p-space-150
--p-space-2	--p-space-200
--p-space-3	--p-space-300
--p-space-4	--p-space-400
--p-space-5	--p-space-500
--p-space-6	--p-space-600
--p-space-8	--p-space-800
--p-space-10	--p-space-1000
--p-space-12	--p-space-1200
--p-space-16	--p-space-1600
--p-space-20	--p-space-2000
--p-space-24	--p-space-2400
--p-space-28	--p-space-2800
--p-space-32	--p-space-3200

🖥 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

[laurkim]

/snapit

[github-actions]

🫰✨ Thanks @laurkim! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230920210702

yarn add @shopify/polaris@0.0.0-snapshot-release-20230920210702

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230920210702

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230920210702

[github-actions]

🫰✨ Thanks @laurkim! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230921213347

yarn add @shopify/polaris@0.0.0-snapshot-release-20230921213347

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230921213347

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230921213347

[laurkim]

/snapit

[github-actions]

🫰✨ Thanks @laurkim! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230922182129

yarn add @shopify/polaris@0.0.0-snapshot-release-20230922182129

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230922182129

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230922182129

[lgriffee]

Checked over the all the manual migrations and they LGTM! 💯🚢✨🎉 Also quickly checked over the automatic ones and they also look good.

[laurkim]

/snapit

[github-actions]

🫰✨ Thanks @laurkim! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230925125256

yarn add @shopify/polaris@0.0.0-snapshot-release-20230925125256

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230925125256

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230925125256

[heyjoethomas]

🚀

[sarahill]

🎉