playbook_ui 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335 → 14.23.0.pre.alpha.PLAY2303optD9000

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

@@ -10,17 +10,14 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_column_border_color_rails: Column Group Border Color
@@ -30,8 +27,6 @@ examples:
   - advanced_table_default: Default (Required Props)
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
-  - advanced_table_sort_per_column: Enable Sort By Column
-  - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
@@ -46,7 +41,6 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell
-  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_loading: Loading State
@@ -54,7 +48,6 @@ 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_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows

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

@@ -21,7 +21,6 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
@@ -41,6 +40,3 @@ export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
-export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
-export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
-export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'

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

@@ -2,6 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
+const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
@@ -36,12 +37,9 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
       }
     };
 
-    const selectAllId = this.element.getAttribute('data-pb-checkbox-indeterminate-parent')
-    const selectAllSelector = `#${selectAllId} input[type='checkbox']`
-
     table.addEventListener("change", (e) => {
       const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
-      const allCb = e.target.closest(selectAllSelector);
+      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
       if (!rowCb && !allCb) return;
 
       if (rowCb) {
@@ -52,6 +50,15 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
         tr?.classList.toggle("bg-white", !rowCb.checked);
+
+        // Sync header checkbox
+        const header = table.querySelector(SELECT_ALL_SELECTOR);
+        if (header) {
+          const all = Array.from(
+            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+          ).every((cb) => cb.checked);
+          header.checked = all;
+        }
       }
 
       if (allCb) {

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

@@ -39,70 +39,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     );
   }
 
-  // Recalculate selected count based on all checked checkboxes
-  recalculateSelectedCount() {
-    const table = this.element.closest("table");
-    
-    // Get all checkboxes that could be part of the selection
-    // This includes row checkboxes and any parent checkboxes that might be programmatically checked
-    const rowCheckboxes = table.querySelectorAll(
-      'label[data-row-id] input[type="checkbox"]'
-    );
-    
-    // Also get any checkboxes that might be parent checkboxes (those with data-pb-checkbox-indeterminate-main)
-    // But exclude the select-all checkbox itself from the count
-    const parentCheckboxes = table.querySelectorAll(
-      '[data-pb-checkbox-indeterminate-main="true"] input[type="checkbox"]'
-    );
-    
-    // Filter out the select-all checkbox from parent checkboxes
-    const selectAllCheckbox = table.querySelector('#select-all-rows input[type="checkbox"]');
-    const filteredParentCheckboxes = Array.from(parentCheckboxes).filter(checkbox => 
-      checkbox !== selectAllCheckbox && !checkbox.id.includes('select-all-rows')
-    );
-    
-    // Combine all checkboxes and remove duplicates
-    const allCheckboxes = new Set([...rowCheckboxes, ...filteredParentCheckboxes]);
-    
-    // Clear the selectedRows Set and rebuild it from checked checkboxes
-    PbAdvancedTable.selectedRows.clear();
-    
-    allCheckboxes.forEach((checkbox) => {
-      const rowEl = checkbox.closest("tr");
-      const isChecked = checkbox.checked;
-      
-      if (isChecked) {
-        PbAdvancedTable.selectedRows.add(checkbox.id);
-        // Only apply styling if the checkbox is inside a table row
-        if (rowEl) {
-          rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("bg-white", "bg-silver");
-        }
-      } else {
-        // Only apply styling if the checkbox is inside a table row
-        if (rowEl) {
-          rowEl.classList.remove("bg-row-selection");
-          
-          if (this.isRowExpanded(rowEl)) {
-            rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("bg-white");
-          } else {
-            rowEl.classList.remove("bg-white");
-            rowEl.classList.add("bg-silver");
-          }
-        }
-      }
-    });
-    
-    this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
-    
-    // Sync header select-all state
-    if (selectAllCheckbox) {
-      selectAllCheckbox.checked = Array.from(rowCheckboxes).every((cb) => cb.checked);
-    }
-  }
-
   // Check if the row is expanded or collapsed
   // This is used to determine the background color of the row
   // when the checkbox is checked or unchecked
@@ -111,6 +47,75 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return closeIcon?.style.display === "none" || !closeIcon;
   }
 
