Fix Grid cell border styling inconsistencies (#3501)

* Fix `Grid` cell border styling inconsistencies * Co-dev with Tom
xh · Oct 17, 2023 · 710543b · 710543b
1 parent 1c71546
commit 710543b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ to their respective properties on `Cube`.
   * Fix bug in `DockContainer` where adding / removing views would cause other views to be remounted
 * Fix erroneous `GridModel` warning when using a tree column within a column group
 * Fix regression to alert banners. Resume allowing elements as messages
+* Fix `Grid` cell border styling inconsistencies
 
 ### ⚙️ Typescript API Adjustments
 

diff --git a/cmp/ag-grid/AgGrid.scss b/cmp/ag-grid/AgGrid.scss
@@ -9,8 +9,8 @@
   border-#{$side}: var(--xh-border-solid);
 }
 
-@mixin pinned-border {
-  border-right: 1px solid var(--xh-grid-pinned-column-border-color);
+@mixin pinned-border($side) {
+  border-#{$side}: 1px solid var(--xh-grid-pinned-column-border-color);
 }
 
 // Ag-grid installs an outer div around itself.
@@ -128,16 +128,17 @@
   }
 
   &--no-row-borders {
-    .ag-row {
+    .ag-row,
+    .ag-cell {
       border-bottom: none;
       border-top: none;
+    }
 
-      // Deliberately keep border on full-width grouped rows even when we aren't adding row borders.
-      // Without this collapsed groups (which don't stripe) blend together in a solid block.
-      &.ag-row-group.ag-full-width-row {
-        border-bottom: 1px solid var(--xh-grid-group-border-color);
-        border-top: 1px solid var(--xh-grid-group-border-color);
-      }
+    // Deliberately keep border on full-width grouped rows even when we aren't adding row borders.
+    // Without this collapsed groups (which don't stripe) blend together in a solid block.
+    .ag-row.ag-row-group.ag-full-width-row {
+      border-bottom: 1px solid var(--xh-grid-group-border-color);
+      border-top: 1px solid var(--xh-grid-group-border-color);
     }
   }
 
@@ -197,8 +198,14 @@
     }
   }
 
-  .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-focus) {
-    @include pinned-border;
+  .ag-cell {
+    &.ag-cell-last-left-pinned:not(.ag-cell-focus) {
+      @include pinned-border(right);
+    }
+
+    &.ag-cell-first-right-pinned:not(.ag-cell-focus) {
+      @include pinned-border(left);
+    }
   }
 
   // We use flexbox to consistently vertically center cell contents across
@@ -237,33 +244,52 @@
   &--no-cell-borders {
     .ag-cell,
     .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected) {
-      border: none;
+      // Preserve left and right borders to avoid jumpiness upon cell focus
+      border-top: none;
+      border-bottom: none;
+      border-left-color: transparent;
+      border-right-color: transparent;
     }
   }
 
   // Cell focus
   &--no-cell-focus {
+    // Preserve cell borders when enabled upon "invisible" cell focus
+    &.xh-ag-grid--cell-borders .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected) {
+      border-right-color: var(--xh-grid-border-color);
+    }
+
     .ag-has-focus {
       .ag-cell-focus:not(.ag-cell-range-selected) {
-        border: none;
-
-        &.ag-cell.ag-cell-last-left-pinned {
-          @include pinned-border;
-        }
-
-        &.ag-cell.xh-cell--group-border-left {
-          @include group-border(left);
-        }
-
-        &.ag-cell.xh-cell--group-border-right {
-          @include group-border(right);
+        // Preserve left and right borders to avoid jumpiness upon cell focus
+        border-top: none;
+        border-bottom: none;
+        border-left-color: transparent;
+        border-right-color: transparent;
+
+        &.ag-cell {
+          &.ag-cell-last-left-pinned {
+            @include pinned-border(right);
+          }
+
+          &.ag-cell-first-right-pinned {
+            @include pinned-border(left);
+          }
+
+          &.xh-cell--group-border-left {
+            @include group-border(left);
+          }
+
+          &.xh-cell--group-border-right {
+            @include group-border(right);
+          }
         }
       }
     }
   }
 
   &--show-cell-focus {
-    .ag-cell-focus {
+    .ag-cell-focus:focus-within {
       border-color: var(--xh-grid-cell-focus-border-color) !important;
     }
   }