Polaris v12 border migration (Shopify#10596)

### 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
AnnaCheba · Sep 21, 2023 · 26357f7 · 26357f7
1 parent 07246bc
commit 26357f7
Show file tree

Hide file tree

Showing 113 changed files with 534 additions and 524 deletions.
diff --git a/.changeset/dirty-rabbits-sip.md b/.changeset/dirty-rabbits-sip.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated CSS custom properties and component props with safe mapping to new border design tokens for v12
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
@@ -26,8 +26,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   cursor: pointer;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
-  border-radius: var(--p-border-radius-1);
-  border-top: var(--p-border-width-1) solid transparent;
+  border-radius: var(--p-border-radius-100);
+  border-top: var(--p-border-width-025) solid transparent;
   color: inherit;
 
   #{$se23} & {
@@ -36,13 +36,13 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
     --pc-action-list-item-min-height: var(--p-space-8);
     padding: var(--p-space-1_5-experimental);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     align-items: center;
     display: flex;
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 
   &:hover {
@@ -80,7 +80,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
       background-color: var(--p-color-bg);
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -186,7 +186,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
       top: calc(var(--p-space-3) * -1);
       bottom: 0;
       left: 0;
-      border-left: var(--p-border-width-1) solid var(--p-color-border);
+      border-left: var(--p-border-width-025) solid var(--p-color-border);
       margin-left: calc(var(--p-space-1_5-experimental) * -1);
     }
   }
@@ -207,7 +207,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   height: var(--pc-action-list-image-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-action-list-image-size);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.

diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -20,7 +20,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  border: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-025) solid transparent;
   width: 100%;
 }
 // We have both a focused class and a focus pseudo selector here
@@ -54,7 +54,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     #{$se23} & {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -75,7 +75,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     ~ .Backdrop {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -107,9 +107,8 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
     color: var(--p-color-text-inverse-subdued);
     height: $new-input-height-se23;
-    border: var(--p-border-width-1-experimental) solid
-      var(--p-color-border-inverse);
-    border-radius: var(--p-border-radius-2);
+    border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
+    border-radius: var(--p-border-radius-200);
 
     &:hover {
       border-color: var(--p-color-border-input-hover);
@@ -118,7 +117,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
     &:active,
     &:focus {
-      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
+      box-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-border);
     }
   }
 
@@ -227,10 +226,10 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg-input);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   pointer-events: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 }
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -148,7 +148,7 @@ export function Section({
       as="li"
       role="presentation"
       borderColor="border-subdued"
-      {...(!isFirst && {borderBlockStartWidth: '1'})}
+      {...(!isFirst && {borderBlockStartWidth: '025'})}
       {...(!section.title && {
         paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2',
       })}

diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -6,17 +6,17 @@
   // stylelint-disable-next-line selector-no-qualifying-type -- generated by polaris-migrator DO NOT COPY
   button[type='button'] {
     margin: 0;
-    border: var(--p-border-width-1) solid var(--p-color-border-strong);
+    border: var(--p-border-width-025) solid var(--p-color-border-strong);
     // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &:hover,
     &:active,
     &:focus {
-      border: var(--p-border-width-1) solid var(--p-color-border-strong);
+      border: var(--p-border-width-025) solid var(--p-color-border-strong);
     }
 
     #{$se23} & {
       background: var(--p-color-bg-strong);
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
       border: none;
       box-shadow: none;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
@@ -27,7 +27,7 @@
       &:focus:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 button overrides */
         @include no-focus-ring;
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
         background: var(--p-color-bg-strong-active);

diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -10,7 +10,7 @@
     @include focus-ring($border-width: 1px);
     background: transparent !important;
     box-shadow: none !important;
-    border-radius: var(--p-border-radius-1) !important;
+    border-radius: var(--p-border-radius-100) !important;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding-left: var(--pc-secondary-action-button-spacing);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -61,7 +61,7 @@
       min-height: 28px;
       padding: var(--p-space-1) var(--p-space-3);
       background-color: var(--p-color-bg-strong) !important;
-      border-radius: var(--p-border-radius-2) !important;
+      border-radius: var(--p-border-radius-200) !important;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:hover {
         background-color: var(--p-color-bg-strong-hover) !important;
@@ -76,7 +76,7 @@
       &:focus:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
       }

diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -15,7 +15,7 @@
 #{$se23ShadowBevelOptOut} {
   // stylelint-disable -- Shadow bevel opt out custom properties
   --pc-app-provider-shadow-bevel-content: none;
-  --pc-app-provider-shadow-bevel-border: var(--p-border-width-1) solid
+  --pc-app-provider-shadow-bevel-border: var(--p-border-width-025) solid
     var(--p-color-border);
   // stylelint-enable
 }

diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -49,10 +49,10 @@
   // stylelint-disable-next-line -- using pre-existing private pc token
   margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
     calc(-1 * var(--p-space-2));
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 overrides
     margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
       calc(-1 * var(--p-space-3));
@@ -63,7 +63,7 @@
     text-decoration: none;
 
     @media (-ms-high-contrast: active) {
-      outline: var(--p-border-width-1) solid windowText;
+      outline: var(--p-border-width-025) solid windowText;
     }
   }
 
@@ -139,7 +139,7 @@
   height: var(--pc-mapped-actions-image-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-mapped-actions-image-size);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.

diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
@@ -35,7 +35,7 @@
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 
   &::after {
@@ -59,12 +59,12 @@
   border-radius: var(--p-border-radius-full);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-05);
+    border-radius: var(--p-border-radius-050);
   }
 }
 
 .shapeSquare {
-  border-radius: var(--p-border-radius-05);
+  border-radius: var(--p-border-radius-050);
 
   .Text {
     font-size: var(--p-font-size-200);

diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
@@ -10,14 +10,14 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-5);
+  border-radius: var(--p-border-radius-500);
   color: var(--p-color-text);
 
   #{$se23} & {
     background-color: var(--p-color-bg-transparent-subdued-experimental);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-medium);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -26,7 +26,7 @@
   }
 
   @media print {
-    border: solid var(--p-border-width-1) var(--p-color-border);
+    border: solid var(--p-border-width-025) var(--p-color-border);
   }
 }
 
