KevinVandy · KevinVandy · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023
diff --git a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css
@@ -1,4 +1,4 @@
-.ai {
+.root {
   color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   background-color: transparent;
   transition: all 100ms ease;
@@ -9,4 +9,8 @@
       var(--mantine-color-dark-6)
     );
   }
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
 }
diff --git a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx
@@ -16,7 +16,7 @@ export function MRT_ActionIcon({
 }: Props) {
   return (
     <ActionIcon
-      className={clsx(className, classes.ai)}
+      className={clsx(className, classes.root)}
       size="sm"
       {...actionIconProps}
     >

diff --git a/packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.module.css b/packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.module.css
@@ -1,4 +1,4 @@
-.container {
+.root {
   min-width: 70px;
   align-content: center;
   justify-content: center;

diff --git a/packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.tsx b/packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { Flex, Tooltip } from '@mantine/core';
 
 import { type MRT_Column, type MRT_TableInstance } from '../types';
@@ -22,7 +23,7 @@ export const MRT_ColumnPinningButtons = <
   },
 }: Props<TData>) => {
   return (
-    <Flex className={classes.container}>
+    <Flex className={clsx('mrt-column-pinning-buttons', classes.root)}>
       {column.getIsPinned() ? (
         <Tooltip withinPortal label={localization.unpin}>
           <MRT_ActionIcon onClick={() => column.pin(false)} size="md">

diff --git a/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css b/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
@@ -0,0 +1,27 @@
+.root {
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: inherit;
+  cursor: copy;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  justify-content: inherit;
+  letter-spacing: inherit;
+  margin: -4px;
+  min-width: unset;
+  padding: 4px;
+  text-align: inherit;
+  text-transform: inherit;
+  &:active {
+    transform: translateY(1px);
+  }
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--mantine-primary-color-filled-hover) 10%,
+      transparent
+    );
+  }
+}
diff --git a/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx b/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx
@@ -1,7 +1,10 @@
+import clsx from 'clsx';
 import { type ReactNode } from 'react';
-import { UnstyledButton, CopyButton, Tooltip, rgba } from '@mantine/core';
+import { UnstyledButton, CopyButton, Tooltip } from '@mantine/core';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
-import { getPrimaryColor, parseFromValuesOrFunc } from '../column.utils';
+import { parseFromValuesOrFunc } from '../column.utils';
+
+import classes from './MRT_CopyButton.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   cell: MRT_Cell<TData>;
@@ -15,7 +18,10 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
   table,
 }: Props<TData>) => {
   const {
-    options: { localization, mantineCopyButtonProps },
+    options: {
+      localization: { copiedToClipboard, clickToCopy },
+      mantineCopyButtonProps,
+    },
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -34,41 +40,25 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
           withinPortal
           openDelay={1000}
           label={
-            buttonProps?.title ??
-            (copied ? localization.copiedToClipboard : localization.clickToCopy)
+            buttonProps?.title ?? (copied ? copiedToClipboard : clickToCopy)
           }
         >
           <UnstyledButton
             {...buttonProps}
-            onClick={(e) => {
-              e.stopPropagation();
-              copy();
-            }}
+            className={clsx(
+              'mrt-copy-button',
+              classes.root,
+              buttonProps?.className,
+            )}
             style={(theme) => ({
-              backgroundColor: 'transparent',
-              border: 'none',
-              borderRadius: '4px',
-              color: 'inherit',
-              cursor: 'copy',
-              fontFamily: 'inherit',
-              fontSize: 'inherit',
-              fontWeight: 'inherit',
-              justifyContent: 'inherit',
-              letterSpacing: 'inherit',
-              margin: '-4px',
-              minWidth: 'unset',
-              padding: '4px',
-              textAlign: 'inherit',
-              textTransform: 'inherit',
-              '&:active': {
-                transform: 'translateY(1px)',
-              },
-              '&:hover': {
-                backgroundColor: rgba(getPrimaryColor(theme), 0.1),
-              },
               ...(parseFromValuesOrFunc(buttonProps?.style, theme) as any),
             })}
             title={undefined}
+            aria-role="presentation"
+            onClick={(e) => {
+              e.stopPropagation();
+              copy();
+            }}
           >
             {children}
           </UnstyledButton>

diff --git a/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.module.css b/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.module.css
@@ -0,0 +1,4 @@
+.root {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+}
diff --git a/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.tsx b/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.tsx
@@ -1,6 +1,9 @@
+import clsx from 'clsx';
 import { ActionIcon, Box, Button, Tooltip } from '@mantine/core';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
+import classes from './MRT_EditActionButtons.module.css';
+
 interface Props<TData extends Record<string, any> = {}> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
@@ -75,7 +78,7 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
   return (
     <Box
       onClick={(e) => e.stopPropagation()}
-      style={{ display: 'flex', gap: '12px' }}
+      className={clsx('mrt-edit-action-buttons', classes.root)}
     >
       {variant === 'icon' ? (
         <>
@@ -84,7 +87,7 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
               color="red"
               aria-label={localization.cancel}
               onClick={handleCancel}
-              variant="transparent"
+              variant="subtle"
             >
               <IconCircleX />
             </ActionIcon>
@@ -95,7 +98,7 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
               color="blue"
               onClick={handleSubmitRow}
               loading={isSaving}
-              variant="transparent"
+              variant="subtle"
             >
               <IconDeviceFloppy />
             </ActionIcon>

diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css
@@ -0,0 +1,26 @@
+.root {
+  margin-left: 6px;
+  opacity: 0.8;
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
+  &:hover {
+    opacity: 1;
+  }
+  &.xl {
+    margin-left: -6px;
+  }
+  &.md {
+    margin-left: 0;
+  }
+  .chevron {
+    transition: transform 100ms;
+    &.up {
+      transform: rotate(-180deg);
+    }
+    &.right {
+      transform: rotate(-90deg);
+    }
+  }
+}
diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx
@@ -1,7 +1,10 @@
+import clsx from 'clsx';
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
 
+import classes from './MRT_ExpandAllButton.module.css';
+
 interface Props<TData extends Record<string, any> = {}> {
   table: MRT_TableInstance<TData>;
 }
@@ -43,33 +46,32 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any> = {}>({
       <ActionIcon
         aria-label={localization.expandAll}
         color="gray"
-        disabled={isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())}
-        onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
         variant="transparent"
         {...actionIconProps}
-        style={(theme) => ({
-          marginLeft:
-            density === 'xl' ? '-6px' : density === 'md' ? '0' : '6px',
-          opacity: 0.8,
-          '&:disabled': {
-            backgroundColor: 'transparent',
-            border: 'none',
-          },
-          '&:hover': {
-            opacity: 1,
-          },
-          // ...styleValue(actionIconProps, theme),
-        })}
+        disabled={isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())}
+        onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
+        className={clsx(
+          'mrt-expand-all-button',
+          classes.root,
+          actionIconProps?.className,
+          density === 'xl'
+            ? classes.xl
+            : density === 'md'
+            ? classes.md
+            : undefined,
+        )}
         title={undefined}
       >
         {actionIconProps?.children ?? (
           <IconChevronsDown
-            style={{
-              transform: `rotate(${
-                isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-              }deg)`,
-              transition: 'transform 100ms',
-            }}
+            className={clsx(
+              classes.chevron,
+              isAllRowsExpanded
+                ? classes.up
+                : getIsSomeRowsExpanded()
+                ? classes.right
+                : undefined,
+            )}
           />
         )}
       </ActionIcon>

diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandButton.module.css b/packages/mantine-react-table/src/buttons/MRT_ExpandButton.module.css
@@ -0,0 +1,19 @@
+.root {
+  opacity: 0.8;
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
+  &:hover {
+    opacity: 1;
+  }
+  .chevron {
+    transition: transform 100ms;
+    &.right {
+      transform: rotate(-90deg);
+    }
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ExpandButton.tsx
@@ -1,8 +1,11 @@
+import clsx from 'clsx';
 import { type MouseEvent } from 'react';
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
 
+import classes from './MRT_ExpandButton.module.css';
+
 interface Props<TData extends Record<string, any> = {}> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
@@ -52,27 +55,24 @@ export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
         variant="transparent"
         {...actionIconProps}
         onClick={handleToggleExpand}
-        style={(theme) => ({
-          opacity: 0.8,
-          '&:disabled': {
-            backgroundColor: 'transparent',
-            border: 'none',
-          },
-          '&:hover': {
-            opacity: 1,
-          },
-          // ...styleValue(actionIconProps, theme),
-        })}
+        className={clsx(
+          'mrt-expand-button',
+          classes.root,
+          actionIconProps?.className,
+        )}
         title={undefined}
       >
         {actionIconProps?.children ?? (
           <IconChevronDown
-            style={{
-              transform: `rotate(${
-                !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
-              }deg)`,
-              transition: 'transform 100ms',
-            }}
+            className={clsx(
+              'mrt-expand-button-chevron',
+              classes.chevron,
+              !canExpand && !renderDetailPanel
+                ? classes.right
+                : isExpanded
+                ? classes.up
+                : undefined,
+            )}
           />
         )}
       </ActionIcon>

diff --git a/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css
@@ -0,0 +1,6 @@
+.root {
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+}