playbook_ui 14.23.0.pre.alpha.PLAY2243customindeterminatemaincheckboxlabels9046 → 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9151

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbf9a417a4f6e2dcdf093c538efc5d3be6aa9a5bfdeaef160a8dc27e10bc6071
-  data.tar.gz: 90c1022791a95512530ab08978a544b5cd1bd716a4ecd70a5dd6b480e853d6f7
+  metadata.gz: e8849282c22bb4870841f96e110bc89eaca2ed4e4dfbef18b709b6c2e93a701b
+  data.tar.gz: 6d844177bce8a58692b5e383ceae03ea8c607e29e357c37c2931a0b9df9ee02d
 SHA512:
-  metadata.gz: 983c01db202cb88494f13e2a1c7593d7cf01c6d655ff89a78ca1f085f78bd5a79a393c05f1a8a05d2e024999e4bcc8e4843d0f7004649d3f1cb05a72228cd641
-  data.tar.gz: 44eda0c8b056f6998518bf9bde3b3bb5e721df6cb47739b17f1053464a7d594352c26d3005e0b0d2a3e3209ed02ae2f4287233822919a43d9aef256548c3f768
+  metadata.gz: a4cfa9a835da85fbd7af7c6c5aacabf227d5e01e284f748e71eceb2c5d1c7337336e1a69a8d00ffce7cd32b903b9c0fa18ce7644cfe1faeea85fb65d6f32727f
+  data.tar.gz: 8821b2b62bfc362fb5b688ba476489d8284bd22734102d00829097f05024ac5400b11c22216d4a14d03abb60e9a03d2360b68804b726c5c7c8e6835278db93c8

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-}
+} 
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
+    
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex
-          alignItems="center"
+      <Flex 
+          alignItems="center" 
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,11 +71,12 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play-down"
+                  icon="circle-play"
+                  rotation={90}
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"
+                  icon="circle-play"    
                />
             )}
           </button>

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -112,7 +112,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             paddingBottom="xs"
             text={node.label}
         />
