feat(Table): fixes after CR - part 3

livechat · Dec 9, 2024 · 0716e85 · 0716e85
1 parent 128d089
commit 0716e85
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 17 deletions.
diff --git a/packages/react-components/src/components/Table/Table.mdx b/packages/react-components/src/components/Table/Table.mdx
@@ -17,6 +17,9 @@ import * as Stories from './Table.stories';
 
 ```jsx
 
+import React from 'react';
+import { Button, Column, Table } from '@livechat/design-system-react-components';
+
 type Data = {
   id: number;
   name: string;
@@ -87,11 +90,10 @@ const data: Data[] = [
   },
 ];
 
- const getRowId = (row: Data) => row.id;
+const getRowId = (row: Data) => row.id;
 
-  return (
-    <Table size="medium" data={data} columns={columns} getRowId={getRowId} />
-  );
+<Table size="medium" data={data} columns={columns} getRowId={getRowId} />
+
 ```
 
 ## Component API <a id="ComponentAPI" />

diff --git a/packages/react-components/src/components/Table/Table.spec.tsx b/packages/react-components/src/components/Table/Table.spec.tsx
@@ -26,18 +26,6 @@ const data: Data[] = [
 describe('<Table> component', () => {
   const getRowId = (row: Data) => row.id;
 
-  it('should render a table with provided data and columns', () => {
-    const { getByRole, getAllByRole } = render(
-      <Table data={data} columns={columns} getRowId={getRowId} />
-    );
-
-    const table = getByRole('table');
-    expect(table).toBeInTheDocument();
-
-    const rows = getAllByRole('row');
-    expect(rows.length).toBe(data.length + 1);
-  });
-
   it('should allow row selection if selectable prop is enabled', () => {
     const onSelectionChange = vi.fn();
     const selectedRows = new Set<string>();

diff --git a/packages/react-components/src/components/Table/Table.tsx b/packages/react-components/src/components/Table/Table.tsx
@@ -28,6 +28,7 @@ export const Table = <T,>({
   onSelectionChange,
   rowSelectionMessage,
   rowActions,
+  testId,
 }: ITableProps<T>) => {
   const columnRefs = React.useRef<(HTMLTableCellElement | null)[]>([]);
   const [hoveredColumnIndex, setHoveredColumnIndex] = React.useState<
@@ -183,6 +184,7 @@ export const Table = <T,>({
           styles[`${baseClass}--pinned_${pin}`],
           styles[`${baseClass}--stripped_${stripped}`]
         )}
+        data-testid={testId}
       >
         <TableHeader
           columns={columns}

diff --git a/packages/react-components/src/components/Table/TableHeader.module.scss b/packages/react-components/src/components/Table/TableHeader.module.scss
@@ -43,7 +43,7 @@ $base-class: 'header';
     bottom: 0;
     background-color: var(--border-basic-secondary);
     cursor: col-resize;
-    width: 1px;
+    width: 2px;
     height: 100%;
 
     &:hover,

diff --git a/packages/react-components/src/components/Table/styles/pin.scss b/packages/react-components/src/components/Table/styles/pin.scss
@@ -17,6 +17,10 @@
       background-color: var(--background-01);
     }
 
+    tr:hover > td:first-child {
+      background-color: var(--surface-primary-hover);
+    }
+
     tr > td:first-child::after,
     th:first-child::after {
       position: absolute;
@@ -30,6 +34,10 @@
       content: '';
       clip-path: inset(0 -15px 0 0);
     }
+
+    tr:hover > td:first-child::after {
+      background-color: var(--surface-primary-hover);
+    }
   }
 
  @else {

diff --git a/packages/react-components/src/components/Table/styles/strips.scss b/packages/react-components/src/components/Table/styles/strips.scss
@@ -17,6 +17,14 @@
     tbody tr:hover td:nth-child(even) {
       background-color: var(--surface-primary-hover);
     }
+
+    thead tr th:nth-child(even) {
+      background-color: var(--surface-secondary-default);
+    }
+
+    thead tr:hover th:nth-child(even) {
+      background-color: var(--surface-primary-hover);
+    }
   }
 
  @else {

diff --git a/packages/react-components/src/components/Table/types.ts b/packages/react-components/src/components/Table/types.ts
@@ -78,6 +78,10 @@ export interface ITableProps<T> {
    * such as "Delete All" or "Export."
    */
   rowActions?: React.ReactNode;
+  /**
+   * Sets the `data-testid` attribute, allowing the table to be easily selected in automated tests.
+   */
+  testId?: string;
 }
 
 export interface SortConfig<T> {