From 9fa1b347739e48da56a4bb30083577ce727bcdd4 Mon Sep 17 00:00:00 2001
From: Patrick Naughton <patrickjnaughton@gmail.com>
Date: Fri, 29 Sep 2023 10:29:39 -0700
Subject: [PATCH 1/6] do modules for CopyButton, EditActionButton and
 ExpandAllButton

---
 .../src/buttons/MRT_CopyButton.module.css     | 27 ++++++++++++
 .../src/buttons/MRT_CopyButton.tsx            | 42 +++++++------------
 .../buttons/MRT_EditActionButtons.module.css  |  4 ++
 .../src/buttons/MRT_EditActionButtons.tsx     |  9 ++--
 .../buttons/MRT_ExpandAllButton.module.css    | 17 ++++++++
 .../src/buttons/MRT_ExpandAllButton.tsx       | 30 ++++++-------
 6 files changed, 84 insertions(+), 45 deletions(-)
 create mode 100644 packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
 create mode 100644 packages/mantine-react-table/src/buttons/MRT_EditActionButtons.module.css
 create mode 100644 packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css

diff --git a/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css b/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
new file mode 100644
index 000000000..bd2f1802e
--- /dev/null
+++ b/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
@@ -0,0 +1,27 @@
+.button {
+  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
index cd4084509..cfb63ce3e 100644
--- 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>;
@@ -40,35 +43,20 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
         >
           <UnstyledButton
             {...buttonProps}
-            onClick={(e) => {
-              e.stopPropagation();
-              copy();
-            }}
+            className={clsx(
+              'mrt-copy-button',
+              classes.button,
+              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
new file mode 100644
index 000000000..7219d13cb
--- /dev/null
+++ 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
index ffa5672ba..e3abd4308 100644
--- 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
new file mode 100644
index 000000000..1c542663d
--- /dev/null
+++ b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css
@@ -0,0 +1,17 @@
+.root {
+  marginleft: 6px;
+  opacity: 0.8;
+  &:disabled {
+    backgroundcolor: transparent;
+    border: none;
+  }
+  &:hover {
+    opacity: 1;
+  }
+}
+.xl {
+  margin-left: -6px;
+}
+.md {
+  margin-left: 0;
+}
diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx
index b3aea5208..20beb2ec7 100644
--- 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,23 +46,20 @@ 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 ?? (

From a4c9a5ad7176ade6effe90db06a85a69318f5754 Mon Sep 17 00:00:00 2001
From: Patrick Naughton <patrickjnaughton@gmail.com>
Date: Fri, 29 Sep 2023 10:38:49 -0700
Subject: [PATCH 2/6] do module for ExpandButton

---
 .../src/buttons/MRT_ExpandButton.module.css   | 19 +++++++++++
 .../src/buttons/MRT_ExpandButton.tsx          | 34 +++++++++----------
 2 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 packages/mantine-react-table/src/buttons/MRT_ExpandButton.module.css

diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandButton.module.css b/packages/mantine-react-table/src/buttons/MRT_ExpandButton.module.css
new file mode 100644
index 000000000..3201fe470
--- /dev/null
+++ 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
index 0b8a5990b..798a1f69c 100644
--- 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>

From 6b5991875b988bf67bcae4275fb466ed94300667 Mon Sep 17 00:00:00 2001
From: Patrick Naughton <patrickjnaughton@gmail.com>
Date: Fri, 29 Sep 2023 10:49:22 -0700
Subject: [PATCH 3/6] finish expand all chevron css

---
 .../src/buttons/MRT_ActionIcon.module.css     |  2 +-
 .../src/buttons/MRT_ActionIcon.tsx            |  2 +-
 .../MRT_ColumnPinningButtons.module.css       |  2 +-
 .../src/buttons/MRT_ColumnPinningButtons.tsx  |  3 ++-
 .../buttons/MRT_ExpandAllButton.module.css    | 25 +++++++++++++------
 .../src/buttons/MRT_ExpandAllButton.tsx       | 14 ++++++-----
 6 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css
index 488567fe4..f670e66a6 100644
--- 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;
diff --git a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx
index faf8d461d..19e125c0a 100644
--- 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
index dd73c48c1..6689e83cb 100644
--- 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
index 0370814fb..930993f4c 100644
--- 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_ExpandAllButton.module.css b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css
index 1c542663d..248c7858f 100644
--- a/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css
+++ b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css
@@ -1,17 +1,26 @@
 .root {
-  marginleft: 6px;
+  margin-left: 6px;
   opacity: 0.8;
   &:disabled {
-    backgroundcolor: transparent;
+    background-color: transparent;
     border: none;
   }
   &:hover {
     opacity: 1;
   }
-}
-.xl {
-  margin-left: -6px;
-}
-.md {
-  margin-left: 0;
+  &.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
index 20beb2ec7..760ca1058 100644
--- a/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx
+++ b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx
@@ -64,12 +64,14 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any> = {}>({
       >
         {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>

From aea1dc084cf6694ffea271698050608d776be7d8 Mon Sep 17 00:00:00 2001
From: Patrick Naughton <patrickjnaughton@gmail.com>
Date: Fri, 29 Sep 2023 11:00:27 -0700
Subject: [PATCH 4/6] make GrabHandle use MRT_ActionIcon and add module

---
 .../buttons/MRT_GrabHandleButton.module.css   |  6 +++
 .../src/buttons/MRT_GrabHandleButton.tsx      | 48 ++++++++-----------
 2 files changed, 25 insertions(+), 29 deletions(-)
 create mode 100644 packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css

diff --git a/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css
new file mode 100644
index 000000000..6d73501c8
--- /dev/null
+++ b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css
@@ -0,0 +1,6 @@
+.root {
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+}
diff --git a/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.tsx b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.tsx
index 37afd4c5b..2e7469f5c 100644
--- a/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.tsx
+++ b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.tsx
@@ -1,6 +1,10 @@
+import clsx from 'clsx';
 import { type DragEventHandler } from 'react';
-import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+import { type ActionIconProps, Tooltip } from '@mantine/core';
 import { type HTMLPropsRef, type MRT_TableInstance } from '../types';
+import { MRT_ActionIcon } from './MRT_ActionIcon';
+
+import classes from './MRT_GrabHandleButton.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   actionIconProps?: ActionIconProps & HTMLPropsRef<HTMLButtonElement>;
@@ -13,26 +17,22 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
   actionIconProps,
   onDragEnd,
   onDragStart,
-  table,
-}: Props<TData>) => {
-  const {
+  table: {
     options: {
       icons: { IconGripHorizontal },
-      localization,
+      localization: { move },
     },
-  } = table;
-
+  },
+}: Props<TData>) => {
   return (
     <Tooltip
       withinPortal
       openDelay={1000}
-      label={actionIconProps?.title ?? localization.move}
+      label={actionIconProps?.title ?? move}
     >
-      <ActionIcon
-        draggable="true"
-        color="gray"
-        size="sm"
-        variant="transparent"
+      <MRT_ActionIcon
+        aria-label={actionIconProps?.title ?? move}
+        draggable
         {...actionIconProps}
         onClick={(e) => {
           e.stopPropagation();
@@ -40,25 +40,15 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
         }}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
-        style={(theme) => ({
-          cursor: 'grab',
-          margin: '0 -0.16px',
-          opacity: 0.5,
-          padding: '2px',
-          transition: 'opacity 100ms ease-in-out',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            opacity: 1,
-          },
-          '&:active': {
-            cursor: 'grabbing',
-          },
-          // ...styleValue(actionIconProps, theme),
-        })}
+        className={clsx(
+          'mrt-grab-handle-button',
+          classes.root,
+          actionIconProps?.className,
+        )}
         title={undefined}
       >
         <IconGripHorizontal />
-      </ActionIcon>
+      </MRT_ActionIcon>
     </Tooltip>
   );
 };

From 16a53bb10fdce01adace89d59bb388d6d05b755e Mon Sep 17 00:00:00 2001
From: Patrick Naughton <patrickjnaughton@gmail.com>
Date: Fri, 29 Sep 2023 11:12:16 -0700
Subject: [PATCH 5/6] final button

---
 .../src/buttons/MRT_ActionIcon.module.css      |  4 ++++
 .../MRT_ToggleRowActionMenuButton.module.css   | 10 ----------
 .../buttons/MRT_ToggleRowActionMenuButton.tsx  | 18 ++++++++----------
 3 files changed, 12 insertions(+), 20 deletions(-)
 delete mode 100644 packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.module.css

diff --git a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css
index f670e66a6..ceabf7ad8 100644
--- a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css
+++ b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css
@@ -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_ToggleRowActionMenuButton.module.css b/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.module.css
deleted file mode 100644
index 3fc6351ed..000000000
--- a/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.MRT_ToggleRowActionMenuButton {
-  opacity: 0.8;
-  &:hover {
-    opacity: 1;
-  }
-  &:disabled {
-    background-color: transparent;
-    border: none;
-  }
-}
diff --git a/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx
index d9967d7e9..f30b9e728 100644
--- a/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx
+++ b/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx
@@ -1,11 +1,11 @@
 import { type MouseEvent } from 'react';
-import { ActionIcon, Tooltip } from '@mantine/core';
+import { Tooltip } from '@mantine/core';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
 
-import classes from './MRT_ToggleRowActionMenuButton.module.css';
+import { MRT_ActionIcon } from './MRT_ActionIcon';
 
 interface Props<TData extends Record<string, any> = {}> {
   cell: MRT_Cell<TData>;
@@ -27,7 +27,7 @@ export const MRT_ToggleRowActionMenuButton = <
       editDisplayMode,
       enableEditing,
       icons: { IconEdit },
-      localization,
+      localization: { edit },
       renderRowActionMenuItems,
       renderRowActions,
     },
@@ -56,17 +56,15 @@ export const MRT_ToggleRowActionMenuButton = <
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
         parseFromValuesOrFunc(enableEditing, row) ? (
-        <Tooltip withinPortal position="right" label={localization.edit}>
-          <ActionIcon
-            aria-label={localization.edit}
-            className={classes.MRT_ToggleRowActionMenuButton}
-            color="gray"
+        <Tooltip withinPortal position="right" label={edit}>
+          <MRT_ActionIcon
+            aria-label={edit}
             disabled={!!editingRow && editingRow.id !== row.id}
             onClick={handleStartEditMode}
-            variant="transparent"
+            size="md"
           >
             <IconEdit />
-          </ActionIcon>
+          </MRT_ActionIcon>
         </Tooltip>
       ) : renderRowActionMenuItems ? (
         <MRT_RowActionMenu

From 65ff13362675a309b8665c6c01f0322c7c936f6d Mon Sep 17 00:00:00 2001
From: Patrick Naughton <patrickjnaughton@gmail.com>
Date: Fri, 29 Sep 2023 11:14:14 -0700
Subject: [PATCH 6/6] standardize on .root

---
 .../src/buttons/MRT_CopyButton.module.css              |  2 +-
 .../mantine-react-table/src/buttons/MRT_CopyButton.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css b/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
index bd2f1802e..665d0fde7 100644
--- a/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
+++ b/packages/mantine-react-table/src/buttons/MRT_CopyButton.module.css
@@ -1,4 +1,4 @@
-.button {
+.root {
   background-color: transparent;
   border: none;
   border-radius: 4px;
diff --git a/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx b/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx
index cfb63ce3e..dfc1dd658 100644
--- a/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx
+++ b/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx
@@ -18,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;
@@ -37,15 +40,14 @@ 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}
             className={clsx(
               'mrt-copy-button',
-              classes.button,
+              classes.root,
               buttonProps?.className,
             )}
             style={(theme) => ({