-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Migrate font
custom properties from v11 to v12
#10762
Conversation
var(--p-border-radius-200), | ||
var(--p-border-radius-100) | ||
var(--p-border-radius-2), | ||
var(--p-border-radius-1) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These are changes from the previous border migration.
I inadvertently updated this file in the border migration PR so I just reverted the changes in this PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯🚢✨🎉
b53dad1
to
7a08f6d
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we verify the font size and line height for heading-xl, 2xl & 3xl. I'm not sure they're correct in this PR
heading-3xl
heading-2xl
heading-xl
heading-lg
|
font-size: var(--p-font-size-300); | ||
line-height: var(--p-font-line-height-600); | ||
font-size: var(--p-text-heading-lg-font-size); | ||
line-height: var(--p-text-heading-lg-font-line-height); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I only added the headingLg composite tokens for breakpoints-md-up
since responsiveness was out of scope when these tokens were created.
font-size: var(--p-font-size-400); | ||
line-height: var(--p-font-line-height-5); | ||
font-size: var(--p-text-heading-xl-font-size); | ||
line-height: var(--p-text-heading-xl-font-line-height); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I only added the headingXl composite tokens for breakpoints-md-up
since responsiveness was out of scope when these tokens were created.
font-size: var(--p-font-size-500); | ||
line-height: var(--p-font-line-height-6); | ||
font-size: var(--p-text-heading-2xl-font-size); | ||
line-height: var(--p-text-heading-2xl-font-line-height); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I only added the heading2xl composite tokens for breakpoints-md-up
since responsiveness was out of scope when these tokens were created.
font-size: var(--p-font-size-600); | ||
line-height: var(--p-font-line-height-1200); | ||
font-size: var(--p-text-heading-3xl-font-size); | ||
line-height: var(--p-text-heading-3xl-font-line-height); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I only added the heading3xl composite tokens for breakpoints-md-up
since responsiveness was out of scope when these tokens were created.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨🙌🏻
2bdda21
to
0322c36
Compare
@sarahill aren't we supposed to make an exception for the primary buttons |
@bernardojoaogarcia @sarahill I updated Button primary variant to use |
544c091
to
3fef8af
Compare
Thanks! @laurkim |
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 next, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @shopify/polaris@12.0.0-beta.2 ### Major Changes - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` ### Minor Changes - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 ## @shopify/polaris-tokens@8.0.0-beta.1 ### Major Changes - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values ### Minor Changes - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer ## @shopify/stylelint-polaris@14.1.2-beta.1 ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>
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 next, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>
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 next, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>
### WHY are these changes introduced? Resolves Shopify#10532. Migrates `font` custom properties. Updates body and heading variants in `Text` components to use text composite tokens where applicable. > [!Important] > Font migration needed to be run in 4 sequential steps due to overlapping `font-size` token names. ### WHAT is this pull request doing? ## Step 1 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=1 ``` ```sh # 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 `font` custom properties from Polaris v11 to v12 — step [1/2/3/4]“ ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 1 across all file types </summary> ``` (?:--p-font-size-70-experimental|--p-font-size-80-experimental|--p-font-size-100|--p-font-size-700|--p-font-line-height-075-experimental|--p-font-line-height-1|--p-font-line-height-2|--p-font-line-height-3|--p-font-line-height-4|--p-font-line-height-5|--p-font-line-height-6|--p-font-line-height-7)(?![\w-]) ``` </details> ## Step 2 ```script # Run migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=2 # Repeat process in step 1 to commit automated migrations ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 2 across all file types </summary> ``` (?:--p-font-size-500|--p-font-size-600)(?![\w-]) ``` </details> ## Step 3 ```script # Run migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=3 # Repeat process in step 1 to commit automated migrations ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 3 across all file types </summary> </details> ``` (?:--p-font-size-300|--p-font-size-400)(?![\w-]) ``` </details> ## Step 4 ```script # Run migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=4 # Repeat process in step 1 to commit automated migrations ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 4 across all file types </summary> ``` (?:--p-font-size-75|--p-font-size-200)(?![\w-]) ``` </details> #### Replacement maps | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-font-size-70-experimental` | `--p-font-size-275` | | `--p-font-size-75` | `--p-font-size-300` | | `--p-font-size-80-experimental` | `--p-font-size-325` | | `--p-font-size-100` | `--p-font-size-350` | | `--p-font-size-200` | `--p-font-size-400` | | `--p-font-size-300` | `--p-font-size-500` | | `--p-font-size-400` | `--p-font-size-600` | | `--p-font-size-500` | `--p-font-size-750` | | `--p-font-size-600` | `--p-font-size-900` | | `--p-font-size-700` | `--p-font-size-1000` | | `--p-font-line-height-075-experimental` | `--p-font-line-height-300` | | `--p-font-line-height-1` | `--p-font-line-height-400` | | `--p-font-line-height-2` | `--p-font-line-height-500` | | `--p-font-line-height-3` | `--p-font-line-height-600` | | `--p-font-line-height-4` | `--p-font-line-height-700` | | `--p-font-line-height-5` | `--p-font-line-height-800` | | `--p-font-line-height-6` | `--p-font-line-height-1000` | | `--p-font-line-height-7` | `--p-font-line-height-1200` | ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
WHY are these changes introduced?
Resolves #10532.
Migrates
font
custom properties.Updates body and heading variants in
Text
components to use text composite tokens where applicable.Important
Font migration needed to be run in 4 sequential steps due to overlapping
font-size
token names.WHAT is this pull request doing?
Step 1
Post-migration validation
[v12] Check RegExp for hardcoded
font
custom properties in step 1 across all file typesStep 2
Post-migration validation
[v12] Check RegExp for hardcoded
font
custom properties in step 2 across all file typesStep 3
Post-migration validation
[v12] Check RegExp for hardcoded
font
custom properties in step 3 across all file typesStep 4
Post-migration validation
[v12] Check RegExp for hardcoded
font
custom properties in step 4 across all file typesReplacement maps
--p-font-size-70-experimental
--p-font-size-275
--p-font-size-75
--p-font-size-300
--p-font-size-80-experimental
--p-font-size-325
--p-font-size-100
--p-font-size-350
--p-font-size-200
--p-font-size-400
--p-font-size-300
--p-font-size-500
--p-font-size-400
--p-font-size-600
--p-font-size-500
--p-font-size-750
--p-font-size-600
--p-font-size-900
--p-font-size-700
--p-font-size-1000
--p-font-line-height-075-experimental
--p-font-line-height-300
--p-font-line-height-1
--p-font-line-height-400
--p-font-line-height-2
--p-font-line-height-500
--p-font-line-height-3
--p-font-line-height-600
--p-font-line-height-4
--p-font-line-height-700
--p-font-line-height-5
--p-font-line-height-800
--p-font-line-height-6
--p-font-line-height-1000
--p-font-line-height-7
--p-font-line-height-1200
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
🎩 checklist
README.md
with documentation changes