playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5673

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

@@ -16,6 +16,9 @@ module Playbook
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -46,12 +49,12 @@ 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", subrow_data_attributes: subrow_data_attributes }) 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 = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # 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 })
+        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 })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -74,7 +77,16 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
+      end
+
+      def pinned_cell_class(index)
+        return "pinned-left" if index.zero? && responsive == "scroll"
+
+        ""
       end
 
     private

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

@@ -3,17 +3,17 @@
     <%= 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 %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('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 %>

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

@@ -8,13 +8,22 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def classname
-        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
-      def th_classname
-        generate_classname("table-header-cells", separator: " ")
+      def th_classname(is_first_column: false)
+        additional_classes = []
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+
+        generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
 
       def header_rows

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

@@ -1,7 +1,7 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -13,6 +13,11 @@ module Playbook
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
+      prop :is_pinned_left, type: Playbook::Props::Boolean,
+                            default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -22,9 +27,10 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column)
+      def td_classname(column, index)
         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(" ")
       end
 

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

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) 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

@@ -16,6 +16,9 @@ module Playbook
                                default: true
       prop :subrow_data_attributes, type: Playbook::Props::HashProp,
                                     default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
@@ -25,6 +28,12 @@ module Playbook
         generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
+      def td_classname(index)
+        classes = %w[id-cell chrome-styles]
+        classes << "pinned-left" if index.zero? && responsive == "scroll"
+        classes.join(" ")
+      end
+
     private
 
       def subrow_depth_classname

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.html.erb

@@ -1,5 +1,24 @@
-<%= pb_content_tag(object.tag) do %>
-    <%= content.presence %>
+<% if object.draggable_item %>
+    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+        <%= pb_content_tag(object.tag) do %>
+            <% if object.draggable_item %>
+                <%= pb_rails("flex", props: { align: "center" }) do %>
+                    <% if object.drag_handle %>
+                        <span classname="card_draggable_handle">
+                            <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
+                        </span>
+                    <% end %>
+                    <div style="width: 100%">
+                        <%= content.presence %>
+                    </div>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% else %>
+    <%= pb_content_tag(object.tag) do %>
+        <%= content.presence %>
+    <% end %>
 <% end %>
 
 

data/app/pb_kits/playbook/pb_card/card.rb

@@ -17,6 +17,13 @@ module Playbook
       prop :background, type: Playbook::Props::Enum,
                         values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
+      prop :drag_id, type: Playbook::Props::String
+      prop :draggable_item, type: Playbook::Props::Boolean,
+                            default: false
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :items, type: Playbook::Props::Array,
+                   default: []
 
       def classname
         generate_classname("pb_card_kit",

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_collapsible/collapsible.html.erb

@@ -1,3 +1,5 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(
+  object.tag
+) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbCollapsible
     class Collapsible < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
+                 default: "div"
       def classname
         generate_classname("pb_collapsible_kit")
       end

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

@@ -1,9 +1,5 @@
-<%= 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(:div,
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>
@@ -68,18 +64,30 @@
   </div>
 
   <%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
-      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+    (function() {
+      const loadDatePicker = () => {
+        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-      if (<%= object.selection_type == "quickpick" %>) {
-        document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-          const startDate = document.getElementById("<%= object.start_date_id %>")
-          const endDate = document.getElementById("<%= object.end_date_id %>")
-          const splittedValue = target.value.split(" to ")
-          startDate.value = splittedValue[0]
-          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        if (<%= object.selection_type == "quickpick" %>) {
+          document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+            const startDate = document.getElementById("<%= object.start_date_id %>")
+            const endDate = document.getElementById("<%= object.end_date_id %>")
+            const splittedValue = target.value.split(" to ")
+            startDate.value = splittedValue[0]
+            endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+          })
+        }
+      }
+
+      window.addEventListener("DOMContentLoaded", () => {
+        loadDatePicker()
+      })
+
+      if (<%= !object.custom_event_type.empty? %>) {
+        window.addEventListener("<%= object.custom_event_type %>", () => {
+          loadDatePicker()
         })
       }
-    })
+    })()
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -73,6 +73,8 @@ module Playbook
                       default: false
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
+      prop :custom_event_type, type: Playbook::Props::String,
+                               default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-
+You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-turbo-frames", custom_event_type: "datePickerLoader" }) %>
+<%= pb_rails("button", props: { id: "date-picker-loader", text: "Click Event Simulation" }) %>
+
+<script>
+    document.getElementById("date-picker-loader").addEventListener("click", () => {
+        window.document.dispatchEvent(
+            new CustomEvent("datePickerLoader", {
+                bubbles: true,
+            })
+        )
+        console.log("Event 'datePickerLoader' dispatched - in a real implementation, this event would trigger the date picker's reinitialization through the custom_event_type prop connection")
+    })
+</script>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md

@@ -0,0 +1,3 @@
+The `custom_event_type` prop allows you to specify a custom event that will trigger the date picker's initialization, in addition to the default initialization on `DOMContentLoaded`. This is particularly useful in dynamic contexts like Turbo Frame updates where you need to reinitialize the date picker after new content loads. For Turbo integration, use `custom_event_type: "turbo:before-render"` to ensure the date picker properly reinitializes after Turbo navigation events. 
+
+In this example, we demonstrate the setup pattern by connecting a button to dispatch a "datePickerLoader" event - while the date picker's event listener is properly configured through the `custom_event_type` prop, this demo only logs the event dispatch to the console to illustrate the connection structure.

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

@@ -28,6 +28,7 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
+  - date_picker_turbo_frames: Within Turbo Frames
 
   react:
   - date_picker_default: Default

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb

@@ -7,8 +7,7 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
           <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
             <%= pb_rails("flex", props:{gap: "xs"}) do %>
               <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -32,7 +31,6 @@
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the Card kit, you can do the following:
+
+Use the `draggable` kit and manage state as shown.
+
+`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
+
+The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,14 +6,8 @@
 
 ] %>
 
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("list", props: {ordered: false}) do %>
-        <% initial_items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
-            <% end %>
-        <% end %>
-    <% end %>
+<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
+  <% initial_items.each do |item| %>
+    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -0,0 +1,5 @@
+For a simplified version of the Draggable API for the List kit, you can do the following:
+
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
+
+An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb

@@ -0,0 +1,38 @@
+<%= pb_rails("selectable_list",
+        props: {
+          enable_drag: true,
+          variant: "radio",
+          items: [
+            { drag_id: "41",
+              text: "Task 1",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "42",
+              text: "Task 2",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "43",
+              text: "Task 3",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "44",
+              text: "Task 4",
+              input_options: {
+                value: "4",
+                name: "radio-name",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -0,0 +1,3 @@
+For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
+
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -11,6 +11,7 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards