Use @Custom-Media across all of Polaris React

Shopify · Jan 12, 2024 · 4353566 · 4353566
1 parent 0f0da7a
commit 4353566
Show file tree

Hide file tree

Showing 51 changed files with 192 additions and 187 deletions.
diff --git a/.changeset/twelve-apricots-sip.md b/.changeset/twelve-apricots-sip.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Use `@custom-media` across all of `@shopify/polaris` (follow on from https://github.com/Shopify/polaris/pull/10804)
diff --git a/...is-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.scss b/...is-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.scss
@@ -40,7 +40,7 @@
       background-color: var(--p-color-bg-fill-disabled) !important;
     }
 
-    @media #{$p-breakpoints-md-up} {
+    @media (--p-breakpoints-md-up) {
       border: none !important;
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($border-width: 0);

diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -40,7 +40,7 @@ html {
   font-sizes on descendant elements:
 */
 @supports (font: -apple-system-body) {
-  @media #{$p-breakpoints-sm-down} {
+  @media (--p-breakpoints-sm-down) {
     html {
       font: -apple-system-body;
     }

diff --git a/polaris-react/src/components/Banner/Banner.module.scss b/polaris-react/src/components/Banner/Banner.module.scss
@@ -28,7 +28,7 @@
     $borderRadius: var(--p-border-radius-0)
   );
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-200),
       $borderRadius: var(--p-border-radius-300)

diff --git a/polaris-react/src/components/Bleed/Bleed.module.scss b/polaris-react/src/components/Bleed/Bleed.module.scss
@@ -32,7 +32,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-xs));
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-sm));
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -43,7 +43,7 @@
     margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-sm));
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-md));
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -54,7 +54,7 @@
     margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-md));
   }
 
-  @media #{$p-breakpoints-lg-up} {
+  @media (--p-breakpoints-lg-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-lg));
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -65,7 +65,7 @@
     margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-lg));
   }
 
-  @media #{$p-breakpoints-xl-up} {
+  @media (--p-breakpoints-xl-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-xl));
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/BulkActions/BulkActions.module.scss b/polaris-react/src/components/BulkActions/BulkActions.module.scss
@@ -64,14 +64,14 @@ $bulk-actions-button-stacking-order: (
     $borderRadius: var(--p-border-radius-300)
   );
 
-  @media #{$p-breakpoints-sm-down} {
+  @media (--p-breakpoints-sm-down) {
     // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space
     > div > div:first-child {
       flex: 1 1 auto;
     }
   }
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     width: auto;
     justify-content: flex-start;
     margin-right: var(--p-space-200);

diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.module.scss b/polaris-react/src/components/CalloutCard/CalloutCard.module.scss
@@ -10,7 +10,7 @@
   flex: 0 0 auto;
   width: 100px;
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     display: block;
     margin-left: var(--p-space-500);
   }

diff --git a/polaris-react/src/components/Choice/Choice.module.scss b/polaris-react/src/components/Choice/Choice.module.scss
@@ -128,7 +128,7 @@
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-choice-size: 18px;
 
-  @media #{$p-breakpoints-md-down} {
+  @media (--p-breakpoints-md-down) {
     // stylelint-disable-next-line -- Polaris component custom properties
     --pc-choice-size: 20px;
   }
@@ -158,7 +158,7 @@
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-choice-size: 18px;
 
-  @media #{$p-breakpoints-md-down} {
+  @media (--p-breakpoints-md-down) {
     // stylelint-disable-next-line -- Polaris component custom properties
     --pc-choice-size: 20px;
   }

diff --git a/polaris-react/src/components/DataTable/DataTable.module.scss b/polaris-react/src/components/DataTable/DataTable.module.scss
@@ -9,7 +9,7 @@
   border-radius: 0;
   overflow: hidden;
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     border-radius: var(--p-border-radius-300);
   }
 }
@@ -22,7 +22,7 @@
     width: 100%;
     padding: var(--p-space-400) var(--p-space-300);
 
-    @media #{$p-breakpoints-md-up} {
+    @media (--p-breakpoints-md-up) {
       justify-content: flex-end;
     }
   }
@@ -207,7 +207,7 @@
 
 .hoverable {
   .Cell-hovered {
-    @media #{$p-breakpoints-md-up} {
+    @media (--p-breakpoints-md-up) {
       background: var(--p-color-bg-surface-hover);
     }
   }
@@ -401,7 +401,7 @@
   top: 0;
   left: 0;
 
-  @media #{$p-breakpoints-md-down} {
+  @media (--p-breakpoints-md-down) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     z-index: 1;
   }

diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.module.scss b/polaris-react/src/components/DescriptionList/DescriptionList.module.scss
@@ -5,7 +5,7 @@
   padding: 0;
   word-break: break-word;
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
@@ -20,7 +20,7 @@
     padding: var(--p-space-200) 0 var(--p-space-100);
   }
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     flex: 0 1 25%;
     padding: var(--p-space-400) var(--p-space-400) var(--p-space-400) 0;
 
