feat(table,datagrid): allow passing whiteSpace style prop

.changeset/shaggy-geese-dress.md

@@ -0,0 +1,7 @@
+---
+"@twilio-paste/data-grid": minor
+"@twilio-paste/table": minor
+"@twilio-paste/core": minor
+---
+
+[Table, DataGrid] Allow passing `whiteSpace` style prop to `Th`/`DataGridHeader` and `Td`/`DataGridCell` components.

packages/paste-core/components/data-grid/__tests__/index.spec.tsx

@@ -45,6 +45,17 @@ describe("Data Grid", () => {
       expect(dataGrid.getAttribute("aria-label")).toBeDefined();
       expect(dataGrid.getAttribute("role")).toBe("grid");
     });
+
+    it("should render width, textAlign, and whiteSpace styles", (): void => {
+      render(<PlainDataGrid />);
+      const renderedTh = screen.getByTestId("data-grid-header");
+      const renderedTd = screen.getByTestId("data-grid-cell");
+      expect(renderedTh).toHaveStyleRule("text-align", "left");
+      expect(renderedTh).toHaveStyleRule("white-space", "normal");
+
+      expect(renderedTd).toHaveStyleRule("text-align", "left");
+      expect(renderedTd).toHaveStyleRule("white-space", "nowrap");
+    });
   });
 
   describe("Column Span", () => {

packages/paste-core/components/data-grid/src/table/Td.tsx

@@ -7,7 +7,7 @@ export interface TdProps extends TableTdProps {
 }
 
 export const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
-  ({ textAlign = "left", element = "DATA_GRID_TD", ...props }, ref) => {
+  ({ textAlign = "left", whiteSpace = "normal", element = "DATA_GRID_TD", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -23,6 +23,7 @@ export const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
         padding="space50"
         position="relative"
         textAlign={textAlign}
+        whiteSpace={whiteSpace}
         verticalAlign="inherit"
         wordWrap="break-word"
         color="inherit"

packages/paste-core/components/data-grid/src/table/Th.tsx

@@ -7,7 +7,7 @@ export interface ThProps extends TableThProps {
 }
 
 export const Th = React.forwardRef<HTMLTableCellElement, ThProps>(
-  ({ width, textAlign = "left", element = "DATA_GRID_TH", ...props }, ref) => {
+  ({ width, textAlign = "left", whiteSpace = "normal", element = "DATA_GRID_TH", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -25,6 +25,7 @@ export const Th = React.forwardRef<HTMLTableCellElement, ThProps>(
         width={width}
         position="relative"
         textAlign={textAlign}
+        whiteSpace={whiteSpace}
         verticalAlign="inherit"
         color="inherit"
         _first={{

packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx

@@ -51,6 +51,7 @@ export const PlainDataGrid: React.FC<React.PropsWithChildren<{ element?: BoxProp
                   key={`col-${colIndex}`}
                   data-testid={rowIndex === 0 && colIndex === 0 ? "data-grid-cell" : null}
                   textAlign={colIndex === 4 ? "right" : "left"}
+                  whiteSpace="nowrap"
                 >
                   {col}
                 </DataGridCell>

packages/paste-core/components/data-grid/type-docs.json

@@ -6504,6 +6504,13 @@
       "required": false,
       "externalProp": true
     },
+    "whiteSpace": {
+      "type": "WhiteSpace",
+      "defaultValue": "'normal'",
+      "required": false,
+      "externalProp": false,
+      "description": "Sets how white space inside the Table cell is handled."
+    },
     "width": {
       "type": "Width<TLengthStyledSystem>",
       "defaultValue": null,
@@ -11405,6 +11412,13 @@
       "required": false,
       "externalProp": true
     },
+    "whiteSpace": {
+      "type": "WhiteSpace",
+      "defaultValue": "'normal'",
+      "required": false,
+      "externalProp": false,
+      "description": "Sets how white space inside the Table cell is handled."
+    },
     "width": {
       "type": "Width<TLengthStyledSystem>",
       "defaultValue": null,