-
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
Polaris v12 border migration #10596
Polaris v12 border migration #10596
Conversation
987b9c3
to
3969936
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.
💫
@@ -165,7 +165,7 @@ | |||
} | |||
|
|||
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY | |||
@include focus-ring($border-width: var(--p-border-width-2)); | |||
@include focus-ring($border-width: var(--p-border-width-0165)); |
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.
@include focus-ring($border-width: var(--p-border-width-0165)); | |
@include focus-ring($border-width: var(--p-border-width-050)); |
--p-border-width-2
should be replaced with --p-border-width-050
here.
@@ -60,7 +60,7 @@ | |||
width: 100%; | |||
height: 100%; | |||
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY | |||
@include focus-ring($border-width: var(--p-border-width-2)); | |||
@include focus-ring($border-width: var(--p-border-width-0165)); |
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.
@include focus-ring($border-width: var(--p-border-width-0165)); | |
@include focus-ring($border-width: var(--p-border-width-050)); |
--p-border-width-2
should be replaced with --p-border-width-050
here.
@@ -142,13 +142,12 @@ | |||
width: 100%; | |||
height: 100%; | |||
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY | |||
@include focus-ring($border-width: var(--p-border-width-2)); | |||
@include focus-ring($border-width: var(--p-border-width-0165)); |
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.
@include focus-ring($border-width: var(--p-border-width-0165)); | |
@include focus-ring($border-width: var(--p-border-width-050)); |
--p-border-width-2
should be replaced with --p-border-width-050
here.
Addressed incorrect manual migrations here #10608 |
This reverts commit 7db26ac.
### WHY are these changes introduced? Part of Shopify#10519 ### WHAT is this pull request doing? - Migrates the CSS custom properties for `border` token groups - Migrates the component props for `border` This the pre-v12 migration step to create a safe CSS custom property mapping to the new border tokens. <details> <summary>RegExp token search</summary> <pre><code>(?:--p-border-radius-1|--p-border-radius-1_5-experimental|--p-border-radius-2|--p-border-radius-3|--p-border-radius-4|--p-border-radius-5|--p-border-radius-6|--p-border-width-1|--p-border-width-1-experimental|--p-border-width-2|--p-border-width-2-experimental|--p-border-width-4)(?!\d)</code></pre> </details> ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Thank you @lgriffee for catching these!
WHY are these changes introduced?
Part of #10519
WHAT is this pull request doing?
border
token groupsborder
This the pre-v12 migration step to create a safe CSS custom property mapping to the new border tokens.
RegExp token search
🎩 checklist
README.md
with documentation changes