playbook_ui 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0

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

@@ -8,22 +8,13 @@ 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
-        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: " ")
+        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
       end
 
-      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: " ")
+      def th_classname
+        generate_classname("table-header-cells", 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, index)}) do %>
+            <%= 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| %>

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

@@ -13,11 +13,6 @@ 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)
@@ -27,10 +22,9 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column, index)
+      def td_classname(column)
         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: object.td_classname(index) }) 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

@@ -16,9 +16,6 @@ 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)
@@ -28,12 +25,6 @@ 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,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_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_button/button.rb

@@ -31,7 +31,7 @@ module Playbook
       prop :form, default: nil
       prop :icon_font_family, type: Playbook::Props::Enum,
                               values: %w[far fas fab fak],
-                              default: "fas"
+                              default: "far"
 
       def options
         options = {

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,24 +1,5 @@
-<% 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 %>
+<%= pb_content_tag(object.tag) do %>
+    <%= content.presence %>
 <% end %>
 
 

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

@@ -17,13 +17,6 @@ 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,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) 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/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit fas fa-lg fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

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

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

@@ -3,9 +3,6 @@
 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,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>
@@ -64,30 +68,18 @@
   </div>
 
   <%= javascript_tag do %>
-    (function() {
-      const loadDatePicker = () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+    window.addEventListener("DOMContentLoaded", () => {
+      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]
-          })
-        }
-      }
-
-      window.addEventListener("DOMContentLoaded", () => {
-        loadDatePicker()
-      })
-
-      if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
+      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]
         })
       }
-    })()
+    })
   <% end %>
 <% end %>

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

@@ -73,8 +73,6 @@ 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/date_picker_helper.ts

@@ -192,7 +192,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate,
     minDate,
     mode,
-    nextArrow: '<i class="fas fa-angle-right"></i>',
+    nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
       calendarResizer()
       window.addEventListener('resize', calendarResizer)
@@ -213,7 +213,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
     position,
     positionElement: getPositionElement(positionElement),
-    prevArrow: '<i class="fas fa-angle-left"></i>',
+    prevArrow: '<i class="far fa-angle-left"></i>',
     static: staticPosition,
   })
 

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/example.yml

@@ -28,7 +28,6 @@ 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,7 +7,8 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
+      <%= 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("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 }) %>
@@ -31,6 +32,7 @@
             <% end %>
           <% end %>
         <% end %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -1,7 +0,0 @@
-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,8 +6,14 @@
 
 ] %>
 
-<%= 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 %>
+<%= 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 %>
   <% end %>
 <% end %>

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

@@ -11,7 +11,6 @@ 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