fix(core): don't apply hasHover highlight to Table header row (#3244)

Closes #2734. hasHover applied the hover highlight to every <tr>,
including the header row, because the header is rendered with the same
RowComponent (TableRow) as body rows and TableRow pulled hover/striped
styling from context unconditionally. Add an isHeaderRow flag (set on the
header row in BaseTable) so the header opts out of striped/hover styling,
which is meant for body rows only. +regression test.

Co-authored-by: Durvesh Pilankar <durveshpilankar@meta.com>

Author: durvesh1992

.changeset/table-header-no-hover.md

@@ -0,0 +1,6 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] Table: the header row no longer picks up the `hasHover` row highlight — hover (and striped) styling now applies to body rows only. Adds an internal `isHeaderRow` flag on the row component so the header row in `<thead>` opts out (#2734)
+@durvesh1992

packages/core/src/Table/BaseTable.tsx

@@ -477,6 +477,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
             <TableHeader>
               <RowComponent
                 {...headerRowRenderProps.htmlProps}
+                isHeaderRow
                 xstyle={headerRowRenderProps.styles}>
                 {headerRowRenderProps.children}
               </RowComponent>

packages/core/src/Table/Table.test.tsx

@@ -245,6 +245,27 @@ describe('BaseTable', () => {
     expect(screen.getAllByRole('row')).toHaveLength(4);
   });
 
+  it('does not apply hover styling to the header row when hasHover is set', () => {
+    // Use the public Table (provides TableContext); BaseTable alone has no
+    // context, so rows wouldn't pick up hover styling at all.
+    const {container} = render(
+      <Table data={users} columns={columns} hasHover />,
+    );
+    const headerRow = container.querySelector('thead tr');
+    const bodyRow = container.querySelector('tbody tr');
+    expect(headerRow).not.toBeNull();
+    expect(bodyRow).not.toBeNull();
+
+    const headerClasses = new Set(
+      (headerRow?.className ?? '').split(/\s+/).filter(Boolean),
+    );
+    // The body row carries hover-styling class(es) that the header row does not.
+    const bodyOnlyClasses = (bodyRow?.className ?? '')
+      .split(/\s+/)
+      .filter(c => c && !headerClasses.has(c));
+    expect(bodyOnlyClasses.length).toBeGreaterThan(0);
+  });
+
   it('auto-generates columns from data keys when columns omitted', () => {
     render(<BaseTable data={users} />);
     const headers = screen.getAllByRole('columnheader');
@@ -276,11 +297,7 @@ describe('BaseTable', () => {
 
   it('uses idKey function to key rows', () => {
     render(
-      <BaseTable
-        data={users}
-        columns={columns}
-        idKey={item => item.email}
-      />,
+      <BaseTable data={users} columns={columns} idKey={item => item.email} />,
     );
     expect(screen.getAllByRole('row')).toHaveLength(4);
   });
@@ -374,9 +391,7 @@ describe('BaseTable', () => {
           htmlProps: {...props.htmlProps, 'data-testid': 'plugin-table'},
         }),
       };
-      render(
-        <BaseTable data={users} columns={columns} plugins={[plugin]} />,
-      );
+      render(<BaseTable data={users} columns={columns} plugins={[plugin]} />);
       expect(screen.getByTestId('plugin-table')).toBeInTheDocument();
     });
 
@@ -387,9 +402,7 @@ describe('BaseTable', () => {
           htmlProps: {...props.htmlProps, 'data-testid': 'plugin-header-row'},
         }),
       };
-      render(
-        <BaseTable data={users} columns={columns} plugins={[plugin]} />,
-      );
+      render(<BaseTable data={users} columns={columns} plugins={[plugin]} />);
       expect(screen.getByTestId('plugin-header-row')).toBeInTheDocument();
     });
 
@@ -404,9 +417,7 @@ describe('BaseTable', () => {
           };
         },
       };
-      render(
-        <BaseTable data={users} columns={columns} plugins={[plugin]} />,
-      );
+      render(<BaseTable data={users} columns={columns} plugins={[plugin]} />);
       expect(receivedKeys).toEqual(['name', 'age', 'email']);
       const headers = screen.getAllByRole('columnheader');
       expect(headers[0]).toHaveAttribute('data-column', 'name');