+  updateParentCheckboxes(checkbox) {
+    const rowEl = checkbox.closest("tr");
+    if (!rowEl) return;
+
+    const table = rowEl.closest("table");
+    if (!table) return;
+
+    const contentTrail = rowEl.dataset.advancedTableContent;
+    if (!contentTrail) return;
+
+    const ancestorIds = contentTrail.split("-").slice(0, -1);
+
+    ancestorIds.reverse();
+    ancestorIds.forEach((ancestorId) => {
+      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
+      const parentRow = table.querySelector(parentRowSelector);
+      if (!parentRow) return;
+
+      const parentLabel = parentRow.querySelector("label[data-row-id]");
+      if (!parentLabel) return;
+
+      const parentCheckbox = parentLabel.querySelector(
+        "input[type='checkbox']"
+      );
+      if (!parentCheckbox) return;
+
+      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
+      const children = Array.from(
+        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
+      ).filter((child) => {
+        const content = child.dataset.advancedTableContent;
+        return !(content && content.endsWith("sr"));
+      });
+
+      const allChildrenChecked = Array.from(children).every((child) => {
+        const childLabel = child.querySelector("label[data-row-id]");
+        if (!childLabel) return false;
+        const childCheckbox = childLabel.querySelector(
+          "input[type='checkbox']"
+        );
+        if (!childCheckbox) return false;
+        return childCheckbox.checked;
+      });
+
+      // Update parent checkbox
+      parentCheckbox.checked = allChildrenChecked;
+
+      const parentCheckboxId = parentCheckbox.id;
+      if (allChildrenChecked) {
+        PbAdvancedTable.selectedRows.add(parentCheckboxId);
+        parentRow.classList.add("bg-row-selection");
+        parentRow.classList.remove("bg-white", "bg-silver");
+      } else {
+        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
+      }
+      if (!allChildrenChecked) {
+        parentRow.classList.remove("bg-row-selection");
+
+        if (this.isRowExpanded(parentRow)) {
+          parentRow.classList.remove("bg-silver");
+          parentRow.classList.add("bg-white");
+        } else {
+          parentRow.classList.remove("bg-white");
+          parentRow.classList.add("bg-silver");
+        }
+      }
+    });
+  }
+
   handleCheckboxClick(event) {
     const checkbox = event.currentTarget;
     const rowId = checkbox.id;
@@ -136,6 +141,49 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         rowEl.classList.add("bg-silver");
       }
     }
+    if (rowEl) {
+      const table = rowEl.closest("table");
+      const rowContent = rowEl.dataset.advancedTableContent;
+
+      if (rowContent) {
+        const childRows = table.querySelectorAll(
+          `[data-advanced-table-content^="${rowContent}-"]`
+        );
+
+        childRows.forEach((childRow) => {
+          const label = childRow.querySelector("label[data-row-id]");
+          if (!label) return;
+
+          const childCheckbox = label.querySelector("input[type='checkbox']");
+          if (!childCheckbox) return;
+
+          childCheckbox.checked = isChecked;
+
+          const childRowId = childCheckbox.id;
+          const childRowEl = childCheckbox.closest("tr");
+          if (isChecked) {
+            PbAdvancedTable.selectedRows.add(childRowId);
+            childRowEl?.classList.add("bg-row-selection");
+            childRowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(childRowId);
+          }
+          if (!isChecked) {
+            childRowEl?.classList.remove("bg-row-selection");
+
+            if (this.isRowExpanded(childRowEl)) {
+              childRowEl?.classList.remove("bg-silver");
+              childRowEl?.classList.add("bg-white");
+            } else {
+              childRowEl?.classList.remove("bg-white");
+              childRowEl?.classList.add("bg-silver");
+            }
+          }
+        });
+      }
+    }
+
+    this.updateParentCheckboxes(checkbox);
 
     this.updateTableSelectedRowsAttribute();
 
