Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create migration for replacing v14 text custom properties #11831

Merged
merged 1 commit into from
Apr 5, 2024

Conversation

lgriffee
Copy link
Member

@lgriffee lgriffee commented Apr 3, 2024

WHY are these changes introduced?

Related to https://github.com/Shopify/polaris-internal/issues/1554
Fixes https://github.com/Shopify/polaris-internal/issues/1555

We need migrations for semantic tokens associated with the removal of the text token group.

WHAT is this pull request doing?

This PR creates a migration for deprecated text custom properties in v14 using the generic codemod styles-replace-custom-property.

v14-styles-replace-custom-property-text

Deprecated CSS Custom Property Replacement Value
--p-text-heading-3xl-font-family --p-font-family-sans
--p-text-heading-3xl-font-size --p-font-size-750
--p-text-heading-3xl-font-weight --p-font-weight-bold
--p-text-heading-3xl-font-letter-spacing --p-font-letter-spacing-denser
--p-text-heading-3xl-font-line-height --p-font-line-height-1000
--p-text-heading-2xl-font-family --p-font-family-sans
--p-text-heading-2xl-font-size --p-font-size-750
--p-text-heading-2xl-font-weight --p-font-weight-bold
--p-text-heading-2xl-font-letter-spacing --p-font-letter-spacing-denser
--p-text-heading-2xl-font-line-height --p-font-line-height-1000
--p-text-heading-xl-font-family --p-font-family-sans
--p-text-heading-xl-font-size --p-font-size-600
--p-text-heading-xl-font-weight --p-font-weight-bold
--p-text-heading-xl-font-letter-spacing --p-font-letter-spacing-dense
--p-text-heading-xl-font-line-height --p-font-line-height-800
--p-text-heading-lg-font-family --p-font-family-sans
--p-text-heading-lg-font-size --p-font-size-500
--p-text-heading-lg-font-weight --p-font-weight-semibold
--p-text-heading-lg-font-letter-spacing --p-font-letter-spacing-dense
--p-text-heading-lg-font-line-height --p-font-line-height-600
--p-text-heading-md-font-family --p-font-family-sans
--p-text-heading-md-font-size --p-font-size-350
--p-text-heading-md-font-weight --p-font-weight-semibold
--p-text-heading-md-font-letter-spacing --p-font-letter-spacing-normal
--p-text-heading-md-font-line-height --p-font-line-height-500
--p-text-heading-sm-font-family --p-font-family-sans
--p-text-heading-sm-font-size --p-font-size-325
--p-text-heading-sm-font-weight --p-font-weight-semibold
--p-text-heading-sm-font-letter-spacing --p-font-letter-spacing-normal
--p-text-heading-sm-font-line-height --p-font-line-height-500
--p-text-heading-xs-font-family --p-font-family-sans
--p-text-heading-xs-font-size --p-font-size-300
--p-text-heading-xs-font-weight --p-font-weight-semibold
--p-text-heading-xs-font-letter-spacing --p-font-letter-spacing-normal
--p-text-heading-xs-font-line-height --p-font-line-height-400
--p-text-body-lg-font-family --p-font-family-sans
--p-text-body-lg-font-size --p-font-size-350
--p-text-body-lg-font-weight --p-font-weight-regular
--p-text-body-lg-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-lg-font-line-height --p-font-line-height-500
--p-text-body-md-font-family --p-font-family-sans
--p-text-body-md-font-size --p-font-size-325
--p-text-body-md-font-weight --p-font-weight-regular
--p-text-body-md-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-md-font-line-height --p-font-line-height-500
--p-text-body-sm-font-family --p-font-family-sans
--p-text-body-sm-font-size --p-font-size-300
--p-text-body-sm-font-weight --p-font-weight-regular
--p-text-body-sm-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-sm-font-line-height --p-font-line-height-400
--p-text-body-xs-font-family --p-font-family-sans
--p-text-body-xs-font-size --p-font-size-275
--p-text-body-xs-font-weight --p-font-weight-regular
--p-text-body-xs-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-xs-font-line-height --p-font-line-height-300

It also updates the existing v14-styles-replace-custom-property-font migration to remove any text tokens.

v14-styles-replace-custom-property-font

Deprecated CSS Custom Property Replacement Value
--p-font-size-800 --p-font-size-750
--p-font-size-900 --p-font-size-750
--p-font-size-1000 --p-font-size-750
--p-font-letter-spacing-densest --p-font-letter-spacing-denser
--p-font-line-height-1200 --p-font-line-height-1000

Note

Major version upgrade guidance is located on a separate PR on the v13 branch.

@lgriffee lgriffee added the #gsd:40131 Polaris Responsive Text Styles label Apr 3, 2024
@lgriffee lgriffee self-assigned this Apr 3, 2024
@lgriffee lgriffee requested a review from alex-page April 3, 2024 18:14
Copy link
Member

@sam-b-rose sam-b-rose left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great 👏

@lgriffee
Copy link
Member Author

lgriffee commented Apr 4, 2024

/snapit

Copy link
Contributor

github-actions bot commented Apr 4, 2024

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240404221706"
"@shopify/polaris": "0.0.0-snapshot-20240404221706"

@lgriffee lgriffee merged commit 99972a5 into main Apr 5, 2024
12 checks passed
@lgriffee lgriffee deleted the semantic-text-token-migration branch April 5, 2024 18:06
aaronccasanova pushed a commit that referenced this pull request Apr 9, 2024
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 main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.29.0

### Minor Changes

