fix(DataTable): align items top on text wrapping (#13525)

* fix(DataTable): align items top on text wrapping * fix(Table): yarn format * chore: add canvas as a dev dependency * fix(TableHeader): correct sorting padding * fix(TableHeader): yarn format * fix: run dedupe * test(DataTable): performance testing on new autoAlign property * test(DataTable): add table,cell, and row autoAlign test stories * fix: format * fix(DataTable): refacotr autoAlign logic to live in Table * fix: format * fix(TableRow): remove whitespace * fix(DataTable): add autoAlign docs and tests * fix(Table): replace useEvent with useWindowEvent * test: update snapshot * fix(DataTable): use lodash.debounce for autoAlign feature * fix(DataTable): do not align header top on autoAlign * fix(DataTable): align expand button to top on md size when autoAlign * fix(DataTable): align checkbox top on autoAlign wrappring * fix(DataTable): align radioButton top on autoAlign wrapping * fix(DataTable): align overflowmenu top on datatable autoAlign wrapping * fix(DataTable): offset checkbox top padding in lg autoAlign wrapping * fix(DataTable): add table header align logic and css * fix(DataTable): add tests for header auto alignment * fix: format * fix(DataTable): top alignment expansion css fixes --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 7, 2023 · 0c73f61 · 0c73f61
1 parent 0754f9c
commit 0c73f61
Show file tree

Hide file tree

Showing 25 changed files with 698 additions and 30 deletions.
diff --git a/.yarn/cache/@mapbox-node-pre-gyp-npm-1.0.10-1811160047-1a98db05d9.zip b/.yarn/cache/@mapbox-node-pre-gyp-npm-1.0.10-1811160047-1a98db05d9.zip
diff --git a/.yarn/cache/canvas-npm-2.11.2-824d893a31-61e554aef8.zip b/.yarn/cache/canvas-npm-2.11.2-824d893a31-61e554aef8.zip
diff --git a/.yarn/cache/decompress-response-npm-4.2.1-abe5b4ebe4-4e783ca4df.zip b/.yarn/cache/decompress-response-npm-4.2.1-abe5b4ebe4-4e783ca4df.zip
diff --git a/.yarn/cache/detect-libc-npm-2.0.1-2699cb2ac4-ccb05fcabb.zip b/.yarn/cache/detect-libc-npm-2.0.1-2699cb2ac4-ccb05fcabb.zip
diff --git a/.yarn/cache/mimic-response-npm-2.1.0-037463e454-014fad6ab9.zip b/.yarn/cache/mimic-response-npm-2.1.0-037463e454-014fad6ab9.zip
diff --git a/.yarn/cache/nan-npm-2.14.0-b880e7ae7d-6dfd00d9bf.zip b/.yarn/cache/nan-npm-2.14.0-b880e7ae7d-6dfd00d9bf.zip
diff --git a/.yarn/cache/nan-npm-2.17.0-bf36a21d6f-ec609aeaf7.zip b/.yarn/cache/nan-npm-2.17.0-bf36a21d6f-ec609aeaf7.zip
diff --git a/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip b/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip
diff --git a/.yarn/cache/simple-get-npm-3.1.1-dce5923dba-80195e70bf.zip b/.yarn/cache/simple-get-npm-3.1.1-dce5923dba-80195e70bf.zip
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1730,6 +1730,9 @@ Map {
         "className": Object {
           "type": "string",
         },
+        "experimentalAutoAlign": Object {
+          "type": "bool",
+        },
         "isSortable": Object {
           "type": "bool",
         },
@@ -2310,6 +2313,9 @@ Map {
       "translateWithId": [Function],
     },
     "propTypes": Object {
+      "experimentalAutoAlign": Object {
+        "type": "bool",
+      },
       "filterRows": Object {
         "type": "func",
       },
@@ -7610,6 +7616,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "experimentalAutoAlign": Object {
+        "type": "bool",
+      },
       "isSortable": Object {
         "type": "bool",
       },

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -95,6 +95,7 @@
     "babel-preset-carbon": "^0.5.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
+    "canvas": "^2.11.2",
     "clipboardy": "^2.1.0",
     "css-loader": "^6.5.1",
     "enquirer": "^2.3.6",

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -75,6 +75,11 @@ const translateWithId = (id) => defaultTranslations[id];
  */
 class DataTable extends React.Component {
   static propTypes = {
+    /**
+     * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+     */
+    experimentalAutoAlign: PropTypes.bool,
+
     /**
      * Optional hook to manually control filtering of the rows from the
      * TableToolbarSearch component
@@ -416,6 +421,7 @@ class DataTable extends React.Component {
       useStaticWidth,
       stickyHeader,
       overflowMenuOnHover,
+      experimentalAutoAlign,
     } = this.props;
     return {
       useZebraStyles,
@@ -424,6 +430,7 @@ class DataTable extends React.Component {
       useStaticWidth,
       stickyHeader,
       overflowMenuOnHover,
+      experimentalAutoAlign,
     };
   };
 

diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx
@@ -1,4 +1,5 @@
 import { Story, Props, Source, Preview } from '@storybook/addon-docs';
+import { Table, TableHead, TableHeader, TableRow, TableCell, TableBody } from '../DataTable'
 
 # DataTable
 
@@ -14,7 +15,6 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs';
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
 ## Table of Contents
 
 - [Getting started](#getting-started)
@@ -24,9 +24,14 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs';
 - [Expansion](#expansion)
   - [Programmatic expansion](#programmatic-expansion)
 - [Selection](#selection)
-  - [Programmatic selection](#programmatic-selection)
+    - [Programmatic selection](#programmatic-selection)
 - [Filtering](#filtering)
 - [Batch actions](#batch-actions)
+- [Toolbar](#toolbar)
+  - [Overflow Menu](#overflow-menu)
+- [Text Wrapping Alignment](#text-wrapping-alignment)
+  - [Table with `experimentalAutoAlign = true`](#table-with-experimentalautoalign--true)
+  - [Table with `experimentalAutoAlign = false`](#table-with-experimentalautoalign--false)
 - [Props](#props)
   - [Render props](#render-props)
     - [Prop getters](#prop-getters)
@@ -314,6 +319,121 @@ cell.
 </TableBody>
 ```
 
+## Text Wrapping Alignment
+
+DataTable provides an experimental `experimentalAutoAlign` prop that you may
+opt into to have the table automatically align contents to the top when at least
+one table cell content is being wrapped on the table. Keep in mind this feature
+is experimental and might not be performant in tables with large datasets.
+
+### Table with `experimentalAutoAlign = true`
+
+<div style={{width: '300px'}}>
+  <Table experimentalAutoAlign>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+
+```jsx
+<div style={{width: '300px'}}>
+  <Table experimentalAutoAlign>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+```
+
+### Table with `experimentalAutoAlign = false`
+
+<div style={{width: '300px'}}>
+  <Table>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+
+```jsx
+<div style={{width: '300px'}}>
+  <Table>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+```
+
 ## Props
 
 <Props />