Add migration for sass padding and margin length values #7264

lgriffee · 2022-09-22T23:03:07Z

WHY are these changes introduced?

Part of #7212

WHAT is this pull request doing?

Adding a replace-sass-lengths migration script.

Running npx @shopify/polaris-migrator replace-sass-lengths "**/*.scss" will target the following padding and margin properties and replace any px, rem or rem() values that align with our spacing tokens.

padding
padding-top
padding-right
padding-bottom
padding-left
padding-inline
padding-inline-start
padding-inline-end
padding-block
padding-block-start
padding-block-end
margin
margin-top
margin-right
margin-bottom
margin-left
margin-inline
margin-inline-start
margin-inline-end
margin-block
margin-block-start
margin-block-end

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee · 2022-09-22T23:03:22Z

/snapit

github-actions · 2022-09-22T23:07:43Z

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

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

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

…e-sass-padding

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee · 2022-09-26T16:50:38Z

/snapit

github-actions · 2022-09-26T16:54:38Z

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

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

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee · 2022-09-26T22:51:08Z

/snapit

github-actions · 2022-09-26T22:56:22Z

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

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

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

.changeset/dirty-mice-camp.md

sam-b-rose

Nice, migration is looking great! I like the more generic approach of replace-sass-lengths rather than just replace-sass-padding. Just a few comments and "thank yous" in the review 👍

polaris-migrator/src/migrations/replace-sass-lengths/replace-sass-lengths.ts

polaris-migrator/src/migrations/replace-sass-lengths/tests/replace-sass-lengths.output.scss

polaris-migrator/src/utilities/sass.ts

Co-Authored-By: Aaron Casanova <[email protected]>

aaronccasanova · 2022-09-29T22:32:55Z

/snapit

github-actions · 2022-09-29T22:38:17Z

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

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

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sam-b-rose

Looks 💯 the migration PR in web is excellent, what a refactor! 👏

itwasmattgregg · 2022-09-30T16:41:26Z

Why was it decided to replace 0 with var(--p-space-0)?

@lgriffee

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/[email protected] ### Minor Changes - [#7264](#7264) [`5a1f45f7a`](5a1f45f) Thanks [@lgriffee](https://github.com/lgriffee)! - Add sass padding and margin migration ### Patch Changes - [#7315](#7315) [`c958899c7`](c958899) Thanks [@lgriffee](https://github.com/lgriffee)! - Remove `0` and `0px` length values from `replace-sass-lengths` migration - Updated dependencies \[[`0be40aa94`](0be40aa)]: - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha `Inline` component - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added `AlphaStack` component - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added `Columns` component - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added `Box` component - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added `AlphaCard` component - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added `fullWidth` prop to `AlphaStack` and updated styleguide docs - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha `ContentBlock` component ### Patch Changes - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Updated `AlphaCard` border radius to a boolean - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `Columns` spacing - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `background` prop on `AlphaCard` for consistency - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Rename `Tiles` component - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `AlphaCard` `shadow` prop - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Refactored token types in primitive Layout components Exposed `DepthShadowAlias` type - [#7291](#7291) [`3941f5281`](3941f52) Thanks [@atesgoral](https://github.com/atesgoral)! - Improve default style class selection of `Avatar` by using the entire name instead of just the first letter - [#7332](#7332) [`2ee5c5d74`](2ee5c5d) Thanks [@mattkubej](https://github.com/mattkubej)! - `PopoverOverlay` closes focused `Popover` when pressing `Escape` - Updated dependencies \[[`0be40aa94`](0be40aa)]: - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Refactored token types in primitive Layout components Exposed `DepthShadowAlias` type ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`5a1f45f7a`](5a1f45f), [`c958899c7`](c958899)]: - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`0be40aa94`](0be40aa)]: - @shopify/[email protected] ## [email protected] ### Minor Changes - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha pages for `AlphaStack`, `Box`, `Columns`, `Inline`, and `Tile` components. Updated `StatusBanner` to capitalize status value. - [#7353](#7353) [`558b1cfae`](558b1cf) Thanks [@kyledurand](https://github.com/kyledurand)! - Ported codesandbox init code to React 18 - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha page for `ContentBlock` ### Patch Changes - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Updated `AlphaCard` border radius to a boolean - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `Columns` spacing - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `background` prop on `AlphaCard` for consistency - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Rename `Tiles` component - [#7312](#7312) [`2349db304`](2349db3) Thanks [@martenbjork](https://github.com/martenbjork)! - Added a redirect pointing to the Polaris license on Github - [#7343](#7343) [`7ced95bfb`](7ced95b) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha `Box` page to remove sentence regarding usage in existing components - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `AlphaCard` `shadow` prop - [#7056](#7056) [`0be40aa94`](0be40aa) Thanks [@laurkim](https://github.com/laurkim)! - Added `fullWidth` prop to `AlphaStack` and updated styleguide docs - [#7311](#7311) [`fc05e3152`](fc05e31) Thanks [@martenbjork](https://github.com/martenbjork)! - Improved the layout on mobile - Updated dependencies \[[`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`3941f5281`](3941f52), [`2ee5c5d74`](2ee5c5d)]: - @shopify/[email protected] - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`0be40aa94`](0be40aa), [`3941f5281`](3941f52), [`2ee5c5d74`](2ee5c5d)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

