Skip to content

Commit a2acb03

Browse files
skduncanskduncan
authored
[PBNTR-719] Draggable Kit: Simplified API for List kit for Rails (#4132)
**What does this PR do?** A clear and concise description with your runway ticket url. As a Playbook dev, I want a create a simplified version of the Draggable kit for the List kit, So that we can ensure parity between our Rails and React Draggable kits. **Screenshots:** Screenshots to visualize your addition/change ![Screenshot 2025-01-16 at 10 54 31 AM](https://github.com/user-attachments/assets/6afc7d02-ca4f-45f6-8e3f-62876263a8a9) **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
1 parent e4ac2c8 commit a2acb03

File tree

6 files changed

+80
-28
lines changed

6 files changed

+80
-28
lines changed

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,8 @@
66

77
] %>
88

9-
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
10-
<%= pb_rails("draggable/draggable_container") do %>
11-
<%= pb_rails("list", props: {ordered: false}) do %>
12-
<% initial_items.each do |item| %>
13-
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
14-
<%= pb_rails("list/item") do %><%= item[:name] %><% end %>
15-
<% end %>
16-
<% end %>
17-
<% end %>
9+
<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
10+
<% initial_items.each do |item| %>
11+
<%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
1812
<% end %>
1913
<% end %>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
For a simplified version of the Draggable API for the List kit, you can do the following:
2+
3+
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.
4+
5+
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.

‎playbook/app/pb_kits/playbook/pb_list/item.html.erb

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,32 @@
1-
<%= content_tag(:li,
2-
aria: object.aria,
3-
class: object.classname,
4-
data: object.data,
5-
id: object.id,
6-
tabindex: object.tabindex,
7-
**combined_html_options
8-
) do %>
1+
<% if object.draggable? %>
2+
<%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
3+
<%= content_tag(:li,
4+
aria: object.aria,
5+
class: object.classname,
6+
data: object.data,
7+
id: object.id,
8+
tabindex: object.tabindex,
9+
**combined_html_options
10+
) do %>
11+
<% if object.drag_handle %>
12+
<span style="vertical-align: middle;">
13+
<%= pb_rails("body") do %>
14+
<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>
15+
<% end %>
16+
</span>
17+
<% end %>
18+
<%= content.presence %>
19+
<% end %>
20+
<% end %>
21+
<% else %>
22+
<%= content_tag(:li,
23+
aria: object.aria,
24+
class: object.classname,
25+
data: object.data,
26+
id: object.id,
27+
tabindex: object.tabindex,
28+
**combined_html_options
29+
) do %>
930
<%= content.presence %>
31+
<% end %>
1032
<% end %>

‎playbook/app/pb_kits/playbook/pb_list/item.rb

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,18 @@
33
module Playbook
44
module PbList
55
class Item < Playbook::KitBase
6+
prop :drag_handle, type: Playbook::Props::Boolean,
7+
default: true
8+
prop :drag_id, type: Playbook::Props::String
69
prop :tabindex
710

811
def classname
912
generate_classname("pb_item_kit")
1013
end
14+
15+
def draggable?
16+
drag_id.present?
17+
end
1118
end
1219
end
1320
end

‎playbook/app/pb_kits/playbook/pb_list/list.html.erb

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
1-
<%= content_tag(:div, class: object.list_classname) do %>
2-
<%= content_tag(:"#{object.ordered_class}",
3-
aria: object.aria,
4-
class: object.classname,
5-
data: object.data,
6-
id: object.id,
7-
role: object.role,
8-
tabindex: object.tabindex,
9-
**combined_html_options
10-
) do %>
11-
<%= content.presence %>
1+
<% if object.enable_drag %>
2+
<%= pb_rails("draggable", props: {initial_items: object.items}) do %>
3+
<%= pb_rails("draggable/draggable_container") do %>
4+
<%= content_tag(:div, class: object.list_classname) do %>
5+
<%= content_tag(:"#{object.ordered_class}",
6+
aria: object.aria,
7+
class: object.classname,
8+
data: object.data,
9+
id: object.id,
10+
role: object.role,
11+
tabindex: object.tabindex,
12+
**combined_html_options
13+
) do %>
14+
<%= content.presence %>
15+
<% end %>
16+
<% end %>
17+
<% end %>
18+
<% end %>
19+
<% else %>
20+
<%= content_tag(:div, class: object.list_classname) do %>
21+
<%= content_tag(:"#{object.ordered_class}",
22+
aria: object.aria,
23+
class: object.classname,
24+
data: object.data,
25+
id: object.id,
26+
role: object.role,
27+
tabindex: object.tabindex,
28+
**combined_html_options
29+
) do %>
30+
<%= content.presence %>
31+
<% end %>
1232
<% end %>
1333
<% end %>

‎playbook/app/pb_kits/playbook/pb_list/list.rb

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ class List < Playbook::KitBase
77
default: false
88
prop :dark, type: Playbook::Props::Boolean,
99
default: false
10+
prop :enable_drag, type: Playbook::Props::Boolean,
11+
default: false
12+
prop :items, type: Playbook::Props::Array,
13+
default: []
1014
prop :layout, type: Playbook::Props::Enum,
1115
values: ["left", "right", ""],
1216
default: ""

0 commit comments

Comments
 (0)