Change density and apply stripes to Data Table

Author: blboyle

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

@@ -67,10 +67,14 @@ $breakpoint: 768px;
 }
 
 .Cell {
-  padding: var(--p-space-4);
+  padding: var(--p-space-2) var(--p-space-4);
   white-space: nowrap;
   text-align: left;
   transition: background-color var(--p-duration-200) var(--p-ease-in-out);
+
+  .Stripe & {
+    background: var(--p-surface-subdued);
+  }
 }
 
 .Cell-firstColumn {
@@ -94,10 +98,13 @@ $breakpoint: 768px;
   @include text-emphasis-normal;
   border-bottom: var(--p-border-divider);
   border-top: 0;
+  font-weight: var(--p-font-weight-medium);
+  font-size: var(--p-font-size-1);
 }
 
 .Cell-sortable {
-  padding: 0;
+  padding: var(--p-space-2) var(--p-space-4);
+  margin: var(--p-space-2);
 }
 
 .Cell-verticalAlignTop {
@@ -132,11 +139,11 @@ $breakpoint: 768px;
   justify-content: flex-end;
   align-items: baseline;
   @include recolor-icon(var(--p-icon));
+  font-weight: var(--p-font-weight-medium);
+  font-size: var(--p-font-size-1);
   color: var(--p-text);
   transition: color var(--p-duration-200) var(--p-ease);
   cursor: pointer;
-  padding: var(--p-space-2);
-  margin: var(--p-space-2);
 
   &:hover {
     @include recolor-icon(var(--p-interactive-hovered));
@@ -165,7 +172,6 @@ $breakpoint: 768px;
 
 .Cell-total {
   @include text-emphasis-strong;
-  background: var(--p-surface-subdued);
   border-bottom: var(--p-border-divider);
 }
 
@@ -178,10 +184,13 @@ $breakpoint: 768px;
 
 .Footer {
   padding: var(--p-space-4);
-  background: var(--p-surface-subdued);
   color: var(--p-text-subdued);
   text-align: center;
   border-top: var(--p-border-divider);
   border-bottom-left-radius: var(--p-border-radius-1);
   border-bottom-right-radius: var(--p-border-radius-1);
+
+  &.Stripe {
+    background: var(--p-surface-subdued);
+  }
 }

polaris-react/src/components/DataTable/DataTable.tsx

@@ -14,6 +14,11 @@ import styles from './DataTable.scss';
 
 export type {SortDirection};
 
+export enum RowType {
+  Totals = 'TOTALS',
+  Footer = 'FOOTER',
+}
+
 export type TableRow =
   | DataTableProps['headings']
   | DataTableProps['rows']
@@ -146,23 +151,32 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
     const className = classNames(
       styles.DataTable,
       condensed && styles.condensed,
+      !showTotalsInFooter && styles.ShowTotalsInFooter,
     );
 
     const wrapperClassName = classNames(
       styles.TableWrapper,
       condensed && styles.condensed,
     );
 
-    const headingMarkup = <tr>{headings.map(this.renderHeadings)}</tr>;
+    const headingMarkup = (
+      <tr className={styles.Stripe}>{headings.map(this.renderHeadings)}</tr>
+    );
 
     const totalsMarkup = totals ? (
-      <tr>{totals.map(this.renderTotals)}</tr>
+      <tr className={this.addStripe(RowType.Totals)}>
+        {totals.map(this.renderTotals)}
+      </tr>
     ) : null;
 
     const bodyMarkup = rows.map(this.defaultRenderRow);
 
     const footerMarkup = footerContent ? (
-      <div className={styles.Footer}>{footerContent}</div>
+      <div
+        className={classNames(styles.Footer, this.addStripe(RowType.Footer))}
+      >
+        {footerContent}
+      </div>
     ) : null;
 
     const headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
@@ -404,6 +418,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
     const className = classNames(
       styles.TableRow,
       hoverable && styles.hoverable,
+      this.addStripe(index),
     );
 
     return (
@@ -468,6 +483,30 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
 
     return handleSort;
   };
+
+  private addStripe(row: number | RowType = 0) {
+    const {showTotalsInFooter, totals, rows} = this.props;
+
+    if (row === RowType.Totals) {
+      return showTotalsInFooter && rows.length % 2 !== 0 ? styles.Stripe : '';
+    }
+
+    if (row === RowType.Footer) {
+      return totals && !showTotalsInFooter && rows.length % 2 === 0
+        ? styles.Stripe
+        : '';
+    }
+
+    if (typeof row === 'number') {
+      if (totals && !showTotalsInFooter) {
+        return row % 2 === 0 ? styles.Stripe : '';
+      }
+
+      return row % 2 !== 0 ? styles.Stripe : '';
+    }
+
+    return '';
+  }
 }
 
 export function DataTable(props: DataTableProps) {