-        <Flex flexDirection="column" 
+        <Flex flexDirection="column"
             paddingLeft="lg"
         >
           {node?.children?.map((child) =>
@@ -141,8 +141,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     setShowPopover(!shouldClose)
 
   const popoverReference = (
-    <Tooltip 
-        placement="top" 
+    <Tooltip
+        placement="top"
         text="Column Configuration"
     >
       <div onClick={togglePopover}>
@@ -170,8 +170,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       >
         {type === "row-selection" ? (
           <>
-            <Caption color="light" 
-                paddingLeft="xs" 
+            <Caption color="light"
+                paddingLeft="xs"
                 size="xs"
             >
               {selectedCount} Selected
@@ -188,15 +188,15 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
               zIndex={3}
           >
             <>
-              <Caption 
-                  paddingY="sm" 
+              <Caption
+                  paddingY="sm"
                   text="Columns Config"
-                  textAlign="center" 
+                  textAlign="center"
               />
               <SectionSeparator paddingBottom="xs" />
               {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer" 
-                    flexDirection="column" 
+                <Flex cursor="pointer"
+                    flexDirection="column"
                     key={node.id}
                     paddingX="xs"
                 >

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -101,7 +101,6 @@ export const TableHeaderCell = ({
     if (!header) return false;
   
     if (header.colSpan > 1 && header.column.parent !== undefined) return true;
-  
     const parent = header.column.parent;
   
     if (!parent) {

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -83,11 +83,11 @@ export function useTableState({
   const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
     return columnDefinitions?.map((column, index) => {
       const isFirstColumn = isRoot && index === 0;
-
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.header || column.label || "",
+          header: column.header ?? column.label ?? "",
+          id: column.id ?? column.label ?? `group-${index}`,
           columns: buildColumns(column.columns, false),
         };
       }

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

@@ -124,13 +124,65 @@
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
   }
-  
+
+  // When action bar is hidden, ensure proper border radius for header corners
+  &.hidden-action-bar {
+    .pb_advanced_table_header {
+      > tr:first-child {
+        th:first-child {
+          border-top-left-radius: 4px !important;
+        }
+        th:last-child {
+          border-top-right-radius: 4px !important;
+        }
+      }
+    }
+
+    // Also handle the case when there are multiple header rows
+    .pb_advanced_table_header {
+      > tr:first-child {
+        th:first-child,
+        .table-header-cells:first-child,
+        .table-header-cells-custom:first-child {
+          border-top-left-radius: 4px !important;
+        }
+        th:last-child,
+        .table-header-cells:last-child,
+        .table-header-cells-custom:last-child {
+          border-top-right-radius: 4px !important;
+        }
+      }
+    }
+  }
+
+  // When action bar is shown, remove border radius from header
+  .row-selection-actions-card.is-visible ~ * .pb_advanced_table_header,
+  .row-selection-actions-card.show-action-card ~ * .pb_advanced_table_header {
+    > tr:first-child {
+      th:first-child,
+      th:last-child,
+      .table-header-cells:first-child,
+      .table-header-cells:last-child,
+      .table-header-cells-custom:first-child,
+      .table-header-cells-custom:last-child {
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+      }
+    }
+  }
+
 
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-bottom-color: transparent;
     transition: height 300ms ease;
+
+    &.is-visible,
+    &.show-action-card {
+      border-top-left-radius: 4px !important;
+      border-top-right-radius: 4px !important;
+    }
   }
   .table-header-cells:first-child {
     min-width: 180px;
@@ -541,6 +593,101 @@
     }
   }
 
+  // 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 - apply borders to ALL cells including last
+    &.sticky-header {
+      thead th {
+        border-right: 1px solid $border_light !important;
+        border-left: none !important;
+        border-top: none !important;
+      }
+    }
+
+    // Regular pinned rows
+    .pinned-row {
+      td,
+      .pb_table_td {
+        border-right: 1px solid var(--column-border-color, $border_light) !important;
+        // Ensure no unwanted borders
+        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-right: none !important;
+          border-left: none !important;
+          border-top: none !important;
+          box-shadow: inset -1px 0 0 0 var(--column-border-color, $border_light) !important;
+        }
+      }
+    }
+  }
+
   @include chrome_styles($border-color);
 
   tr:hover {
@@ -720,6 +867,81 @@
       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 {
+        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-right: none !important;
+            border-left: none !important;
+            border-top: none !important;
+            box-shadow: inset -1px 0 0 0 var(--column-border-color, $border_dark) !important;
+          }
+        }
+      }
+    }
+
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)

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

@@ -218,10 +218,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
 
     return (
-      <Card 
+      <Card
           borderNone
           borderRadius="none"
-          className="advanced-table-fullscreen-header" 
+          className="advanced-table-fullscreen-header"
           {...props}
       >
           <Flex justify="end">
@@ -250,6 +250,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
+
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
@@ -257,6 +261,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen,
+      // Add the hidden-action-bar class when action bar functionality exists but is not visible
+      'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -270,9 +276,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? getVirtualizedContainerStyles(maxHeight)
     : {};
 
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-
   // The actual Main <Table /> element
   const tableElement = (
     <Table
@@ -288,7 +291,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody   
+          <TableBody
               isFetching={isFetching}
           />
         </>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -31,9 +31,16 @@ module Playbook
                      default: []
       prop :scroll_bar_none, type: Playbook::Props::Boolean,
                              default: false
+      prop :row_styling, type: Playbook::Props::Array,
+                         default: []
 
       def classname
-        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
+        additional_classes = [
+          responsive_classname,
+          max_height_classname,
+          hide_scroll_bar_class,
+          hidden_action_bar_class,
+        ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
@@ -47,7 +54,12 @@ module Playbook
       end
 
       def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
+        scroll_bar_none ? "advanced-table-hide-scrollbar" : ""
+      end
+
+      def hidden_action_bar_class
+        # Add hidden-action-bar class when action bar functionality is enabled but not currently visible
+        selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
       end
 
       def selected_rows

data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js

@@ -1,4 +1,7 @@
 function showActionBar(actionBar, selectedCount) {
+  // Get container
+  const tableContainer = actionBar.closest('.pb_advanced_table');
+
   // Show action bar directly
   actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
@@ -8,6 +11,11 @@ function showActionBar(actionBar, selectedCount) {
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
+  // Remove hidden-action-bar class when action bar is shown
+  if (tableContainer) {
+    tableContainer.classList.remove("hidden-action-bar");
+  }
+
   // Update the count
   const countElement = actionBar.querySelector(".selected-count");
   if (countElement) {
@@ -16,12 +24,20 @@ function showActionBar(actionBar, selectedCount) {
 }
 
 function hideActionBar(actionBar) {
+  // Get container
+  const tableContainer = actionBar.closest('.pb_advanced_table');
+
   // Hide action bar directly
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
   actionBar.classList.add("p_none");
   actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+
+  // Add hidden-action-bar class when action bar is hidden
+  if (tableContainer) {
+    tableContainer.classList.add("hidden-action-bar");
+  }
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -44,7 +44,7 @@ const AdvancedTableRowPinning = (props) => {
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
           tableData={MOCK_DATA}
-          tableProps={{sticky: true}}
+          tableProps={{sticky: true, verticalBorder: true, container: false}}
           {...props}
       >
         <AdvancedTable.Header enableSorting />

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

@@ -0,0 +1,46 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% row_styling = [
+  {
+    row_id: "1",
+    background_color: "#F9BB00",
+  },
+  {
+    row_id: "8",
+    background_color: "#0056CF",
+    font_color: "white",
+    expand_button_color: "white",
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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

@@ -0,0 +1,7 @@
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
+
+- `background_color` : use this to control the background color of the row
+- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
+- `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**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.

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

@@ -1 +1 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.