Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Conversation

lgriffee
Copy link
Contributor

@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
Contributor 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
@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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
#gsd:40131 Polaris Responsive Text Styles
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants