fix(table,datagrid): noWrap prop regression (#3757)

* fix(table,datagrid): noWrap prop regression * test: fix tests
twilio-labs · Feb 5, 2024 · 27b9e89 · 27b9e89
1 parent 33116f9
commit 27b9e89
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 10 deletions.
diff --git a/.changeset/new-laws-mix.md b/.changeset/new-laws-mix.md
@@ -0,0 +1,7 @@
+---
+"@twilio-paste/data-grid": patch
+"@twilio-paste/table": patch
+"@twilio-paste/core": patch
+---
+
+[Table, DataGrid] Fix regression that broke `noWrap` prop on Table and DataGrids.
diff --git a/packages/paste-core/components/data-grid/__tests__/index.spec.tsx b/packages/paste-core/components/data-grid/__tests__/index.spec.tsx
@@ -49,9 +49,11 @@ describe("Data Grid", () => {
     it("should render width, textAlign, and whiteSpace styles", (): void => {
       render(<PlainDataGrid />);
       const renderedTh = screen.getByTestId("data-grid-header");
+      const renderedThNoWhitespace = screen.getByTestId("data-grid-header-no-whitespace");
       const renderedTd = screen.getByTestId("data-grid-cell");
       expect(renderedTh).toHaveStyleRule("text-align", "left");
-      expect(renderedTh).toHaveStyleRule("white-space", "normal");
+      expect(renderedTh).toHaveStyleRule("white-space", "nowrap");
+      expect(renderedThNoWhitespace).not.toHaveStyleRule("white-space");
 
       expect(renderedTd).toHaveStyleRule("text-align", "left");
       expect(renderedTd).toHaveStyleRule("white-space", "nowrap");

diff --git a/packages/paste-core/components/data-grid/src/table/Td.tsx b/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", whiteSpace = "normal", element = "DATA_GRID_TD", ...props }, ref) => {
+  ({ textAlign = "left", whiteSpace, element = "DATA_GRID_TD", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}

diff --git a/packages/paste-core/components/data-grid/src/table/Th.tsx b/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", whiteSpace = "normal", element = "DATA_GRID_TH", ...props }, ref) => {
+  ({ width, textAlign = "left", whiteSpace, element = "DATA_GRID_TH", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}

diff --git a/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx
@@ -27,10 +27,12 @@ export const PlainDataGrid: React.FC<React.PropsWithChildren<{ element?: BoxProp
       <DataGrid aria-label="User information table" data-testid="data-grid" element={element} striped>
         <DataGridHead data-testid="data-grid-head" element={`${element}_HEAD`}>
           <DataGridRow element={`${element}_ROW`}>
-            <DataGridHeader data-testid="data-grid-header" element={`${element}_HEADER`}>
+            <DataGridHeader data-testid="data-grid-header" element={`${element}_HEADER`} whiteSpace="nowrap">
               {TableHeaderData[0]}
             </DataGridHeader>
-            <DataGridHeader element={`${element}_HEADER`}>{TableHeaderData[1]}</DataGridHeader>
+            <DataGridHeader data-testid="data-grid-header-no-whitespace" element={`${element}_HEADER`}>
+              {TableHeaderData[1]}
+            </DataGridHeader>
             <DataGridHeader element={`${element}_HEADER`}>{TableHeaderData[2]}</DataGridHeader>
             <DataGridHeader element={`${element}_HEADER`}>{TableHeaderData[3]}</DataGridHeader>
             <DataGridHeader element={`${element}_HEADER`} textAlign="right">

diff --git a/packages/paste-core/components/table/__tests__/index.spec.tsx b/packages/paste-core/components/table/__tests__/index.spec.tsx
@@ -169,7 +169,7 @@ describe("Table", () => {
         </THead>
         <TBody>
           <Tr>
-            <Td width="size50" data-testid="mockTd">
+            <Td width="size50" data-testid="mockTd" whiteSpace="nowrap">
               Column 1
             </Td>
           </Tr>
@@ -180,10 +180,10 @@ describe("Table", () => {
     const renderedTd = screen.getByTestId("mockTd");
     expect(renderedTh).toHaveStyleRule("width", "size50");
     expect(renderedTh).toHaveStyleRule("text-align", "left");
-    expect(renderedTh).toHaveStyleRule("white-space", "normal");
+    expect(renderedTh).not.toHaveStyleRule("white-space");
 
     expect(renderedTd).toHaveStyleRule("text-align", "left");
-    expect(renderedTd).toHaveStyleRule("white-space", "normal");
+    expect(renderedTd).toHaveStyleRule("white-space", "nowrap");
   });
 
   it("should render modified textAlign and whitespace styles", (): void => {

diff --git a/packages/paste-core/components/table/src/Td.tsx b/packages/paste-core/components/table/src/Td.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import type { TdProps } from "./types";
 
 const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
-  ({ element = "TD", textAlign = "left", whiteSpace = "normal", ...props }, ref) => {
+  ({ element = "TD", textAlign = "left", whiteSpace, ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}

diff --git a/packages/paste-core/components/table/src/Th.tsx b/packages/paste-core/components/table/src/Th.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import type { ThProps } from "./types";
 
 const Th = React.forwardRef<HTMLTableCellElement, ThProps>(
-  ({ element = "TH", textAlign = "left", whiteSpace = "normal", width, ...props }, ref) => {
+  ({ element = "TH", textAlign = "left", whiteSpace, width, ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}