Stylelint Polaris v5 (#7691)

Co-authored-by: Chloe Rice <chloe.rice@shopify.com> Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>
Shopify · Dec 2, 2022 · 38b2a00 · 38b2a00
1 parent 7773637
commit 38b2a00
Show file tree

Hide file tree

Showing 155 changed files with 3,450 additions and 880 deletions.
diff --git a/.changeset/purple-knives-enjoy.md b/.changeset/purple-knives-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@shopify/stylelint-polaris': major
+---
+
+Stylelint Polaris v5 release
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,27 +1,20 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
   extends: ['@shopify/stylelint-plugin/prettier', './stylelint-polaris'],
-  // Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as styelint
+  // Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as stylelint
   // is not aware of global Polaris keyframes
   // TODO: create custom plugin to ensure animation-names match Polaris keyframe names
   rules: {
-    'no-unknown-animations': undefined,
+    'no-unknown-animations': null,
     'value-keyword-case': ['lower', {camelCaseSvgKeywords: true}],
   },
   overrides: [
-    {
-      files: ['polaris-react/**/*.{css,scss}'],
-      extends: [
-        '@shopify/stylelint-plugin/prettier',
-        './stylelint-polaris/configs/internal',
-      ],
-    },
     {
       files: ['polaris-migrator/**/tests/*.{css,scss}'],
       rules: {
-        'comment-empty-line-before': undefined,
-        'declaration-property-value-disallowed-list': undefined,
-        'function-disallowed-list': undefined,
+        'comment-empty-line-before': null,
+        'declaration-property-value-disallowed-list': null,
+        'function-disallowed-list': null,
       },
     },
   ],

diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "rollup": "^2.70.2",
     "rollup-plugin-node-externals": "^4.0.0",
     "size-limit": "^5.0.3",
-    "stylelint": "^14.1.0",
+    "stylelint": "^14.15.0",
     "ts-node": "^10.7.0",
     "turbo": "^1.2.8",
     "typescript": "^4.6.3"

diff --git a/polaris-react/playground/DetailsPage.scss b/polaris-react/playground/DetailsPage.scss
@@ -1,9 +1,12 @@
 @import '../src/styles/common';
 
 .ContextControl {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   align-items: center;
   padding: 0 var(--p-space-3);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: $top-bar-height;
 }
 

diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.scss b/polaris-react/src/components/AccountConnection/AccountConnection.scss
@@ -3,7 +3,7 @@
 }
 
 .Content {
-  // stylelint-disable-next-line selector-max-combinators
+  // stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY
   > * + * {
     margin-top: var(--p-space-2);
   }

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
@@ -10,7 +10,7 @@
 .Section:not(:first-child) {
   border-top: var(--p-border-divider);
 
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   > .Section-withoutTitle .Actions {
     padding-top: var(--p-space-2);
   }
@@ -25,38 +25,49 @@
 
 .ActionList,
 .Section:first-child {
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   > .Section-withoutTitle .Actions {
     border-top: none;
     padding-top: var(--p-space-2);
   }
 }
 
 .ActionList .Section {
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
   .Actions {
     padding-top: 0;
   }
 }
 
 .Item {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-action-list-image-size: 20px;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-action-list-item-min-height: var(--p-space-10);
+  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
   --pc-action-list-item-vertical-padding: calc(
     (var(--pc-action-list-item-min-height) - var(--p-font-line-height-2)) / 2
   );
+  // stylelint-enable
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include unstyled-button;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: block;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 100%;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-height: var(--pc-action-list-item-min-height);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
   border-radius: var(--p-border-radius-1);
   border-top: var(--p-border-width-1) solid transparent;
   color: inherit;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @media (forced-colors: active) {
     border: var(--p-border-width-1) solid transparent;
   }
@@ -68,11 +79,13 @@
   }
 
   &:active {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include recolor-icon(var(--p-interactive));
     background-color: var(--p-surface-pressed);
   }
 
   &:focus:not(:active) {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
     outline: var(--p-border-width-3) solid transparent;
   }
@@ -82,23 +95,26 @@
   }
 
   &.active {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include recolor-icon(var(--p-interactive));
     background-color: var(--p-surface-selected);
 
     &::before {
+      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include list-selected-indicator;
     }
   }
 
   &.destructive {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include recolor-icon(var(--p-icon-critical));
     color: var(--p-interactive-critical);
 
     &:hover {
       background-color: var(--p-surface-critical-subdued-hovered);
     }
 
-    // stylelint-disable-next-line selector-max-class
+    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &:active,
     &.active {
       background-color: var(--p-surface-critical-subdued-pressed);
@@ -109,48 +125,65 @@
     background-image: none;
     color: var(--p-text-disabled);
 
-    // stylelint-disable-next-line selector-max-class
+    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     .Prefix,
     .Suffix {
+      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include recolor-icon(var(--p-icon-disabled));
     }
   }
 }
 
 .Content {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   align-items: center;
 }
 
 .Prefix {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-icon));
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   flex: 0 0 auto;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   justify-content: center;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   align-items: center;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: var(--pc-action-list-image-size);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-action-list-image-size);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   border-radius: var(--p-border-radius-base);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.
+  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
   margin: calc(-0.5 * var(--pc-action-list-image-size)) var(--p-space-4)
     calc(-0.5 * var(--pc-action-list-image-size)) 0;
