Add comments for stylelint disable

Author: laurkim

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

@@ -70,7 +70,7 @@ $bulk-actions-button-stacking-order: (
 
   // We need the first item of button group on small screen to fill the space
   @media #{$p-breakpoints-sm-down} {
-    // stylelint-disable-next-line, selector-max-combinators, selector-max-type
+    // stylelint-disable-next-line selector-max-combinators, selector-max-type -- update button spacing on small screens
     > div > div:first-child {
       flex: 1 1 auto;
     }

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

@@ -29,7 +29,7 @@
     background-color: var(--p-surface-hovered);
 
     .Actions {
-      /* stylelint-disable-next-line selector-max-combinators */
+      // stylelint-disable-next-line selector-max-combinators -- show actions on hover
       > * {
         @include action-unhide;
       }
@@ -103,7 +103,7 @@
   }
 
   .focused & {
-    // stylelint-disable-next-line selector-max-combinators
+    // stylelint-disable-next-line selector-max-combinators  -- show actions on focus
     > * {
       @include action-unhide;
     }
@@ -123,6 +123,7 @@
 }
 
 .ListItem {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: -1px);
 
   .ListItem + & {

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

@@ -4,8 +4,10 @@ $primary-action-button-height: 36px;
 $primary-action-button-width: 100px;
 
 :root {
+  // stylelint-disable -- use custom properties to set max width based on props
   --pc-skeleton-page-max-width: 998px;
   --pc-skeleton-page-max-width-narrow: 662px;
+  // stylelint-enable
 }
 
 .Title {