[IndexTable] Add support for subheaders and range selection

.changeset/lovely-rings-enjoy.md

@@ -0,0 +1,17 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+IndexTable subheader support updates:
+- `IndexTable.Row`
+  - Added the `header` prop to apply subheader styles
+  - Added `indeterminate` value to `selected` prop
+  - Added `selectionRange` prop to specify which rows in the range are selected when the row is selected
+  - Added `rowType` prop to indicate the relationship or role of the row's contents (`data` or `subheader`)
+- `IndexTable.Cell`
+  - Added the `header` prop to apply subheader styles
+  - Added `as` prop to set as a `th` if it is serving as a subheading
+  - Added `colSpan` prop to specify the number of the columns that the cell element should extend
+  - Added `scope` prop to indicate which cells the `th` element relates
+- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure.

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

@@ -118,11 +118,14 @@ $loading-panel-height: 53px;
   }
 
   // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
-  #{$se23} & .TableRow-subdued {
-    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides
-    .TableCell-first,
-    .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-subdued);
+  #{$se23} & {
+    // stylelint-disable-next-line selector-max-combinators -- se23 overrides
+    .TableRow-subdued {
+      // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides
+      .TableCell-first,
+      .TableCell-first + .TableCell {
+        background-color: var(--p-color-bg-subdued);
+      }
     }
   }
 
@@ -220,19 +223,65 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-subdued);
+
       #{$se23} & {
         color: var(--p-color-text-subdued);
       }
     }
   }
 
-  &.TableRow-hovered {
+  &.TableRow-subheader {
+    cursor: default;
+    // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    &,
+    .TableCell:first-child,
+    .TableCell-first,
+    .TableCell-first + .TableCell,
+    .TableCell:last-child {
+      color: var(--p-color-text-subdued);
+      font-weight: var(--p-font-weight-medium);
+      font-size: var(--p-font-size-75);
+      background-color: var(--p-color-bg-subdued);
+      border-top: var(--p-border-width-1) solid var(--p-color-border);
+      border-bottom: var(--p-border-width-1) solid var(--p-color-border);
+    }
+
+    #{$se23} & {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY */
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+        border-color: var(--p-color-border);
+      }
+    }
+  }
+
+  &.TableRow-hovered:not(.TableRow-disabled) {
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-hover);
     }
+
+    // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    &.TableRow-subheader {
+      // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+
+        #{$se23} & {
+          background-color: var(--p-color-bg-subdued);
+        }
+      }
+    }
   }
 
   &.TableRow-selected {
@@ -248,11 +297,27 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-primary-subdued-selected);
       }
     }
+
+    /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
+    &.TableRow-subheader {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+
+        #{$se23} & {
+          background-color: var(--p-color-bg-subdued);
+        }
+      }
+    }
   }
 
   // stylelint-disable-next-line no-duplicate-selectors -- se23 temporary styles
   #{$se23} & {
-    &.TableRow-hovered {
+    &.TableRow-hovered:not(.TableRow-disabled) {
       // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 temporary styles
       &,
       .TableCell-first,
@@ -299,7 +364,7 @@ $loading-panel-height: 53px;
     }
   }
 
-  // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
+  /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
   &.TableRow-hovered.TableRow-selected {
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &,
@@ -313,6 +378,18 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-primary-subdued-hover);
       }
     }
+
+    /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
+    &.TableRow-subheader {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+      }
+    }
   }
 }
 
@@ -757,7 +834,17 @@ $loading-panel-height: 53px;
       }
     }
   }
+
   #{$se23} & {
+    /* stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY */
+    .TableCell,
+    .TableHeading {
+      /* stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY */
+      &:first-child {
+        padding-left: var(--p-space-3);
+      }
+    }
+
     // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
     // stylelint-disable-next-line selector-max-combinators -- se23 override
     .TableRow-subdued:not(.TableRow-hovered) {
@@ -838,6 +925,7 @@ $loading-panel-height: 53px;
   .statusSubdued {
     .TableCell:last-child {
       background-color: var(--p-color-bg-subdued);
+
       #{$se23} & {
         color: var(--p-color-text-subdued);
       }
@@ -860,11 +948,11 @@ $loading-panel-height: 53px;
     }
   }
 
-  #{$se23} & .TableRow-selected.TableRow-subdued {
-    color: var(--p-color-text-subdued);
-  }
-
   #{$se23} & {
+    .TableRow-selected.TableRow-subdued {
+      color: var(--p-color-text-subdued);
+    }
+
     .TableRow-hovered {
       // stylelint-disable-next-line selector-max-compound-selectors -- se23 temporary styles
       .TableCell:last-child {