@@ -201,11 +249,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             this.handleCheckboxClick({ currentTarget: cb });
           }
         });
-        
-        // Recalculate the count to ensure all checkboxes are properly tracked
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 0);
+        this.updateTableSelectedRowsAttribute();
+        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
         return;
       }
 
@@ -213,41 +258,17 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const rowLabel = checkbox.closest("label[data-row-id]");
       if (rowLabel) {
         this.handleCheckboxClick({ currentTarget: checkbox });
-        
-        // Recalculate the count to ensure all checkboxes are properly tracked
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 0);
-      }
-    });
-
-    // If a parent checkbox changed a checkbox, update styling
-    // Listen for programmatic checkbox changes from parent-child relationships
-    table.addEventListener("checkbox-programmatic-change", (event) => {
-      const checkbox = event.target;
-      if (!checkbox || checkbox.type !== 'checkbox') return;
+        this.updateTableSelectedRowsAttribute();
 
-      // Individual row checkbox logic
-      const rowLabel = checkbox.closest("label[data-row-id]");
-      if (rowLabel) {
-        this.handleCheckboxClick({ currentTarget: checkbox });
-      }
-      
-      // Recalculate the count to ensure all programmatically changed checkboxes are included
-      setTimeout(() => {
-        this.recalculateSelectedCount();
-      }, 10); // Slightly longer delay to ensure all changes are processed
-    });
-
-
-    // Also listen for all checkbox changes to ensure we catch everything
-    table.addEventListener("change", (event) => {
-      const checkbox = event.target;
-      if (checkbox && checkbox.type === 'checkbox') {
-        // Force recalculation after a short delay to ensure all changes are processed
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 50);
+        // Sync header select-all state
+        const selectAllInput = table.querySelector(
+          '#select-all-rows input[type="checkbox"]'
+        );
+        if (selectAllInput) {
+          selectAllInput.checked = Array.from(
+            table.querySelectorAll('label[data-row-id] input[type="checkbox"]')
+          ).every((cb) => cb.checked);
+        }
       }
     });
 
@@ -293,16 +314,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         "tr.is-visible, tr:not(.toggle-content)"
       );
 
-      visibleRows.forEach((row) => {
-        row.classList.remove("last-visible-row");
-        row.classList.remove("last-row-cell");
-      });
+      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
 
       const lastVisibleRow = visibleRows[visibleRows.length - 1];
 
       if (lastVisibleRow) {
         lastVisibleRow.classList.add("last-visible-row");
-        lastVisibleRow.classList.add("last-row-cell");
       }
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -79,14 +79,8 @@
     left: 0;
     border-radius: unset;
     z-index: 5;
-
-    // Add proper border radius when action bar is visible
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
+
   .checkbox-cell {
     display: table-cell !important;
   }

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

@@ -23,8 +23,6 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -40,14 +38,13 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil)
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {})
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
         leaf_columns = flatten_columns(column_definitions)
 
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
-        last_row = subrow_headers.length == current_depth
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -56,7 +53,7 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -69,7 +66,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -84,7 +81,7 @@ module Playbook
               advanced_table_content: data_content,
             }
 
-            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id])
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes)
           end
         end
 

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

@@ -26,11 +26,7 @@
                 <% end %>
               <% end %>
             <% end %>
-            <% if object.has_header_renderer?(cell) %>
-              <%= raw(object.render_header(cell)) %>
-            <% else %>
-              <%= cell[:label] %>
-            <% end %>
+            <%= cell[:label] %>
           <% end %>
         <% end %>
       <% end %>

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

@@ -3,8 +3,6 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -58,10 +56,8 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{id ? "#{id}-" : ''}select-all-rows",
-                       indeterminate_main: true,
-                       indeterminate_main_labels: ["", ""],
-                       name: "#{id ? "#{id}-" : ''}select-all-rows",
+                       id: "select-all-rows",
+                       name: "select-all-rows",
                      })
           end
         end
