Migrate border custom properties from v10 to v11 (#8879)

## WHY are these changes introduced? Part of #8405 ## WHAT is this pull request doing? Runs the [`v11-styles-replace-custom-property-border`](https://github.com/Shopify/polaris/blob/780acafd681ffeba6f5df634f290bee646557b64/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts) from `@shopify/polaris-migrator` to migrate `border` custom properties from `v10` to `v11`. e.g. ```sh cd polaris-react npx @shopify/polaris-migrator v11-styles-replace-custom-property-border './src/**/*.scss' npx prettier --write "./src/**/*.scss" yarn lint:styles ``` This PR changes the `BorderAliasTokens` in the `Divider` component. As a result, there are slight visual changes to the `Divider` component border colors. Please see screenshots of documentation changes below: ### polaris.shopify.com **Before** <img width="1760" alt="Screenshot 2023-04-11 at 11 40 06 AM" src="https://user-images.githubusercontent.com/21976492/231247036-e7fb726d-2160-4c71-a292-c8438b4d682b.png"> **After** <img width="1774" alt="Screenshot 2023-04-11 at 11 48 52 AM" src="https://user-images.githubusercontent.com/21976492/231247072-3f9bd2d0-b32b-41bf-98d5-d2d5c4e7d488.png"> #### Storybook **Before** <img width="1772" alt="Screenshot 2023-04-11 at 11 51 44 AM" src="https://user-images.githubusercontent.com/21976492/231247343-0bbb2d79-89e0-4fed-ba77-7363597e496c.png"> **After** <img width="1776" alt="Screenshot 2023-04-11 at 11 40 26 AM" src="https://user-images.githubusercontent.com/21976492/231247092-b020ca72-2e0a-4269-bd46-30953200ca39.png"> --------- Co-authored-by: Aaron Casanova <[email protected]>
Shopify · Apr 11, 2023 · 2e65ec7 · 2e65ec7
1 parent e4e5894
commit 2e65ec7
Show file tree

Hide file tree

Showing 34 changed files with 63 additions and 58 deletions.
diff --git a/.changeset/tough-planets-happen.md b/.changeset/tough-planets-happen.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Migrate `border` custom properties from Polaris `v10` to `v11`
diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.tsx
@@ -36,7 +36,7 @@ export const AlphaCard = ({
   roundedAbove,
 }: AlphaCardProps) => {
   const breakpoints = useBreakpoints();
-  const defaultBorderRadius = '2' as BorderRadiusScale;
+  const defaultBorderRadius: BorderRadiusScale = '2';
 
   let hasBorderRadius = !roundedAbove;
 

diff --git a/polaris-react/src/components/AlphaFilters/AlphaFilters.scss b/polaris-react/src/components/AlphaFilters/AlphaFilters.scss
@@ -3,7 +3,7 @@
 .Container {
   position: relative;
   z-index: var(--p-z-index-1);
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-top-left-radius: var(--p-border-radius-2);
   border-top-right-radius: var(--p-border-radius-2);
   background: var(--p-color-bg);
@@ -31,7 +31,7 @@
 }
 
 .FiltersWrapper {
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: 53px;
   overflow: hidden;
 

diff --git a/polaris-react/src/components/Card/Card.scss b/polaris-react/src/components/Card/Card.scss
@@ -62,7 +62,7 @@
   }
 
   + .Section {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -109,7 +109,7 @@
   }
 
   .Header + & {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     margin-top: var(--p-space-5);
   }
 }
@@ -132,7 +132,7 @@
   + .Subsection {
     margin-top: var(--p-space-4);
     padding-top: var(--p-space-4);
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -159,7 +159,7 @@
   }
 
   .Section-subdued + & {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     padding: var(--p-space-5);
   }
 }
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -75,7 +75,7 @@ export function WithHexTextField() {
       minHeight: 'calc(100% - 0.125rem)',
       aspectRatio: '1 / 1',
       borderRadius: 'var(--p-border-radius-1)',
-      border: 'var(--p-border-divider)',
+      border: 'var(--p-border-width-1) solid var(--p-color-border-subdued)',
       backgroundColor: hsbToHex(color),
     },
     TextField: {

diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
@@ -62,7 +62,7 @@
 // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY
 .TableRow + .TableRow {
   .Cell {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 }
 
@@ -101,7 +101,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  border-right: var(--p-border-divider);
+  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
 
 .Cell-firstColumn {
@@ -124,7 +124,7 @@
 .Cell-header {
   font-weight: var(--p-font-weight-regular);
   color: var(--p-color-text);
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-top: 0;
 
   .IncreasedTableDensity & {
@@ -270,7 +270,7 @@
 .Cell-total {
   font-weight: var(--p-font-weight-semibold);
   background: var(--p-color-bg-subdued);
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   .ZebraStripingOnData.ShowTotals & {
     background: var(--p-color-bg-subdued);
@@ -283,7 +283,7 @@
 }
 
 .Cell-total-footer {
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-bottom: none;
 
   &:first-child {
@@ -300,7 +300,7 @@
   background: var(--p-color-bg-subdued);
   color: var(--p-color-text-subdued);
   text-align: center;
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-bottom-left-radius: var(--p-border-radius-2);
   border-bottom-right-radius: var(--p-border-radius-2);
 

diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.scss b/polaris-react/src/components/DescriptionList/DescriptionList.scss
@@ -30,7 +30,7 @@
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
     .Description + & + .Description {
-      border-top: var(--p-border-divider);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     }
   }
 }
@@ -44,7 +44,7 @@
   }
 
   + .Term {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 
   @media #{$p-breakpoints-sm-up} {
@@ -57,7 +57,7 @@
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
     + .Term + .Description {
-      border-top: var(--p-border-divider);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     }
   }
 }
diff --git a/polaris-react/src/components/Divider/Divider.stories.tsx b/polaris-react/src/components/Divider/Divider.stories.tsx
@@ -18,11 +18,11 @@ export function WithBorderStyles() {
       </Text>
       <Divider />
       <Text as="h1" variant="headingXs">
-        Dark
+        Border
       </Text>
       <Divider borderColor="border" />
       <Text as="h1" variant="headingXs">
-        Divider on dark
+        Border inverse
       </Text>
       <Divider borderColor="border-inverse" />
       <Text as="h1" variant="headingXs">

diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
@@ -19,7 +19,7 @@ $list-filters-footer-height: 70px;
   top: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: $list-filters-header-height;
   box-sizing: border-box;
   display: flex;
@@ -46,7 +46,7 @@ $list-filters-footer-height: 70px;
   bottom: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: $list-filters-footer-height;
   box-sizing: border-box;
   display: flex;
@@ -65,7 +65,7 @@ $list-filters-footer-height: 70px;
 }
 
 .EmptyFooterState {
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-4);
   width: 100%;
   display: flex;

diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -15,7 +15,7 @@
   padding-left: var(--p-space-3);
   padding-right: var(--p-space-3);
   border-width: 0;
-  border-right: var(--p-border-base);
+  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
   background-color: var(--p-color-bg);
   font-weight: var(--p-font-weight-medium);
   cursor: pointer;

diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -87,7 +87,7 @@ $spinner-size: 20px;
   @media #{$p-breakpoints-md-down} {
     position: relative;
     padding: var(--p-space-3) var(--p-space-4);
-    border-left: var(--p-border-divider);
+    border-left: var(--p-border-width-1) solid var(--p-color-border-subdued);
     gap: var(--p-space-2);
 
     &::before {

diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
@@ -1,7 +1,7 @@
 @import '../../../../styles/common';
 
 .Container {
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-top-left-radius: var(--p-border-radius-2);
   border-top-right-radius: var(--p-border-radius-2);
   background: var(--p-color-bg);

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -725,7 +725,7 @@ $scroll-bar-size: var(--p-space-2);
   transform: translateX(calc(-1 * var(--pc-index-table-translate-offset)));
   transition: transform var(--p-ease) var(--p-duration-200);
   display: flex;
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   filter: none;
   align-items: center;
 }

diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
@@ -69,7 +69,7 @@ $relative-size: $primary-basis / $secondary-basis;
   + .AnnotatedSection {
     @media #{$p-breakpoints-sm-up} {
       padding-top: var(--p-space-4);
-      border-top: var(--p-border-divider);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     }
   }
 }

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -62,7 +62,7 @@
   }
 
   + .Section {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -109,7 +109,7 @@
   }
 
   .Header + & {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     margin-top: var(--p-space-5);
   }
 }
@@ -132,7 +132,7 @@
   + .Subsection {
     margin-top: var(--p-space-4);
     padding-top: var(--p-space-4);
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -159,7 +159,7 @@
   }
 
   .Section-subdued + & {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     padding: var(--p-space-5);
   }
 }
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
@@ -19,7 +19,7 @@ $list-filters-footer-height: 70px;
   top: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: $list-filters-header-height;
   box-sizing: border-box;
   display: flex;
