playbook_ui_docs 13.26.0.pre.alpha.jasoncypretpatch12816 β 13.26.0.pre.alpha.jasoncypretpatch12820
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -2
- data/dist/playbook-doc.js +5 -5
- metadata +8 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d869ed43199888d1505e7bd05794fcf44de925d14c51cc6dcd44202868a43927
|
|
4
|
+
data.tar.gz: 5afa2429edf1fc92bb86ea8f5be443cb44e5037064c3d1d594fd9100ce508e43
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0a90a7c875d87e3c0eb8c4aa44b5513f5734c6d645f47ea52f18a2b6f8ecd01d310e0e4a4961e6093ae69886af466821fe68633bd36295a4e8afd00718fb8abc
|
|
7
|
+
data.tar.gz: c348e70ec80f9d4a904daeefdd73456df7cab49e9705ee875e0cffd5a06060433c3d2c4da545734311bd2e6eb064d04c228ed41c4011da67263701c32d3c71fb
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
13
|
+
<% options.each do |option| %>
|
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
|
|
2
2
|
|
|
3
|
-
`Dropdown. Trigger`
|
|
4
|
-
`Dropdown.Container`
|
|
5
|
-
`Dropdown.Option`
|
|
3
|
+
`Dropdown. Trigger` / `dropdown/dropdown_trigger`
|
|
4
|
+
`Dropdown.Container`/ `dropdown/dropdown_container`
|
|
5
|
+
`Dropdown.Option` / `dropdown/dropdown_option`
|
|
6
6
|
|
|
7
7
|
See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Jasper Furniss",
|
|
5
|
+
value: "Jasper Furniss",
|
|
6
|
+
territory: "PHL",
|
|
7
|
+
title: "Senior 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: "Jason Cypret",
|
|
21
|
+
value: "Jason Cypret",
|
|
22
|
+
territory: "PHL",
|
|
23
|
+
title: "VP of User Experience",
|
|
24
|
+
id: "jason-cypret",
|
|
25
|
+
status: "Online"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "Courtney Long",
|
|
29
|
+
value: "Courtney Long",
|
|
30
|
+
territory: "PHL",
|
|
31
|
+
title: "UX Design Mentor",
|
|
32
|
+
id: "courtney-long",
|
|
33
|
+
status: "Online"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
|
|
37
|
+
%>
|
|
38
|
+
|
|
39
|
+
<%
|
|
40
|
+
custom_display = capture do
|
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
|
42
|
+
end
|
|
43
|
+
%>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
47
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
|
|
48
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
49
|
+
<% options.each do |option| %>
|
|
50
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
52
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
55
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
60
|
+
<% end %>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "πΊπΈ",
|
|
8
|
+
id: "United-states"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "π¨π¦",
|
|
15
|
+
id: "canada"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "π΅π°",
|
|
22
|
+
id: "pakistan"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
30
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
31
|
+
<% options.each do |option| %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
33
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
34
|
+
<%= pb_rails("flex") do %>
|
|
35
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
36
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
40
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
13
|
+
<% options.each do |option| %>
|
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "πΊπΈ",
|
|
8
|
+
id: "United-states"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "π¨π¦",
|
|
15
|
+
id: "canada"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "π΅π°",
|
|
22
|
+
id: "pakistan"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") do %>
|
|
30
|
+
<%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
|
|
33
|
+
<% options.each do |option| %>
|
|
34
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
35
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
36
|
+
<%= pb_rails("flex") do %>
|
|
37
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
38
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
39
|
+
<% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
42
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
<% end %>
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
rails:
|
|
3
|
+
- dropdown_default: Default
|
|
4
|
+
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
5
|
+
- dropdown_with_label: With Label
|
|
6
|
+
- dropdown_with_custom_options: Custom Options
|
|
7
|
+
- dropdown_with_custom_display: Custom Display
|
|
8
|
+
- dropdown_with_custom_trigger: Custom Trigger
|
|
9
|
+
- dropdown_with_custom_padding: Custom Padding for Dropdown Options
|
|
10
|
+
|
|
4
11
|
react:
|
|
5
12
|
- dropdown_default: Default
|
|
6
13
|
- dropdown_subcomponent_structure: Subcomponent Structure
|