Restore support for styling a TableHeader (#2226)

.changeset/unlucky-pumas-arrive.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed forwarding a custom `className` to the TableHeader component.

packages/circuit-ui/components/Table/components/TableCell/TableCell.tsx

@@ -16,6 +16,7 @@
 import { TdHTMLAttributes, forwardRef } from 'react';
 
 import { clsx } from '../../../../styles/clsx.js';
+import type { CellAlignment } from '../../types.js';
 
 import classes from './TableCell.module.css';
 
@@ -25,7 +26,7 @@ export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   /**
    * Aligns the content of the Cell with text-align.
    */
-  align?: 'left' | 'right' | 'center';
+  align?: CellAlignment;
   /**
    * Adds heading styles to placeholder Cell.
    */

packages/circuit-ui/components/Table/components/TableHeader/TableHeader.spec.tsx

@@ -22,6 +22,24 @@ import TableHeader from './index.js';
 const children = 'Foo';
 
 describe('TableHeader', () => {
+  it('should merge a custom class name with the default ones', () => {
+    const className = 'foo';
+    const { container } = render(
+      <TableHeader
+        sortParams={{
+          sortable: true,
+          sortLabel: 'Sort in ascending order',
+          isSorted: false,
+        }}
+        className={className}
+      >
+        {children}
+      </TableHeader>,
+    );
+    const tableHeader = container.querySelector('th');
+    expect(tableHeader?.className).toContain(className);
+  });
+
   it('should have no accessibility violations', async () => {
     const { container } = render(
       <TableHeader

packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx

@@ -68,6 +68,7 @@ export function TableHeader({
   fixed = false,
   isHovered = false,
   sortParams = { sortable: false },
+  className,
   onClick,
   ...props
 }: TableHeaderProps) {
@@ -90,6 +91,7 @@ export function TableHeader({
         isHovered && classes.hover,
         fixed && classes.fixed,
         condensed && classes.condensed,
+        className,
       )}
       scope={scope}
       aria-label={sortParams.sortLabel}

packages/circuit-ui/components/Table/types.ts

@@ -48,6 +48,7 @@ type SortableRowCell = {
 type CellObject = {
   'children': ReactNode;
   'align'?: CellAlignment;
+  'className'?: string;
   'data-testid'?: string;
 };