playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308

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 %>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -21,6 +21,14 @@
     border-width: 0px;
   }
 
+  @function ends-with($string, $suffix) {
+    $suffix-length: str-length($suffix);
+    @if $suffix-length == 0 {
+      @return true;
+    }
+    @return str-slice($string, -$suffix-length) == $suffix;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;
@@ -30,9 +38,19 @@
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
-      &[class*=_#{"" + $color_name}] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
+      @if not ends-with($color_name, '_subtle') {
+        &[class*="_#{$color_name}"] {
+          @include pb_card_header_color($color_value);
+          color: lightenText($color_value);
+        }
+      }
+    }
+    @each $color_name, $color_value in $pb_card_header_colors {
+      @if ends-with($color_name, '_subtle') {
+        &[class*="_#{$color_name}"] {
+          @include pb_card_header_color($color_value);
+          color: lightenText($color_value);
+        }
       }
     }
     @each $color_name, $color_value in $pb_card_header_colors {

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -88,3 +88,21 @@
     Body
   <% end %>
 <% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -231,6 +231,46 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success_subtle"
+                >
+                    <Body
+                        text="Success Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error_subtle"
+                >
+                    <Body
+                        text="Error Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname,
-                        **combined_html_options
-                ) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,19 +1,14 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input 
-            data-default-value="<%= input_default_value %>" 
-            id="dropdown-selected-option" 
-            name="<%= object.name %>" 
-            style="display: none" 
-            <%= object.required ? "required" : ""%> 
+        <input
+            data-default-value="<%= input_default_value %>"
+            id="dropdown-selected-option"
+            name="<%= object.name %>"
+            style="display: none"
+            <%= object.required ? "required" : ""%>
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,20 +1,15 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
+            <% if content.present? %>
                 <%= content.presence %>
-            <% else %> 
+            <% else %>
                 <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
+                    display: "flex",
+                    justify_content: "center",
+                    padding:"xs",
+                    }) do %>
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>        
-<% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,15 +1,10 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.option[:id],
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
+        display: "flex",
+        justify_content: "center",
+        padding:"none",
         cursor: "pointer"
-        }) do %> 
+        }) do %>
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -18,4 +13,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,21 +1,16 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
+        align: "center",
+        border_radius:"lg",
+        classname: object.trigger_wrapper_classes,
+        cursor: "pointer",
+        justify: "between",
+        padding_x:"sm",
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -23,7 +18,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
+                        <div id="dropdown_trigger_custom_display" style="display: none;">
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -40,4 +35,3 @@
     <% end %>
     <% end %>
 <% end %>
-