playbook_ui 16.3.0 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

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

@@ -1,5 +1,6 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
+import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -20,10 +21,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.childRowsMap = new Map();
   }
 
+  get table() {
+    return this.cachedTable || (this.cachedTable = this.element.closest("table"));
+  }
+
+  get mainTable() {
+    return this.cachedMainTable || (this.cachedMainTable = this.element.closest(".pb_advanced_table"));
+  }
+
   // Fetch and cache child rows for a given parent row ID
   childRowsFor(parentId) {
     if (!this.childRowsMap.has(parentId)) {
-      const table = this.element.closest("table");
+      const table = this.table;
       const rows = Array.from(
         table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
       );
@@ -33,7 +42,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   updateTableSelectedRowsAttribute() {
-    const mainTable = this.element.closest(".pb_advanced_table");
+    const mainTable = this.mainTable;
+    if (!mainTable) return;
     mainTable.dataset.selectedRows = JSON.stringify(
       Array.from(PbAdvancedTable.selectedRows)
     );
@@ -41,7 +51,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
   // Recalculate selected count based on all checked checkboxes
   recalculateSelectedCount() {
-    const table = this.element.closest("table");
+    const table = this.table;
+    if (!table) return;
     
     // Get all checkboxes that could be part of the selection
     // This includes row checkboxes and any parent checkboxes that might be programmatically checked
@@ -95,7 +106,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
     
     this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
     
     // Sync header select-all state
     if (selectAllCheckbox) {
@@ -139,7 +150,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     this.updateTableSelectedRowsAttribute();
 
-    const table = checkbox.closest("table");
+    const table = this.table;
     const selectAllCheckbox = table.querySelector("#select-all-rows");
 
     if (selectAllCheckbox) {
@@ -153,7 +164,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
@@ -161,10 +172,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   connect() {
-    const table = this.element.closest("table");
+    const table = this.table;
+    if (!table) return;
 
     this.hideCloseIcon();
-    const mainTable = this.element.closest(".pb_advanced_table");
+    const mainTable = this.mainTable;
     
     // This so it is hidden on first render
     if (mainTable) {
@@ -184,6 +196,17 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
+    // Measure header height so pinned rows don't overlap when header wraps (e.g. mobile)
+    if (mainTable) {
+      PbAdvancedTable.updateStickyHeaderRowHeights(mainTable);
+      const resizeObserver = new ResizeObserver(() => {
+        PbAdvancedTable.updateStickyHeaderRowHeights(mainTable);
+        PbAdvancedTable.updatePinnedRowsStickyTops(mainTable);
+      });
+      resizeObserver.observe(table);
+      mainTable._advancedTableHeaderResizeObserver = resizeObserver;
+    }
+
     // Delegate checkbox changes
     table.addEventListener("change", (event) => {
       const checkbox = event.target.closest('input[type="checkbox"]');
@@ -271,9 +294,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       }
 
       // Find direct child rows
-      const childRows = Array.from(
-        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
-      );
+      const childRows = this.childRowsFor(toggleBtn.id);
       this.toggleElement(childRows);
 
       // Restore original element context
@@ -284,7 +305,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.element.closest(".pb_advanced_table");
+    const parentElement = this.mainTable;
+    if (!parentElement) return;
 
     const table = document.getElementById(parentElement.id);
 
@@ -304,9 +326,64 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         lastVisibleRow.classList.add("last-visible-row");
         lastVisibleRow.classList.add("last-row-cell");
       }
+
+      PbAdvancedTable.updateStickyHeaderRowHeights(parentElement);
+      PbAdvancedTable.updatePinnedRowsStickyTops(table);
     }
   }
 
+  /**
+   * Measure thead height and set --advanced-table-header-height so pinned rows and
+   * multi-row sticky headers use the correct offset. Re-run when header wraps (e.g. mobile).
+   */
+  static updateStickyHeaderRowHeights(advancedTableWrapper) {
+    if (!advancedTableWrapper) return;
+    const table = advancedTableWrapper.querySelector("table.pb_table");
+    const thead = table?.querySelector("thead");
+    if (!thead) return;
+
+    const rows = Array.from(thead.querySelectorAll("tr"));
+    let totalHeight = 0;
+    rows.forEach((tr, index) => {
+      const h = tr.offsetHeight;
+      if (index === 0) {
+        advancedTableWrapper.style.setProperty(
+          "--advanced-table-header-row-0-height",
+          `${h}px`
+        );
+      } else if (index === 1) {
+        advancedTableWrapper.style.setProperty(
+          "--advanced-table-header-row-1-height",
+          `${h}px`
+        );
+      }
+      totalHeight += h;
+    });
+    advancedTableWrapper.style.setProperty(
+      "--advanced-table-header-height",
+      `${totalHeight}px`
+    );
+  }
+
+  /**
+   * Recompute sticky top for visible pinned rows so collapsed rows don't leave a gap.
+   * Call after expand/collapse and on load.
+   */
+  static updatePinnedRowsStickyTops(advancedTableWrapper) {
+    const pinnedTbody = advancedTableWrapper?.querySelector("tbody.pinned-rows-tbody");
+    if (!pinnedTbody) return;
+
+    const pinnedRows = Array.from(pinnedTbody.querySelectorAll("tr.pinned-row"));
+    const visibleRows = pinnedRows.filter(
+      (tr) => tr.style.display !== "none" && tr.offsetParent !== null
+    );
+
+    const headerOffset = "var(--advanced-table-header-height, 44px)";
+    visibleRows.forEach((tr, index) => {
+      tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
+    });
+  }
+
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
@@ -316,11 +393,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     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}-"]`
-        );
+      const childRowsAll = this.table.querySelectorAll(
+        `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+      );
 
       childRowsAll.forEach((childRow) => {
         const dataContent = childRow.dataset.advancedTableContent;
@@ -382,8 +457,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       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")
+        const childRows = this.table
           .querySelectorAll(
             `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
           );
@@ -401,28 +475,39 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     const isVisible = elements[0].classList.contains("is-visible");
 
-    isVisible ? this.hideElement(elements) : this.showElement(elements);
-    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+    const isExpanded = toggleVisibility({
+      isVisible,
+      onHide: () => this.hideElement(elements),
+      onShow: () => this.showElement(elements),
+    });
+
+    isExpanded ? this.displayUpArrow() : this.displayDownArrow();
 
     const row = this.element.closest("tr");
     if (row) {
-      row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("pb-bg-row-white", isVisible);
+      row.classList.toggle("bg-silver", isExpanded);
+      row.classList.toggle("pb-bg-row-white", !isExpanded);
     }
 
     this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
-      "inline-block";
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: true,
+    });
   }
 
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
-      "inline-block";
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: false,
+    });
   }
 
   static handleToggleAllHeaders(element) {
@@ -500,3 +585,19 @@ window.expandAllRows = (element) => {
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
 };
+
+// Fix header height and pinned row sticky tops on load (header wrap + collapsed rows)
+function updateAllAdvancedTableStickyHeights() {
+  document.querySelectorAll(".pb_advanced_table").forEach((wrapper) => {
+    PbAdvancedTable.updateStickyHeaderRowHeights(wrapper);
+    PbAdvancedTable.updatePinnedRowsStickyTops(wrapper);
+  });
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", updateAllAdvancedTableStickyHeights);
+  } else {
+    updateAllAdvancedTableStickyHeights();
+  }
+}

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

