Update DataTable Readme and focus states

Author: blboyle

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

@@ -125,7 +125,7 @@ $breakpoint: 768px;
   padding: 0;
 
   .IncreasedTableDensity & {
-    padding: var(--p-space-2) var(--p-space-4);
+    padding: var(--p-space-2);
   }
 }
 
@@ -171,6 +171,7 @@ $breakpoint: 768px;
     font-weight: var(--p-font-weight-medium);
     font-size: var(--p-font-size-1);
     padding: 0;
+    padding-left: var(--p-space-1);
     margin: 0;
   }
 
@@ -185,6 +186,14 @@ $breakpoint: 768px;
 
   &:focus:not(:active) {
     @include focus-ring($style: 'focused');
+    color: var(--p-interactive-hovered);
+
+    .Icon {
+      opacity: 1;
+      svg {
+        fill: var(--p-surface-subdued);
+      }
+    }
   }
 }
 

polaris-react/src/components/DataTable/README.md

@@ -437,6 +437,105 @@ function FullDataTableExample() {
 }
 ```
 
+### Data table with all of its elements, increased density, and zebra striping on data
+
+Use as a broad example that includes most props available to data table.
+
+```jsx
+function FullDataTableExample() {
+  const [sortedRows, setSortedRows] = useState(null);
+
+  const initiallySortedRows = [
+    [
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="emerald-silk-gown"
+      >
+        Emerald Silk Gown
+      </Link>,
+      '$875.00',
+      124689,
+      140,
+      '$121,500.00',
+    ],
+    [
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="mauve-cashmere-scarf"
+      >
+        Mauve Cashmere Scarf
+      </Link>,
+      '$230.00',
+      124533,
+      83,
+      '$19,090.00',
+    ],
+    [
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="navy-merino-wool"
+      >
+        Navy Merino Wool Blazer with khaki chinos and yellow belt
+      </Link>,
+      '$445.00',
+      124518,
+      32,
+      '$14,240.00',
+    ],
+  ];
+
+  const rows = sortedRows ? sortedRows : initiallySortedRows;
+  const handleSort = useCallback(
+    (index, direction) => setSortedRows(sortCurrency(rows, index, direction)),
+    [rows],
+  );
+
+  return (
+    <Page title="Sales by product">
+      <Card>
+        <DataTable
+          columnContentTypes={[
+            'text',
+            'numeric',
+            'numeric',
+            'numeric',
+            'numeric',
+          ]}
+          headings={[
+            'Product',
+            'Price',
+            'SKU Number',
+            'Net quantity',
+            'Net sales',
+          ]}
+          rows={rows}
+          totals={['', '', '', 255, '$155,830.00']}
+          sortable={[false, true, false, false, true]}
+          defaultSortDirection="descending"
+          initialSortColumnIndex={4}
+          onSort={handleSort}
+          footerContent={`Showing ${rows.length} of ${rows.length} results`}
+          hasZebraStripingOnData
+          increasedTableDensity
+        />
+      </Card>
+    </Page>
+  );
+
+  function sortCurrency(rows, index, direction) {
+    return [...rows].sort((rowA, rowB) => {
+      const amountA = parseFloat(rowA[index].substring(1));
+      const amountB = parseFloat(rowB[index].substring(1));
+
+      return direction === 'descending' ? amountB - amountA : amountA - amountB;
+    });
+  }
+}
+```
+
 ---
 
 ## Best practices