adds hasZebraStriping optional prop to IndexTable

adds ZebraStriping to IndexTable in storybook

changeset

Author: Kate Wood

.changeset/chatty-pets-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added option zebra striping to `IndexTable` ([#8595](https://github.com/Shopify/polaris/pull/8595))

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

@@ -209,6 +209,16 @@ $loading-panel-height: 53px;
   color: var(--p-text-subdued);
 }
 
+.ZebraStriping {
+  tbody .TableRow:nth-child(2n + 1) .TableCell {
+    background: none;
+  }
+
+  tbody .TableRow:nth-child(2n) .TableCell {
+    background: var(--p-surface-subdued);
+  }
+}
+
 .TableHeading {
   background: var(--p-surface-subdued);
   z-index: var(--p-z-index-1);

polaris-react/src/components/IndexTable/IndexTable.stories.tsx

@@ -2367,3 +2367,105 @@ export function SmallScreenWithAllOfItsElements() {
     }
   }
 }
+
+export function ZebraStriping() {
+  const customers = [
+    {
+      id: '3411',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$2,400',
+    },
+    {
+      id: '2561',
+      url: '#',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$140',
+    },
+    {
+      id: '3411',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$2,400',
+    },
+    {
+      id: '2561',
+      url: '#',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$140',
+    },
+  ];
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(customers);
+
+  const rowMarkup = customers.map(
+    ({id, name, location, orders, amountSpent}, index) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(id)}
+        position={index}
+      >
+        <IndexTable.Cell>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {name}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{location}</IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text variant="bodyMd" as="span" alignment="end" numeric>
+            {orders}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text variant="bodyMd" as="span" alignment="end" numeric>
+            {amountSpent}
+          </Text>
+        </IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={customers.length}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        headings={[
+          {title: 'Name'},
+          {title: 'Location'},
+          {
+            alignment: 'end',
+            id: 'order-count',
+            title: 'Order count',
+          },
+          {
+            alignment: 'end',
+            id: 'amount-spent',
+            title: 'Amount spent',
+          },
+        ]}
+        hasZebraStriping
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}

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

@@ -110,6 +110,8 @@ export interface IndexTableBaseProps {
   /** Optional dictionary of sort toggle labels for each sortable column, with ascending and descending label,
    * with the key as the index of the column */
   sortToggleLabels?: IndexTableSortToggleLabels;
+  /** Add zebra striping to table rows */
+  hasZebraStriping?: boolean;
 }
 
 export interface TableHeadingRect {
@@ -135,6 +137,7 @@ function IndexTableBase({
   sortColumnIndex,
   onSort,
   sortToggleLabels,
+  hasZebraStriping,
   ...restProps
 }: IndexTableBaseProps) {
   const {
@@ -702,6 +705,7 @@ function IndexTableBase({
       lastColumnSticky &&
       canScrollRight &&
       styles['Table-sticky-scrolling'],
+    hasZebraStriping && styles.ZebraStriping,
   );
 
   const emptyStateMarkup = emptyState ? (