playbook_ui 14.19.0.pre.rc.0 → 14.19.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ae9d27af86020c669d4402b35b61ee356de6cb7a61fdbb177eac964f2765822
-  data.tar.gz: f8e3d579c5e3b29639a3b56a09c3e8e20f48a9089ab4c6a1d6cb3302ecf0119b
+  metadata.gz: e1bfa3c16e7e1f49e5b76698d4613e2b06b27e00830bb48899a405eae61ba1a3
+  data.tar.gz: a21c3c47af80c388f1a56bb6177ee8195b2f214e9d8f8b83edfbb932f8e66260
 SHA512:
-  metadata.gz: 4b142aba7e0202847db31c8e74164ba49ff77382f5ea97e173af29a3c115627b092b2872d9e82898b32432dbec1fb8b5c82dcc523ded9bea8f93f37b0ffb95fb
-  data.tar.gz: 94c8ff54d18937587afe9fa0ef51e0805686f133e2b230ca0628078cd4b26a19ca4564cb7359a37ada021c884990f16c0bf2940a07d8876386252e2cdb80829a
+  metadata.gz: 04bcff4ed98257d0c7249b6fb48550839d4d0a6dbead693604ebe75ca0febad6d0e9641a1e77ee46819b4d861c82c56d1c416e89ffe6fce73b506ce4bff5b04a
+  data.tar.gz: 63de6ea020d1ccaa76279f5a157e78549e9fad3569653880f8df9250e08026db361866a66a8b3369a6e614e29a062faaf94cfa6b0c5d3c62525bc8b9fddef43f

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;
   }
@@ -346,13 +366,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 +515,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 +550,9 @@
       $white,
       lighten($silver, $opacity_7)
     );
+
+    // Apply border colors for sticky columns
+    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -404,13 +560,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 +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;
     }
@@ -446,13 +632,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 +761,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 +794,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,7 @@ 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"
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -71,6 +72,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     children,
     className,
     columnDefinitions,
+    columnGroupBorderColor,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -239,6 +241,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
   );
@@ -282,6 +285,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         {renderFullscreenHeader()}
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
+            columnGroupBorderColor={columnGroupBorderColor}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -334,7 +338,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_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).

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -14,6 +14,7 @@ examples:
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   # - advanced_table_selectable_rows: Selectable Rows
   # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+  - advanced_table_column_border_color_rails: Column Group Border Color
 
 
   react:
@@ -45,4 +46,5 @@ examples:
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_column_border_color: Column Group Border Color

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -26,4 +26,5 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
-export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb

@@ -0,0 +1,43 @@
+<% data_shadow = [
+  { id: "51", text: "Task 1" },
+  { id: "52", text: "Task 2" },
+  { id: "53", text: "Task 3" }
+] %>
+
+<% data_outline = [
+  { id: "61", text: "Task 1" },
+  { id: "62", text: "Task 2" },
+  { id: "63", text: "Task 3" }
+] %>
+
+<%= pb_rails("flex", props: { justify: "around" }) do %>
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_shadow.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_outline.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>