jesstelford · 2022-10-10T06:54:18Z

@itwasmattgregg That's a fantastic question, and one which sparked a Discussion culminating in our decision to stick with literal 0 instead of --p-space-0!

That simplification will come in future migrations 👍

lgriffee and others added 6 commits September 21, 2022 10:52

Create initial script scaffolding

07af2a1

Add migration logic for dimension values

6c9d775

Start building logic for handling functions and variables

fe30bb2

Start building out logic for handling rem functions

df844f7

Rearchitect migration

447b2b4

Co-Authored-By: Aaron Casanova <[email protected]>

Add changeset

6d9ad5f

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee added the #gsd:29805 label Sep 22, 2022

lgriffee self-assigned this Sep 22, 2022

lgriffee and others added 3 commits September 26, 2022 10:10

Merge branch 'main' of https://github.com/Shopify/polaris into replac…

d885e33

…e-sass-padding

Rename migration

e89eb2b

Co-Authored-By: Aaron Casanova <[email protected]>

Expand target props

5b6066e

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee and others added 3 commits September 26, 2022 12:06

Add test for negative values

e1bbaec

Co-Authored-By: Aaron Casanova <[email protected]>

Add namespace utilities and update migrations

c38c890

Co-Authored-By: Aaron Casanova <[email protected]>

Update types

f2c0f18

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee commented Sep 27, 2022

View reviewed changes

.changeset/dirty-mice-camp.md Outdated Show resolved Hide resolved

Update .changeset/dirty-mice-camp.md

d29cf53

lgriffee changed the title ~~Replace sass padding~~ Replace sass padding and margin Sep 27, 2022

lgriffee requested review from aaronccasanova, gwyneplaine, jesstelford and sam-b-rose September 27, 2022 17:07

lgriffee marked this pull request as ready for review September 27, 2022 17:08

lgriffee changed the title ~~Replace sass padding and margin~~ Migrate sass padding and margin length values Sep 27, 2022

lgriffee changed the title ~~Migrate sass padding and margin length values~~ Add migration for sass padding and margin length values Sep 27, 2022

sam-b-rose reviewed Sep 27, 2022

View reviewed changes

lgriffee requested a review from chloerice September 27, 2022 20:46

lgriffee and others added 3 commits September 28, 2022 12:25

Make isNumericOperator a sass utility

f6e47fa

Add JSDoc comment

eece17e

Co-Authored-By: Aaron Casanova <[email protected]>

Rescope migration and update utils

4d3307e

Co-Authored-By: Aaron Casanova <[email protected]>

lgriffee assigned aaronccasanova Sep 29, 2022

Replace sass lengths experiments (#7308)

b43a2b0

gwyneplaine mentioned this pull request Sep 30, 2022

Add migration for sass z-index fn #7310

Merged

sam-b-rose approved these changes Sep 30, 2022

View reviewed changes

lgriffee merged commit 5a1f45f into main Sep 30, 2022

lgriffee deleted the replace-sass-padding branch September 30, 2022 15:53

github-actions bot mentioned this pull request Sep 30, 2022

Version Packages #7313

Merged

This was referenced Oct 20, 2022

Add migration to increase Spacing coverage #7212

Closed

Polaris migrations platform #6614

Closed

Add migration for sass padding and margin length values #7264

Add migration for sass padding and margin length values #7264

Uh oh!

Conversation

lgriffee commented Sep 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

Uh oh!

lgriffee commented Sep 22, 2022

Uh oh!

github-actions bot commented Sep 22, 2022

Uh oh!

lgriffee commented Sep 26, 2022

Uh oh!

github-actions bot commented Sep 26, 2022

Uh oh!

lgriffee commented Sep 26, 2022

Uh oh!

github-actions bot commented Sep 26, 2022

Uh oh!

Uh oh!

sam-b-rose left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aaronccasanova commented Sep 29, 2022

Uh oh!

github-actions bot commented Sep 29, 2022

Uh oh!

sam-b-rose left a comment

Choose a reason for hiding this comment

Uh oh!

itwasmattgregg commented Sep 30, 2022

Uh oh!

jesstelford commented Oct 10, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

lgriffee commented Sep 22, 2022 •

edited

Loading