@@ -192,7 +192,7 @@
     background-color: var(--p-color-bg-transparent-subdued-experimental);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-bold);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -247,7 +247,7 @@
 }
 
 .withinFilter {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 }
 
 .Icon {

diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -14,7 +14,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-pip-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  border: var(--p-border-width-2) solid var(--pc-pip-color);
+  border: var(--p-border-width-050) solid var(--pc-pip-color);
   border-radius: var(--p-border-radius-full);
   flex-shrink: 0;
 

diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 @mixin banner-variants($in-page) {
-  border: var(--p-border-width-1) solid var(--p-color-border-strong);
+  border: var(--p-border-width-025) solid var(--p-color-border-strong);
   background-color: var(--p-color-bg-app);
 
   #{$se23} & {
@@ -11,38 +11,38 @@
 
   @if $in-page {
     border-radius: 0;
-    border-width: var(--p-border-width-1) 0;
+    border-width: var(--p-border-width-025) 0;
 
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: var(--p-shadow-sm),
-        $borderRadius: var(--p-border-radius-0-experimental),
+        $borderRadius: var(--p-border-radius-0),
         // The following arguments explicitly ignore the shadow-bevel opt out
         $border: none,
         $content: ''
       );
     }
 
     @media #{$p-breakpoints-sm-up} {
-      border-width: var(--p-border-width-1);
-      border-radius: var(--p-border-radius-2);
+      border-width: var(--p-border-width-025);
+      border-radius: var(--p-border-radius-200);
 
       #{$se23} & {
         @include shadow-bevel(
           $boxShadow: var(--p-shadow-sm),
-          $borderRadius: var(--p-border-radius-3),
+          $borderRadius: var(--p-border-radius-300),
           // The following arguments explicitly ignore the shadow-bevel opt out
           $border: none,
           $content: ''
         );
       }
     }
   } @else {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     #{$se23} & {
       box-shadow: none;
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 
@@ -51,7 +51,7 @@
   }
 
   &.keyFocused {
-    outline: var(--p-border-width-2) solid
+    outline: var(--p-border-width-050) solid
       var(--p-color-border-interactive-focus);
   }
 
@@ -193,7 +193,7 @@
 }
 
 .withinPage {
-  border-radius: 0 0 var(--p-border-radius-1) var(--p-border-radius-1);
+  border-radius: 0 0 var(--p-border-radius-100) var(--p-border-radius-100);
   padding: var(--p-space-5);
 
   #{$se23} & {
@@ -259,7 +259,7 @@
     text-decoration: underline;
 
     @media (-ms-high-contrast: active) {
-      outline: var(--p-border-width-2) dotted;
+      outline: var(--p-border-width-050) dotted;
     }
   }