playbook_ui 14.18.0.pre.alpha.dropdownautocomplete7493 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7bd20052fba74764f8980ddc1b51b9ee894ed353f4945a684221bc970e254f42
-  data.tar.gz: 972b9183b0086471c49619b5fe5e454c3881cf69ef92025ea66a01acd3ae5abc
+  metadata.gz: d78c525af9420178f8164784e8a40900e53019c1bc40e9a166d1344d2ffa5e0a
+  data.tar.gz: fd328a2fb678d8011decad133fe86bc9906cec3d42b40c243609e0bd3face89d
 SHA512:
-  metadata.gz: d2886034ed0b6530c5137873110184eca7b9d885b9366418f089c6aae68aa9ec768ad3a822d8470e9ad76e73f392574ebcd1912bb3b6bea204495e7e52b69a1a
-  data.tar.gz: 57f1694272424242ba6d502930af72222ef45ab386458f6f21dfe5666e1aeb4eceeddea86ca48c0c05b1706bcbef9e3f3b2e2d0363e2478fb133717c37fe3d84
+  metadata.gz: a35c420eae17362abe96f14342a2da06f1b44bf5885020b0e995f9a4bf0db82a20c08ecf2e32e6d447ae193bb7fed9b019ad365cb248049f3506731e9f7e5e2e
+  data.tar.gz: e329136643397969ba9f0d7f6bec4f2aff534476ea73e152da63f912c5dee03d7fbbabdee5d5d5e4208381b68d4a1ab60794c7c71a4e7c55dd69122fca866e84

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

@@ -13,26 +13,6 @@
 .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;
   }
@@ -366,133 +346,13 @@
     }
   }
 
-  // First column separator/border
+  // 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 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;
-        }
-      }
-    }
+    box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
   @include chrome_styles($border-color);
@@ -515,25 +375,12 @@
     height: auto;
   }
 
-  // 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
-          );
-        }
-      }
-    }
+  .collapsible-trail {
+    background-color: $border_light;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
   }
 
   // Sticky Left Columns Styling
@@ -550,9 +397,6 @@
       $white,
       lighten($silver, $opacity_7)
     );
-
-    // Apply border colors for sticky columns
-    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -560,29 +404,13 @@
     &[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;
@@ -590,20 +418,6 @@
   }
 
   &.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;
     }
@@ -632,104 +446,13 @@
     }
 
     .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;
+    .pb_table_td:first-child {
+      box-shadow: 1px 0px 0px 0px $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;
-          }
-        }
-      }
+    .collapsible-trail {
+      background-color: $border_dark !important;
     }
 
     .sort-button-icon,
@@ -761,6 +484,15 @@
       }
     }
 
+    // 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;
@@ -794,26 +526,11 @@
             }
           }
         }
-
-        // 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,7 +34,6 @@ 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"
@@ -72,7 +71,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     children,
     className,
     columnDefinitions,
-    columnGroupBorderColor,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -241,7 +239,6 @@ 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
   );
@@ -285,7 +282,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         {renderFullscreenHeader()}
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
-            columnGroupBorderColor={columnGroupBorderColor}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -338,7 +334,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,9 +7,6 @@ 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"
@@ -27,9 +24,7 @@ module Playbook
                              default: false
 
       def classname
-        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: " ")
+        generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
       end
 
       def responsive_classname

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

@@ -1,3 +1,9 @@
+**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_selectable_rows_no_subrows_react.jsx → _advanced_table_selectable_rows_no_subrows.jsx}

@@ -2,7 +2,7 @@ import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
-const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
+const AdvancedTableSelectableRowsNoSubrows = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrowsReact
+export default AdvancedTableSelectableRowsNoSubrows

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

@@ -1,5 +1 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
-
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

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

@@ -2,6 +2,5 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -12,9 +12,9 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_border_color_rails: Column Group Border Color
-  - advanced_table_selectable_rows_rails: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -39,11 +39,10 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
-  - advanced_table_column_border_color: Column Group Border Color
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - 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

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

@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
@@ -26,5 +26,4 @@ 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 AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'