Migrate shadow custom properties from v11 to v12

[laurkim]

WHY are these changes introduced?

Resolves #10641.

Migrates shadow custom properties from v11 to v12.
Updates types on Box component shadow prop and ShadowBevel component boxShadow prop.

WHAT is this pull request doing?

To migrate shadow custom properties, the flow was to:

• Handle automatic migrations

  # Space migration
  npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230922144839 \
  v12-styles-replace-custom-property-shadow \
  'src/**/*.scss'
  # 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 shadow 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 shadow 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:

[V12] Check RegExp for hardcoded shadow custom properties across all file types

(?:--p-shadow-inset-lg|--p-shadow-inset-md|--p-shadow-inset-sm|--p-shadow-none|--p-shadow-xs|--p-shadow-sm|--p-shadow-md|--p-shadow-lg|--p-shadow-xl|--p-shadow-2xl|--p-shadow-bevel-experimental|--p-shadow-card-sm-experimental|--p-shadow-card-md-experimental|--p-shadow-card-lg-experimental|--p-shadow-button-experimental|--p-shadow-button-hover-experimental|--p-shadow-button-disabled-experimental|--p-shadow-button-primary-strong-experimental|--p-shadow-button-primary-strong-inset-experimental|--p-shadow-button-primary-strong-hover-experimental|--p-shadow-border-inset-experimental|--p-shadow-button-primary-experimental|--p-shadow-button-primary-hover-experimental|--p-shadow-button-inset-experimental)(?![\w-])

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

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

Check RegExp for outdated <ShadowBevel boxShadow="..." /> props

<ShadowBevel[^>\w](?:[^>]|\n)*?boxShadow

Replacement maps

Deprecated CSS Custom Property	Replacement Value
--p-shadow-inset-lg	--p-shadow-inset-200
--p-shadow-inset-md	--p-shadow-inset-200
--p-shadow-inset-sm	--p-shadow-inset-100
--p-shadow-none	--p-shadow-0
--p-shadow-xs	--p-shadow-100
--p-shadow-sm	--p-shadow-200
--p-shadow-md	--p-shadow-300
--p-shadow-lg	--p-shadow-400
--p-shadow-xl	--p-shadow-500
--p-shadow-2xl	--p-shadow-600
--p-shadow-bevel-experimental	--p-shadow-bevel-100
--p-shadow-card-sm-experimental	--p-shadow-100
--p-shadow-card-md-experimental	--p-shadow-200
--p-shadow-card-lg-experimental	--p-shadow-300
--p-shadow-button-experimental	--p-shadow-button
--p-shadow-button-hover-experimental	--p-shadow-button-hover
--p-shadow-button-disabled-experimental	inset 0 0 0 1px rgba(227, 227, 227, 1)
--p-shadow-button-primary-strong-experimental	--p-shadow-button-primary
--p-shadow-button-primary-strong-inset-experimental	--p-shadow-button-primary-inset
--p-shadow-button-primary-strong-hover-experimental	--p-shadow-button-primary-hover
--p-shadow-border-inset-experimental	--p-shadow-border-inset

Important

The following values were manually migrated based on context:

Deprecated CSS Custom Property	Replacement Value
--p-shadow-button-primary-experimental	--p-shadow-button-primary-critical --p-shadow-button-primary-success
--p-shadow-button-primary-hover-experimental	--p-shadow-button-primary-critical-hover --p-shadow-button-primary-success-hover
--p-shadow-button-inset-experimental	--p-shadow-button-primary-critical-inset --p-shadow-button-primary-success-inset

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 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]

Shadow for critical and success primary buttons were combined so I've removed them here to add to the individual classes instead with the token replacement value.

[laurkim]

Shadow for critical and success primary button hover states were combined so I've removed them here to add to the individual classes instead with the token replacement value.

[laurkim]

Shadow for critical and success primary button active states were combined so I've removed them here to add to the individual classes instead with the token replacement value.

[laurkim]

Updated this token value after discussing with @bernardojoaogarcia and @sarahill when I noticed shadow on primary Button looked off.

Before with prior token value:

[laurkim]

Updated this token value after discussing with @sarahill and @bernardojoaogarcia when we noticed shadow bevel was a bit off with the previous shadow-bevel-100 value.