@@ -1,3 +1,9 @@
+// Acts as outer “card frame” on the advanced-table wrapper (table-card from Table) is included from `_advanced_table.scss` only when `:not(.advanced-table-no-table-container)`/container: false is not present.
+@mixin advanced-table-sticky-wrapper-frame($border-color) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
+}
+
 @mixin advanced-table-sticky-mixin(
   $border-color,
   $bg-main,
@@ -5,8 +11,6 @@
   $highlight: #E5EEFA,
   $highlight-dark: #202850,
 ) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
   [class^="pb_table"].table-sm:not(.no-hover).table-card

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

@@ -1,5 +1,22 @@
-<%= pb_content_tag(:tbody) do %>
-        <% object.table_data.each do |row| %>
-          <%= render_row_and_children(row, object.column_definitions, 0, false) %>
-        <% end %>
+<% table_data = object.table_data || [] %>
+<% if object.has_pinned_rows? %>
+  <%= pb_content_tag(:tbody, class: "pinned-rows-tbody") do %>
+    <% next_index = 0 %>
+    <% object.pinned_root_rows.each do |root_info| %>
+      <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
+      <%= row_output %>
+    <% end %>
+  <% end %>
+  <%= pb_content_tag(:tbody) do %>
+    <% table_data.each do |row| %>
+      <% result = object.render_row_and_children(row, object.column_definitions, 0, false, skip_pinned_ids: object.pinned_ids_set) %>
+      <%= result.is_a?(Array) ? result[0] : result %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= pb_content_tag(:tbody) do %>
+    <% table_data.each do |row| %>
+      <%= object.render_row_and_children(row, object.column_definitions, 0, false) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -27,6 +27,8 @@ module Playbook
                          default: []
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
+      prop :pinned_rows, type: Playbook::Props::HashProp,
+                         default: {}
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -42,14 +44,21 @@ 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: {}, immediate_parent_row_id: nil, is_pinned_row: false, pinned_index: nil, skip_pinned_ids: nil, initial_table_data_attributes: nil)
+        if skip_pinned_ids && row_id_for(row) && skip_pinned_ids.include?(row_id_for(row).to_s)
+          return is_pinned_row ? [ActiveSupport::SafeBuffer.new, pinned_index] : ActiveSupport::SafeBuffer.new
+        end
+
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
-        leaf_columns = flatten_columns(column_definitions)
+        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_headers_arr = subrow_headers || []
+        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers_arr[current_depth - 1].present?
+        last_row = subrow_headers_arr.length == current_depth
+
+        next_pinned_index = pinned_index
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -58,7 +67,16 @@ module Playbook
           row_parent: "#{table_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"
