Migrate z-index custom properties from v10 to v11 (#8423)

### WHY are these changes introduced? Part of #8405 ### WHAT is this pull request doing? Runs the [`v11-styles-replace-custom-property-zindex`](#8272) from `@shopify/polaris-migrator` to migrate `z-index` custom properties from `v10` to `v11`. e.g. ```sh cd polaris-react npx @shopify/[email protected] \ v11-styles-replace-custom-property-zindex \ './src/**/*.scss' npx prettier --write "./src/**/*.scss" ```
Shopify · Feb 17, 2023 · bc8ab02 · bc8ab02
1 parent 48dffd0
commit bc8ab02
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 22 deletions.
diff --git a/.changeset/itchy-turtles-thank.md b/.changeset/itchy-turtles-thank.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Migrated `z-index` custom properties from `v10` to `v11`
diff --git a/polaris-react/src/components/Backdrop/Backdrop.scss b/polaris-react/src/components/Backdrop/Backdrop.scss
@@ -1,7 +1,7 @@
 .Backdrop {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-10);
+  z-index: var(--p-z-index-10);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -23,5 +23,5 @@
 }
 
 .belowNavigation {
-  z-index: var(--p-z-7);
+  z-index: var(--p-z-index-7);
 }
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
@@ -337,7 +337,7 @@
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     right: 0;
     visibility: hidden;
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
   }
 
   .StickyHeaderInner {

diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
@@ -264,7 +264,7 @@ $list-filters-footer-height: 70px;
 .Backdrop {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-10);
+  z-index: var(--p-z-index-10);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
@@ -25,7 +25,7 @@
 .Navigation {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-8);
+  z-index: var(--p-z-index-8);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -155,7 +155,7 @@
 .TopBar {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-4);
+  z-index: var(--p-z-index-4);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -181,7 +181,7 @@
 .ContextualSaveBar {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-5);
+  z-index: var(--p-z-index-5);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -248,7 +248,7 @@
 .GlobalRibbonContainer {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-3);
+  z-index: var(--p-z-index-3);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   bottom: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -277,7 +277,7 @@
 .LoadingBar {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-6);
+  z-index: var(--p-z-index-6);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -297,7 +297,7 @@
     }
 
     .hasTopBar & {
-      z-index: var(--p-z-6);
+      z-index: var(--p-z-index-6);
     }
   }
 }
@@ -307,7 +307,7 @@
   --pc-frame-skip-vertical-offset: 10px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-9);
+  z-index: var(--p-z-index-9);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: var(--pc-frame-skip-vertical-offset);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
@@ -13,7 +13,7 @@
 .ToastManager {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-12);
+  z-index: var(--p-z-index-12);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -57,7 +57,7 @@ $loading-panel-height: 53px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: absolute;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -211,7 +211,7 @@ $loading-panel-height: 53px;
 
 .TableHeading {
   background: var(--p-surface-subdued);
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   padding: var(--p-space-2) var(--p-space-4);
   text-align: left;
   font-weight: var(--p-font-weight-medium);

diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -61,7 +61,7 @@
 .Popover {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: absolute;
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: var(--p-space-4);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -12,7 +12,7 @@ $breakpoints-height-limit-up: '(min-height: #{breakpoint($height-limit + $vertic
 .Container {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
@@ -1,7 +1,7 @@
 .PositionedOverlay {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: absolute;
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
 }
 
 .fixed {

diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
@@ -33,7 +33,7 @@ $sheet-desktop-width: 380px;
 .Container {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
@@ -135,7 +135,7 @@ $icon-size: 20px;
 }
 
 .Contents {
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -5,7 +5,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
   visibility: hidden;
-  z-index: var(--p-z-8);
+  z-index: var(--p-z-index-8);
   pointer-events: none;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: $top-bar-height;

diff --git a/...ris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss b/...ris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
@@ -10,7 +10,7 @@
   left: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
-  z-index: var(--p-z-7);
+  z-index: var(--p-z-index-7);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: 100%;
 }

diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -13,7 +13,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
   --pc-search-field-icon: 3;
   --pc-search-field-action: 3;
   // stylelint-enable
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY