remove !important from drag/hover

don't do hover on the dragged row/col (noop)
KevinVandy · Oct 11, 2023 · 3e9beeb · 3e9beeb
1 parent 6d7118c
commit 3e9beeb
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 27 deletions.
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.module.css b/packages/mantine-react-table/src/body/MRT_TableBodyCell.module.css
@@ -94,42 +94,42 @@
 
 .dragging-column {
   z-index: 2;
-  border-left: var(--drag-thickness) dashed var(--drag-color) !important;
-  border-right: var(--drag-thickness) dashed var(--drag-color) !important;
+  border-left: var(--drag-thickness) dashed var(--drag-color);
+  border-right: var(--drag-thickness) dashed var(--drag-color);
   &.last-row {
-    border-bottom: var(--drag-thickness) dashed var(--drag-color) !important;
+    border-bottom: var(--drag-thickness) dashed var(--drag-color);
   }
 }
 
 .hovered-column {
   opacity: 0.5;
-  border-left: var(--hover-thickness) dashed var(--hover-color) !important;
-  border-right: var(--hover-thickness) dashed var(--hover-color) !important;
+  border-left: var(--hover-thickness) dashed var(--hover-color);
+  border-right: var(--hover-thickness) dashed var(--hover-color);
   &.last-row {
-    border-bottom: var(--hover-thickness) dashed var(--hover-color) !important;
+    border-bottom: var(--hover-thickness) dashed var(--hover-color);
   }
 }
 
 .dragging-row {
   z-index: 2;
-  border-top: var(--drag-thickness) dashed var(--drag-color) !important;
-  border-bottom: var(--drag-thickness) dashed var(--drag-color) !important;
+  border-top: var(--drag-thickness) dashed var(--drag-color);
+  border-bottom: var(--drag-thickness) dashed var(--drag-color);
   &.last-column {
-    border-right: var(--drag-thickness) dashed var(--drag-color) !important;
+    border-right: var(--drag-thickness) dashed var(--drag-color);
   }
   &.first-column {
-    border-left: var(--drag-thickness) dashed var(--drag-color) !important;
+    border-left: var(--drag-thickness) dashed var(--drag-color);
   }
 }
 
 .hovered-row {
   opacity: 0.5;
-  border-top: var(--hover-thickness) dashed var(--hover-color) !important;
-  border-bottom: var(--hover-thickness) dashed var(--hover-color) !important;
+  border-top: var(--hover-thickness) dashed var(--hover-color);
+  border-bottom: var(--hover-thickness) dashed var(--hover-color);
   &.last-column {
-    border-right: var(--hover-thickness) dashed var(--hover-color) !important;
+    border-right: var(--hover-thickness) dashed var(--hover-color);
   }
   &.first-column {
-    border-left: var(--hover-thickness) dashed var(--hover-color) !important;
+    border-left: var(--hover-thickness) dashed var(--hover-color);
   }
 }
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -228,12 +228,16 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
         columnDefType === 'data' && classes['root-data-col'],
         density === 'xs' && classes['root-nowrap'],
         draggingColumn?.id === column.id && classes['dragging-column'],
-        hoveredColumn?.id === column.id && classes['hovered-column'],
+        draggingColumn?.id !== column.id &&
+          hoveredColumn?.id === column.id &&
+          classes['hovered-column'],
         draggingRow?.id === row.id && classes['dragging-row'],
-        hoveredRow?.id === row.id && classes['hovered-row'],
+        draggingRow?.id !== row.id &&
+          hoveredRow?.id === row.id &&
+          classes['hovered-row'],
         getIsFirstColumn(column, table) && classes['first-column'],
         getIsLastColumn(column, table) && classes['last-column'],
-        rowIndex === numRows && numRows - 1 && classes['last-row'],
+        numRows && rowIndex === numRows - 1 && classes['last-row'],
         rowIndex === 0 && classes['first-row'],
         tableCellProps?.className,
       )}

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.module.css b/packages/mantine-react-table/src/head/MRT_TableHeadCell.module.css
@@ -13,7 +13,7 @@
   );
 
   @mixin hover {
-    .mantine-ActionIcon-root {
+    :global(.mantine-ActionIcon-root) {
       opacity: 1;
     }
   }
@@ -62,18 +62,25 @@
     ) inset;
 }
 
+:root {
+  --hover-color: var(--mantine-primary-color-filled);
+  --drag-color: var(--mantine-color-gray-7);
+  --hover-thickness: 2px;
+  --drag-thickness: 1px;
+}
+
 .dragging {
   opacity: 0.5;
-  border-left: 1px dashed var(--mantine-color-gray-7) !important;
-  border-right: 1px dashed var(--mantine-color-gray-7) !important;
-  border-top: 1px dashed var(--mantine-color-gray-7) !important;
+  border-left: var(--drag-thickness) dashed var(--drag-color);
+  border-right: var(--drag-thickness) dashed var(--drag-color);
+  border-top: var(--drag-thickness) dashed var(--drag-color);
 }
 
 .hovered {
   z-index: 2;
-  border-left: 2px dashed var(--mantine-primary-color-filled) !important;
-  border-right: 2px dashed var(--mantine-primary-color-filled) !important;
-  border-top: 2px dashed var(--mantine-primary-color-filled) !important;
+  border-left: var(--hover-thickness) dashed var(--hover-color);
+  border-right: var(--hover-thickness) dashed var(--hover-color);
+  border-top: var(--hover-thickness) dashed var(--hover-color);
 }
 
 .content {

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx
@@ -157,7 +157,9 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
           classes['root-pinned-right-first'],
         tableCellProps?.className,
         draggingColumn?.id === column.id && classes['dragging'],
-        hoveredColumn?.id === column.id && classes['hovered'],
+        draggingColumn?.id !== column.id &&
+          hoveredColumn?.id === column.id &&
+          classes['hovered'],
       )}
       style={(theme) => ({
         ...parseFromValuesOrFunc(tableCellProps?.style, theme),

diff --git a/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.module.css b/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.module.css
@@ -12,11 +12,11 @@
     min-width: rem(100px);
   }
   width: 100%;
-  & .mantine-TextInput-input {
+  & :global(.mantine-TextInput-input) {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  & .mantine-DateInput-input {
+  & :global(.mantine-DateInput-input) {
     height: 2.1rem;
   }
 }