playbook_ui 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355 → 14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10a0e4cb9340097b9e793ab5a4c3cf062ccb0f33df36fc321495215cbcdf89ce
-  data.tar.gz: 63b345af0b4b60033d485c080600f2c57bccc4de2eeb3259f2ce68bf9fe28b79
+  metadata.gz: 071ac4a9d2d662a3315cc562b8bebad49635a3d41cec083b5916b78bec1ab34e
+  data.tar.gz: '0823600ed64eb9bdab0670628538b695d77f5edb4d94a5409669c23248082644'
 SHA512:
-  metadata.gz: cafe574e0d494c8a4466dcbf01e2c7502701bf3be1cf19f3419505fa6812b6613eddd2a60d6d092a30c4ca489bf67dc32a75a3c53975d32dbd01375745f634d7
-  data.tar.gz: b3a6601c23e7426a97a5c28b9d613c500ce905dc49b381769714419c6ae6478ad78bba36243d489ea666a38b03e7d23c3871cf894b19622cfa4f6b44bffa1224
+  metadata.gz: 8fae221d702eb0002c5149e4ab73266d73b82c79dd441d82209125b0f5c255fcad3d34303bf6c35a42a09f8b09a90443854500aee4360b66eb998e16a2d0afa4
+  data.tar.gz: 1c02d773a31afe890617399e7897813c0819e9b3227cace5d8f4da8415d0a0200e980dec350e792a8499067ac4e9f198033ef5d1546bac7d800b210630a237c9

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

@@ -68,7 +68,7 @@
   </div>
 
   <%= javascript_tag do %>
-    const loadDatePicker = () => {
+    window.addEventListener("DOMContentLoaded", () => {
       datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
       if (<%= object.selection_type == "quickpick" %>) {
@@ -80,17 +80,6 @@
           endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
         })
       }
-    }
-
-    window.addEventListener("DOMContentLoaded", () => {
-      loadDatePicker();
-    });
-    
-    if (<%= !object.custom_event_listener.empty? %>) {
-      window.addEventListener("<%= object.custom_event_listener %>", () => {
-        console.log("Custom Event listener fired");
-        loadDatePicker();
-      })
-    }
+    })
   <% 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_listener, 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.html.erb

@@ -1,12 +1 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default", custom_event_listener: "datePickerLoader" }) %>
-<%= pb_rails("button", props: { id: "date-picker-loader", text: "Load Custom Event" }) %>
-
-<script>
-    document.getElementById("date-picker-loader").addEventListener("click", () => {
-        window.document.dispatchEvent(
-            new CustomEvent("datePickerLoader", {
-                bubbles: true,
-            })
-        );
-    });
-</script>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>

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
 
 

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -4,9 +4,23 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <%= pb_rails("list") do %>
-    <% object.items.each do |item| %>
-      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
+  <% if enable_drag %>
+    <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
+      <%= pb_rails("draggable/draggable_container") do %>
+        <%= pb_rails("list", props: {ordered: false}) do %>
+          <% object.items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
+              <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= pb_rails("list") do %>
+      <% object.items.each do |item| %>
+        <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -14,6 +14,9 @@ module Playbook
       prop :items, type: Playbook::Props::Array,
                    default: []
 
+      prop :enable_drag, type: Playbook::Props::Boolean,
+                         default: false
+
       def classname
         generate_classname("pb_selectable_list_kit")
       end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -4,6 +4,13 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
+  <% if object.drag_id && object.drag_handle %>
+    <span style="vertical-align: middle;">
+      <%= pb_rails("body") do %>
+        <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+      <% end %>
+    </span>
+  <% end %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
@@ -19,10 +26,10 @@
   <% if object.variant == "checkbox"%>
     <script>
       var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
-      
+
       checkboxElement.addEventListener("change", (evt) => {
         var listItemElement = document.querySelector("#<%=object.id%>")
-        
+
         if (evt.target.checked) {
           listItemElement.classList.add("checked_item");
         } else {
@@ -34,9 +41,9 @@
     <script>
       var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
 
-      radioElement.addEventListener("change", () => {        
+      radioElement.addEventListener("change", () => {
         var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
-        
+
         radios.forEach((radio) => {
           if (radio.checked) {
             radio.closest("li").classList.add("checked_item");

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -6,6 +6,9 @@ module Playbook
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :drag_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :text, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,7 +1,7 @@
 @import "../../tokens/screen_sizes";
+@import "../../tokens/border_radius";
 
 .table-responsive-scroll {
-    display: block;
     overflow-x: scroll;
 
     // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
@@ -27,11 +27,12 @@
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
-            border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
+                &:has(> table.table-card) {
+                    border-radius: $border_rad_light;
+                    box-shadow: 1px 0 0 0px $border_light,
                         -1px 0 0 0px $border_light
-        }
-
+                }
+            }
         &[class^=pb_table].table-sm.table-card thead tr th:first-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;