playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

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

@@ -7,10 +7,32 @@
 @import "./scss_partials/chrome_styles";
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
+@import "../tokens/positioning";
+@import "./scss_partials/advanced_table_sticky_mixin";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
 
+  // Base vertical border color variable setup
+  --column-border-color: #{$border_light};
+
+  // Define color tokens once
+  $border_color_options: (
+    "text_lt_default": $text_lt_default,
+    "text_lt_light": $text_lt_light,
+    "text_lt_lighter": $text_lt_lighter,
+    "text_dk_default": $text_dk_default,
+    "text_dk_light": $text_dk_light,
+    "text_dk_lighter": $text_dk_lighter
+  );
+
+  // Generate classes for each color option
+  @each $color_name, $color_value in $border_color_options {
+    &.column-group-border-#{$color_name} {
+      --column-border-color: #{$color_value};
+    }
+  }
+
   [id$="-span"] {
     word-wrap: normal;
   }
@@ -92,8 +114,8 @@
       border-right: 1px solid $border_light !important;
     }
     .table-header-cells-custom {
-      text-align:center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
+      text-align: center;
+      [class^="pb_checkbox_kit"] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -103,7 +125,7 @@
     }
     // Right align header content of first data column in selectable row no subrow setup
     &.selectable-rows-enabled {
-      tr { 
+      tr {
         th:nth-child(2),
         .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
           justify-content: flex-end;
@@ -121,13 +143,20 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom, 
+      &.table-header-cells-custom,
       &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
       }
     }
+    .expand-by-depth-dropdown-wrapper {
+      position: unset !important;
+    }
+    .expand-by-depth-dropdown {
+      width: unset !important;
+      text-align: left;
+    }
   }
 
   .pb_advanced_table_body {
@@ -144,7 +173,7 @@
     .checkbox-cell {
       display: flex;
       justify-content: center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
+      [class^="pb_checkbox_kit"] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -172,7 +201,7 @@
       }
     }
     td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
+      [class^="pb_text_input_kit"] .text_input_wrapper input {
         padding: 0 $space_xxs;
         font-size: 14px;
         text-align: right;
@@ -229,6 +258,56 @@
     max-height: 1920px;
     overflow-y: auto;
   }
+
+  // Fullscreen
+  &.advanced-table-allow-fullscreen {
+    transition: all 0.3s ease;
+  }
+
+  &.advanced-table-fullscreen {
+    background-color: $bg_light;
+    box-sizing: border-box;
+    height: 100vh;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: $z_10;
+
+    .pb_table {
+      th,
+      td,
+      div,
+      button {
+        font-size: calc(100%);
+      }
+      box-sizing: border-box;
+      margin: $space_lg;
+      max-width: calc(100% - 64px);
+      width: calc(100% - 64px);
+    }
+
+    .pb_table.sticky-header {
+      thead,
+      .pb_advanced_table_header {
+        position: sticky !important;
+        top: 44px !important;
+        z-index: $z_10;
+      }
+    }
+  }
+
+  .advanced-table-fullscreen-header {
+    background-color: $white;
+    height: 44px;
+    padding: 13px 20px;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: $z_10;
+  }
+
   // Icons
   .button-icon {
     display: flex;
@@ -277,13 +356,143 @@
     }
   }
 