@@ -71,10 +67,8 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "#{id ? "#{id}-" : ''}select-all-rows",
-                     indeterminate_main: true,
-                     indeterminate_main_labels: ["", ""],
-                     name: "#{id ? "#{id}-" : ''}select-all-rows",
+                     id: "select-all-rows",
+                     name: "select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },
@@ -82,30 +76,6 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering
-      def find_original_column_def(accessor)
-        find_column_def_by_accessor(column_definitions, accessor)
-      end
-
-      # Check if a header cell has a custom renderer
-      def has_header_renderer?(cell)
-        return false unless cell[:accessor].present?
-
-        original_def = find_original_column_def(cell[:accessor])
-        original_def && original_def[:header].present?
-      end
-
-      # Render custom header content
-      def render_header(cell)
-        return cell[:label] unless has_header_renderer?(cell)
-
-        original_def = find_original_column_def(cell[:accessor])
-        custom_renderer = original_def[:header]
-
-        # Call the custom renderer with the cell data and label
-        custom_renderer.call(cell, cell[:label])
-      end
-
     private
 
       def compute_max_depth(columns)
@@ -178,18 +148,6 @@ module Playbook
         end
         wrapped
       end
-
-      def find_column_def_by_accessor(defs, target_accessor)
-        defs.each do |col|
-          return col if col[:accessor] == target_accessor
-
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
-            return found if found
-          end
-        end
-        nil
-      end
     end
   end
 end

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

@@ -1,10 +1,3 @@
-<% 
-  row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s } 
-  button_color = row_style&.[](:expand_button_color)
-  bg_color = row_style&.[](:background_color)
-  font_color = row_style&.[](:font_color)
-%>
-
 <%= pb_content_tag(:tr) do %>
     <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
     <% if has_separate_checkbox %>
@@ -12,7 +5,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: {  html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
+        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
@@ -35,15 +28,13 @@
                                 <button
                                     id="<%= "#{object.id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true"
-                                    style="color: <%= button_color %>"
-                                >
+                                    data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item") do %>
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

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

@@ -27,12 +27,6 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
-      prop :last_row, type: Playbook::Props::Boolean,
-                      default: false
-      prop :immediate_parent_row_id, type: Playbook::Props::String,
-                                     default: ""
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -43,7 +37,7 @@ module Playbook
       end
 
       def td_classname(column, index)
-        classes = %w[id-cell]
+        classes = %w[id-cell chrome-styles]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
@@ -58,14 +52,12 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_checkbox_cell
         if selectable_rows
-          prefix = id ? "#{id}-" : ""
           pb_rails("table/table_cell", props: {
                      classname: "checkbox-cell",
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{prefix}select-row-#{row_id || row.object_id}",
-                       indeterminate_parent: "#{id ? "#{id}-" : ''}select-all-rows",
-                       name: "#{prefix}select-row-#{row_id || row.object_id}",
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
                          flat_advanced_table_select: true,
@@ -78,20 +70,9 @@ module Playbook
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_row_checkbox
         if selectable_rows
-          prefix = id ? "#{id}-" : ""
-          indeterminate_parent =
-            if depth.zero?
-              "#{prefix}select-all-rows"
-            else
-              "#{prefix}select-row-#{immediate_parent_row_id}"
-            end
-
           pb_rails("checkbox", props: {
-                     id: "#{prefix}select-row-#{row_id || row.object_id}",
-                     indeterminate_main: !last_row,
-                     indeterminate_main_labels: ["", ""],
-                     indeterminate_parent: indeterminate_parent,
-                     name: "#{prefix}select-row-#{row_id || row.object_id}",
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
                      },

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

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def td_classname(index)
-        classes = %w[id-cell]
+        classes = %w[id-cell chrome-styles]
         classes << "pinned-left" if index.zero? && responsive == "scroll"
         classes.join(" ")
       end

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)