@@ -423,9 +434,7 @@ describe('BaseTable', () => {
           };
         },
       };
-      render(
-        <BaseTable data={users} columns={columns} plugins={[plugin]} />,
-      );
+      render(<BaseTable data={users} columns={columns} plugins={[plugin]} />);
       expect(receivedItems).toEqual(['Alice', 'Bob', 'Charlie']);
     });
 
@@ -437,9 +446,7 @@ describe('BaseTable', () => {
           return props;
         },
       };
-      render(
-        <BaseTable data={users} columns={columns} plugins={[plugin]} />,
-      );
+      render(<BaseTable data={users} columns={columns} plugins={[plugin]} />);
       // 3 rows * 3 columns = 9 calls
       expect(calls).toHaveLength(9);
       expect(calls[0]).toEqual({col: 'name', name: 'Alice'});
@@ -746,11 +753,7 @@ describe('Table', () => {
       }),
     };
     render(
-      <Table
-        data={users}
-        columns={columns}
-        plugins={{custom: userPlugin}}
-      />,
+      <Table data={users} columns={columns} plugins={{custom: userPlugin}} />,
     );
     expect(screen.getByTestId('custom-plugin')).toBeInTheDocument();
   });
@@ -767,11 +770,7 @@ describe('Table', () => {
       },
     };
     render(
-      <Table
-        data={users}
-        columns={columns}
-        plugins={{custom: userPlugin}}
-      />,
+      <Table data={users} columns={columns} plugins={{custom: userPlugin}} />,
     );
     expect(screen.getByTestId('after-xds')).toBeInTheDocument();
   });

packages/core/src/Table/TableRow.tsx

@@ -34,6 +34,11 @@ export interface TableRowProps extends BaseProps<HTMLTableRowElement> {
    * Must be a `stylex.create()` value — not an inline style object.
    */
   xstyle?: StyleXStyles[];
+  /**
+   * Whether this row is the header row. Header rows skip the striped/hover
+   * row styling (which is only meant for body rows).
+   */
+  isHeaderRow?: boolean;
 }
 
 const stripedRowStyles = stylex.create({
@@ -114,6 +119,7 @@ export function TableRow({
   children,
   xstyle,
   ref,
+  isHeaderRow = false,
   ...props
 }: TableRowProps) {
   const ctx = use(TableContext);
@@ -134,13 +140,17 @@ export function TableRow({
 
   const rowStyles: StyleXStyles[] = [];
 
-  // Handle striped + hover combination to avoid backgroundColor conflicts
-  if (ctx.isStriped && ctx.hasHover) {
-    rowStyles.push(stripedHoverRowStyles.row);
-  } else if (ctx.isStriped) {
-    rowStyles.push(stripedRowStyles.row);
-  } else if (ctx.hasHover) {
-    rowStyles.push(hoverRowStyles.row);
+  // Striped + hover styling is for body rows only — the header row must not
+  // pick up the hover highlight (or striping) even when hasHover/isStriped.
+  if (!isHeaderRow) {
+    // Handle striped + hover combination to avoid backgroundColor conflicts
+    if (ctx.isStriped && ctx.hasHover) {
+      rowStyles.push(stripedHoverRowStyles.row);
+    } else if (ctx.isStriped) {
+      rowStyles.push(stripedRowStyles.row);
+    } else if (ctx.hasHover) {
+      rowStyles.push(hoverRowStyles.row);
+    }
   }
 
   if (ctx.dividers === 'rows' || ctx.dividers === 'grid') {

packages/core/src/Table/types.ts

@@ -421,6 +421,11 @@ export interface TableRowComponentProps extends HTMLAttributes<HTMLTableRowEleme
   ref?: Ref<HTMLTableRowElement>;
   children: ReactNode;
   xstyle?: StyleXStyles[];
+  /**
+   * Whether this row is the header row. Header rows skip the striped/hover
+   * row styling, which is only meant for body rows.
+   */
+  isHeaderRow?: boolean;
 }
 
 /** Props for cell components used in the components prop */