@coveord/plasma-mantine 48.23.1 → 48.24.0

package/src/components/table/Table.tsx

@@ -44,6 +44,9 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
             '& td:first-of-type, th:first-of-type > *': {
                 paddingLeft: theme.spacing.xl,
             },
+            '& tbody td': {
+                verticalAlign: 'top',
+            },
         },
 
         header: {
@@ -67,12 +70,9 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
             backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
         },
 
-        rowSelectionCheckboxCell: {
-            verticalAlign: 'middle',
-        },
-
         rowCollapsibleButtonCell: {
             textAlign: 'right',
+            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
         },
 
         row: {
@@ -261,7 +261,6 @@ export const Table: TableType = <T,>({
                                 key={cell.id}
                                 style={{width}}
                                 className={cx({
-                                    [classes.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,
                                     [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
                                 })}
                             >
@@ -276,7 +275,11 @@ export const Table: TableType = <T,>({
                     <tr>
                         <td
                             colSpan={columns.length + 1}
-                            style={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}
+                            style={{
+                                padding: 0,
+                                borderTop: row.getIsExpanded() ? undefined : 'none',
+                                borderBottom: row.getIsExpanded() ? undefined : 'none',
+                            }}
                         >
                             <Collapse in={row.getIsExpanded()}>
                                 <Box px="sm" py="xs">

package/src/components/table/TableActions.tsx

@@ -1,3 +1,4 @@
+import {Group} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
 import {useTable} from './useTable';
 
@@ -32,5 +33,5 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
         return null;
     }
 
-    return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;
+    return <Group spacing="xs">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;
 };

package/src/components/table/TableCollapsibleColumn.tsx

@@ -1,5 +1,5 @@
 import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';
-import {Button} from '@mantine/core';
+import {ActionIcon} from '@mantine/core';
 import {ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent} from 'react';
 
@@ -10,6 +10,7 @@ export const TableCollapsibleColumn: ColumnDef<unknown> = {
     id: 'collapsible',
     enableSorting: false,
     header: '',
+    size: 62,
     cell: (info) => {
         const handler = info.row.getToggleExpandedHandler();
         const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
@@ -18,9 +19,9 @@ export const TableCollapsibleColumn: ColumnDef<unknown> = {
         };
 
         return info.row.getCanExpand() ? (
-            <Button onClick={onClick} variant="subtle" size="xs">
+            <ActionIcon onClick={onClick} variant="subtle" radius="sm">
                 {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}
-            </Button>
+            </ActionIcon>
         ) : null;
     },
 };

package/src/components/table/Th.tsx

@@ -47,7 +47,9 @@ export const Th = <T,>({header}: ThProps<T>) => {
     if (!header.column.getCanSort()) {
         return (
             <th className={classes.th} style={{width}}>
-                <Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
+                <Text size="xs" py="xs" px="sm">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                </Text>
             </th>
         );
     }