playbook_ui 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9195 → 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9290

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b96d3a0381d1287381a4e4710195c3de301ad5111d253b7696bcc924ee07d64b
-  data.tar.gz: a7edecaa9a5b25b1ade245fcc75f676b81afba59a1854de383e21455a59cd457
+  metadata.gz: ec6e22d146bd1ff341e56765b3e1560989c9764ac462948b960e1192750b2d43
+  data.tar.gz: 21ec675f83a591ace91910d47d2a6c6302384b208dac33ee0d38b6ac4fc80ec6
 SHA512:
-  metadata.gz: 423154dcdaf011bd7a264a4d8c99a8c39325369b06f1ff532b8441560efec2d5e160cd71280cc5666fa2cdf5dea1e442c434c7352fd940d148f83c346c3cda03
-  data.tar.gz: 29ed4759baa9ed51cc06f4aa1dc98996b9fed1ccb2b4da994be9cc4ef68055300cc19048751b7e8615a24ae9fd7930d129df8a60fc74ea02241b3213e0737b30
+  metadata.gz: 82a316c9f93430aab135a5ed1cd7dd71f451a3d0886f1507911e9d0d995a83b69e128fb89544d568d65185357999dc8ff0a183c75ba9f9ea6f6d79338ee390df
+  data.tar.gz: e5c123abef4b47a1179c95032a11cba418f63880a67823f33dec64805f1b585b64cd95951e5eaafb6bd377646e41149ff01a009cbf9cfd56123740bafe7088d7

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;
@@ -1162,6 +962,76 @@
       }
     }
   }
+
+  // Firefox-specific fix for last-header-cell and last-cell vertical borders
+  @-moz-document url-prefix() {
+    .pb_advanced_table_header {
+      .last-header-cell {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+
+    .pb_advanced_table_body {
+      .last-cell {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+
+    // Handle the custom column border colors for last cells in Firefox
+    &[class*="column-group-border-"] {
+      .pb_advanced_table_header {
+        .last-header-cell{
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        .last-cell,
+        tr.virtualized-table-row .last-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+    }
+
+    // Dark mode Firefox fixes
+    &.dark {
+      .pb_advanced_table_header {
+        .last-header-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        .last-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+      }
+
+      // Handle the custom column border colors for last cells in dark mode Firefox
+      &[class*="column-group-border-"] {
+        .pb_advanced_table_header {
+          .last-header-cell {
+            border-right: none !important;
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+
+        .pb_advanced_table_body {
+          .last-cell,
+          tr.virtualized-table-row .last-cell {
+            border-right: none !important;
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+      }
+    }
+  }
 }
 
 // Outside of the pb_advanced_table class for popover

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;
       }
     }
   }

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -134,6 +134,10 @@ const Pagination = ( props: PaginationProps) => {
     className
   )
 
+  if (total <= 1) {
+    return null;
+  }
+
   return (
     <div 
         {...ariaProps}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md

@@ -3,4 +3,6 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+
+Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -1 +1,3 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+
+Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -7,7 +7,7 @@
     thead tr:not(:first-child) th {
       border-right: 1px solid $border_light !important;
     }
-    
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -15,5 +15,53 @@
         }
       }
     }
+
+    // Firefox-specific fix for sticky elements
+    @-moz-document url-prefix() {
+      // Target sticky headers
+      &.sticky-header {
+        th:not(:last-child) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+
+        .pb_advanced_table_body {
+          .pinned-row {
+            td:not(:first-child):not(:last-child) {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 $border_light !important;
+            }
+          }
+        }
+      }
+
+      // Target sticky left columns
+      &.sticky-left-column {
+        td[style="left"], th[style="left"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Target sticky right columns
+      &.sticky-right-column {
+        td[style="right"], th[style="right"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Handle hover states in Firefox
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            &[style="left"], &[style="right"] {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
+            }
+          }
+        }
+      }
+    }
   }
 }