Feat(Table): fixes after CR - part 2

livechat · Nov 28, 2024 · 2fcd0b6 · 2fcd0b6
1 parent f6a9708
commit 2fcd0b6
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 26 deletions.
diff --git a/packages/react-components/src/components/Table/Table.mdx b/packages/react-components/src/components/Table/Table.mdx
@@ -30,6 +30,7 @@ const columns: Column<(typeof data)[0]>[] = [
     key: 'id',
     header: 'ID',
     sortable: true,
+    sortValue: (item: Data) => item.id,
   },
   {
     key: 'name',
@@ -41,6 +42,7 @@ const columns: Column<(typeof data)[0]>[] = [
     key: 'age',
     header: 'Age',
     sortable: true,
+    sortValue: (item: Data) => item.age,
   },
   {
     key: 'role',
@@ -51,8 +53,6 @@ const columns: Column<(typeof data)[0]>[] = [
   {
     key: 'action',
     header: 'Action',
-    sortable: false,
-    sortValue: undefined,
   },
 ];
 
@@ -62,28 +62,28 @@ const data: Data[] = [
     name: 'John Doe',
     age: 28,
     role: 'Developer',
-    action: <Button>Edit</Button>,
+    action: <Button size="xcompact">Edit</Button>,
   },
   {
     id: 2,
     name: 'Jane Smith',
     age: 34,
     role: 'Designer',
-    action: <Button>Edit</Button>,
+    action: <Button size="xcompact">Edit</Button>,
   },
   {
     id: 3,
     name: 'Alice Johnson',
     age: 42,
     role: 'Manager',
-    action: <Button>Edit</Button>,
+    action: <Button size="xcompact">Edit</Button>,
   },
   {
     id: 4,
     name: 'Mike Williams',
     age: 25,
     role: 'Intern',
-    action: <Button>Edit</Button>,
+    action: <Button size="xcompact">Edit</Button>,
   },
 ];
 

diff --git a/packages/react-components/src/components/Table/Table.stories.tsx b/packages/react-components/src/components/Table/Table.stories.tsx
@@ -49,10 +49,9 @@ const columns: Column<(typeof data)[0]>[] = [
   {
     key: 'action',
     header: 'Action',
-    sortable: false,
-    sortValue: undefined,
   },
 ];
+
 const data: Data[] = [
   {
     id: 1,

diff --git a/packages/react-components/src/components/Table/Table.tsx b/packages/react-components/src/components/Table/Table.tsx
@@ -19,7 +19,7 @@ export const Table = <T,>({
   data,
   columns,
   stripped,
-  size = 'small',
+  size = 'medium',
   pin,
   selectable,
   getRowId,

diff --git a/packages/react-components/src/components/Table/TableBody.tsx b/packages/react-components/src/components/Table/TableBody.tsx
@@ -21,19 +21,23 @@ export const TableBody = <T,>({
   toggleRowSelection,
 }: TableBodyProps<T>) => {
   return (
-    <tbody>
-      {data.map((row) => (
-        <TableRow
-          key={getRowId(row)}
-          row={row}
-          columns={columns}
-          columnWidths={columnWidths}
-          selectable={selectable}
-          isSelected={isSelected}
-          toggleRowSelection={toggleRowSelection}
-          rowId={getRowId(row)}
-        />
-      ))}
+    <tbody role="rowgroup">
+      {data.map((row) => {
+        const rowId = getRowId(row);
+
+        return (
+          <TableRow
+            key={rowId}
+            row={row}
+            columns={columns}
+            columnWidths={columnWidths}
+            selectable={selectable}
+            isSelected={isSelected}
+            toggleRowSelection={toggleRowSelection}
+            rowId={getRowId(row)}
+          />
+        );
+      })}
     </tbody>
   );
 };
diff --git a/packages/react-components/src/components/Table/TableHeader.tsx b/packages/react-components/src/components/Table/TableHeader.tsx
@@ -39,7 +39,11 @@ function renderSortIcon<T>(
   sortable: boolean,
   hovered: boolean
 ) {
-  if (sortConfig.key === columnKey && sortConfig.direction !== SortOrder.None) {
+  if (
+    sortConfig.key === columnKey &&
+    sortConfig.direction !== SortOrder.None &&
+    sortable
+  ) {
     return (
       <Icon
         source={
@@ -86,6 +90,7 @@ export const TableHeader = <T,>({
             })}
             onMouseEnter={() => setHoveredColumnIndex(index)}
             onMouseLeave={() => setHoveredColumnIndex(null)}
+            role="columnheader"
           >
             <span
               onClick={() => handleSort(column.key)}

diff --git a/packages/react-components/src/components/Table/TableRow.tsx b/packages/react-components/src/components/Table/TableRow.tsx
@@ -31,7 +31,7 @@ export const TableRow = <T,>({
   return (
     <tr className={styles[baseClass]}>
       {selectable && (
-        <td>
+        <td role="cell" aria-selected={isSelected(rowId)}>
           <Checkbox
             checked={isSelected(rowId)}
             onChange={() => toggleRowSelection(rowId)}
@@ -41,7 +41,11 @@ export const TableRow = <T,>({
       {columns.map((column, index) => (
         <td
           key={String(column.key)}
-          style={{ width: `${columnWidths[index]}px` }}
+          style={{
+            width: columnWidths[index] ? `${columnWidths[index]}px` : 'auto',
+          }}
+          role="cell"
+          data-column={String(column.key)}
         >
           <Text size="md" noMargin>
             {row[column.key] as React.ReactNode}

diff --git a/packages/react-components/src/components/Table/hooks.ts b/packages/react-components/src/components/Table/hooks.ts
@@ -27,7 +27,7 @@ export const useTable = <T>({
 
   const toggleRowSelection = useCallback(
     (id: string | number) => {
-      const updatedSelectedRows = new Set(selectedRows);
+      const updatedSelectedRows = new Set(selectedRows || []);
       if (updatedSelectedRows.has(id)) {
         updatedSelectedRows.delete(id);
       } else {