@@ -46,7 +46,7 @@ $list-filters-footer-height: 70px;
   bottom: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: $list-filters-footer-height;
   box-sizing: border-box;
   display: flex;
@@ -65,7 +65,7 @@ $list-filters-footer-height: 70px;
 }
 
 .EmptyFooterState {
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-4);
   width: 100%;
   display: flex;

diff --git a/polaris-react/src/components/Listbox/components/Option/Option.scss b/polaris-react/src/components/Listbox/components/Option/Option.scss
@@ -11,5 +11,5 @@
 }
 
 .divider {
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/Listbox/components/Section/Section.scss b/polaris-react/src/components/Listbox/components/Section/Section.scss
@@ -4,7 +4,7 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
-  border-bottom: var(--p-border-divider);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
 
 .noDivider {

diff --git a/polaris-react/src/components/Modal/components/Section/Section.scss b/polaris-react/src/components/Modal/components/Section/Section.scss
@@ -4,7 +4,7 @@ $close-button-width: calc(var(--p-space-12) + var(--p-space-1));
   flex: 0 0 auto;
 
   &:not(:last-of-type) {
-    border-bottom: var(--p-border-divider);
+    border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 }
 

diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
@@ -18,7 +18,7 @@ $nav-max-width: 360px;
   min-height: 100%;
   background-color: var(--p-color-bg-app);
   -webkit-overflow-scrolling: touch;
-  border-right: var(--p-border-divider);
+  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include safe-area-for(padding-bottom, 0, bottom);
@@ -484,7 +484,7 @@ $disabled-fade: 0.6;
 }
 
 .Section-withSeparator {
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
 
 .SectionHeading {

diff --git a/polaris-react/src/components/Page/Page.scss b/polaris-react/src/components/Page/Page.scss
@@ -42,6 +42,6 @@ body {
 }
 
 .divider {
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-8);
 }
diff --git a/polaris-react/src/components/PageActions/PageActions.scss b/polaris-react/src/components/PageActions/PageActions.scss
@@ -3,7 +3,7 @@
 .PageActions {
   margin: 0 auto;
   padding: var(--p-space-5);
-  border-top: var(--p-border-divider);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   @media #{$p-breakpoints-sm-up} {
     padding: var(--p-space-5) 0;

diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
@@ -85,7 +85,7 @@ $vertical-motion-offset: -5px;
   max-width: 100%;
 
   + .Pane {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 
   &:focus {
@@ -104,7 +104,7 @@ $vertical-motion-offset: -5px;
 
 .Section {
   + .Section {
-    border-top: var(--p-border-divider);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 }
 

diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -148,7 +148,7 @@
     width: var(--pc-range-slider-thumb-size);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     height: var(--pc-range-slider-thumb-size);
-    border: var(--p-border-transparent);
+    border: var(--p-border-width-1) solid transparent;
     border-radius: var(--p-border-radius-full);
     background: linear-gradient(
       var(--p-color-bg-interactive),