playbook_ui 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9195 → 14.23.0.pre.alpha.PLAY2330removewalkthrough9176

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b96d3a0381d1287381a4e4710195c3de301ad5111d253b7696bcc924ee07d64b
-  data.tar.gz: a7edecaa9a5b25b1ade245fcc75f676b81afba59a1854de383e21455a59cd457
+  metadata.gz: 02efd0660039e5a7b7feded3c762b0512229efd0969763d72c4dbb9ad6b67dfb
+  data.tar.gz: 17a35b1f152c7c57ec490d5eaddb4cebf2ee8216d8403d62e3d0dab6f3ba12f6
 SHA512:
-  metadata.gz: 423154dcdaf011bd7a264a4d8c99a8c39325369b06f1ff532b8441560efec2d5e160cd71280cc5666fa2cdf5dea1e442c434c7352fd940d148f83c346c3cda03
-  data.tar.gz: 29ed4759baa9ed51cc06f4aa1dc98996b9fed1ccb2b4da994be9cc4ef68055300cc19048751b7e8615a24ae9fd7930d129df8a60fc74ea02241b3213e0737b30
+  metadata.gz: abfa3c42375a34b984b331b3fc0d28a814355dd6b4f4f995b156c67683b7a834ebae444a89db79e15a1ab06f3e45ab33720555b0235fea24537921c79a4c90d4
+  data.tar.gz: cc20c9590ab8471770c406898fe93aabdd9aaa9bc94e228579d49b1aa13a95fac4b9a95ee1b64ec4495be940b52060e67c6d1f3def412299b5ec743202691088

data/app/pb_kits/playbook/_playbook.scss

@@ -107,7 +107,6 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -593,115 +593,6 @@
     }
   }
 
