playbook_ui_docs 14.18.0 → 14.19.0.pre.alpha.PLAY20937693
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +56 -16
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -0,0 +1,14 @@
|
|
1
|
+
You can link a Quickpick DatePicker to standard DatePickers using the following props:
|
2
|
+
|
3
|
+
**For the Quickpick DatePicker**:
|
4
|
+
`controls_start_id`: ID of the DatePicker that should receive the start date.
|
5
|
+
|
6
|
+
`controls_end_id`: ID of the DatePicker that should receive the end date.
|
7
|
+
|
8
|
+
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
|
9
|
+
|
10
|
+
**For the Start/End DatePickers**:
|
11
|
+
`sync_start_with`: ID of the quickpick this start date is synced to.
|
12
|
+
`sync_end_with`: ID of the quickpick this end date is synced to.
|
13
|
+
|
14
|
+
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
|
@@ -15,6 +15,7 @@ examples:
|
|
15
15
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
16
16
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
17
17
|
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
18
|
+
- date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
|
18
19
|
- date_picker_format: Format
|
19
20
|
- date_picker_disabled: Disabled Dates
|
20
21
|
- date_picker_min_max: Min Max
|
@@ -47,6 +48,7 @@ examples:
|
|
47
48
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
48
49
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
49
50
|
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
51
|
+
- date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
|
50
52
|
- date_picker_format: Format
|
51
53
|
- date_picker_disabled: Disabled Dates
|
52
54
|
- date_picker_min_max: Min Max
|
@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
|
26
26
|
export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
|
27
27
|
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
28
28
|
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|
29
|
+
export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
|
@@ -0,0 +1,64 @@
|
|
1
|
+
<% data_shadow = [
|
2
|
+
{ id: "51", text: "Task 1" },
|
3
|
+
{ id: "52", text: "Task 2" },
|
4
|
+
{ id: "53", text: "Task 3" }
|
5
|
+
] %>
|
6
|
+
|
7
|
+
<% data_outline = [
|
8
|
+
{ id: "61", text: "Task 1" },
|
9
|
+
{ id: "62", text: "Task 2" },
|
10
|
+
{ id: "63", text: "Task 3" }
|
11
|
+
] %>
|
12
|
+
|
13
|
+
<% data_line = [
|
14
|
+
{ id: "71", text: "Task 1" },
|
15
|
+
{ id: "72", text: "Task 2" },
|
16
|
+
{ id: "73", text: "Task 3" }
|
17
|
+
] %>
|
18
|
+
|
19
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
20
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
21
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
|
22
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
|
23
|
+
<%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
|
24
|
+
<% data_shadow.each do |item| %>
|
25
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
|
26
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
27
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
28
|
+
<% end %>
|
29
|
+
<% end %>
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<% end %>
|
33
|
+
<% end %>
|
34
|
+
|
35
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
36
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
|
37
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
|
38
|
+
<%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
|
39
|
+
<% data_outline.each do |item| %>
|
40
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
|
41
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
42
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
43
|
+
<% end %>
|
44
|
+
<% end %>
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
|
50
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
51
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "line", initial_items: data_line }) do %>
|
52
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Line", text_align: "center" }) %>
|
53
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical", html_options: { style: { width: "200px" } } }) do %>
|
54
|
+
<% data_line.each do |item| %>
|
55
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl", drop_zone_line_color: "primary" }) do %>
|
56
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
57
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
58
|
+
<% end %>
|
59
|
+
<% end %>
|
60
|
+
<% end %>
|
61
|
+
<% end %>
|
62
|
+
<% end %>
|
63
|
+
<% end %>
|
64
|
+
<% end %>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "141",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "142",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "143",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "151",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "152",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "153",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "211",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "212",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "213",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "2111",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "2112",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "2113",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
|
2
|
+
|
3
|
+
The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
|
4
|
+
|
5
|
+
Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
|
2
|
+
|
3
|
+
By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
|
4
|
+
|
5
|
+
When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
|
3
|
+
import Flex from '../../pb_flex/_flex'
|
4
|
+
import Image from '../../pb_image/_image'
|
5
|
+
import Draggable from '../../pb_draggable/_draggable'
|
6
|
+
import { DraggableProvider } from '../../pb_draggable/context'
|
7
|
+
|
8
|
+
const data = [
|
9
|
+
{
|
10
|
+
id: "100",
|
11
|
+
url: "https://unsplash.it/500/400/?image=638",
|
12
|
+
},
|
13
|
+
{
|
14
|
+
id: "200",
|
15
|
+
url: "https://unsplash.it/500/400/?image=639",
|
16
|
+
},
|
17
|
+
{
|
18
|
+
id: "300",
|
19
|
+
url: "https://unsplash.it/500/400/?image=640",
|
20
|
+
},
|
21
|
+
];
|
22
|
+
|
23
|
+
const DraggableDefault = (props) => {
|
24
|
+
const [initialState, setInitialState] = useState(data);
|
25
|
+
|
26
|
+
return (
|
27
|
+
<>
|
28
|
+
<DraggableProvider initialItems={data}
|
29
|
+
onReorder={(items) => setInitialState(items)}
|
30
|
+
>
|
31
|
+
<Draggable.Container {...props}>
|
32
|
+
<Flex>
|
33
|
+
{initialState.map(({ id, url }) => (
|
34
|
+
<Draggable.Item dragId={id}
|
35
|
+
key={id}
|
36
|
+
onDrag={() => console.log(`${id} drag!`)}
|
37
|
+
onDragEnd={() => console.log(`${id} drag end!`)}
|
38
|
+
onDragEnter={() => console.log(`${id} drag enter!`)}
|
39
|
+
onDragLeave={() => console.log(`${id} drag leave!`)}
|
40
|
+
onDragOver={() => console.log(`${id} drag over!`)}
|
41
|
+
onDragStart={() => console.log(`${id} drag start!`)}
|
42
|
+
onDrop={() => console.log(`${id} drop!`)}
|
43
|
+
>
|
44
|
+
<Image alt={id}
|
45
|
+
margin="xs"
|
46
|
+
size="md"
|
47
|
+
url={url}
|
48
|
+
/>
|
49
|
+
</Draggable.Item>
|
50
|
+
))}
|
51
|
+
</Flex>
|
52
|
+
</Draggable.Container>
|
53
|
+
</DraggableProvider>
|
54
|
+
</>
|
55
|
+
|
56
|
+
);
|
57
|
+
};
|
58
|
+
|
59
|
+
export default DraggableDefault;
|
@@ -0,0 +1 @@
|
|
1
|
+
You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- draggable_drop_zones: Draggable Drop Zones
|
10
10
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
11
11
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
12
|
+
- draggable_event_listeners: Draggable Event Listeners
|
12
13
|
|
13
14
|
rails:
|
14
15
|
- draggable_default: Default
|
@@ -17,5 +18,7 @@ examples:
|
|
17
18
|
- draggable_with_cards: Draggable with Cards
|
18
19
|
- draggable_with_table: Draggable with Table
|
19
20
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
21
|
+
- draggable_drop_zones: Draggable Drop Zones
|
22
|
+
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
23
|
+
- draggable_drop_zones_line: Draggable Drop Zones Line
|
20
24
|
- draggable_event_listeners: Draggable Event Listeners
|
21
|
-
|
@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
|
|
6
6
|
export { default as DraggableWithTable } from './_draggable_with_table.jsx'
|
7
7
|
export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
|
8
8
|
export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
|
9
|
-
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
9
|
+
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
10
|
+
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%
|
1
|
+
<%
|
2
2
|
options = [
|
3
3
|
{ label: 'United States', value: 'United States', id: 'us' },
|
4
4
|
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
@@ -6,4 +6,7 @@
|
|
6
6
|
]
|
7
7
|
%>
|
8
8
|
|
9
|
-
<%= pb_rails("dropdown", props: {
|
9
|
+
<%= pb_rails("dropdown", props: {
|
10
|
+
error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
|
11
|
+
options: options
|
12
|
+
}) %>
|
@@ -1,9 +1,12 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
import Dropdown from '../../pb_dropdown/_dropdown'
|
3
|
+
import Icon from '../../pb_icon/_icon'
|
3
4
|
|
4
5
|
const DropdownError = (props) => {
|
5
6
|
const [selectedOption, setSelectedOption] = useState()
|
6
|
-
const error = selectedOption?.value ? null :
|
7
|
+
const error = selectedOption?.value ? null : (<>
|
8
|
+
<Icon icon="warning" /> Please make a valid selection
|
9
|
+
</>)
|
7
10
|
const options = [
|
8
11
|
{
|
9
12
|
label: "United States",
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "United States",
|
5
|
+
value: "United States",
|
6
|
+
areaCode: "+1",
|
7
|
+
icon: "🇺🇸",
|
8
|
+
id: "us"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "United Kingdom",
|
12
|
+
value: "United Kingdom",
|
13
|
+
areaCode: "+44",
|
14
|
+
icon: "🇬🇧",
|
15
|
+
id: "gb"
|
16
|
+
},
|
17
|
+
{
|
18
|
+
label: "Pakistan",
|
19
|
+
value: "Pakistan",
|
20
|
+
areaCode: "+92",
|
21
|
+
icon: "🇵🇰",
|
22
|
+
id: "pk"
|
23
|
+
}
|
24
|
+
]
|
25
|
+
|
26
|
+
%>
|
27
|
+
|
28
|
+
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
@@ -1,86 +1,39 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import Dropdown from '../../pb_dropdown/_dropdown'
|
4
|
-
import Badge from '../../pb_badge/_badge'
|
5
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
6
|
-
import User from '../../pb_user/_user'
|
7
4
|
|
8
5
|
const DropdownWithAutocomplete = (props) => {
|
9
6
|
|
10
7
|
const options = [
|
11
8
|
{
|
12
|
-
label: "
|
13
|
-
value: "
|
14
|
-
|
15
|
-
|
16
|
-
id: "
|
17
|
-
status: "Offline"
|
9
|
+
label: "United States",
|
10
|
+
value: "United States",
|
11
|
+
areaCode: "+1",
|
12
|
+
icon: "🇺🇸",
|
13
|
+
id: "us"
|
18
14
|
},
|
19
15
|
{
|
20
|
-
label: "
|
21
|
-
value: "
|
22
|
-
|
23
|
-
|
24
|
-
id: "
|
25
|
-
status: "Away"
|
16
|
+
label: "United Kingdom",
|
17
|
+
value: "United Kingdom",
|
18
|
+
areaCode: "+44",
|
19
|
+
icon: "🇬🇧",
|
20
|
+
id: "gb"
|
26
21
|
},
|
27
22
|
{
|
28
|
-
label: "
|
29
|
-
value: "
|
30
|
-
|
31
|
-
|
32
|
-
id: "
|
33
|
-
status: "Online"
|
34
|
-
},
|
35
|
-
{
|
36
|
-
label: "Courtney Long",
|
37
|
-
value: "Courtney Long",
|
38
|
-
territory: "PHL",
|
39
|
-
title: "Lead UX Designer",
|
40
|
-
id: "courtney-long",
|
41
|
-
status: "Online"
|
23
|
+
label: "Pakistan",
|
24
|
+
value: "Pakistan",
|
25
|
+
areaCode: "+92",
|
26
|
+
icon: "🇵🇰",
|
27
|
+
id: "pk"
|
42
28
|
}
|
43
|
-
]
|
44
|
-
|
29
|
+
]
|
45
30
|
|
46
31
|
return (
|
47
32
|
<div>
|
48
33
|
<Dropdown autocomplete
|
49
34
|
options={options}
|
50
35
|
{...props}
|
51
|
-
|
52
|
-
{options.map((option) => (
|
53
|
-
<Dropdown.Option key={option.id}
|
54
|
-
option={option}
|
55
|
-
>
|
56
|
-
<>
|
57
|
-
<FlexItem>
|
58
|
-
<User
|
59
|
-
align="left"
|
60
|
-
avatar
|
61
|
-
name={option.label}
|
62
|
-
orientation="horizontal"
|
63
|
-
territory={option.territory}
|
64
|
-
title={option.title}
|
65
|
-
/>
|
66
|
-
</FlexItem>
|
67
|
-
<FlexItem>
|
68
|
-
<Badge
|
69
|
-
rounded
|
70
|
-
text={option.status}
|
71
|
-
variant={`${
|
72
|
-
option.status === "Offline"
|
73
|
-
? "neutral"
|
74
|
-
: option.status === "Online"
|
75
|
-
? "success"
|
76
|
-
: "warning"
|
77
|
-
}`}
|
78
|
-
/>
|
79
|
-
</FlexItem>
|
80
|
-
</>
|
81
|
-
</Dropdown.Option>
|
82
|
-
))}
|
83
|
-
</Dropdown>
|
36
|
+
/>
|
84
37
|
</div>
|
85
38
|
)
|
86
39
|
}
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
ADDED
@@ -0,0 +1,58 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "Jasper Furniss",
|
5
|
+
value: "Jasper Furniss",
|
6
|
+
territory: "PHL",
|
7
|
+
title: "Lead UX Engineer",
|
8
|
+
id: "jasper-furniss",
|
9
|
+
status: "Offline"
|
10
|
+
},
|
11
|
+
{
|
12
|
+
label: "Ramon Ruiz",
|
13
|
+
value: "Ramon Ruiz",
|
14
|
+
territory: "PHL",
|
15
|
+
title: "Senior UX Designer",
|
16
|
+
id: "ramon-ruiz",
|
17
|
+
status: "Away"
|
18
|
+
},
|
19
|
+
{
|
20
|
+
label: "Carlos Lima",
|
21
|
+
value: "Carlos Lima",
|
22
|
+
territory: "PHL",
|
23
|
+
title: "Nitro Developer",
|
24
|
+
id: "carlos-lima",
|
25
|
+
status: "Online"
|
26
|
+
},
|
27
|
+
{
|
28
|
+
label: "Courtney Long",
|
29
|
+
value: "Courtney Long",
|
30
|
+
territory: "PHL",
|
31
|
+
title: "Lead UX Designer",
|
32
|
+
id: "courtney-long",
|
33
|
+
status: "Online"
|
34
|
+
}
|
35
|
+
];
|
36
|
+
|
37
|
+
%>
|
38
|
+
|
39
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
40
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
|
41
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
42
|
+
<% options.each do |option| %>
|
43
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
44
|
+
<%= pb_rails("flex", props: {
|
45
|
+
align: "center",
|
46
|
+
justify: "between",
|
47
|
+
}) do %>
|
48
|
+
<%= pb_rails("flex/flex_item") do %>
|
49
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
50
|
+
<% end %>
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
52
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
56
|
+
<% end %>
|
57
|
+
<% end %>
|
58
|
+
<% end %>
|
@@ -1,15 +1,13 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react'
|
2
2
|
|
3
|
-
import Dropdown from '
|
3
|
+
import Dropdown from '../_dropdown'
|
4
4
|
import Badge from '../../pb_badge/_badge'
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
5
6
|
import FlexItem from '../../pb_flex/_flex_item'
|
6
|
-
import Avatar from '../../pb_avatar/_avatar'
|
7
7
|
import User from '../../pb_user/_user'
|
8
8
|
|
9
9
|
|
10
|
-
const
|
11
|
-
const [selectedOption, setSelectedOption] = useState();
|
12
|
-
|
10
|
+
const DropdownWithAutocompleteWithSubcomponents = (props) => {
|
13
11
|
const options = [
|
14
12
|
{
|
15
13
|
label: "Jasper Furniss",
|
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
45
43
|
}
|
46
44
|
];
|
47
45
|
|
48
|
-
const CustomDisplay = () => {
|
49
|
-
return (
|
50
|
-
<>
|
51
|
-
{
|
52
|
-
selectedOption && (
|
53
|
-
<Avatar
|
54
|
-
name={selectedOption.label}
|
55
|
-
size="xs"
|
56
|
-
/>
|
57
|
-
)
|
58
|
-
}
|
59
|
-
</>
|
60
|
-
)
|
61
|
-
};
|
62
46
|
|
63
47
|
return (
|
64
48
|
<div>
|
65
49
|
<Dropdown autocomplete
|
66
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
67
50
|
options={options}
|
68
51
|
{...props}
|
69
52
|
>
|
70
|
-
<Dropdown.Trigger customDisplay={<CustomDisplay/>} />
|
71
53
|
{options.map((option) => (
|
72
54
|
<Dropdown.Option key={option.id}
|
73
55
|
option={option}
|
74
56
|
>
|
75
|
-
|
57
|
+
<Flex
|
58
|
+
align="center"
|
59
|
+
justify="between"
|
60
|
+
>
|
76
61
|
<FlexItem>
|
77
62
|
<User
|
78
63
|
align="left"
|
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
85
70
|
</FlexItem>
|
86
71
|
<FlexItem>
|
87
72
|
<Badge
|
73
|
+
dark
|
88
74
|
rounded
|
89
75
|
text={option.status}
|
90
76
|
variant={`${
|
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
96
82
|
}`}
|
97
83
|
/>
|
98
84
|
</FlexItem>
|
99
|
-
|
85
|
+
</Flex>
|
100
86
|
</Dropdown.Option>
|
101
87
|
))}
|
102
88
|
</Dropdown>
|
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
104
90
|
)
|
105
91
|
}
|
106
92
|
|
107
|
-
export default
|
93
|
+
export default DropdownWithAutocompleteWithSubcomponents
|
@@ -0,0 +1 @@
|
|
1
|
+
`autocomplete` prop can also be used in conjunction with the subcomponent structure.
|
@@ -0,0 +1 @@
|
|
1
|
+
The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown.
|