playbook_ui 14.18.1.pre.rc.0 → 14.19.0.pre.alpha.PLAY21297675

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

@@ -13,6 +13,26 @@
 .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;
   }
@@ -33,6 +53,15 @@
     width: 100%;
   }
 
+  .column-visibility-dropdown-wrapper {
+    position: unset !important;
+  }
+  .column-visibility-dropdown {
+    width: unset !important;
+    right: $space_xxs;
+    text-align: left;
+  }
+
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;
@@ -346,13 +375,133 @@
     }
   }
 
-  // Vertical separator
+  // 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);
@@ -375,12 +524,25 @@
     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
@@ -397,6 +559,9 @@
       $white,
       lighten($silver, $opacity_7)
     );
+
+    // Apply border colors for sticky columns
+    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -404,13 +569,29 @@
     &[class*="advanced-table-responsive-scroll"] {
       overflow-x: auto;
       width: 100%;
+
+      // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
         $border_light,
         $white,
         lighten($silver, $opacity_7)
       );
+
+      // Override any columnGroupBorderColor inheritance for responsive borders
+      .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_light !important;
+        }
+      }
     }
   }
+
   @media only screen and (min-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
@@ -418,6 +599,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;
     }
@@ -446,13 +641,104 @@
     }
 
     .table-header-cells:first-child,
+    .table-header-cells-custom:first-child,
     td:first-child,
-    .pb_table_td:first-child {
-      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    .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,
@@ -484,15 +770,6 @@
       }
     }
 
-    // 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;
@@ -526,11 +803,26 @@
             }
           }
         }
+
+        // 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;
+          }
+        }
       }
     }
   }

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

@@ -34,6 +34,8 @@ type AdvancedTableProps = {
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
+  columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
+  columnVisibilityControl?: GenericObject
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -71,6 +73,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     children,
     className,
     columnDefinitions,
+    columnGroupBorderColor,
+    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -130,7 +134,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange
+    onRowSelectionChange,
+    columnVisibilityControl,
   });
 
   // Initialize table actions
@@ -239,6 +244,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'advanced-table-allow-fullscreen': allowFullScreen
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
+    columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     globalProps(props),
     className
   );
@@ -249,7 +255,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
   return (
     <>
@@ -282,6 +288,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         {renderFullscreenHeader()}
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
+            columnGroupBorderColor={columnGroupBorderColor}
+            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -312,6 +320,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 actions={actions}
                 isVisible={isActionBarVisible}
                 selectedCount={selectedRowsLength}
+                type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
             {/* Main Table */}
@@ -334,7 +343,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             </Table>
           </React.Fragment>
         </AdvancedTableProvider>
-     
+
       </div>
       {/* Bottom Pagination */}
       {pagination && (

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -7,6 +7,9 @@ module Playbook
                         default: []
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
+      prop :column_group_border_color, type: Playbook::Props::Enum,
+                                       values: %w[text_lt_default text_lt_light text_lt_lighter text_dk_default text_dk_light text_dk_lighter none],
+                                       default: "none"
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
@@ -24,7 +27,9 @@ module Playbook
                              default: false
 
       def classname
-        generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
+        additional_classes = [responsive_classname, max_height_classname]
+        additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
+        generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
 
       def responsive_classname

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -1,9 +1,3 @@
-**BETA VERSION**
-This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
-<br />
-<br />
-<br />
-
 The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### table_data

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

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnBorderColors = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnGroupBorderColor="text_lt_default"
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnBorderColors

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md

@@ -0,0 +1,3 @@
+The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
+
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb

@@ -0,0 +1,58 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md

@@ -0,0 +1,3 @@
+The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
+
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).