Skip to content

Commit

Permalink
Create migration for replacing v11 shadow custom properties (#10306)
Browse files Browse the repository at this point in the history 
### WHY are these changes introduced?

Fixes #10513

### WHAT is this pull request doing?
This PR creates a migration for deprecated `shadow` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-shadow
| 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 tokens need to be manually migrated because their values
are context dependent.

| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-button-primary-experimental` |
`--p-shadow-button-primary-critical`<br>`--p-shadow-button-primary-success`
|
| `--p-shadow-button-primary-hover-experimental` |
`--p-shadow-button-primary-critical-hover`<br>`--p-shadow-button-primary-success-hover`
|
| `--p-shadow-button-inset-experimental` |
`--p-shadow-button-primary-critical-inset`<br>`--p-shadow-button-primary-success-inset`
|
  • Loading branch information
@lgriffee
lgriffee authored Oct 3, 2023
1 parent de1c956 commit dbae87e
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/silent-guests-occur.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris-migrator': minor
---

Created migration to replace deprecated `shadow` custom properties in polaris-react v12.0.0
12 changes: 12 additions & 0 deletions ...migrator/src/migrations/v12-styles-replace-custom-property-shadow/tests/transform.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {check} from '../../../utilities/check';

const transform = 'v12-styles-replace-custom-property-shadow';
const fixtures = ['v12-styles-replace-custom-property-shadow'];

for (const fixture of fixtures) {
check(__dirname, {
fixture,
transform,
extension: 'scss',
});
}
23 changes: 23 additions & 0 deletions ...replace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.input.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.shadow {
box-shadow: var(--p-shadow-inset-lg);
box-shadow: var(--p-shadow-inset-md);
box-shadow: var(--p-shadow-inset-sm);
box-shadow: var(--p-shadow-none);
box-shadow: var(--p-shadow-xs);
box-shadow: var(--p-shadow-sm);
box-shadow: var(--p-shadow-md);
box-shadow: var(--p-shadow-lg);
box-shadow: var(--p-shadow-xl);
box-shadow: var(--p-shadow-2xl);
box-shadow: var(--p-shadow-bevel-experimental);
box-shadow: var(--p-shadow-card-sm-experimental);
box-shadow: var(--p-shadow-card-md-experimental);
box-shadow: var(--p-shadow-card-lg-experimental);
box-shadow: var(--p-shadow-button-experimental);
box-shadow: var(--p-shadow-button-hover-experimental);
box-shadow: var(--p-shadow-button-disabled-experimental);
box-shadow: var(--p-shadow-button-primary-strong-experimental);
box-shadow: var(--p-shadow-button-primary-strong-inset-experimental);
box-shadow: var(--p-shadow-button-primary-strong-hover-experimental);
box-shadow: var(--p-shadow-border-inset-experimental);
}
23 changes: 23 additions & 0 deletions ...eplace-custom-property-shadow/tests/v12-styles-replace-custom-property-shadow.output.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.shadow {
box-shadow: var(--p-shadow-inset-200);
box-shadow: var(--p-shadow-inset-200);
box-shadow: var(--p-shadow-inset-100);
box-shadow: var(--p-shadow-0);
box-shadow: var(--p-shadow-100);
box-shadow: var(--p-shadow-200);
box-shadow: var(--p-shadow-300);
box-shadow: var(--p-shadow-400);
box-shadow: var(--p-shadow-500);
box-shadow: var(--p-shadow-600);
box-shadow: var(--p-shadow-bevel-100);
box-shadow: var(--p-shadow-100);
box-shadow: var(--p-shadow-200);
box-shadow: var(--p-shadow-300);
box-shadow: var(--p-shadow-button);
box-shadow: var(--p-shadow-button-hover);
box-shadow: inset 0 0 0 1px rgba(227, 227, 227, 1);
box-shadow: var(--p-shadow-button-primary);
box-shadow: var(--p-shadow-button-primary-inset);
box-shadow: var(--p-shadow-button-primary-hover);
box-shadow: var(--p-shadow-border-inset);
}
37 changes: 37 additions & 0 deletions polaris-migrator/src/migrations/v12-styles-replace-custom-property-shadow/transform.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type {FileInfo, API} from 'jscodeshift';

import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';

export default function transformer(fileInfo: FileInfo, _: API) {
return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
}

const replacementMaps = {
'/.+/': {
'--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',
},
};

0 comments on commit dbae87e

Please sign in to comment.