Migrate legacy custom properties from v10 to v11 (Shopify#8426)

Part of Shopify#8405 Runs the [`v11-styles-replace-custom-property-legacy`](Shopify#8272) from `@shopify/polaris-migrator` to migrate `legacy` custom properties from `v10` to `v11`. e.g. ```sh cd polaris-react npx @shopify/[email protected] \ v11-styles-replace-custom-property-legacy \ './src/**/*.scss' npx prettier --write "./src/**/*.scss" ```
juzser · Jul 27, 2023 · 5f09ddb · 5f09ddb
1 parent 0280f1a
commit 5f09ddb
Show file tree

Hide file tree

Showing 16 changed files with 44 additions and 49 deletions.
diff --git a/.changeset/new-baboons-fail.md b/.changeset/new-baboons-fail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Migrated `legacy` custom properties from `v10` to `v11`
diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
@@ -192,7 +192,7 @@
 
 .hasDismiss {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding-right: calc(var(--p-space-8) + var(--p-icon-size-small));
+  padding-right: calc(var(--p-space-8) + 0.5rem);
 }
 
 // We need pretty high specificity to do the descendant selectors

diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.scss b/polaris-react/src/components/CalloutCard/CalloutCard.scss
@@ -55,5 +55,5 @@
 
 .hasDismiss {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding-right: calc(var(--p-space-8) + var(--p-icon-size-small));
+  padding-right: calc(var(--p-space-8) + 0.5rem);
 }
diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss
@@ -38,10 +38,8 @@
 
 .Checkbox {
   pointer-events: none;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  height: var(--p-choice-size);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--p-choice-size);
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 .Label {
@@ -53,6 +51,5 @@
   text-overflow: ellipsis;
   // padding to fix the bottom of letters being cutoff by overflow: hidden
   padding: var(--p-space-025) 0;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin-left: calc(var(--p-space-5) - var(--p-control-border-width));
+  margin-left: calc(var(--p-space-5) - var(--p-border-radius-05));
 }
diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss
@@ -3,8 +3,7 @@
 .Checkbox {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: relative;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: var(--p-choice-margin);
+  margin: var(--p-space-025);
 }
 
 // stylelint-disable selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/Choice/Choice.scss b/polaris-react/src/components/Choice/Choice.scss
@@ -46,7 +46,7 @@
 
 .Control {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-choice-size: var(--p-choice-size);
+  --pc-choice-size: 1.25rem;
 
   @media #{$p-breakpoints-md-down} {
     // stylelint-disable-next-line -- Polaris component custom properties
@@ -80,7 +80,7 @@
 
 .Descriptions {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-choice-size: var(--p-choice-size);
+  --pc-choice-size: 1.25rem;
 
   @media #{$p-breakpoints-md-down} {
     // stylelint-disable-next-line -- Polaris component custom properties

diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.scss b/polaris-react/src/components/ChoiceList/ChoiceList.scss
@@ -2,5 +2,5 @@
 
 .ChoiceChildren {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding-left: calc(var(--p-space-2) + var(--p-choice-size));
+  padding-left: calc(var(--p-space-2) + 1.25rem);
 }
diff --git a/polaris-react/src/components/Columns/Columns.scss b/polaris-react/src/components/Columns/Columns.scss
@@ -5,10 +5,18 @@
 
   // stylelint-disable -- Polaris component custom properties
   --pc-columns-grid-template-columns-xs: initial;
-  --pc-columns-grid-template-columns-sm: var(--pc-columns-grid-template-columns-xs);
-  --pc-columns-grid-template-columns-md: var(--pc-columns-grid-template-columns-sm);
-  --pc-columns-grid-template-columns-lg: var(--pc-columns-grid-template-columns-md);
-  --pc-columns-grid-template-columns-xl: var(--pc-columns-grid-template-columns-lg);
+  --pc-columns-grid-template-columns-sm: var(
+    --pc-columns-grid-template-columns-xs
+  );
+  --pc-columns-grid-template-columns-md: var(
+    --pc-columns-grid-template-columns-sm
+  );
+  --pc-columns-grid-template-columns-lg: var(
+    --pc-columns-grid-template-columns-md
+  );
+  --pc-columns-grid-template-columns-xl: var(
+    --pc-columns-grid-template-columns-lg
+  );
   // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: grid;

diff --git a/...eact/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/...eact/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
@@ -72,8 +72,7 @@
   display: flex;
 
   .Item > div > button {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    margin-right: var(--p-button-group-item-spacing);
+    margin-right: calc(-1 * var(--p-space-025));
     border-radius: 0;
   }
 

diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
@@ -5,8 +5,7 @@
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 100%;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: var(--p-choice-margin);
+  margin: var(--p-space-025);
   // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
   &.active .Backdrop {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss
@@ -94,13 +94,10 @@ $control-vertical-adjustment: 2px;
   display: flex;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   flex-shrink: 0;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--p-choice-size);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  height: var(--p-choice-size);
+  width: 1.25rem;
+  height: 1.25rem;
   margin-right: var(--p-space-2);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin-left: calc(-1 * var(--p-choice-margin));
+  margin-left: calc(-1 * var(--p-space-025));
 }
 
 .disabled {

diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -3,8 +3,7 @@
 .RadioButton {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: relative;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: var(--p-choice-margin);
+  margin: var(--p-space-025);
 }
 
 .Input {
@@ -46,7 +45,7 @@
 
 .Backdrop {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-icon-size-small: var(--p-icon-size-small);
+  --pc-icon-size-small: 0.5rem;
 
   // ::before is the selected dot, ::after the focus-ring
 
@@ -66,8 +65,7 @@
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: 100%;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  border: var(--p-control-border-width) solid var(--p-border);
+  border: var(--p-border-radius-05) solid var(--p-border);
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-surface);
   transition: border-color var(--p-duration-100) var(--p-ease);

diff --git a/polaris-react/src/components/RangeSlider/RangeSlider.scss b/polaris-react/src/components/RangeSlider/RangeSlider.scss
@@ -3,7 +3,7 @@
   --pc-range-slider-input: 10;
   --pc-range-slider-output: 20;
   --pc-range-slider-track-height: 4px;
-  --pc-range-slider-thumb-size: var(--p-range-slider-thumb-size-base);
+  --pc-range-slider-thumb-size: 1rem;
   --pc-track-dashed-border-radius: var(--p-border-radius-1);
   // stylelint-enable
 }

diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -157,8 +157,7 @@ $range-output-size: 32px;
   position: absolute;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-range-slider-output);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  bottom: var(--p-range-slider-thumb-size-active);
+  bottom: 1.5rem;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;

diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
@@ -294,7 +294,7 @@ $spinner-icon-size: 12px;
 .Spinner {
   // stylelint-disable -- Polaris component custom properties
   --pc-text-field-spinner-offset-large: calc(
-    var(--p-text-field-spinner-offset) + var(--p-border-width-1)
+    0.125rem + var(--p-border-width-1)
   );
   // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -349,7 +349,7 @@ $spinner-icon-size: 12px;
 .Segment {
   // stylelint-disable -- Polaris component custom properties
   --pc-text-field-spinner-border-radius: calc(
-    var(--p-border-radius-1) - var(--p-text-field-spinner-offset)
+    var(--p-border-radius-1) - 0.125rem
   );
   // stylelint-enable
   background: var(--p-surface-neutral);
@@ -377,8 +377,7 @@ $spinner-icon-size: 12px;
   &:first-child {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     border-top-right-radius: var(--pc-text-field-spinner-border-radius);
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    margin-bottom: var(--p-text-field-spinner-offset);
+    margin-bottom: var(--p-space-05);
   }
 
   &:last-child {

diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
@@ -18,23 +18,18 @@
   @if $style == base {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     position: relative;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-control-border-width) solid var(--p-border);
+    border: var(--p-border-radius-05) solid var(--p-border);
     background-color: var(--p-surface);
     border-radius: var(--p-border-radius-1);
 
     &::before {
       content: '';
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       position: absolute;
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      top: calc(-1 * var(--p-control-border-width));
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      right: calc(-1 * var(--p-control-border-width));
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      bottom: calc(-1 * var(--p-control-border-width));
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      left: calc(-1 * var(--p-control-border-width));
+      top: calc(-1 * var(--p-border-radius-05));
+      right: calc(-1 * var(--p-border-radius-05));
+      bottom: calc(-1 * var(--p-border-radius-05));
+      left: calc(-1 * var(--p-border-radius-05));
       border-radius: var(--p-border-radius-1);
       background-color: var(--p-interactive);
       opacity: 0;