-  // Vertical separator
+  .fullscreen-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    padding: 2px 0;
+
+    &:focus-visible {
+      border-radius: $border_rad_lighter;
+    }
+  }
+
+  // First column separator/border
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
   .pb_table_td:first-child,
   .checkbox-cell.checkbox-cell-header:first-child {
-    box-shadow: 1px 0px 0px 0px $border_light !important;
+    box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
+  // Color for collapsible trail
+  .collapsible-trail {
+    background-color: $border_light !important;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+  }
+
+  // Make sure all horizontal borders use the default border color
+  tr, th, td {
+    border-top-color: $border_light !important;
+    border-bottom-color: $border_light !important;
+  }
+
+  // Apply border colors when columnGroupBorderColor is set
+  &[class*="column-group-border-"] {
+    // For top-level column groups
+    .pb_advanced_table_header {
+      // The main column group headers
+      > tr:first-child {
+        th[colspan]:not([colspan="1"]):not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+      }
+
+      // Subgroup headers
+      > tr:nth-child(2) {
+        th[colspan]:not([colspan="1"]):not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+
+        // Last cell in each subgroup
+        th.last-header-cell:not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+      }
+
+      // Individual column headers at subgroup boundaries
+      > tr:last-child {
+        // Last cell in each subgroup
+        th.last-header-cell:not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+      }
+    }
+
+    // For data cells at column group boundaries
+    .pb_advanced_table_body {
+      // Apply to cells that are at column group boundaries
+      td.last-cell:not(:last-child),
+      .pb_table_td.last-cell:not(:last-child) {
+        border-right: 1px solid var(--column-border-color) !important;
+      }
+
+      // Virtualized row cells at column group boundaries
+      tr.virtualized-table-row {
+        td.last-cell:not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+      }
+    }
+
+    // Sub-row headers
+    .toggle-content {
+      td {
+        border-bottom: 1px solid $border_light !important;
+      }
+    }
+  }
+
+  // Restore vertical border styling when verticalBorder is true
+  .pb_table[data-vertical-border="true"] {
+    .pb_advanced_table_header {
+      > tr:not(:first-child) {
+        th:not(:last-child) {
+          border-right: 1px solid $border_light !important;
+        }
+      }
+    }
+
+    .pb_advanced_table_body {
+      td:not(:last-child),
+      .pb_table_td:not(:last-child) {
+        border-right: 1px solid $border_light !important;
+      }
+    }
+
+    tr.virtualized-table-row {
+      td:not(:last-child) {
+        border-right: 1px solid $border_light !important;
+      }
+    }
+
+    // When both verticalBorder AND columnGroupBorderColor are set,
+    // override the default border-light with the custom color
+    &.pb_advanced_table[class*="column-group-border-"] {
+      .pb_advanced_table_header {
+        > tr:not(:first-child) {
+          th:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
+      }
+
+      .pb_advanced_table_body {
+        td:not(:last-child),
+        .pb_table_td:not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+      }
+
+      tr.virtualized-table-row {
+        td:not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+      }
+    }
   }
 
   @include chrome_styles($border-color);
@@ -306,88 +515,74 @@
     height: auto;
   }
 
-  .collapsible-trail {
-    background-color: $border_light;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 2px;
+  // Mixin to apply sticky column styles for different color modes and themes
+  @mixin apply-sticky-colors($theme) {
+    @each $color_name, $color_value in $border_color_options {
+      &.column-group-border-#{$color_name} {
+        @if $theme == "light" {
+          @include advanced-table-sticky-mixin(
+            $color_value,
+            $white,
+            lighten($silver, $opacity_7)
+          );
+        } @else if $theme == "dark" {
+          @include advanced-table-sticky-mixin(
+            $color_value,
+            $bg_dark_card,
+            $bg_dark
+          );
+        }
+      }
+    }
+  }
+
+  // Sticky Left Columns Styling
+  &[class*="advanced-table-sticky-left-columns"] {
+    overflow-x: scroll;
+    .sticky-left {
+      position: sticky !important;
+      z-index: 2;
+      background-color: $white;
+      box-shadow: $shadow_deep;
+    }
+    @include advanced-table-sticky-mixin(
+      $border_light,
+      $white,
+      lighten($silver, $opacity_7)
+    );
+
+    // Apply border colors for sticky columns
+    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
-      border-radius: 4px;
-      box-shadow: 1px 0 0 0px $border_light,
-                  -1px 0 0 0px $border_light;
-      display: block;
       overflow-x: auto;
       width: 100%;
-      [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 {
-        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 {
-        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 {
-          border-radius: 0 0 0 0;
-        }
-      .table-header-cells:first-child,
-      td:first-child,
-      .pb_table_td:first-child,
-      .checkbox-cell.checkbox-cell-header:first-child,
-      [class*="pinned-left"] {
-          background-color: $white;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-          left: 0;
-          z-index: 2;
-      }
-      .bg-silver td:first-child {
-        background-color: lighten($silver, $opacity_7);
-      }
-      .bg-white td:first-child {
-          background-color: $white;
-      }
 
-      .virtualized-table-row {
-        &.bg-silver td:first-child {
-          background-color: lighten($silver, $opacity_7);
-        }
-        &.bg-white td:first-child {
-          background-color: $white;
-        }
-        &.bg-row-selection td:first-child {
-          background-color: $info_subtle;
-        }
-      }
+      // These are the responsive borders that should NOT inherit the custom color
+      @include advanced-table-sticky-mixin(
+        $border_light,
+        $white,
+        lighten($silver, $opacity_7)
+      );
 
-      .row-selection-actions-card {
-        border-right-width: 0px;
-        border-left-width: 0px;
-        position: sticky;
-        top: 0;
-        left: 0;
-        border-radius: unset;
+      // Override any columnGroupBorderColor inheritance for responsive borders
+      .sticky-left {
+        box-shadow: $shadow_deep !important;
       }
-      .checkbox-cell {
-        display: table-cell !important;
-      }
-      .sticky-header {
-        thead {
-          th:first-child {
-            box-shadow: 1px 0 10px -2px $border_light !important;
-          }
-        }
-        .pb_advanced_table_header {
-          box-shadow: none !important;
+
+      .pb_advanced_table_header,
+      .pb_advanced_table_body {
+        th.sticky-left,
+        td.sticky-left {
+          border-right: 1px solid $border_light !important;
         }
       }
     }
   }
+
   @media only screen and (min-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
@@ -395,6 +590,20 @@
   }
 
   &.dark {
+    // Override default border color for dark mode
+    --column-border-color: #{$border_dark};
+
+    // Dark mode default border colors for trails and horizontal borders
+    .collapsible-trail {
+      background-color: $border_dark !important;
+    }
+
+    // Make sure all horizontal borders use the default border color in dark mode
+    tr, th, td {
+      border-top-color: $border_dark !important;
+      border-bottom-color: $border_dark !important;
+    }
+
     .bg-white {
       background: $bg_dark_card;
     }
@@ -422,20 +631,115 @@
       }
     }
 
-    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
-      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    .table-header-cells:first-child,
+    .table-header-cells-custom:first-child,
+    td:first-child,
+    .pb_table_td:first-child,
+    .checkbox-cell.checkbox-cell-header:first-child {
+      box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
-    .collapsible-trail {
-      background-color: $border_dark !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;
+          }
+        }
+
+        // Subgroup headers
+        > tr:nth-child(2) {
+          th[colspan]:not([colspan="1"]):not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+
+          // Last cell in each subgroup
+          th.last-header-cell:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
+
+        // Individual column headers at subgroup boundaries
+        > tr:last-child {
+          // Last cell in each subgroup
+          th.last-header-cell:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
+      }
+
+      // For data cells at column group boundaries in dark mode
+      .pb_advanced_table_body {
+        // Apply to cells that are at column group boundaries
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
+          border-right: 1px solid var(--column-border-color) !important;
+        }
+
+        // Virtualized row cells at column group boundaries
+        tr.virtualized-table-row {
+          td.last-cell:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
+      }
+
+      // Sub-row headers
+      .toggle-content {
+        td {
+          border-bottom: 1px solid $border_dark !important;
+        }
+      }
+    }
+
+    // Restore vertical border styling in dark mode when verticalBorder is true
+    .pb_table[data-vertical-border="true"] {
+      .pb_advanced_table_header {
+        > tr:not(:first-child) {
+          th:not(:last-child) {
+            border-right: 1px solid $border_dark !important;
+          }
+        }
+      }
+
+      .pb_advanced_table_body {
+        td:not(:last-child),
+        .pb_table_td:not(:last-child) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
+      // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
+      // override the default border-dark with the custom color
+      &.pb_advanced_table[class*="column-group-border-"] {
+        .pb_advanced_table_header {
+          > tr:not(:first-child) {
+            th:not(:last-child) {
+              border-right: 1px solid var(--column-border-color) !important;
+            }
+          }
+        }
+
+        .pb_advanced_table_body {
+          td:not(:last-child),
+          .pb_table_td:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
+      }
     }
 
-    .sort-button-icon, .header-sort-button > div, .pb_th_link {
+    .sort-button-icon,
+    .header-sort-button > div,
+    .pb_th_link {
       color: $white !important;
     }
 
     .gray-icon {
-      color:  $text_dk_light !important;
+      color: $text_dk_light !important;
     }
 
     .sticky-header {
@@ -457,72 +761,60 @@
       }
     }
 
-    // Vertical separator
-    .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
-      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    // Fullscreen
+    &.advanced-table-fullscreen {
+      background: $bg_dark;
+    }
+
+    .advanced-table-fullscreen-header {
+      background-color: $bg_dark_card;
+      position: sticky;
+      top: 0;
+      z-index: $z_10;
+    }
+
+    &[class*="advanced-table-sticky-left-columns"] {
+      .sticky-left {
+        background-color: $bg_dark;
+      }
+      @include advanced-table-sticky-mixin(
+        $border_dark,
+        $bg_dark_card,
+        $bg_dark
+      );
     }
 
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
-        border-radius: 4px;
-        box-shadow: 1px 0 0 0px $border_dark,
-                    -1px 0 0 0px $border_dark;
-        display: block;
-        overflow-x: scroll;
-        width: 100%;
-        [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 {
-          border-left-width: 0px;
-        }
-        [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 {
-          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 {
-            border-radius: 0 0 0 0;
-        }
-        .table-header-cells:first-child,
-        td:first-child,
-        .pb_table_td:first-child,
-        .checkbox-cell.checkbox-cell-header:first-child,
-        [class*="pinned-left"] {
-          background: $bg_dark_card;
-          border-right: $border_dark;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-        }
-        .bg-silver td:first-child {
-          background-color: $bg_dark;
-        }
-        .bg-white td:first-child {
-          background-color: $bg_dark_card;
-        }
-
-        // Dark mode virtualized rows
-        .virtualized-table-row {
-          &.bg-silver td:first-child {
-            background-color: $bg_dark;
-          }
-          &.bg-white td:first-child {
-            background-color: $bg_dark_card;
-          }
-        }
-
         .sticky-header {
           thead {
             th:first-child {
-              background: $bg_dark;
-              box-shadow: 1px 0 10px -2px $border_dark !important;
+              background: $bg_dark_card;
             }
           }
         }
+
+        // These are the responsive borders that should NOT inherit the custom color
+        @include advanced-table-sticky-mixin(
+          $border_dark,
+          $bg_dark_card,
+          $bg_dark
+        );
+
+        // Override any columnGroupBorderColor inheritance for responsive borders in dark mode
+        .sticky-left {
+          box-shadow: $shadow_deep !important;
+        }
+
+        .pb_advanced_table_header,
+        .pb_advanced_table_body {
+          th.sticky-left,
+          td.sticky-left {
+            border-right: 1px solid $border_dark !important;
+          }
+        }
       }
     }
   }
-}
+}