- [#11831](#11831)
[`99972a50b`](99972a5)
Thanks [@lgriffee](https://github.com/lgriffee)! - Created migration to
replace deprecated `text` custom properties in polaris-react v14.0.0

## @shopify/polaris@12.27.0

### Minor Changes

- [#11783](#11783)
[`0bf817afc`](0bf817a)
Thanks [@chloerice](https://github.com/chloerice)! - Added support to
`Filters` for indicating `appliedFilters` have unsaved changes

### Patch Changes

- [#11824](#11824)
[`79130eeea`](79130ee)
Thanks [@ryanwilsonperkin](https://github.com/ryanwilsonperkin)! - Lint
fixes


- [#11845](#11845)
[`8145d7326`](8145d73)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added
`touch-action: manipulation` to `Button` and `Link`

- Updated dependencies
\[[`79130eeea`](79130ee)]:
    -   @shopify/polaris-icons@8.11.1

## @shopify/polaris-icons@8.11.1

### Patch Changes

- [#11824](#11824)
[`79130eeea`](79130ee)
Thanks [@ryanwilsonperkin](https://github.com/ryanwilsonperkin)! - Added
missing `svgo` dev dependency

## polaris.shopify.com@0.67.4

### Patch Changes

- [#11851](#11851)
[`e2909baa9`](e2909ba)
Thanks [@sarahill](https://github.com/sarahill)! - Updated common action
guidance.

- Updated dependencies
\[[`0bf817afc`](0bf817a),
[`79130eeea`](79130ee),
[`79130eeea`](79130ee),
[`8145d7326`](8145d73)]:
    -   @shopify/polaris@12.27.0
    -   @shopify/polaris-icons@8.11.1
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
…11831)

### WHY are these changes introduced?

Related to https://github.com/Shopify/polaris-internal/issues/1554
Fixes https://github.com/Shopify/polaris-internal/issues/1555

We need migrations for semantic tokens associated with the removal of
the text token group.

### WHAT is this pull request doing?

This PR creates a migration for deprecated `text` custom properties in
v14 using the generic codemod
[`styles-replace-custom-property`](Shopify#8265).

#### v14-styles-replace-custom-property-text
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
|`--p-text-heading-3xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-3xl-font-size`|`--p-font-size-750`|
|`--p-text-heading-3xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-3xl-font-letter-spacing`|`--p-font-letter-spacing-denser`|
|`--p-text-heading-3xl-font-line-height`|`--p-font-line-height-1000`|
|`--p-text-heading-2xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-2xl-font-size`|`--p-font-size-750`|
|`--p-text-heading-2xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-2xl-font-letter-spacing`|`--p-font-letter-spacing-denser`|
|`--p-text-heading-2xl-font-line-height`|`--p-font-line-height-1000`|
|`--p-text-heading-xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-xl-font-size`|`--p-font-size-600`|
|`--p-text-heading-xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-xl-font-letter-spacing`|`--p-font-letter-spacing-dense`|
|`--p-text-heading-xl-font-line-height`|`--p-font-line-height-800`|
|`--p-text-heading-lg-font-family`|`--p-font-family-sans`|
|`--p-text-heading-lg-font-size`|`--p-font-size-500`|
|`--p-text-heading-lg-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-lg-font-letter-spacing`|`--p-font-letter-spacing-dense`|
|`--p-text-heading-lg-font-line-height`|`--p-font-line-height-600`|
|`--p-text-heading-md-font-family`|`--p-font-family-sans`|
|`--p-text-heading-md-font-size`|`--p-font-size-350`|
|`--p-text-heading-md-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-md-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-md-font-line-height`|`--p-font-line-height-500`|
|`--p-text-heading-sm-font-family`|`--p-font-family-sans`|
|`--p-text-heading-sm-font-size`|`--p-font-size-325`|
|`--p-text-heading-sm-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-sm-font-line-height`|`--p-font-line-height-500`|
|`--p-text-heading-xs-font-family`|`--p-font-family-sans`|
|`--p-text-heading-xs-font-size`|`--p-font-size-300`|
|`--p-text-heading-xs-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-xs-font-line-height`|`--p-font-line-height-400`|
|`--p-text-body-lg-font-family`|`--p-font-family-sans`|
|`--p-text-body-lg-font-size`|`--p-font-size-350`|
|`--p-text-body-lg-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-lg-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-lg-font-line-height`|`--p-font-line-height-500`|
|`--p-text-body-md-font-family`|`--p-font-family-sans`|
|`--p-text-body-md-font-size`|`--p-font-size-325`|
|`--p-text-body-md-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-md-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-md-font-line-height`|`--p-font-line-height-500`|
|`--p-text-body-sm-font-family`|`--p-font-family-sans`|
|`--p-text-body-sm-font-size`|`--p-font-size-300`|
|`--p-text-body-sm-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-sm-font-line-height`|`--p-font-line-height-400`|
|`--p-text-body-xs-font-family`|`--p-font-family-sans`|
|`--p-text-body-xs-font-size`|`--p-font-size-275`|
|`--p-text-body-xs-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-xs-font-line-height`|`--p-font-line-height-300`|

It also updates the existing v14-styles-replace-custom-property-font
migration to remove any text tokens.

#### v14-styles-replace-custom-property-font
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
|`--p-font-size-800`|`--p-font-size-750`|
|`--p-font-size-900`|`--p-font-size-750`|
|`--p-font-size-1000`|`--p-font-size-750`|
|`--p-font-letter-spacing-densest`|`--p-font-letter-spacing-denser`|
|`--p-font-line-height-1200`|`--p-font-line-height-1000`|

>[!NOTE]
>Major version upgrade guidance is located [on a separate PR on the v13
branch](Shopify#11832).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:40131 Polaris Responsive Text Styles
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants