table head cell styles cleanup

KevinVandy · Feb 7, 2024 · b5bad43 · b5bad43
1 parent 44300be
commit b5bad43
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 185 deletions.
diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css
@@ -12,7 +12,7 @@
       var(--mantine-color-white),
       var(--mantine-color-dark-7)
     );
-    opacity: 0.98;
+    opacity: 0.97;
     position: sticky;
     z-index: 1;
 
@@ -52,7 +52,7 @@
     z-index: 2;
     border-left: var(--drag-thickness) dashed var(--drag-color);
     border-right: var(--drag-thickness) dashed var(--drag-color);
-    &.last-row {
+    &[data-last-row] {
       border-bottom: var(--drag-thickness) dashed var(--drag-color);
     }
   }
@@ -61,7 +61,7 @@
     opacity: 0.5;
     border-left: var(--hover-thickness) dashed var(--hover-color);
     border-right: var(--hover-thickness) dashed var(--hover-color);
-    &.last-row {
+    &[data-last-row] {
       border-bottom: var(--hover-thickness) dashed var(--hover-color);
     }
   }

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -48,7 +48,7 @@ interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
   isStriped,
-  numRows,
+  numRows = 1,
   renderedColumnIndex = 0,
   renderedRowIndex = 0,
   rowRef,
@@ -206,6 +206,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       data-last-left-pinned={
         getIsLastLeftPinnedColumn(table, column) || undefined
       }
+      data-last-row={renderedRowIndex === numRows - 1 || undefined}
       data-resizing={
         (columnResizeMode === 'onChange' &&
           columnSizingInfo?.isResizingColumn === column.id &&

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.module.css b/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.module.css
@@ -1,41 +1,13 @@
 .root {
   --hover-color: var(--mantine-primary-color-filled);
   --drag-color: var(--mantine-color-gray-7);
-  --hover-thickness: 2px;
+  --hover-thickness: 3px;
   --drag-thickness: 1px;
 
   box-sizing: border-box;
   transition: all 150ms ease-in-out;
   width: 100%;
 
-  &[data-dragging-row] {
-    opacity: 0.5;
-    td {
-      border-bottom: var(--drag-thickness) dashed var(--drag-color);
-      border-top: var(--drag-thickness) dashed var(--drag-color);
-      &:first-child {
-        border-left: var(--drag-thickness) dashed var(--drag-color);
-      }
-      &:last-child {
-        border-right: var(--drag-thickness) dashed var(--drag-color);
-      }
-    }
-  }
-
-  &[data-hovered-row-target] {
-    td {
-      opacity: 0.5;
-      border-top: var(--hover-thickness) dashed var(--hover-color);
-      border-bottom: var(--hover-thickness) dashed var(--hover-color);
-      &:first-child {
-        border-left: var(--hover-thickness) dashed var(--hover-color);
-      }
-      &:last-child {
-        border-right: var(--hover-thickness) dashed var(--hover-color);
-      }
-    }
-  }
-
   &[data-selected] {
     background-color: var(--mantine-primary-color-light);
 
@@ -110,6 +82,34 @@
       }
     }
   }
+
+  &[data-dragging-row] {
+    opacity: 0.5;
+    border-bottom: var(--drag-thickness) dashed var(--drag-color);
+    border-top: var(--drag-thickness) dashed var(--drag-color);
+    td {
+      &:first-child {
+        border-left: var(--drag-thickness) dashed var(--drag-color);
+      }
+      &:last-child {
+        border-right: var(--drag-thickness) dashed var(--drag-color);
+      }
+    }
+  }
+
+  &[data-hovered-row-target] {
+    td {
+      opacity: 0.5;
+      border-top: var(--hover-thickness) dashed var(--hover-color);
+      border-bottom: var(--hover-thickness) dashed var(--hover-color);
+      &:first-child {
+        border-left: var(--hover-thickness) dashed var(--hover-color);
+      }
+      &:last-child {
+        border-right: var(--hover-thickness) dashed var(--hover-color);
+      }
+    }
+  }
 }
 
 .root-grid {

diff --git a/packages/mantine-react-table/src/components/footer/MRT_TableFooterCell.tsx b/packages/mantine-react-table/src/components/footer/MRT_TableFooterCell.tsx
@@ -61,8 +61,8 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   return (
     <TableTh
       colSpan={footer.colSpan}
+      data-column-pinned={!!isColumnPinned || undefined}
       data-index={renderedColumnIndex}
-      data-pinned={!!isColumnPinned || undefined}
       {...tableCellProps}
       __vars={{
         '--mrt-align':

diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css
@@ -3,28 +3,82 @@
   --hover-color: var(--mantine-primary-color-filled);
   --drag-color: var(--mantine-color-gray-7);
   --resize-thickness: 2px;
-  --hover-thickness: 2px;
+  --hover-thickness: 3px;
   --drag-thickness: 1px;
 
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-7)
+  );
   background-clip: padding-box;
-  transition: padding 150ms ease-in-out;
   font-weight: bold;
   overflow: visible;
-  padding: calc(var(--mrt-table-head-cell-padding) * 1px);
   padding-bottom: calc(var(--mrt-table-head-cell-padding) * 2 / 3 * 1px);
+  padding: calc(var(--mrt-table-head-cell-padding) * 1px);
+  position: relative;
+  transition: padding 150ms ease-in-out;
   vertical-align: top;
-  z-index: var(--mrt-table-head-cell-z-index);
+  z-index: 1;
+
+  &[data-column-pinned] {
+    background-color: light-dark(
+      var(--mantine-color-white),
+      var(--mantine-color-dark-7)
+    );
+    opacity: 0.97;
+    position: sticky;
+    z-index: 2;
+    &[data-column-pinned='left'] {
+      left: calc(var(--mrt-table-cell-left, 0) * 1px);
+      &[data-last-left-pinned] {
+        box-shadow: -4px 0 4px -4px light-dark(
+            var(--mantine-color-gray-outline),
+            var(--mantine-color-dark-outline)
+          ) inset;
+      }
+    }
+    &[data-column-pinned='right'] {
+      right: calc(var(--mrt-table-cell-right, 0) * 1px);
+      &[data-first-right-pinned] {
+        box-shadow: 4px 0 4px -4px light-dark(
+            var(--mantine-color-gray-outline),
+            var(--mantine-color-dark-outline)
+          ) inset;
+      }
+    }
+  }
 
-  background-color: light-dark(
-    var(--mantine-color-white),
-    var(--mantine-color-dark-7)
-  );
+  &[data-resizing] {
+    z-index: 3;
+    &[data-resizing='ltr'] {
+      border-right: var(--resize-thickness) solid var(--resize-border-color);
+    }
+    &[data-resizing='rtl'] {
+      border-left: var(--resize-thickness) solid var(--resize-border-color);
+    }
+  }
 
-  :global(.mantine-ActionIcon-root) {
+  &[data-dragging-column] {
+    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);
     opacity: 0.5;
+    z-index: 3;
+  }
+
+  &[data-hovered-column-target] {
+    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);
+    z-index: 2;
   }
 
-  @mixin hover {
+  :global(.mantine-ActionIcon-root) {
+    opacity: 0.7;
+    transition: opacity 100ms ease-in-out;
+  }
+
+  &:hover {
     :global(.mantine-ActionIcon-root) {
       opacity: 1;
     }
@@ -44,58 +98,6 @@
   user-select: none;
 }
 
-.root-pinned {
-  position: sticky;
-  background-color: light-dark(
-    var(--mantine-color-white),
-    var(--mantine-color-dark-7)
-  );
-}
-
-.root-pinned-left {
-  left: calc(var(--mrt-table-cell-left, 0) * 1px);
-}
-
-.root-pinned-right {
-  right: calc(var(--mrt-table-cell-right, 0) * 1px);
-}
-
-.root-pinned-left-last {
-  box-shadow: -4px 0 4px -4px light-dark(
-      var(--mantine-color-gray-outline),
-      var(--mantine-color-dark-outline)
-    ) inset;
-}
-
-.root-pinned-right-first {
-  box-shadow: 4px 0 4px -4px light-dark(
-      var(--mantine-color-gray-outline),
-      var(--mantine-color-dark-outline)
-    ) inset;
-}
-
-.resizing-ltr {
-  border-right: var(--resize-thickness) solid var(--resize-border-color);
-}
-
-.resizing-rtl {
-  border-left: var(--resize-thickness) solid var(--resize-border-color);
-}
-
-.dragging {
-  opacity: 0.5;
-  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: 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 {
   align-items: center;
   justify-content: flex-start;