+  // stylelint-enable
   background-size: cover;
   background-position: center center;
 }
 
 .Suffix {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-icon));
   margin-left: var(--p-space-4);
 }
 
 .ContentBlock,
 .ContentBlockInner {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: block;
 }
 
 .Text {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include layout-flex-fix;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   flex: 1 1 auto;
 }
diff --git a/polaris-react/src/components/ActionMenu/ActionMenu.scss b/polaris-react/src/components/ActionMenu/ActionMenu.scss
@@ -1,11 +1,15 @@
 .ActionMenu {
   // Needed for JS calculations
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 100%;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   justify-content: flex-end;
 
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @media print {
-    // stylelint-disable-next-line declaration-no-important
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     display: none !important;
   }
 }
diff --git a/polaris-react/src/components/ActionMenu/components/Actions/Actions.scss b/polaris-react/src/components/ActionMenu/components/Actions/Actions.scss
@@ -1,13 +1,18 @@
 @import '../../../../styles/common';
 
 .ActionsLayout {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
   flex-wrap: wrap;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   align-items: center;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   justify-content: flex-end;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   flex: 1 1 auto;
 
   > * {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     flex: 0 0 auto;
   }
 }
diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -1,11 +1,11 @@
 .RollupActivator {
   text-align: right;
   // Override `.iconOnly` negative margins
-  // stylelint-disable-next-line selector-no-qualifying-type
+  // stylelint-disable-next-line selector-no-qualifying-type -- generated by polaris-migrator DO NOT COPY
   button[type='button'] {
     margin: 0;
     border: var(--p-border-width-1) solid var(--p-border-neutral-subdued);
-    // stylelint-disable-next-line selector-max-specificity
+    // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &:hover,
     &:active,
     &:focus {

diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -1,15 +1,19 @@
 @import '../../../../styles/common';
 
 .SecondaryAction {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-secondary-action-button-spacing: var(--p-space-3);
-  // stylelint-disable declaration-no-important
+  // stylelint-disable declaration-no-important -- generated by polaris-migrator DO NOT COPY
   a,
   button {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 1px);
     background: transparent !important;
     box-shadow: none !important;
     border-radius: var(--p-border-radius-1) !important;
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding-left: var(--pc-secondary-action-button-spacing);
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding-right: var(--pc-secondary-action-button-spacing);
 
     &:hover {
@@ -20,24 +24,27 @@
       background: var(--p-background-pressed) !important;
     }
 
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @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);
     }
   }
 
   &.destructive {
     a,
     button {
+      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include recolor-icon(var(--p-icon-critical));
       color: var(--p-interactive-critical);
 
-      // stylelint-disable-next-line selector-max-specificity
+      // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &:hover {
         background-color: var(--p-surface-critical-subdued-hovered) !important;
       }
 
-      // stylelint-disable-next-line selector-max-specificity
+      // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &:active {
         background-color: var(--p-surface-critical-subdued-pressed) !important;
       }

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss
@@ -1,29 +1,45 @@
 @import '../../styles/common';
 
 .AlphaStack {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-stack-gap-xs: var(--p-space-4);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-stack-gap-sm: var(--pc-stack-gap-xs);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-stack-gap-md: var(--pc-stack-gap-sm);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-stack-gap-lg: var(--pc-stack-gap-md);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   --pc-stack-gap-xl: var(--pc-stack-gap-lg);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
   flex-direction: column;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   align-items: var(--pc-stack-align);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   gap: var(--pc-stack-gap-xs);
 
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @media #{$p-breakpoints-sm-up} {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     gap: var(--pc-stack-gap-sm);
   }
 
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @media #{$p-breakpoints-md-up} {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     gap: var(--pc-stack-gap-md);
   }
 
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @media #{$p-breakpoints-lg-up} {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     gap: var(--pc-stack-gap-lg);
   }
 
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @media #{$p-breakpoints-xl-up} {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     gap: var(--pc-stack-gap-xl);
   }
 
@@ -41,6 +57,7 @@
 
 .fullWidth {
   > * {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     width: 100%;
   }
 }