-
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 border
custom properties from v11 to v12
#10741
Conversation
* padding='4' | ||
* padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} |
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.
Added these JSDoc changes that I missed in the space migration PR 👀
BorderRadiusScale, | ||
'1' | '2' | '100' | '200' | ||
>; | ||
export type Padding = 'default' | Extract<SpaceScale, '400'>; |
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.
Removed backwards compatibility for space token here as well as border after confirming that we want to remove backwards compatibility in v12 as we're doing migrations.
borderWidth="3" | ||
borderColor="border-success" | ||
> | ||
<Text as="p">3px solid green</Text> | ||
</Box> |
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.
Removed the borderWidth="3"
example since --p-border-width-3
becomes --p-border-width-050
and that's redundant with the <Box borderWidth="2">
example.
--p-border-width-2
becomes --p-border-width-050
.
<Box | ||
background="bg" | ||
padding="400" | ||
borderWidth="5" | ||
borderBlockStartWidth="1" | ||
borderColor="border-critical" | ||
> | ||
<Text as="p">border-width: 5px solid red</Text> |
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.
Removed the borderWidth="5"
example because --p-border-width-5
becomes --p-border-width-100
which is redundant with the <Box borderWidth="4">
example.
--p-border-width-4
maps to --p-border-width-100
.
998be13
to
8950158
Compare
@@ -53,7 +50,7 @@ export interface TooltipProps { | |||
padding?: Padding; | |||
/** | |||
* Border radius of the tooltip | |||
* @default '1' | |||
* @default '200' |
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.
--p-border-radius-1
doesn't map to --p-border-radius-200
but I think this JSDoc default was a typo because border radius defaults to 2
in the diff below.
4833c98
to
fa35065
Compare
fa35065
to
d8f0629
Compare
Searched for deprecated values using the following RegExp and didn't see anything in Custom properties RegExp
Component props RegExp
|
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.
✨❤️
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#10525. ### WHAT is this pull request doing? Runs the following migration to migrate `border` custom properties from v11 to v12 with updated border migration snapshot that includes breaking changes. More detailed steps for migration process can be found in [Shopify#10519](Shopify#10519). ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230927173749 \ v12-styles-replace-custom-property-border \ 'src/**/*.scss' ``` ### How to 🎩 #### Replacement maps | Deprecated CSS Custom Property | Replacement Value | | ----------------------------------------- | ---------------------------------- | | `--p-border-radius-0-experimental` | `--p-border-radius-0` | | `--p-border-radius-05` | `--p-border-radius-050` | | `--p-border-radius-1` | `--p-border-radius-100` | | `--p-border-radius-1_5-experimental` | `--p-border-radius-150` | | `--p-border-radius-2` | `--p-border-radius-200` | | `--p-border-radius-3` | `--p-border-radius-300` | | `--p-border-radius-4` | `--p-border-radius-400` | | `--p-border-radius-5` | `--p-border-radius-500` | | `--p-border-radius-6` | `--p-border-radius-750` | | `--p-border-width-1` | `--p-border-width-025` | | `--p-border-width-1-experimental` | `--p-border-width-0165` | | `--p-border-width-2` | `--p-border-width-050` | | `--p-border-width-2-experimental` | `--p-border-width-025` | | `--p-border-width-3` | `--p-border-width-050` | | `--p-border-width-4` | `--p-border-width-100` | | `--p-border-width-5` | `--p-border-width-100` | 🖥 [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 #10525.
WHAT is this pull request doing?
Runs the following migration to migrate
border
custom properties from v11 to v12 with updated border migration snapshot that includes breaking changes. More detailed steps for migration process can be found in #10519.How to 🎩
Replacement maps
--p-border-radius-0-experimental
--p-border-radius-0
--p-border-radius-05
--p-border-radius-050
--p-border-radius-1
--p-border-radius-100
--p-border-radius-1_5-experimental
--p-border-radius-150
--p-border-radius-2
--p-border-radius-200
--p-border-radius-3
--p-border-radius-300
--p-border-radius-4
--p-border-radius-400
--p-border-radius-5
--p-border-radius-500
--p-border-radius-6
--p-border-radius-750
--p-border-width-1
--p-border-width-025
--p-border-width-1-experimental
--p-border-width-0165
--p-border-width-2
--p-border-width-050
--p-border-width-2-experimental
--p-border-width-025
--p-border-width-3
--p-border-width-050
--p-border-width-4
--p-border-width-100
--p-border-width-5
--p-border-width-100
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
🎩 checklist
README.md
with documentation changes