playbook_ui_docs 14.14.0.pre.alpha.play1853typeaheadreacthookform6373 → 14.14.0.pre.alpha.play1872verticaltimelineresponsiveissue6409
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_drawer/docs/_drawer_behavior.html.erb +8 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +14 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +0 -66
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6296aaf529009925b9b94a4305a2b850e7bf91904491662aac38a953887f501d
|
4
|
+
data.tar.gz: ba81f7c3efd024cd2c1653a940f37a94638ecf59bd521e84e072d5b115cd9660
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1317794750636dca25f6e21550fe4f601cc9124a5f3248614383ac3ba7c598c939bc36b4f54b107ffd1c3caf5c1b043dbd45e7f77885fb1e6db03542ef3250a1
|
7
|
+
data.tar.gz: cce3954fdf1f5344b0bfeb3a4163b46eaf79d5bd95744f5467adb2a0248a45fb19c861faa46039fb7c8f0ea396929e81d660d1f3635b235eaed3a2f0021e3ff5
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-12",
|
6
|
+
overlay: false,
|
7
|
+
border: "right"
|
8
|
+
}) do %>
|
9
|
+
Test me (Border Right)
|
10
|
+
<% end %>
|
11
|
+
|
12
|
+
|
13
|
+
<%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
|
14
|
+
|
15
|
+
<%= pb_rails("drawer", props: {
|
16
|
+
id:"drawer-13",
|
17
|
+
overlay: false,
|
18
|
+
border: "left"
|
19
|
+
}) do %>
|
20
|
+
Test me (Border Left)
|
21
|
+
<% end %>
|
22
|
+
|
23
|
+
<%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
|
24
|
+
|
25
|
+
<%= pb_rails("drawer", props: {
|
26
|
+
id:"drawer-14",
|
27
|
+
overlay: false,
|
28
|
+
border: "full"
|
29
|
+
}) do %>
|
30
|
+
Test me (Border Full)
|
31
|
+
<% end %>
|
32
|
+
<% end %>
|
33
|
+
|
File without changes
|
@@ -1 +1,20 @@
|
|
1
|
-
<%= pb_rails("
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-1",
|
6
|
+
}) do %>
|
7
|
+
Test me (Left Drawer)
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
|
11
|
+
<%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
|
12
|
+
|
13
|
+
<%= pb_rails("drawer", props: {
|
14
|
+
id:"drawer-2",
|
15
|
+
placement: "right"
|
16
|
+
}) do %>
|
17
|
+
Test me (Right Drawer)
|
18
|
+
<% end %>
|
19
|
+
<% end %>
|
20
|
+
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
|
2
|
+
<%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
|
3
|
+
<% end %>
|
4
|
+
|
5
|
+
<%= pb_rails("drawer", props: {
|
6
|
+
id:"drawer-4",
|
7
|
+
within_element: true,
|
8
|
+
placement: "bottom",
|
9
|
+
breakpoint: "md",
|
10
|
+
size: "full"
|
11
|
+
}) do %>
|
12
|
+
<%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
|
13
|
+
<%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
|
14
|
+
<%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
|
15
|
+
<%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
|
17
|
+
<% end %>
|
18
|
+
<%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
|
19
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
20
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
21
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
22
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-10",
|
6
|
+
overlay: false
|
7
|
+
}) do %>
|
8
|
+
Test me (No Overlay)
|
9
|
+
<% end %>
|
10
|
+
|
11
|
+
|
12
|
+
<%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
|
13
|
+
|
14
|
+
<%= pb_rails("drawer", props: {
|
15
|
+
id:"drawer-11",
|
16
|
+
placement: "right"
|
17
|
+
}) do %>
|
18
|
+
Test me (Has Overlay)
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
|
@@ -0,0 +1 @@
|
|
1
|
+
Click the button to close the drawer when there is no overlay.
|
@@ -0,0 +1,49 @@
|
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-5",
|
6
|
+
size: "xs"
|
7
|
+
}) do %>
|
8
|
+
XS
|
9
|
+
<% end %>
|
10
|
+
|
11
|
+
<%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
|
12
|
+
|
13
|
+
<%= pb_rails("drawer", props: {
|
14
|
+
id:"drawer-6",
|
15
|
+
size: "sm",
|
16
|
+
placement: "right"
|
17
|
+
}) do %>
|
18
|
+
This is a small drawer
|
19
|
+
<% end %>
|
20
|
+
|
21
|
+
<%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
|
22
|
+
|
23
|
+
<%= pb_rails("drawer", props: {
|
24
|
+
id:"drawer-7",
|
25
|
+
size: "md"
|
26
|
+
}) do %>
|
27
|
+
This is a medium drawer
|
28
|
+
<% end %>
|
29
|
+
|
30
|
+
<%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
|
31
|
+
|
32
|
+
<%= pb_rails("drawer", props: {
|
33
|
+
id:"drawer-8",
|
34
|
+
size: "lg",
|
35
|
+
placement: "right"
|
36
|
+
}) do %>
|
37
|
+
This is a large drawer
|
38
|
+
<% end %>
|
39
|
+
|
40
|
+
<%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
|
41
|
+
|
42
|
+
<%= pb_rails("drawer", props: {
|
43
|
+
id:"drawer-9",
|
44
|
+
size: "xl"
|
45
|
+
}) do %>
|
46
|
+
This is an extra large drawer
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
|
@@ -32,7 +32,7 @@
|
|
32
32
|
<%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
|
33
33
|
<%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
|
34
34
|
<%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
|
35
|
-
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
35
|
+
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
36
36
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
37
37
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
38
38
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
3
|
+
<% 15.times do %>
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
5
|
+
<%= pb_rails("card") do %>
|
6
|
+
Card content
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.
|
@@ -0,0 +1,39 @@
|
|
1
|
+
<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
|
2
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
3
|
+
<%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
7
|
+
<%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
11
|
+
<%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<%= pb_rails("tooltip", props: {
|
15
|
+
trigger_element_selector: ".tooltip-delay",
|
16
|
+
tooltip_id: "delay-tooltip",
|
17
|
+
position: 'top',
|
18
|
+
delay_open: 1000,
|
19
|
+
delay_close: 1000
|
20
|
+
}) do %>
|
21
|
+
1s open/close delay
|
22
|
+
<% end %>
|
23
|
+
<%= pb_rails("tooltip", props: {
|
24
|
+
trigger_element_selector: ".tooltip-open-delay",
|
25
|
+
tooltip_id: "open-tooltip",
|
26
|
+
position: 'top',
|
27
|
+
delay_open: 1000
|
28
|
+
}) do %>
|
29
|
+
1s open delay
|
30
|
+
<% end %>
|
31
|
+
<%= pb_rails("tooltip", props: {
|
32
|
+
trigger_element_selector: ".tooltip-close-delay",
|
33
|
+
tooltip_id: "close-tooltip",
|
34
|
+
position: 'top',
|
35
|
+
delay_close: 1000
|
36
|
+
}) do %>
|
37
|
+
1s close delay
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
3
|
+
<%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
|
4
|
+
|
5
|
+
<%= pb_rails("tooltip", props: {
|
6
|
+
trigger_element_selector: "#tooltip-interaction",
|
7
|
+
tooltip_id: "tooltip-with-interaction",
|
8
|
+
position: 'top',
|
9
|
+
interaction: true
|
10
|
+
}) do %>
|
11
|
+
You can copy me
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
14
|
+
|
15
|
+
<%= pb_rails("flex/flex_item") do %>
|
16
|
+
<%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
|
17
|
+
|
18
|
+
<%= pb_rails("tooltip", props: {
|
19
|
+
trigger_element_selector: "#tooltip-no-interaction",
|
20
|
+
tooltip_id: "tooltip-without-interaction",
|
21
|
+
position: 'top',
|
22
|
+
}) do %>
|
23
|
+
I'm just a regular tooltip
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
@@ -2,8 +2,10 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- tooltip_default: Default
|
5
|
+
- tooltip_interaction: Content Interaction
|
5
6
|
- tooltip_selectors: Using Common Selectors
|
6
7
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
8
|
+
- tooltip_delay_rails: Delay
|
7
9
|
- tooltip_show_tooltip: Show Tooltip
|
8
10
|
|
9
11
|
react:
|
@@ -13,4 +13,3 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
|
|
13
13
|
export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
|
14
14
|
export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
|
15
15
|
export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
|
16
|
-
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|