fix: table header wrapping (#218)

* fix: table header wrapping. * Fix failing test. * Fix another failing test. * fix broken table test * typescript appeasement Co-authored-by: Juan Fabrega <[email protected]>
palmetto · Sep 4, 2020 · 320301c · 320301c
1 parent 14f5ee2
commit 320301c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
@@ -143,9 +143,14 @@ describe('Table', () => {
           sortedColumn={{ dataKey: 'flavor', sortDirection: 'ascending' }}
         />);
 
-        const { getByTestId } = within(screen.getByText('Flavor'));
-
-        expect(getByTestId('tableHeaderCellSortAsc-testid')).toBeInTheDocument();
+        const headingSpan = screen.getByText('Flavor');
+        expect(headingSpan).toBeInTheDocument();
+        const headingElement = headingSpan.closest('th');
+        expect(headingElement).toBeInTheDocument();
+        if (headingElement) {
+          const { getByTestId } = within(headingElement);
+          expect(getByTestId('tableHeaderCellSortAsc-testid')).toBeInTheDocument();
+        }
       });
     });
 
@@ -216,7 +221,7 @@ describe('Table', () => {
           />,
         );
 
-        const tableHeaderCell = screen.getByText('Flavor');
+        const tableHeaderCell = screen.getByText('Flavor').closest('th');
         expect(tableHeaderCell).toHaveStyle({ width: '100px', maxWidth: '100px' });
       });
     });

diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss b/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss
@@ -3,6 +3,7 @@
   padding: var(--size-spacing-sm);
   text-align: left;
   text-transform: uppercase;
+  white-space: nowrap;
   color: var(--table-header-color);
   font-size: var(--table-header-font-size);
   font-weight: 600;
@@ -32,8 +33,12 @@
   &.align-center {
     text-align: center;
   }
-}
 
-.sort-icon {
-  margin-left: var(--table-header-sort-icon-spacing);
+  .heading {
+    white-space: initial;
+  }
+
+  .sort-icon {
+    margin-left: var(--table-header-sort-icon-spacing);
+  }
 }
diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.test.tsx b/src/components/Table/TableHeaderCell/TableHeaderCell.test.tsx
@@ -50,7 +50,7 @@ describe('TableHeaderCell', () => {
         </TableHeaderCell>,
       );
 
-      const tableHeaderCell = screen.getByText('ID');
+      const tableHeaderCell = screen.getByText('ID').closest('th');
 
       expect(tableHeaderCell).toHaveStyle({ width: '200px', maxWidth: '200px' });
     });

diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -147,7 +147,9 @@ const TableHeaderCell: FC<TableHeaderCellProps> = ({
       onClick={handleSort}
       onKeyDown={handleKeyPress}
     >
-      {column.heading}
+      <span className={styles.heading}>
+        {column.heading}
+      </span>
       {isSortable && renderIcon()}
     </th>
   );