[DataTable] Better prop compatibility and fixing no-wrap issue. (#7043)

### WHY are these changes introduced?

@brianshen1990 was integrating the new `DataTable` in the `BulkAccountInviter` app and noticed that regular cells were never wrapping in multiple lines, pushing the table width beyond the available space. This triggered the condensed nav. This PR fixes this by defaulting to cells wrapping unless the `truncate` prop is specifically set.

This was caused by [this PR](#6914) which wrapped all cells in a `TruncatedText` component which would automatically add tooltips in case content doesn't have enough space. This was a bit too heavy handed. After this PR `TruncatedText` is only applied if the `truncate` prop is specifically set.

I also ensured the fixed first column feature will work properly no matter whether `truncated` is set or not. This means you can now have fixed first columns with text wrapping and with text being truncated depending on what the consumer prefers. 

Lastly, there seemed to be a bug in the calculation of headers when `fixedFirstColums` is set to a value larger than 1. This was because currently we're only calculating `columnVisibilityData` when `condensed` was `true`. This means no heading widths are available to properly calculate the absolute positioning of fixed headings in the sticky header unless the viewport width was reduced to trigger `condensed` to be `true`. After this PR `columnVisibilityData` will be calculated when either `stickyHeading` is `true` or the table is `condensed`.

<details>

<summary>Screenshot of wrapping issue</summary>

![Condensed navigation due to text in first column not wrapping](https://user-images.githubusercontent.com/4960217/187224210-139a212e-564c-4005-bf34-b58e15f8d6a5.png)
</details>


<details>

<summary>Video of heading with calculation issue</summary>

![Sticky heading calculated ionco](https://user-images.githubusercontent.com/4960217/187226773-183ff585-c21b-4312-98e3-e22b894944ac.gif)

</details>

### WHAT is this pull request doing?

<details>
      <summary>GIF of sticky heading width calculated correctly</summary>

![GIF of correct heading calculation](https://user-images.githubusercontent.com/4960217/187227214-f5e8d87b-1407-4609-a539-3007e1ce55e9.gif)

</details>

<details>
      <summary>GIF of truncation with and without fixed first column</summary>

![Truncation in combination with fixed first column and without](https://user-images.githubusercontent.com/4960217/187227738-5ca06194-2c52-4f13-8da6-2ac328ed9219.gif)

</details>

### How to 🎩

🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

**Spin-URL: (`shopify/web`)** https://shop1.shopify.data-table-enhancements.philipp-schofer.us.spin.dev/admin/

1. Try combinations of the following props:
   - `truncate` on/off
   - `fixedFirstColumns` - 1,2,3 or 0
   - `stickyHeader` on/off
2. Open the Playground in Safari and ensure everything renders correctly when the above props are combined.

<details>
<summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>

```jsx
import {Page, Card, DataTable} from '@shopify/polaris';
import React from 'react';

export function Playground() {
  const rows = [
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
  ];

  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}
            // increasedTableDensity
            // truncate
            stickyHeader
            showTotalsInFooter
            // fixedFirstColumns={2}
            totals={['', '', '', 255, '$155,830.00']}
          />
        </Card>
      </Page>
      <br />
    </>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

Author: philschoefer

.changeset/mean-rats-prove.md

@@ -0,0 +1,8 @@
+---
+'@shopify/polaris': minor
+---
+
+Updates to `DataTable`
+
+- Fixed `DataTable` cell content not wrapping when the `truncate` prop is `false`
+- Added support for setting the `DataTable` `truncate` prop without having to set the `fixedFirstColumns` prop

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

@@ -4,6 +4,9 @@
   --pc-data-table-first-column-width: 145px;
   position: relative;
   max-width: 100vw;
+  background-color: var(--p-surface);
+  border-radius: var(--p-border-radius-2);
+  overflow: hidden;
 }
 
 .condensed {
@@ -47,6 +50,7 @@
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
+  background-color: inherit;
 }
 
 .Table {
@@ -62,6 +66,7 @@
 }
 
 .Cell {
+  @include text-emphasis-normal;
   padding: var(--p-space-4);
   white-space: nowrap;
   text-align: left;
@@ -88,8 +93,16 @@
   }
 }
 
+.Cell-separate::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-right: var(--p-border-divider);
+}
+
 .Cell-firstColumn {
-  @include text-emphasis-normal;
   text-align: left;
   white-space: normal;
 }
@@ -319,6 +332,11 @@
       height: 0;
       width: 0;
     }
+
+    .FixedFirstColumn {
+      bottom: 0;
+      top: auto;
+    }
   }
 
   .StickyTableColumnHeader-isScrolling {
@@ -339,20 +357,15 @@
 
 .FixedFirstColumn {
   position: absolute;
-  background: var(--p-surface);
+  background: inherit;
   z-index: 3;
   border-spacing: 0;
+  top: 0;
   left: 0;
+
   @media #{$p-breakpoints-md-down} {
     z-index: 1;
   }
-
-  &.separate:is(table) th,
-  &.separate:is(th) {
-    &:last-of-type {
-      border-right: var(--p-border-divider);
-    }
-  }
 }
 
 .TooltipContent {

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

@@ -136,7 +136,8 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
     let condensed = false;
 
     if (table && scrollContainer) {
-      condensed = table.scrollWidth > scrollContainer.clientWidth;
+      // safari sometimes incorrectly sets the scrollwidth too large by 1px
+      condensed = table.scrollWidth > scrollContainer.clientWidth + 1;
     }
 
     this.setState({
@@ -246,9 +247,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
           !isScrolledFarthestLeft && styles.separate,
         )}
         style={{
-          maxWidth: `${
-            columnVisibilityData[fixedFirstColumns - 1]?.rightEdge
-          }px`,
+          width: `${columnVisibilityData[fixedFirstColumns - 1]?.rightEdge}px`,
         }}
       >
         <thead>
@@ -293,7 +292,11 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
     );
 
     const bodyMarkup = rows.map((row, index) =>
-      this.defaultRenderRow({row, index, inFixedNthColumn: false}),
+      this.defaultRenderRow({
+        row,
+        index,
+        inFixedNthColumn: false,
+      }),
     );
 
     const footerMarkup = footerContent ? (
@@ -438,7 +441,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
       button.addEventListener('focus', this.handleHeaderButtonFocus);
     } else {
       this.tableHeadings[index] = ref;
-      this.tableHeadingWidths[index] = ref.getBoundingClientRect().width;
+      this.tableHeadingWidths[index] = ref.clientWidth;
     }
   };
 
@@ -511,8 +514,9 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
       scrollContainer: {current: scrollContainer},
       dataTable: {current: dataTable},
     } = this;
+    const {stickyHeader} = this.props;
 
-    if (condensed && table && scrollContainer && dataTable) {
+    if ((stickyHeader || condensed) && table && scrollContainer && dataTable) {
       const headerCells = table.querySelectorAll<HTMLTableCellElement>(
         headerCell.selector,
       );
@@ -758,7 +762,9 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
       content: heading,
       contentType: columnContentTypes[headingIndex],
       nthColumn: headingIndex < fixedFirstColumns,
+      fixedFirstColumns,
       truncate,
+      headingIndex,
       ...sortableHeadingProps,
       verticalAlign,
       handleFocus: this.handleFocus,
@@ -795,13 +801,10 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
               inStickyHeader,
             });
           }}
-          inFixedNthColumn
+          inFixedNthColumn={Boolean(fixedFirstColumns)}
+          lastFixedFirstColumn={headingIndex === fixedFirstColumns - 1}
           style={{
             left: this.state.columnVisibilityData[headingIndex]?.leftEdge,
-            borderRight:
-              headingIndex === fixedFirstColumns - 1 && fixedCellVisible
-                ? 'var(--p-border-divider)'
-                : undefined,
           }}
         />,
       ];
@@ -818,6 +821,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
             inStickyHeader,
           });
         }}
+        lastFixedFirstColumn={headingIndex === fixedFirstColumns - 1}
         inFixedNthColumn={inFixedNthColumn}
       />
     );
@@ -869,6 +873,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
         total
         totalInFooter={totalInFooter}
         nthColumn={index <= fixedFirstColumns - 1}
+        firstColumn={index === 0}
         key={id}
         content={content}
         contentType={contentType}
@@ -914,6 +919,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
       hoverable = true,
       headings,
     } = this.props;
+    const {condensed} = this.state;
     const fixedFirstColumns = this.fixedFirstColumns();
     const className = classNames(
       styles.TableRow,
@@ -926,7 +932,6 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
         className={className}
         onMouseEnter={this.handleHover(index)}
         onMouseLeave={this.handleHover()}
-        style={rowHeights ? {height: `${rowHeights[index]}px`} : {}}
       >
         {row.map((content: CellProps['content'], cellIndex: number) => {
           const hovered = index === this.state.rowHovered;
@@ -944,11 +949,13 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
               content={content}
               contentType={columnContentTypes[cellIndex]}
               nthColumn={cellIndex <= fixedFirstColumns - 1}
+              firstColumn={cellIndex === 0}
               truncate={truncate}
               verticalAlign={verticalAlign}
               colSpan={colSpan}
               hovered={hovered}
-              inFixedNthColumn={inFixedNthColumn}
+              style={rowHeights ? {height: `${rowHeights[index]}px`} : {}}
+              inFixedNthColumn={condensed && inFixedNthColumn}
             />
           );
         })}

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

@@ -13,6 +13,7 @@ export interface CellProps {
   content?: React.ReactNode;
   contentType?: string;
   nthColumn?: boolean;
+  firstColumn?: boolean;
   truncate?: boolean;
   header?: boolean;
   total?: boolean;
@@ -34,12 +35,14 @@ export interface CellProps {
   fixedCellVisible?: boolean;
   firstColumnMinWidth?: string;
   style?: React.CSSProperties;
+  lastFixedFirstColumn?: boolean;
 }
 
 export function Cell({
   content,
   contentType,
   nthColumn,
+  firstColumn,
   truncate,
   header,
   total,
@@ -61,15 +64,16 @@ export function Cell({
   fixedCellVisible = false,
   firstColumnMinWidth,
   style,
+  lastFixedFirstColumn,
 }: CellProps) {
   const i18n = useI18n();
   const numeric = contentType === 'numeric';
 
   const className = classNames(
     styles.Cell,
     styles[`Cell-${variationName('verticalAlign', verticalAlign)}`],
-    nthColumn && styles['Cell-firstColumn'],
-    nthColumn && truncate && styles['Cell-truncated'],
+    firstColumn && styles['Cell-firstColumn'],
+    truncate && styles['Cell-truncated'],
     header && styles['Cell-header'],
     total && styles['Cell-total'],
     totalInFooter && styles['Cell-total-footer'],
@@ -78,7 +82,10 @@ export function Cell({
     sorted && styles['Cell-sorted'],
     stickyHeadingCell && styles.StickyHeaderCell,
     hovered && styles['Cell-hovered'],
-    fixedCellVisible && styles.separate,
+    lastFixedFirstColumn &&
+      inFixedNthColumn &&
+      fixedCellVisible &&
+      styles['Cell-separate'],
     nthColumn &&
       inFixedNthColumn &&
       stickyHeadingCell &&
@@ -156,31 +163,35 @@ export function Cell({
   const headingMarkup = header ? (
     <th
       {...headerCell.props}
+      aria-sort={sortDirection}
       {...colSpanProp}
       ref={setRef}
       className={className}
       scope="col"
-      aria-sort={sortDirection}
-      style={nthColumn ? {minWidth: firstColumnMinWidth} : {}}
+      style={{...minWidthStyles}}
     >
       {columnHeadingContent}
     </th>
   ) : (
     <th
-      style={{minWidth: firstColumnMinWidth}}
+      {...colSpanProp}
+      ref={setRef}
       className={className}
       scope="row"
-      {...colSpanProp}
-      ref={(ref) => {
-        setRef(ref);
-      }}
+      style={{...minWidthStyles}}
     >
-      <TruncatedText className={styles.TooltipContent}>{content}</TruncatedText>
+      {truncate ? (
+        <TruncatedText className={styles.TooltipContent}>
+          {content}
+        </TruncatedText>
+      ) : (
+        content
+      )}
     </th>
   );
 
   const cellMarkup =
-    header || nthColumn ? (
+    header || firstColumn || nthColumn ? (
       headingMarkup
     ) : (
       <td className={className} {...colSpanProp}>