Enable custom-property-disallowed-list in stylelint-polaris

.changeset/khaki-walls-wash.md

@@ -0,0 +1,7 @@
+---
+'@shopify/stylelint-polaris': major
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Enabled the `custom-property-disallowed-list` rule and added deprecated v10 custom properties.

polaris-react/src/components/AlphaFilters/AlphaFilters.scss

@@ -163,7 +163,7 @@
 
   .AddFilterActivatorMultiple {
     position: sticky;
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
     top: 0;
     right: 0;
     display: flex;
@@ -227,7 +227,7 @@
   .MultiplePinnedFilterClearAll {
     transform: translateX(-8px);
     position: relative;
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
     margin-left: 0;
     padding-right: var(--p-space-4);
   }

polaris-react/src/components/AlphaTabs/AlphaTabs.scss

@@ -101,7 +101,7 @@
   &:not([aria-disabled='true']):active {
     background-color: var(--p-color-bg-active);
     color: var(--p-color-text);
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
   }
 
   path {
@@ -257,7 +257,7 @@
 
   &:not([aria-disabled='true']):active {
     background-color: var(--p-color-bg-active);
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
   }
 
   &[aria-disabled='true'] {

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-top-bar);
+    box-shadow: var(--p-shadow-sm);
   }
 
   .IndexFilters.IndexFiltersStickyFlush {

polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx

@@ -121,23 +121,6 @@ describe('<Menu />', () => {
     expect(menu).toContainReactComponent(Message);
   });
 
-  describe('isFullHeight', () => {
-    it('passes isFullHeight to popover as false if menu is not provided a message', () => {
-      const {message, ...rest} = defaultProps;
-      const menu = mountWithApp(<Menu {...rest} open />);
-
-      expect(menu).toContainReactComponent(Popover, {fullHeight: false});
-    });
-
-    it('passes isFullHeight to popover as true if menu is provided a message', () => {
-      const menu = mountWithApp(<Menu {...defaultProps} open />);
-
-      expect(menu).toContainReactComponent(Popover, {
-        fullHeight: true,
-      });
-    });
-  });
-
   describe('accessibilityLabel', () => {
     it('passes accessibilityLabel to the popover activator', () => {
       const menu = mountWithApp(

polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: colors/custom-property-disallowed-list
+description: Disallows use of legacy color custom properties.
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+```diff
+// Do
++ color: var(--p-color-text-caution);
+// Don't
+- color: var(--p-text-warning);
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md

@@ -1,23 +1,12 @@
 ---
 title: colors/global-disallowed-list
-description: Disallows use of legacy color custom properties and mixin map data.
+description: Disallows use of legacy color Sass APIs.
 keywords:
   - stylelint
   - colors
   - colors rules
 ---
 
-Disallows use of legacy custom properties.
-
-```diff
-// Do
-+ border: transparent;
-// Don't
-- border: var(--p-override-transparent);
-```
-
-Disallows use of legacy mixin map data.
-
 ```diff
 // Don't
 - @type map $filter-palette-data: $polaris-color-filters;

polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: depth/custom-property-disallowed-list
+description: Disallows use of legacy shadow custom properties.
+keywords:
+  - stylelint
+  - depth
+  - depth rules
+---
+
+```diff
+// Do
++ box-shadow: var(--p-shadow-md);
+// Don't
+- box-shadow: var(--p-shadow-deep)
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md

@@ -1,15 +1,13 @@
 ---
 title: depth/global-disallowed-list
-description: Disallows use of legacy shadow custom properties and Sass mixin data.
+description: Disallows use of legacy depth Sass APIs.
 keywords:
   - stylelint
   - depth
   - depth rules
 ---
 
 ```diff
-// Do
-+ box-shadow: var(--p-shadow-card);
 // Don't
-- box-shadow: var(--p-card-shadow);
+- @type map $depth-data: $shadows-data;
 ```

polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: layout/custom-property-disallowed-list
+description: Disallows use of legacy layout custom properties.
+keywords:
+  - stylelint
+  - layout
+  - layout rules
+---
+
+```diff
+// Do
++ <Checkbox />
+// Don't
+- height: var(--p-choice-size);
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md

@@ -1,6 +1,6 @@
 ---
 title: layout/global-disallowed-list
-description: Disallows use of legacy custom properties and Sass mixin map data.
+description: Disallows use of legacy layout Sass APIs.
 keywords:
   - stylelint
   - layout
@@ -9,7 +9,7 @@ keywords:
 
 ```diff
 // Do
-+ <Checkbox />
++ width: 240px !default;
 // Don't
-- height: var(--p-choice-size);
+- width: $navigation-width;
 ```

polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md

@@ -1,6 +1,6 @@
 ---
 title: motion/global-disallowed-list
-description: Disallows use of legacy Polaris motion tokens.
+description: Disallows use of legacy motion Sass APIs.
 keywords:
   - stylelint
   - motion
@@ -9,7 +9,7 @@ keywords:
 
 ```diff
 // Do
-+ transition: var(--p-duration-100) var(--p-ease);
++ transition: var(--p-duration-500) var(--p-ease);
 // Don't
-- transition: var(--p-duration-1-0-0) var(--p-ease);
+- duration: $skeleton-shimmer-duration var(--p-ease);
 ```

polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: shape/custom-property-disallowed-list
+description: Disallows use of legacy shape custom properties.
+keywords:
+  - stylelint
+  - shape
+  - shape rules
+---
+
+```diff
+// Do
++ border-radius: var(--p-border-radius-2);
+// Don't
+- border-radius: var(--p-border-radius-large);
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: spacing/custom-property-disallowed-list
+description: Disallows use of legacy spacing custom properties.
+keywords:
+  - stylelint
+  - spacing
+  - spacing rules
+---
+
+```diff
+// Do
++ margin-bottom: var(--p-space-025);
+// Don't
+- margin-bottom: var(--p-choice-margin);
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md

@@ -1,15 +1,13 @@
 ---
 title: spacing/global-disallowed-list
-description: Disallows use of legacy spacing custom properties and Sass mixin data.
+description: Disallows use of legacy spacing Sass APIs.
 keywords:
   - stylelint
   - spacing
   - spacing rules
 ---
 
 ```diff
-// Do
-+ margin-bottom: var(--p-space-1);
 // Don't
-- margin-bottom: var(--p-text-field-spinner-offset);
+- @type map $spacing-data: $polaris-spacing;
 ```

polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md

@@ -1,6 +1,6 @@
 ---
 title: typography/global-disallowed-list
-description: Disallows use of legacy Polaris typography tokens and mixin map data.
+description: Disallows use of legacy typography Sass APIs.
 keywords:
   - stylelint
   - typography

polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-custom-property-disallowed-list.md

@@ -0,0 +1,15 @@
+---
+title: z-index/custom-property-disallowed-list
+description: Disallows use of legacy z-index custom properties.
+keywords:
+  - stylelint
+  - z-index
+  - z-index rules
+---
+
+```diff
+// Do
++ z-index: var(--p-z-index-1);
+// Don't
+- z-index: var(--p-z-1);
+```

polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md

@@ -1,15 +1,13 @@
 ---
 title: z-index/global-disallowed-list
-description: Disallows the use of legacy z-index custom properties and Sass mixin data.
+description: Disallows use of legacy z-index Sass APIs.
 keywords:
   - stylelint
   - z-index
   - z-index rules
 ---
 
 ```diff
-// Do
-+ z-index: var(--p-z-1);
 // Don't
-- z-index(toast, $fixed-element-stacking-order);
+- @type map $elevation-data: $global-elements;
 ```