playbook_ui 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308

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

@@ -1,138 +1,231 @@
-import PbEnhancedElement from '../pb_enhanced_element'
+import PbEnhancedElement from "../pb_enhanced_element";
 
-const ADVANCED_TABLE_SELECTOR = '[data-advanced-table]'
-const CONTENT_SELECTOR = '[data-advanced-table-content="id"]'
-const DOWN_ARROW_SELECTOR = '#advanced-table_open_icon'
-const UP_ARROW_SELECTOR = '#advanced-table_close_icon'
+const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
+const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
+const UP_ARROW_SELECTOR = "#advanced-table_close_icon";
 
 export default class PbAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return ADVANCED_TABLE_SELECTOR
+    return ADVANCED_TABLE_SELECTOR;
   }
 
   get target() {
-    return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
+    const table = this.element.closest("table");
+    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
-  
-  static expandedRows = new Set()
-  static isCollapsing = false
+
+  static expandedRows = new Set();
+  static isCollapsing = false;
 
   connect() {
-    this.element.addEventListener('click', () => {
+    this.element.addEventListener("click", () => {
       if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        const isExpanded =
+          this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
         if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id)
+          PbAdvancedTable.expandedRows.add(this.element.id);
         } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id)
+          PbAdvancedTable.expandedRows.delete(this.element.id);
         }
+        this.toggleElement(this.target);
       }
-      this.toggleElement(this.target)
-    })
+    });
+
+    const nestedButtons = this.element
+      .closest("table")
+      .querySelectorAll("[data-advanced-table]");
+    nestedButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const isExpanded =
+          button.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
+        if (isExpanded) {
+          PbAdvancedTable.expandedRows.add(button.id);
+        } else {
+          PbAdvancedTable.expandedRows.delete(button.id);
+        }
+      });
+    });
   }
 
-  showElement(elem) {
-    const getHeight = () => {
-      elem.style.display = 'block'
-      const height = elem.scrollHeight + 'px'
-      elem.style.display = ''
-      return height
-    }
-
-    const height = getHeight()
-    elem.classList.add('is-visible')
-    elem.style.height = height
-    elem.style.overflow = "hidden"
-
-    window.setTimeout(() => {
-      elem.style.height = ''
-      elem.style.overflow = "visible"
-    }, 250)
+  showElement(elements) {
+    elements.forEach((elem) => {
+      elem.style.display = "table-row";
+      elem.classList.add("is-visible");
+      const childRowsAll = this.element
+        .closest("table")
+        .querySelectorAll(
+          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+        );
+
+      childRowsAll.forEach((childRow) => {
+        const dataContent = childRow.dataset.advancedTableContent;
+
+        if (!dataContent) {
+          return;
+        }
+        // Split the dataContent to get all ancestor IDs, check against ExpandedRows
+        const ancestorIds = dataContent.split("-").slice(0, -1);
+
+        const prefixedAncestorIds = ancestorIds.map(
+          (id) => `${childRow.id}_${id}`
+        );
+        const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
+          PbAdvancedTable.expandedRows.has(id)
+        );
+
+        const checkIfParentIsExpanded = () => {
+          if (dataContent.endsWith("sr")) {
+            const parentRowId = childRow.dataset.rowParent;
+            const isParentVisible =
+              childRow.previousElementSibling.classList.contains("is-visible");
+            if (parentRowId) {
+              const isInSet = PbAdvancedTable.expandedRows.has(parentRowId);
+              if (isInSet && isParentVisible) {
+                return true;
+              }
+            }
+          }
+          return false;
+        };
+
+        if (allAncestorsExpanded || checkIfParentIsExpanded()) {
+          childRow.style.display = "table-row";
+          childRow.classList.add("is-visible");
+        } else {
+          childRow.style.display = "none";
+          childRow.classList.remove("is-visible");
+        }
+      });
+    });
   }
 
