[terra-table] Zebra stripe table (#1839)

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added test to cover enabling zebra striping for the `terra-table` component.
+
 ## 1.41.0 - (October 17, 2023)
 
 * Added

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/ZebraStripedTable.1.doc.mdx

@@ -0,0 +1,3 @@
+import ZebraStripedTable from './ZebraStripedTable?dev-site-example';
+
+<ZebraStripedTable title='Zebra Striped Table Example' />

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/ZebraStripedTable.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import Table from 'terra-table';
+
+const tableDataJSON = {
+  cols: [
+    { id: 'Column-0', displayName: 'Patient' },
+    { id: 'Column-1', displayName: 'Location' },
+    { id: 'Column-2', displayName: 'Illness Severity' },
+    { id: 'Column-3', displayName: 'Visit' },
+    { id: 'Column-4', displayName: 'Allergy' },
+    { id: 'Column-5', displayName: 'Primary Contact' },
+    { id: 'Column-6', displayName: 'Generic Order Counts' },
+    { id: 'Column-7', displayName: 'Patient Age' },
+    { id: 'Column-8', displayName: 'Medication History' },
+    { id: 'Column-9', displayName: 'My Relationship' },
+    { id: 'Column-10', displayName: 'Not Selectable', isSelectable: false },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+        { isMasked: true },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1007-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+    {
+      id: '3',
+      cells: [
+        { content: 'McDonald, Ronald' },
+        { content: '1007-MTN-RN' },
+        { content: 'Critical' },
+        { content: 'Inpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Smith, Melissa' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Family Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+    {
+      id: '4',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1018-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Aspirin' },
+        { content: 'Jones, Gary' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Primary Care Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+  ],
+};
+
+const ZebraStripedTable = () => {
+  const { cols, rows } = tableDataJSON;
+
+  return (
+    <Table
+      id="zebra-striped-table"
+      overflowColumns={cols}
+      rows={rows}
+      isStriped
+    />
+  );
+};
+
+export default ZebraStripedTable;

packages/terra-framework-docs/src/terra-dev-site/test/table/ZebraStripedTable.test.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import Table from 'terra-table';
+
+const gridDataJSON = {
+  cols: [
+    { id: 'Column-0', displayName: 'Patient' },
+    { id: 'Column-1', displayName: 'Location' },
+    { id: 'Column-2', displayName: 'Illness Severity' },
+    { id: 'Column-3', displayName: 'Visit' },
+    { id: 'Column-4', displayName: 'Allergy' },
+    { id: 'Column-5', displayName: 'Primary Contact' },
+    { id: 'Column-6', displayName: 'Generic Order Counts' },
+    { id: 'Column-7', displayName: 'Patient Age' },
+    { id: 'Column-8', displayName: 'Medication History' },
+    { id: 'Column-9', displayName: 'My Relationship' },
+    { id: 'Column-10', displayName: 'Not Selectable', isSelectable: false },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+        { isMasked: true },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1007-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+    {
+      id: '3',
+      cells: [
+        { content: 'McDonald, Ronald' },
+        { content: '1007-MTN-RN' },
+        { content: 'Critical' },
+        { content: 'Inpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Smith, Melissa' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Family Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+    {
+      id: '4',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1018-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Aspirin' },
+        { content: 'Jones, Gary' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Primary Care Physician' },
+        { content: '', isSelectable: false },
+      ],
+    },
+  ],
+};
+
+const ZebraStripedTable = () => {
+  const { cols, rows } = gridDataJSON;
+
+  return (
+    <Table
+      id="zebra-striped-table"
+      overflowColumns={cols}
+      rows={rows}
+      isStriped
+    />
+  );
+};
+
+export default ZebraStripedTable;

packages/terra-table/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added the ability to toggle zebra striping for table rows.
+
 * Changed
   * Updated the table component so that the cell dive-in logic would not execute when not in the grid context.
 

packages/terra-table/src/Table.jsx

@@ -101,6 +101,11 @@ const propTypes = {
    * rendered to allow for row selection to occur.
    */
   hasSelectableRows: PropTypes.bool,
+
+  /**
+   * Boolean specifying whether or not the table should have zebra striping for rows.
+   */
+  isStriped: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -131,6 +136,7 @@ function Table(props) {
     onColumnSelect,
     onCellSelect,
     hasSelectableRows,
+    isStriped,
     rowHeaderIndex,
   } = props;
 
@@ -312,6 +318,7 @@ function Table(props) {
                 rowHeaderIndex={rowHeaderIndex}
                 onCellSelect={isGridContext ? handleCellSelection : undefined}
                 isSelected={row.isSelected}
+                isTableStriped={isStriped}
               />
             ))}
           </tbody>

packages/terra-table/src/clinical-lowlight-theme/Row.module.scss

@@ -1,7 +1,7 @@
 :local {
   .clinical-lowlight-theme {
-    --terra-table-row-striped-even-background-color: #2d3539;
-    --terra-table-row-striped-odd-background-color: #6e6f71;
+    --terra-table-row-striped-background-color: #2d3539;
+    --terra-table-row-background-color: #6e6f71;
     --terra-table-row-selected-background-color: #1e3a49;
     --terra-table-row-selected-box-shadow: inset 0 1px 0 0 #004c76, inset 0 -1px 0 0 #004c76;
     --terra-table-row-hover-background-color: #232a2d;

packages/terra-table/src/orion-fusion-theme/Row.module.scss

@@ -1,8 +1,8 @@
 :local {
   .orion-fusion-theme {
-    --terra-table-row-striped-even-background-color: #f4f4f4;
+    --terra-table-row-striped-background-color: #f4f4f4;
     --terra-table-row-selected-background-color: #cbe7fa;
     --terra-table-row-selected-box-shadow: inset 0 1px 0 0 #0092e0, inset 0 -1px 0 0 #0092e0;
-    --terra-table-row-striped-odd-background-color: #fefffe;
+    --terra-table-row-background-color: #fefffe;
   }
 }

packages/terra-table/src/subcomponents/Row.jsx

@@ -38,6 +38,11 @@ const propTypes = {
    */
   isSelected: PropTypes.bool,
 
+  /**
+   * Boolean specifying whether zebra striping is enabled.
+   */
+  isTableStriped: PropTypes.bool,
+
   /**
    * A string identifier used to describe the row contents. This value will be used to construct additional labels
    * for internal controls (e.g. row selection cells).
@@ -81,6 +86,7 @@ function Row(props) {
     hasRowSelection,
     id,
     isSelected,
+    isTableStriped,
     cells,
     ariaLabel,
     displayedColumns,
@@ -99,6 +105,7 @@ function Row(props) {
       className={cx('row', {
         selected: isSelected,
         selectable: hasRowSelection,
+        'striped-table-row': isTableStriped,
       }, theme.className)} // eslint-disable-next-line react/forbid-dom-props
       style={{ height }}
       onMouseEnter={hasRowSelection ? () => { setHovered(true); } : undefined}

packages/terra-table/src/subcomponents/Row.module.scss

@@ -4,17 +4,15 @@
 
 :local {
   .row {
+    background-color: var(--terra-table-row-background-color, #fff);
+
     &.selectable:hover {
       background-color: var(--terra-table-row-hover-background-color, #e2f2fc);
       cursor: pointer;
     }
 
-    &:nth-child(even) {
-      background-color: var(--terra-table-row-striped-even-background-color, #f0f0f0);
-    }
-
-    &:nth-child(odd) {
-      background-color: var(--terra-table-row-striped-odd-background-color, #fff);
+    &.striped-table-row:nth-child(even) {
+      background-color: var(--terra-table-row-striped-background-color, #f0f0f0);
     }
 
     &.selected {

packages/terra-table/tests/jest/Table.test.jsx

@@ -123,6 +123,23 @@ describe('Table', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('verifies the rows receive the correct props when table is zebra striped', () => {
+    const wrapper = shallowWithIntl(
+      <IntlProvider locale="en">
+        <Table
+          id="test-terra-table"
+          overflowColumns={tableData.cols}
+          rows={tableData.rows}
+          isStriped
+        />
+      </IntlProvider>,
+    ).dive().dive();
+
+    const testRow = wrapper.find(Row).get(0);
+    expect(testRow.props.isTableStriped).toBe(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('verifies row selection column header selection', () => {
     const mockColumnSelect = jest.fn();