+        if is_first_child_of_subrow && enable_toggle_expansion == "all"
+          subrow_props = { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers_arr[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_pinned_row && next_pinned_index
+            subrow_props[:is_pinned_row] = true
+            subrow_props[:pinned_index] = next_pinned_index
+            subrow_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: "var(--pb_table_sticky_bg, #f5f5f5)") }
+            next_pinned_index += 1
+          end
+          output << pb_rails("advanced_table/table_subrow_header", props: subrow_props)
+        end
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -67,11 +85,19 @@ module Playbook
                                       row_parent: nil,
                                     }
                                   else
-                                    table_data_attributes
+                                    initial_table_data_attributes || table_data_attributes
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { table_id: table_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, inline_row_loading: inline_row_loading })
+        row_props = { table_id: table_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, inline_row_loading: inline_row_loading }
+        if is_pinned_row && next_pinned_index
+          row_props[:is_pinned_row] = true
+          row_props[:pinned_index] = next_pinned_index
+          row_bg = (row_styling || []).find { |s| s[:row_id].to_s == row_id_for(row).to_s }&.[](:background_color) || "white"
+          row_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: row_bg) }
+          next_pinned_index += 1
+        end
+        output << pb_rails("advanced_table/table_row", props: row_props)
 
         # Render inline loading row when inline_row_loading is enabled and row has empty children
         if inline_row_loading
@@ -103,11 +129,21 @@ 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])
+            child_opts = { additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id] }
+            child_opts[:is_pinned_row] = is_pinned_row
+            child_opts[:pinned_index] = next_pinned_index if is_pinned_row
+            child_opts[:skip_pinned_ids] = skip_pinned_ids if skip_pinned_ids
+
+            child_output, next_pinned_index = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, **child_opts)
+            output << child_output
           end
         end
 
-        output
+        if is_pinned_row
+          [output, next_pinned_index]
+        else
+          output
+        end
       end
 
       def classname
@@ -142,6 +178,76 @@ module Playbook
         end
       end
 
+      def row_id_for(row)
+        return nil if row.nil?
+
+        row[:id] || row["id"]
+      end
+
+      def pinned_top_ids
+        return [] if pinned_rows.nil? || !pinned_rows.respond_to?(:[])
+
+        top = pinned_rows["top"] || pinned_rows[:top]
+        Array(top).map(&:to_s)
+      end
+
+      def pinned_ids_set
+        return Set.new if pinned_top_ids.blank?
+
+        set = Set.new
+        pinned_root_rows.each do |root|
+          collect_row_and_descendant_ids(root[:row], set)
+        end
+        set
+      end
+
+      def collect_row_and_descendant_ids(row, set)
+        id = row_id_for(row)
+        set.add(id.to_s) if id
+        row_children_for(row)&.each { |child| collect_row_and_descendant_ids(child, set) }
+      end
+
+      def find_row_by_id(data, id, depth: 0, ancestor_ids: [], parent_row: nil)
+        id_str = id.to_s
+        Array(data).each do |row|
+          return { row: row, depth: depth, ancestor_ids: ancestor_ids, parent_row: parent_row } if row_id_for(row).to_s == id_str
+
+          found = find_row_by_id(row_children_for(row), id_str, depth: depth + 1, ancestor_ids: ancestor_ids + [row.object_id], parent_row: row)
+          return found if found
+        end
+        nil
+      end
+
+      def pinned_root_rows
+        return [] if pinned_top_ids.blank?
+
+        pinned_top_ids.filter_map { |id| find_row_by_id(table_data, id) }
+      end
+
+      def has_pinned_rows?
+        pinned_root_rows.any?
+      end
+
+      # Build inline style for sticky pinned row (matches React). Pass via html_options so the tr gets the attribute.
+      def build_pinned_row_style(pinned_index, background: "white")
+        header_offset = "var(--advanced-table-header-height, 44px)"
+        row_offset = "calc(2.5em * #{pinned_index})"
+        "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: #{background};"
+      end
+
+      def pinned_root_initial_data_attributes(root_info)
+        return {} if root_info[:depth].to_i.zero?
+
+        anc = root_info[:ancestor_ids] || []
+        content = (anc + [root_info[:row].object_id]).join("-")
+        {
+          top_parent: "#{table_id}_#{anc.first}",
+          row_depth: root_info[:depth],
+          row_parent: "#{table_id}_#{anc.last}",
+          advanced_table_content: content,
+        }
+      end
+
       def cell_accessors_length(col_defs)
         first_col = col_defs.first
         return 0 unless first_col

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

