Add comments for stylelint disable

Author: laurkim

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

@@ -69,7 +69,7 @@ $bulk-actions-button-stacking-order: (
   max-width: 100%;
 
   @media #{$p-breakpoints-sm-down} {
-    // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space
+    // 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

@@ -28,7 +28,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;
       }
@@ -102,7 +102,7 @@
   }
 
   .focused & {
-    // stylelint-disable-next-line selector-max-combinators
+    // stylelint-disable-next-line selector-max-combinators  -- show actions on focus
     > * {
       @include action-unhide;
     }
@@ -122,6 +122,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 {