-  hideElement(elem) {
-    elem.style.height = elem.scrollHeight + 'px'
+  hideElement(elements) {
+    elements.forEach((elem) => {
+      elem.style.display = "none";
+      elem.classList.remove("is-visible");
 
-    window.setTimeout(() => {
-      elem.style.height = '0'
-      elem.style.paddingTop = '0'
-      elem.style.paddingBottom = '0'
-      elem.style.overflow = "hidden"
-    }, 1)
+      // Remove the row ID from expandedRows when this row is hidden
+      if (PbAdvancedTable.expandedRows.has(elem.id)) {
+        PbAdvancedTable.expandedRows.delete(elem.id);
+      }
 
-    window.setTimeout(() => {
-      elem.classList.remove('is-visible')
-      elem.style.overflow = ""
-    }, 200)
+      const childrenArray = elem.dataset.advancedTableContent.split("-");
+      const currentDepth = parseInt(elem.dataset.rowDepth);
+      if (childrenArray.length > currentDepth) {
+        // Find the child rows corresponding to this parent row
+        const childRows = this.element
+          .closest("table")
+          .querySelectorAll(
+            `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+          );
+
+        childRows.forEach((childRow) => {
+          childRow.style.display = "none";
+          childRow.classList.remove("is-visible");
+        });
+      }
+    });
   }
 
-  toggleElement(elem) {
-    if (elem.classList.contains('is-visible')) {
-      this.hideElement(elem)
-      this.displayDownArrow()
-      return
-    }
+  toggleElement(elements) {
+    if (!elements.length) return;
 
-    this.showElement(elem)
-    this.displayUpArrow()
+    const isVisible = elements[0].classList.contains("is-visible");
+    if (isVisible) {
+      this.hideElement(elements);
+      this.displayDownArrow();
+    } else {
+      this.showElement(elements);
+      this.displayUpArrow();
+    }
   }
 
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
   }
 
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
   }
 
   static handleToggleAllHeaders(element) {
-    const table = element.closest('.pb_table')
-    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
-    
-    const expandedRows = Array.from(firstLevelButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedRows.length === firstLevelButtons.length) {
-      expandedRows.forEach(button => {
-        button.click()
-      })
-      this.expandedRows.clear()
+    const table = element.closest(".pb_table");
+    const firstLevelButtons = table.querySelectorAll(
+      ".pb_advanced_table_body > .pb_table_tr[data-row-depth='0'] [data-advanced-table]"
+    );
+
+    const allExpanded = Array.from(firstLevelButtons).every(
+      (button) =>
+        button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
+    );
+
+    if (allExpanded) {
+      firstLevelButtons.forEach((button) => {
+        button.click();
+        PbAdvancedTable.expandedRows.delete(button.id);
+      });
     } else {
-      firstLevelButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
+      firstLevelButtons.forEach((button) => {
+        if (!PbAdvancedTable.expandedRows.has(button.id)) {
+          button.click();
+          PbAdvancedTable.expandedRows.add(button.id);
+        }
+      });
+
+      PbAdvancedTable.expandedRows.forEach((rowId) => {
+        const nestedButton = table.querySelector(
+          `[data-advanced-table][id="${rowId}"]`
+        );
+        if (nestedButton && !firstLevelButtons.contains(nestedButton)) {
+          nestedButton.click();
         }
-      })
+      });
     }
   }
+
   static handleToggleAllSubRows(element, rowDepth) {
-    const parentElement = element.closest(".toggle-content")
-    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
-    
-    const expandedSubRows = Array.from(subrowButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedSubRows.length === subrowButtons.length) {
-      expandedSubRows.forEach(button => {
-        button.click()
-      })
+    const table = element.closest(".pb_table");
+    const parentRow = element.closest("tr");
+    if (!parentRow) {
+      return;
+    }
+    const rowParentId = parentRow.dataset.rowParent;
+    // Select all buttons that for subrows at that depth and with same rowParent
+    const subRowButtons = table.querySelectorAll(
+      `.pb_advanced_table_body > .pb_table_tr[data-row-depth='${rowDepth}'].pb_table_tr[data-row-parent='${rowParentId}'] [data-advanced-table]`
+    );
+
+    const allExpanded = Array.from(subRowButtons).every(
+      (button) =>
+        button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
+    );
+
+    if (allExpanded) {
+      subRowButtons.forEach((button) => {
+        button.click();
+        PbAdvancedTable.expandedRows.delete(button.id);
+      });
     } else {
-      subrowButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
+      subRowButtons.forEach((button) => {
+        if (!PbAdvancedTable.expandedRows.has(button.id)) {
+          button.click();
+          PbAdvancedTable.expandedRows.add(button.id);
         }
-      })
+      });
     }
   }
 }
 
 window.expandAllRows = (element) => {
-  PbAdvancedTable.handleToggleAllHeaders(element)
-}
+  PbAdvancedTable.handleToggleAllHeaders(element);
+};
+
 window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
-}
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
+};

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

@@ -1,4 +1,4 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:tbody) do %>
         <% object.table_data.each do |row| %>
           <%= render_row_and_children(row, object.column_definitions, 0, false) %>
         <% end %>

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

@@ -17,19 +17,56 @@ module Playbook
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
+      def flatten_columns(columns)
+        columns.flat_map do |col|
+          if col[:columns]
+            flatten_columns(col[:columns])
+          elsif col[:accessor].present?
+            if has_grouped_headers?
+              col.merge(is_last_in_group: last_in_group?(columns, col))
+            else
+              col
+            end
+          end
+        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: {})
+        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?
 
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
+        subrow_data_attributes = {
+          advanced_table_content: subrow_ancestor_ids.join("-"),
+          row_depth: current_depth,
+          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", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+
+        current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
+        # 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 })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do
-            row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1, row.children.first == child_row)
-            end.join.html_safe
+          row[:children].each do |child_row|
+            is_first_child = row[:children].first == child_row
+            immediate_parent_id = row.object_id
+            data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
+
+            child_data_attributes = {
+              top_parent: "#{id}_#{top_parent_id}",
+              row_depth: current_depth + 1,
+              row_parent: "#{id}_#{immediate_parent_id}",
+              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)
           end
         end
 
@@ -37,7 +74,17 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", "pb_table_tbody", separator: " ")
+        generate_classname("pb_advanced_table_body", separator: " ")
+      end
+
+    private
+
+      def has_grouped_headers?
+        column_definitions.any? { |col| col.key?(:columns) }
+      end
+
+      def last_in_group?(columns, current_col)
+        columns.last[:accessor] == current_col[:accessor]
       end
     end
   end

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

@@ -1,18 +1,21 @@
-<%= pb_content_tag do %>
-        <%= pb_rails("table/table_row", props: { tag: "div" }) do %>
-            <% object.column_definitions.each_with_index do |item, index| %>
-                <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
-                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
-                        <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button
-                              class="gray-icon toggle-all-icon"
-                              onclick="expandAllRows(this); event.preventDefault();">
-                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                            </button>
-                        <% end %>
-                        <%= item[:label] %>
+<%= pb_content_tag(:thead) do %>
+  <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <%= pb_rails("table/table_row") do %>
+      <% header_row.each_with_index do |cell, cell_index| %>
+        <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+                        <button
+                            class="gray-icon toggle-all-icon"
+                            onclick="expandAllRows(this); event.preventDefault();">
+                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                        </button>
                     <% end %>
+                    <%= cell[:label] %>
                 <% end %>
-            <% end %>
         <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -16,6 +16,84 @@ module Playbook
       def th_classname
         generate_classname("table-header-cells", separator: " ")
       end
+
+      def header_rows
+        wrapped_columns = wrap_leaf_columns(column_definitions)
+
+        rows = []
+        max_depth = compute_max_depth(wrapped_columns)
+        max_depth.times { rows << [] }
+        process_columns(wrapped_columns, rows, 0, max_depth)
+        rows
+      end
+
+    private
+
+      def compute_max_depth(columns)
+        columns.map do |col|
+          col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
+        end.max || 1
+      end
+
+      def process_columns(columns, rows, current_depth, max_depth)
+        total_columns = columns.size
+        columns.each_with_index do |col, index|
+          is_last = index == total_columns - 1
+          if col[:columns]
+            colspan = compute_leaf_columns(col[:columns])
+            rows[current_depth] << {
+              label: col[:label],
+              colspan: colspan,
+              is_last_in_group: is_last && current_depth.positive?,
+            }
+
+            process_columns(col[:columns], rows, current_depth + 1, max_depth)
+          else
+            colspan = 1
+            rows[current_depth] << {
+              label: col[:label],
+              colspan: colspan,
+              accessor: col[:accessor],
+              sort_menu: col[:sort_menu],
+              is_last_in_group: is_last && current_depth.positive?,
+            }
+          end
+        end
+      end
+
+      def compute_leaf_columns(columns)
+        columns.reduce(0) do |sum, col|
+          col[:columns] ? sum + compute_leaf_columns(col[:columns]) : sum + 1
+        end
+      end
+
+      def wrap_leaf_columns(column_definitions)
+        max_depth = compute_max_depth(column_definitions)
+
+        column_definitions.map do |col|
+          if col.key?(:columns)
+            {
+              label: col[:label],
+              columns: wrap_leaf_columns(col[:columns]),
+            }
+          else
+            # For leaf columns, wrap with empty labels up to max depth to get proper structure
+            wrap_leaf_column(col, max_depth)
+          end
+        end
+      end
+
+      def wrap_leaf_column(col, max_depth)
+        wrapped = {
+          accessor: col[:accessor],
+          label: col[:label] || "",
+          sort_menu: col[:sort_menu] || nil,
+        }
+        (max_depth - 1).times do
+          wrapped = { label: "", columns: [wrapped] }
+        end
+        wrapped
+      end
     end
   end
 end

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

@@ -1,6 +1,7 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
+            <% next unless column[:accessor].present? %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
@@ -13,7 +14,7 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= object.row.object_id.to_s + object.id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" 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", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>

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

@@ -11,13 +11,21 @@ module Playbook
       prop :depth
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :table_data_attributes, type: Playbook::Props::HashProp,
+                                   default: {}
+
+      def data
+        Hash(prop(:data)).merge(table_data_attributes)
+      end
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname
-        generate_classname("id-cell", "chrome-styles", separator: " ")
+      def td_classname(column)
+        classes = %w[id-cell chrome-styles]
+        classes << "last-cell" if column[:is_last_in_group]
+        classes.join(" ")
       end
 
       def depth_accessors
@@ -29,6 +37,8 @@ module Playbook
     private
 
       def custom_renderer_value(column, index)
+        return nil unless column[:accessor].present?
+
         if index.zero?
           if depth.zero?
             row[column[:accessor].to_sym]
@@ -37,6 +47,7 @@ module Playbook
               key = item.to_sym
               return row[key] if depth - 1 == accessor_index
             end
+            nil
           end
         else
           row[column[:accessor].to_sym]

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

@@ -1,10 +1,6 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -14,13 +14,15 @@ module Playbook
                            default: ""
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :subrow_data_attributes, type: Playbook::Props::HashProp,
+                                    default: {}
 
-      def classname
-        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+      def data
+        Hash(prop(:data)).merge(subrow_data_attributes)
       end
 
-      def td_classname
-        generate_classname("id-cell", "chrome-styles", separator: " ")
+      def classname
+        generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
     private

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,6 +1,5 @@
-<%= content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options,
-                **combined_html_options) do %>
+<%= pb_content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>