@@ -3,9 +3,11 @@
   button_color = row_style&.[](:expand_button_color)
   bg_color = row_style&.[](:background_color)
   font_color = row_style&.[](:font_color)
+  tr_options = (object.html_options || {}).stringify_keys
+  tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ")
 %>
 
-<%= pb_content_tag(:tr) do %>
+<%= pb_content_tag(:tr, tr_options) do %>
     <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
     <% if has_separate_checkbox %>
         <%= object.render_checkbox_cell %>

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

@@ -35,13 +35,24 @@ module Playbook
                                      default: ""
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
+      prop :is_pinned_row, type: Playbook::Props::Boolean,
+                           default: false
+      prop :pinned_index, type: Playbook::Props::Numeric,
+                          default: nil
+      prop :html_options, type: Playbook::Props::HashProp,
+                          default: {}
+      prop :classname, type: Playbook::Props::String,
+                       default: ""
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
       end
 
       def classname
-        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
+        classes = ["pb_table_tr", "pb-bg-row-white", subrow_depth_classname]
+        classes << "pinned-row" if is_pinned_row
+        classes.reject!(&:blank?)
+        generate_classname(*classes, separator: " ")
       end
 
       def td_classname(column, index)

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

@@ -1,4 +1,7 @@
-<%= pb_content_tag(:tr) do %>
+<% tr_options = (object.html_options || {}).stringify_keys %>
+<% tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ") %>
+
+<%= pb_content_tag(:tr, tr_options) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>

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

@@ -19,13 +19,21 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :is_pinned_row, type: Playbook::Props::Boolean,
+                           default: false
+      prop :pinned_index, type: Playbook::Props::Numeric,
+                          default: nil
+      prop :html_options, type: Playbook::Props::HashProp,
+                          default: {}
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
       end
 
       def classname
-        generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
+        classes = ["pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname]
+        classes << "pinned-row" if is_pinned_row
+        generate_classname(*classes, separator: " ")
       end
 
       def td_classname(index)

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -57,7 +57,7 @@ $pb_button_border_width: 0px;
   }
 
   .loading-icon {
-    position: absolute;
+    position: static;
     display: none;
   }
   .pb_button_content {
@@ -158,10 +158,15 @@ $pb_button_border_width: 0px;
 // Loading =====================
 @mixin pb_button_loading($loading: false) {
   @if $loading == true {
+    display: inline-grid;
+    place-items: center;
+
     .loading-icon {
+      grid-area: 1 / 1;
       display: block;
     }
     .pb_button_content {
+      grid-area: 1 / 1;
       visibility: hidden;
     }
   }

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md

@@ -0,0 +1,19 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```erb
+<%= pb_rails("flex", props: {
+  display: { xs: "flex", default: "none" },
+  orientation: "column",
+  width: "100%",
+}) do %>
+  <%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
+<% end %>
+```

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md

@@ -0,0 +1,23 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```jsx
+import { Flex, Button } from "playbook-ui"
+
+const Example = () => (
+  <Flex
+    display={{ xs: "flex", default: "none" }}
+    orientation="column"
+    width="100%"
+  >
+    <Button fullWidth text="Add" />
+  </Flex>
+)
+```

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -43,6 +43,11 @@ $pb_button_styles: (
       @include pb_circle_icon_button;
     }
   }
+
+  .pb_button_kit.pb_button_loading svg.loading-icon {
+    position: absolute;
+  }
+
   :first-child {
     &.pb_button_kit.pb_button_link {
       @include pb_circle_icon_button_active;