@@ -48,7 +48,7 @@
     border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
   }
 
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     flex: 1 1 51%;
     padding: var(--p-space-400) 0;
 

diff --git a/polaris-react/src/components/EmptyState/EmptyState.module.scss b/polaris-react/src/components/EmptyState/EmptyState.module.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 .imageContained {
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     position: initial;
     width: 100%;
   }

diff --git a/polaris-react/src/components/Filters/Filters.module.scss b/polaris-react/src/components/Filters/Filters.module.scss
@@ -9,7 +9,7 @@
   background: var(--p-color-bg-surface);
 }
 
-@media #{$p-breakpoints-sm-down} {
+@media (--p-breakpoints-sm-down) {
   .Container {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -25,11 +25,11 @@
   height: 53px;
   overflow: hidden;
 
-  @media #{$p-breakpoints-sm-down} {
+  @media (--p-breakpoints-sm-down) {
     background: var(--p-color-bg-surface);
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     height: auto;
     overflow: visible;
   }
@@ -51,7 +51,7 @@
   padding: var(--p-space-300);
 }
 
-@media #{$p-breakpoints-md-up} {
+@media (--p-breakpoints-md-up) {
   .FiltersInner {
     overflow: visible;
     flex-wrap: wrap;
@@ -86,7 +86,7 @@
     fill: var(--p-color-icon);
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     font-size: var(--p-font-size-300);
     line-height: var(--p-font-line-height-400);
     height: 24px;
@@ -140,21 +140,21 @@
   span {
     margin-right: var(--p-space-050);
 
-    @media #{$p-breakpoints-md-up} {
+    @media (--p-breakpoints-md-up) {
       margin-right: var(--p-space-025);
     }
   }
 
   svg {
     width: var(--p-space-500);
 
-    @media #{$p-breakpoints-md-up} {
+    @media (--p-breakpoints-md-up) {
       width: var(--p-space-400);
     }
   }
 }
 
-@media #{$p-breakpoints-md-down} {
+@media (--p-breakpoints-md-down) {
   .FiltersWrapperWithAddButton {
     position: relative;
 
@@ -211,7 +211,7 @@
   align-items: center;
   justify-content: flex-start;
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     flex-wrap: wrap;
   }
 }
@@ -225,7 +225,7 @@
   }
 }
 
-@media #{$p-breakpoints-md-down} {
+@media (--p-breakpoints-md-down) {
   .ClearAll {
     margin-left: 0;
     padding-right: var(--p-space-400);

diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.module.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.module.scss
@@ -78,7 +78,7 @@
   padding: 0 var(--p-space-200) 0 var(--p-space-300);
   height: 26px;
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     padding: 0 var(--p-space-100) 0 var(--p-space-200);
     height: 22px;
   }
@@ -91,7 +91,7 @@
 
 .ActiveFilterButton .ToggleButton {
   padding-right: var(--p-space-050);
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     padding-right: 0;
   }
 }
@@ -101,7 +101,7 @@
   @include focus-ring;
   margin-right: var(--p-space-200);
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     margin-right: var(--p-space-100);
   }
 
@@ -112,7 +112,7 @@
 }
 
 .IconWrapper {
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     scale: 0.8;
   }
 }

diff --git a/polaris-react/src/components/Frame/Frame.module.scss b/polaris-react/src/components/Frame/Frame.module.scss
@@ -17,7 +17,7 @@ $sidebar-breakpoint: 1200px;
     background-color: transparent;
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     width: calc(100% - var(--pc-frame-offset, 0px));
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -42,7 +42,7 @@ $sidebar-breakpoint: 1200px;
     display: none !important;
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     z-index: 1;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -128,7 +128,7 @@ $sidebar-breakpoint: 1200px;
     outline: none;
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     display: none;
   }
 
@@ -156,7 +156,7 @@ $sidebar-breakpoint: 1200px;
     display: none !important;
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     left: var(--pc-frame-offset);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -171,7 +171,7 @@ $sidebar-breakpoint: 1200px;
   left: 0;
   width: 100%;
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     left: var(--pc-frame-offset);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -185,7 +185,7 @@ $sidebar-breakpoint: 1200px;
   align-items: stretch;
 
   min-width: 0;
-  @media #{$p-breakpoints-sm-up} {
+  @media (--p-breakpoints-sm-up) {
     // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties
     max-width: calc(100vw - var(--pc-app-provider-scrollbar-width));
     // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
@@ -198,7 +198,7 @@ $sidebar-breakpoint: 1200px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include safe-area-for(padding-bottom, 0, bottom);
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     .hasNav & {
       padding-left: $layout-width-nav-base;
       @media print {
@@ -240,7 +240,7 @@ $sidebar-breakpoint: 1200px;
   bottom: 0;
   width: 100%;
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     left: var(--pc-frame-offset);
 
@@ -274,7 +274,7 @@ $sidebar-breakpoint: 1200px;
     display: none !important;
   }
 
-  @media #{$p-breakpoints-md-up} {
+  @media (--p-breakpoints-md-up) {
     .hasNav & {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       left: var(--pc-frame-offset);