-  // Ensure vertical borders work with non-container tables
-  .pb_table:not(.table-card) {
-    &.vertical-border {
-      // Sticky header with vertical borders
-      &.sticky-header {
-        thead th:not(:last-child) {
-          border-right: 1px solid $border_light !important;
-        }
-      }
-
-      // Regular table cells with vertical borders
-      td:not(:last-child),
-      th:not(:last-child),
-      .pb_table_td:not(:last-child),
-      .pb_table_th:not(:last-child) {
-        border-right: 1px solid $border_light !important;
-      }
-    }
-  }
-
-  // Pinned rows should maintain vertical borders regardless of container prop
-  .pinned-row {
-    position: sticky !important;
-    z-index: 2 !important;
-
-    &.pb_table_tr,
-    tr {
-      // Apply right border to ALL cells including last one when verticalBorder is true
-      td,
-      .pb_table_td {
-        border-right: 1px solid var(--column-border-color, $border_light) !important;
-      }
-    }
-  }
-
-  // Specific fixes for vertical borders with sticky elements
-  .pb_table.vertical-border {
-
-    &.sticky-header {
-      thead th {
-        border-right: 1px solid $border_light !important;
-        border-left: none !important;
-        border-top: none !important;
-      }
-    }
-
-    .pinned-row {
-      td,
-      .pb_table_td {
-        border-right: 1px solid var(--column-border-color, $border_light) !important;
-        border-left: none !important;
-        border-top: none !important;
-      }
-    }
-
-    // Ensure non-container tables don't get unwanted borders
-    &:not(.table-card) {
-      thead th,
-      td,
-      .pb_table_td {
-        border-left: none !important;
-        border-top: none !important;
-      }
-    }
-  }
-
-  // Firefox-specific
-  @-moz-document url-prefix() {
-    .pb_table.vertical-border {
-
-      &.sticky-header {
-        thead th {
-          border: none !important;
-          // Use box-shadow for both right border AND bottom border
-          box-shadow:
-            inset -1px 0 0 0 $border_light,     // Right border
-            inset 0 -1px 0 0 $border_light !important;  // Bottom border
-        }
-      }
-
-      .pinned-row {
-        td,
-        .pb_table_td {
-          border: none !important;
-          // Use box-shadow for right border on ALL cells including last
-          box-shadow: inset -1px 0 0 0 var(--column-border-color, $border_light) !important;
-        }
-      }
-
-      // Override regular table cells to use consistent border method
-      &:not(.table-card) {
-        td:not(.pinned-row td),
-        .pb_table_td:not(.pinned-row .pb_table_td) {
-          // Remove conflicting borders and use box-shadow instead
-          border-right: none !important;
-          border-left: none !important;
-          border-top: none !important;
-          // Apply consistent right border using box-shadow
-          box-shadow: inset -1px 0 0 0 $border_light !important;
-        }
-      }
-
-      // Override the original left border shadow from main style, but keep other shadows
-      .pb_table_td:nth-child(2) {
-        box-shadow: none !important;
-      }
-    }
-  }
-
   @include chrome_styles($border-color);
 
   tr:hover {
@@ -881,102 +772,11 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
-    // Dark mode adjustments for non-container tables
-    .pb_table:not(.table-card) {
-      &.vertical-border {
-        &.sticky-header {
-          thead th:not(:last-child) {
-            border-right: 1px solid $border_dark !important;
-          }
-        }
-
-        td:not(:last-child),
-        th:not(:last-child),
-        .pb_table_td:not(:last-child),
-        .pb_table_th:not(:last-child) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-    }
-
-    // Dark mode pinned rows
-    .pinned-row {
-      &.pb_table_tr,
-      tr {
-        // Apply right border to ALL cells including last one in dark mode
-        td,
-        .pb_table_td {
-          border-right: 1px solid var(--column-border-color, $border_dark) !important;
-        }
-      }
-    }
-
-    // Dark mode browser-specific fixes
-    .pb_table.vertical-border {
-      &.sticky-header {
-        thead th {
-          border-right: 1px solid $border_dark !important;
-          border-left: none !important;
-          border-top: none !important;
-        }
-      }
-
-      .pinned-row {
-        td,
-        .pb_table_td {
-          border-right: 1px solid var(--column-border-color, $border_dark) !important;
-          border-left: none !important;
-          border-top: none !important;
-        }
-      }
-    }
-
-    // Dark mode Firefox
-    @-moz-document url-prefix() {
-      .pb_table.vertical-border {
-
-        &.sticky-header {
-          thead th {
-            border: none !important;
-            // Use box-shadow for both right border AND bottom border
-            box-shadow:
-              inset -1px 0 0 0 $border_dark,     // Right border
-              inset 0 -1px 0 0 $border_dark !important;  // Bottom border
-          }
-        }
-
-        .pinned-row {
-          td,
-          .pb_table_td {
-            border: none !important;
-            // Use box-shadow for right border on ALL cells including last
-            box-shadow: inset -1px 0 0 0 var(--column-border-color, $border_dark) !important;
-          }
-        }
-
-        // Override regular table cells to use consistent border method in dark mode
-        &:not(.table-card) {
-          td:not(.pinned-row td),
-          .pb_table_td:not(.pinned-row .pb_table_td) {
-            // Remove conflicting borders and use box-shadow instead
-            border-right: none !important;
-            border-left: none !important;
-            border-top: none !important;
-            // Apply consistent right border using box-shadow
-            box-shadow: inset -1px 0 0 0 $border_dark !important;
-          }
-        }
-
-        // Override the original left border shadow from main CSS, but keep other shadows
-        .pb_table_td:nth-child(2) {
-          box-shadow: none !important;
-        }
-      }
-    }
-
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
+      // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
       .pb_advanced_table_header {
+        // The main column group headers - NOT the last column
         > tr:first-child {
           th[colspan]:not([colspan="1"]):not(:last-child) {
             border-right: 1px solid var(--column-border-color) !important;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -44,7 +44,7 @@ const AdvancedTableRowPinning = (props) => {
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
           tableData={MOCK_DATA}
-          tableProps={{sticky: true, verticalBorder: true, container: false}}
+          tableProps={{sticky: true}}
           {...props}
       >
         <AdvancedTable.Header enableSorting />

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -8,31 +8,27 @@
   border-radius: 4px;
   box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
-
-  // Handle both table-card and non-table-card cases
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card tbody tr td:first-child,
-  [class^="pb_table"].table-sm:not(.table-card) thead tr th:first-child,
-  [class^="pb_table"].table-sm:not(.no-hover):not(.table-card) tbody tr td:first-child {
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:first-child {
     border-left-width: 0px !important;
   }
-
   [class^="pb_table"].table-sm.table-card thead tr th:last-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card tbody tr td:last-child,
-  [class^="pb_table"].table-sm:not(.table-card) thead tr th:last-child,
-  [class^="pb_table"].table-sm:not(.no-hover):not(.table-card) tbody tr td:last-child {
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:last-child {
     border-right-width: 0px;
   }
-
   [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
-  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child,
-  [class^="pb_table"].table-sm:not(.table-card) tbody tr:last-child td:first-child,
-  [class^="pb_table"].table-sm:not(.table-card) tbody tr:last-child td:last-child {
+  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
     border-radius: 0 0 0 0;
   }
-
-  // Only apply sticky positioning to specific elements
   .table-header-cells:first-child,
+  td:first-child,
+  .pb_table_td:first-child,
   .checkbox-cell.checkbox-cell-header:first-child,
   .table-header-cells.sticky-left,
   [class*="pinned-left"] {
@@ -43,87 +39,35 @@
     z-index: 2;
   }
 
-  // Only apply to pinned rows
-  .pinned-row {
-    td:first-child,
-    .pb_table_td:first-child {
-      background-color: $bg-main;
-      box-shadow: $shadow_deep !important;
-      position: sticky !important;
-      left: 0;
-      z-index: 3; // Higher z-index for pinned rows
-    }
-  }
-
-  // For tables with verticalBorder, ensure sticky elements maintain their borders
-  [class^="pb_table"].vertical-border {
-    .table-header-cells:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child,
-    .table-header-cells.sticky-left {
-      // Maintain right border for vertical border styling when sticky
-      &:not(:last-child) {
-        border-right: 1px solid $border-color !important;
-      }
-    }
-
-    // Ensure pinned rows maintain vertical borders
-    .pinned-row {
-      td:not(:last-child),
-      .pb_table_td:not(:last-child) {
-        border-right: 1px solid $border-color !important;
-      }
-    }
-
-    // Handle sticky header with vertical borders
-    &.sticky-header thead th {
-      &:not(:last-child) {
-        border-right: 1px solid $border-color !important;
-      }
-    }
-  }
-
   .bg-silver {
-    .table-header-cells:first-child,
-    .pinned-row td:first-child,
-    .pinned-row .pb_table_td:first-child,
+    td:first-child,
     .sticky-left {
       background-color: $bg-secondary;
     }
   }
-
   .bg-row-selection {
-    .table-header-cells:first-child,
-    .pinned-row td:first-child,
-    .pinned-row .pb_table_td:first-child,
+    td:first-child,
     .sticky-left {
       background-color: $highlight;
     }
   }
 
   .bg-white {
-    .table-header-cells:first-child,
-    .pinned-row td:first-child,
-    .pinned-row .pb_table_td:first-child,
+    td:first-child,
     .sticky-left {
       background-color: $bg-main;
     }
   }
 
   .virtualized-table-row {
-    &.bg-silver {
-      &.pinned-row td:first-child {
-        background-color: $bg-secondary;
-      }
+    &.bg-silver td:first-child {
+      background-color: $bg-secondary;
     }
-    &.bg-white {
-      &.pinned-row td:first-child {
-        background-color: $bg-main;
-      }
+    &.bg-white td:first-child {
+      background-color: $bg-main;
     }
-    &.bg-row-selection {
-      &.pinned-row td:first-child {
-        background-color: $highlight;
-      }
+    &.bg-row-selection td:first-child {
+      background-color: $highlight;
     }
   }
 
@@ -161,17 +105,14 @@
 
   &.dark {
     .bg-row-selection {
-      .pinned-row td:first-child,
-      .pinned-row .pb_table_td:first-child,
+      td:first-child,
       .sticky-left {
         background-color: $highlight-dark;
       }
     }
     .virtualized-table-row {
-      &.bg-row-selection {
-        &.pinned-row td:first-child {
-          background-color: $highlight-dark;
-        }
+      &.bg-row-selection td:first-child {
+        background-color: $highlight-dark;
       }
     }
   }