Migrate shadow custom properties from v11 to v12 (#10778)

### WHY are these changes introduced? Resolves #10641. Migrates `shadow` custom properties from v11 to v12. Updates types on Box component `shadow` prop and ShadowBevel component `boxShadow` prop. ### WHAT is this pull request doing? To migrate `shadow` custom properties, the flow was to: - Handle automatic migrations ```sh # Space migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230922144839 \ v12-styles-replace-custom-property-shadow \ 'src/**/*.scss' # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate shadow custom properties from v11 to v12" ``` - Handle manual migrations ```sh # Bring back the files with "polaris-migrator:" comments git stash pop ``` - Search for "polaris-migrator:" comments and handle manual migrations - Search for and handle manual migrations (e.g. <Box shadow="md">) <br> ```sh # Stage all manually migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit manual migrations git commit -m "Manually migrate shadow custom properties from v11 to v12" ``` - Check for errors after all custom property migrations are finished ```sh # Run stylelint against polaris-react npx stylelint 'polaris-react/src/**/*.scss' ``` ### How to 🎩 #### Post-migration validation After migrating use the following RegExp to check for any additional instances of `space` custom properties across all file types: <details> <summary>[V12] Check RegExp for hardcoded <code>shadow</code> custom properties across all file types</summary> ``` (?:--p-shadow-inset-lg|--p-shadow-inset-md|--p-shadow-inset-sm|--p-shadow-none|--p-shadow-xs|--p-shadow-sm|--p-shadow-md|--p-shadow-lg|--p-shadow-xl|--p-shadow-2xl|--p-shadow-bevel-experimental|--p-shadow-card-sm-experimental|--p-shadow-card-md-experimental|--p-shadow-card-lg-experimental|--p-shadow-button-experimental|--p-shadow-button-hover-experimental|--p-shadow-button-disabled-experimental|--p-shadow-button-primary-strong-experimental|--p-shadow-button-primary-strong-inset-experimental|--p-shadow-button-primary-strong-hover-experimental|--p-shadow-border-inset-experimental|--p-shadow-button-primary-experimental|--p-shadow-button-primary-hover-experimental|--p-shadow-button-inset-experimental)(?![\w-]) ``` </details> <details> <summary>Check RegExp for outdated <code><Box shadow="..." /></code> props</summary> ``` <Box[^>\w](?:[^>]|\n)*?shadow ``` </details> <details> <summary>Check RegExp for outdated <code><ShadowBevel boxShadow="..." /></code> props</summary> ``` <ShadowBevel[^>\w](?:[^>]|\n)*?boxShadow ``` </details> #### Replacement maps | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-shadow-inset-lg` | `--p-shadow-inset-200` | | `--p-shadow-inset-md` | `--p-shadow-inset-200` | | `--p-shadow-inset-sm` | `--p-shadow-inset-100` | | `--p-shadow-none` | `--p-shadow-0` | | `--p-shadow-xs` | `--p-shadow-100` | | `--p-shadow-sm` | `--p-shadow-200` | | `--p-shadow-md` | `--p-shadow-300` | | `--p-shadow-lg` | `--p-shadow-400` | | `--p-shadow-xl` | `--p-shadow-500` | | `--p-shadow-2xl` | `--p-shadow-600` | | `--p-shadow-bevel-experimental` | `--p-shadow-bevel-100` | | `--p-shadow-card-sm-experimental` | `--p-shadow-100` | | `--p-shadow-card-md-experimental` | `--p-shadow-200` | | `--p-shadow-card-lg-experimental` | `--p-shadow-300` | | `--p-shadow-button-experimental` | `--p-shadow-button` | | `--p-shadow-button-hover-experimental` | `--p-shadow-button-hover` | | `--p-shadow-button-disabled-experimental` | `inset 0 0 0 1px rgba(227, 227, 227, 1)` | | `--p-shadow-button-primary-strong-experimental` | `--p-shadow-button-primary` | | `--p-shadow-button-primary-strong-inset-experimental` | `--p-shadow-button-primary-inset` | | `--p-shadow-button-primary-strong-hover-experimental` | `--p-shadow-button-primary-hover` | | `--p-shadow-border-inset-experimental` | `--p-shadow-border-inset` | > [!IMPORTANT] > The following values were manually migrated based on context: | Deprecated CSS Custom Property | Replacement Value | | ------------------------- | ------------------------ | | `--p-shadow-button-primary-experimental` | `--p-shadow-button-primary-critical`<br>`--p-shadow-button-primary-success` | | `--p-shadow-button-primary-hover-experimental` | `--p-shadow-button-primary-critical-hover`<br>`--p-shadow-button-primary-success-hover` | | `--p-shadow-button-inset-experimental` | `--p-shadow-button-primary-critical-inset`<br>`--p-shadow-button-primary-success-inset` | ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)  <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] 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) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Shopify · Sep 29, 2023 · b126f64 · b126f64
1 parent 7556055
commit b126f64
Show file tree

Hide file tree

Showing 38 changed files with 106 additions and 80 deletions.
diff --git a/.changeset/dry-dancers-brush.md b/.changeset/dry-dancers-brush.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Migrated `shadow` custom properties from v11 to v12
diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -21,7 +21,7 @@
 
     &:active {
       background-color: var(--p-color-bg-strong-active) !important;
-      box-shadow: var(--p-shadow-inset-md) !important;
+      box-shadow: var(--p-shadow-inset-200) !important;
     }
 
     &:focus-visible {

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

diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
@@ -5,7 +5,7 @@ import type {
   ColorBorderAlias,
   BorderWidthScale,
   BorderRadiusAliasOrScale,
-  ShadowAlias,
+  ShadowAliasOrScale,
   SpaceScale,
 } from '@shopify/polaris-tokens';
 
@@ -108,7 +108,7 @@ export interface BoxProps extends React.AriaAttributes {
     'status' | 'presentation' | 'menu' | 'listbox' | 'combobox'
   >;
   /** Shadow on box */
-  shadow?: ShadowAlias;
+  shadow?: ShadowAliasOrScale;
   /** Set tab order */
   tabIndex?: Extract<React.AllHTMLAttributes<HTMLElement>['tabIndex'], number>;
   /** Width of container */

diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -55,12 +55,12 @@ $bulk-actions-button-stacking-order: (
   padding: var(--p-space-300);
   background: var(--p-color-bg);
   border-radius: var(--p-border-radius-200);
-  box-shadow: var(--p-shadow-md), var(--p-shadow-xl);
+  box-shadow: var(--p-shadow-300), var(--p-shadow-500);
   max-width: 100%;
   pointer-events: auto;
 
   @include shadow-bevel(
-    $boxShadow: var(--p-shadow-md),
+    $boxShadow: var(--p-shadow-300),
     $borderRadius: var(--p-border-radius-300)
   );
 
@@ -123,7 +123,7 @@ $bulk-actions-button-stacking-order: (
     // stylelint-disable-next-line -- Bulk actions button override
     &:focus-visible,
     &:active {
-      box-shadow: var(--p-shadow-inset-md);
+      box-shadow: var(--p-shadow-inset-200);
     }
   }
 }

diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -39,7 +39,7 @@
 
   &:active {
     // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property
-    --pc-button-shadow: var(--p-shadow-inset-md);
+    --pc-button-shadow: var(--p-shadow-inset-200);
     background: var(--p-color-bg-fill-active);
 
     .Content {
@@ -188,7 +188,7 @@
   background: var(--pc-button-color);
   border-width: 0;
   border-color: transparent;
-  box-shadow: var(--p-shadow-sm);
+  box-shadow: var(--p-shadow-200);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   color: var(--pc-button-text);
 
@@ -202,14 +202,14 @@
 
   &:focus {
     border-color: transparent;
-    box-shadow: var(--p-shadow-sm);
+    box-shadow: var(--p-shadow-200);
   }
 
   &:active {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     background: var(--pc-button-color-active);
     border-color: transparent;
-    box-shadow: var(--p-shadow-sm);
+    box-shadow: var(--p-shadow-200);
   }
 
   &.pressed {
@@ -218,13 +218,13 @@
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     background: var(--pc-button-color-depressed);
     border-color: transparent;
-    box-shadow: var(--p-shadow-sm);
+    box-shadow: var(--p-shadow-200);
 
     &:hover,
     &:focus {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       background: var(--pc-button-color-depressed);
-      box-shadow: var(--p-shadow-sm);
+      box-shadow: var(--p-shadow-200);
     }
   }
 
@@ -262,7 +262,7 @@
       rgba(255, 255, 255, 0.07) 80%,
       rgba(255, 255, 255, 0.15) 100%
     );
-    box-shadow: var(--p-shadow-button-primary-strong-experimental);
+    box-shadow: var(--p-shadow-button-primary);
     border-radius: 9px;
     transition: opacity 75ms cubic-bezier(0.19, 0.91, 0.38, 1);
     // stylelint-enable
@@ -277,7 +277,7 @@
     --pc-button-text: var(--p-color-text-brand-on-bg-fill-hover);
 
     &::before {
-      box-shadow: var(--p-shadow-button-primary-strong-experimental);
+      box-shadow: var(--p-shadow-button-primary);
     }
 
     svg {
@@ -289,7 +289,7 @@
     // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties
     --pc-button-text: var(--p-color-text-brand-on-bg-fill-active);
     background: var(--pc-button-color-active);
-    box-shadow: var(--p-shadow-button-inset-experimental);
+    box-shadow: var(--p-shadow-button-primary-inset);
     // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list
 
     // stylelint-enable-next-line length-zero-no-unit
@@ -301,7 +301,7 @@
         rgba(255, 255, 255, 0.1) 0%,
         rgba(255, 255, 255, 0) 100%
       );
-      box-shadow: var(--p-shadow-button-primary-strong-inset-experimental);
+      box-shadow: var(--p-shadow-button-primary-inset);
     }
 
     svg {
@@ -327,20 +327,13 @@
       top: 0.5px;
       bottom: 0.5px;
       border-radius: inherit;
-      // adjust shine for critical and success buttons
-      box-shadow: var(--p-shadow-button-primary-experimental);
       background: none;
     }
 
     &:hover {
       // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property
       --pc-button-text: var(--p-color-text-brand-on-bg-fill-hover);
 
-      // stylelint-disable-next-line selector-max-specificity -- set box shadow
-      &::before {
-        box-shadow: var(--p-shadow-button-primary-experimental);
-      }
-
       // stylelint-disable-next-line selector-max-specificity -- set svg fill
       svg {
         fill: var(--p-color-text-brand-on-bg-fill-hover);
@@ -350,7 +343,6 @@
     &:active {
       // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property
       --pc-button-text: var(--p-color-text-brand-on-bg-fill-active);
-      box-shadow: var(--p-shadow-button-inset-experimental);
 
       // stylelint-disable-next-line -- set opacity
       &::before {
@@ -373,6 +365,11 @@
     --pc-button-color-depressed: var(--p-color-bg-critical-strong-active);
     // stylelint-enable
 
+    &::before {
+      // adjust shine for critical and success buttons
+      box-shadow: var(--p-shadow-button-primary-critical);
+    }
+
     &:not(.disabled) {
       box-shadow: none;
     }
@@ -382,7 +379,14 @@
     }
 
     &:active {
-      box-shadow: var(--p-shadow-button-inset-experimental);
+      box-shadow: var(--p-shadow-button-primary-critical-inset);
+    }
+
+    &:hover {
+      // stylelint-disable-next-line selector-max-specificity -- set box shadow
+      &::before {
+        box-shadow: var(--p-shadow-button-primary-critical-hover);
+      }
     }
 
     // stylelint-disable-next-line selector-max-class -- set disabled styles
@@ -414,6 +418,22 @@
     );
     // stylelint-enable
     box-shadow: none;
+
+    &::before {
+      // adjust shine for critical and success buttons
+      box-shadow: var(--p-shadow-button-primary-success);
+    }
+
+    &:hover {
+      // stylelint-disable-next-line selector-max-specificity -- set box shadow
+      &::before {
+        box-shadow: var(--p-shadow-button-primary-success-hover);
+      }
+    }
+
+    &:active {
+      box-shadow: var(--p-shadow-button-primary-success-inset);
+    }
   }
 
   svg {

diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
@@ -49,7 +49,7 @@ export const Card = ({
   return (
     <WithinContentContext.Provider value>
       <ShadowBevel
-        boxShadow="xs"
+        boxShadow="100"
         borderRadius={hasBorderRadius ? defaultBorderRadius : '0'}
         zIndex="32"
       >

diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
@@ -388,7 +388,7 @@
   .StickyHeaderInner-isSticky {
     visibility: visible;
     background-color: var(--p-color-bg);
-    box-shadow: var(--p-shadow-xs);
+    box-shadow: var(--p-shadow-100);
   }
 }
 

diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -38,7 +38,7 @@
   color: var(--p-color-text);
   background-color: var(--p-color-bg-input);
   padding: var(--p-space-150) var(--p-space-300);
-  box-shadow: var(--p-shadow-button-experimental);
+  box-shadow: var(--p-shadow-button);
   border-radius: var(--p-border-radius-200);
 
   &.disabled {

diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx
@@ -1082,7 +1082,7 @@ function WithSidebarEnabled() {
               height: 'calc(100vh - 3.5rem - var(--p-space-400))',
               background: 'var(--p-color-bg-surface)',
               padding: 'var(--p-space-200)',
-              boxShadow: 'var(--p-shadow-md)',
+              boxShadow: 'var(--p-shadow-300)',
               borderRadius: 'var(--p-border-radius-300)',
             }}
           >

diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.scss b/polaris-react/src/components/Frame/components/Toast/Toast.scss
@@ -10,10 +10,10 @@ $Backdrop-opacity: 0.88;
   background: var(--p-color-bg-inverse);
   color: var(--p-color-text-inverse);
   margin-bottom: var(--p-space-500);
-  box-shadow: var(--p-shadow-xl);
+  box-shadow: var(--p-shadow-500);
 
   @include shadow-bevel(
-    $boxShadow: var(--p-shadow-lg),
+    $boxShadow: var(--p-shadow-400),
     $borderRadius: var(--p-border-radius-200)
   );
 

diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -4,7 +4,7 @@
   position: relative;
   display: flex;
   height: $top-bar-height;
-  box-shadow: var(--p-shadow-xs);
+  box-shadow: var(--p-shadow-100);
   background-color: var(--p-color-bg);
 }
 

diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -20,7 +20,7 @@ $spinner-size: 20px;
     z-index: var(--p-z-index-1);
     top: 56px;
     width: 100vw;
-    box-shadow: var(--p-shadow-sm);
+    box-shadow: var(--p-shadow-200);
   }
 
   .IndexFilters.IndexFiltersStickyFlush {

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -72,7 +72,7 @@ $loading-panel-height: 53px;
   align-items: center;
   background: var(--p-color-bg-surface);
   padding: var(--p-space-200) var(--p-space-400);
-  box-shadow: var(--p-shadow-md);
+  box-shadow: var(--p-shadow-300);
 
   .LoadingPanelRow {
     display: flex;
@@ -946,7 +946,7 @@ $loading-panel-height: 53px;
 
 .StickyTableHeader-isSticky {
   visibility: visible;
-  box-shadow: var(--p-shadow-xs);
+  box-shadow: var(--p-shadow-100);
   background-color: var(--p-color-bg-subdued);
 }
 

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -2,12 +2,12 @@
 
 .LegacyCard {
   background-color: var(--p-color-bg-surface);
-  box-shadow: var(--p-shadow-md);
+  box-shadow: var(--p-shadow-300);
   outline: var(--p-border-width-025) solid transparent;
   overflow: clip;
 
   @include shadow-bevel(
-    $boxShadow: var(--p-shadow-xs),
+    $boxShadow: var(--p-shadow-100),
     $borderRadius: var(--p-border-radius-0),
     $zIndex: 101
   );
@@ -30,7 +30,7 @@
     border-radius: var(--p-border-radius-200);
 
     @include shadow-bevel(
-      $boxShadow: var(--p-shadow-xs),
+      $boxShadow: var(--p-shadow-100),
       $borderRadius: var(--p-border-radius-300),
       $zIndex: 101
     );

diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -41,7 +41,7 @@ $large-width: 980px;
   width: 100%;
   max-height: calc(100vh - #{$vertical-spacing});
   background: var(--p-color-bg-surface);
-  box-shadow: var(--p-shadow-2xl);
+  box-shadow: var(--p-shadow-600);
   overflow: hidden;
 
   @media (forced-colors: active) {

diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
@@ -77,7 +77,7 @@ $nav-max-width: 360px;
     height: $top-bar-height;
     padding: 0 var(--p-space-200) 0 var(--p-space-400);
     background-color: var(--p-color-bg-inverse);
-    box-shadow: var(--p-shadow-sm);
+    box-shadow: var(--p-shadow-200);
     margin-bottom: var(--p-space-400);
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -34,7 +34,7 @@ $action-menu-rollup-computed-width: 40px;
     &:focus {
       background-color: var(--p-color-bg-strong-active);
       /* stylelint-disable-next-line declaration-no-important -- override box shadow */
-      box-shadow: var(--p-shadow-inset-md) !important;
+      box-shadow: var(--p-shadow-inset-200) !important;
     }
   }
 }

diff --git a/polaris-react/src/components/Pagination/Pagination.scss b/polaris-react/src/components/Pagination/Pagination.scss
@@ -14,7 +14,7 @@
 
     &:active {
       /* stylelint-disable-next-line declaration-no-important -- override box shadow */
-      box-shadow: var(--p-shadow-inset-md) !important;
+      box-shadow: var(--p-shadow-inset-200) !important;
     }
 
     &:active,

diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
@@ -11,7 +11,7 @@ $vertical-motion-offset: -5px;
   margin: $visible-portion-of-arrow var(--p-space-200) var(--p-space-400);
   will-change: left, top;
   @include shadow-bevel(
-    $boxShadow: var(--p-shadow-md),
+    $boxShadow: var(--p-shadow-300),
     $borderRadius: var(--p-border-radius-300),
     $zIndex: 2
   );