playbook_ui_docs 14.5.0.pre.alpha.PBNTR568dropdowncleaning4044 → 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158
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_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx +71 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +11 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3eacf40ace67eb7e417f56ef272e3c9b9ecabcb97a2c30b7c50e71e2f70d8d75
|
|
4
|
+
data.tar.gz: 5fdd81afc57e95d013f04f1c4693c2fe5cc230eecffaa3b00257e78272683363
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a78312d829b37e3e69b7ca334b1536d4ea2f4fda79d8ccf70ff2bf26b0c9e03d085930f42e14a36adfe40035032c1a99b6b87619d4408778880189b75741c5ef
|
|
7
|
+
data.tar.gz: 7e75a8e2b94861c201f474806d4d6835d777275d487309b5f30a13f5cdb541f03c3a1a60f0e4af6ce3c5abc105f94a20d3d5cd1048c7b6d5cb24951850f67755
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<%=
|
|
2
|
+
pb_rails("filter", props: {
|
|
3
|
+
id: "filter_custom_width_rails",
|
|
4
|
+
position: "top",
|
|
5
|
+
filters: [
|
|
6
|
+
{ name: "name", value: "John Wick" },
|
|
7
|
+
{ name: "city", value: "San Francisco"}
|
|
8
|
+
],
|
|
9
|
+
sort_menu: [
|
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
13
|
+
],
|
|
14
|
+
template: "default",
|
|
15
|
+
results: 1,
|
|
16
|
+
popover_props: { width: "250px" },
|
|
17
|
+
}) do
|
|
18
|
+
%>
|
|
19
|
+
<%
|
|
20
|
+
example_collection = [
|
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
|
26
|
+
]
|
|
27
|
+
%>
|
|
28
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
29
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
30
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
|
31
|
+
|
|
32
|
+
<%= form.actions do |action| %>
|
|
33
|
+
<%= action.submit props: {
|
|
34
|
+
text: "Apply",
|
|
35
|
+
data: {
|
|
36
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
|
37
|
+
},}%>
|
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
39
|
+
<% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<% end %>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const FilterCustomWidth = (props) => {
|
|
5
|
+
const options = [
|
|
6
|
+
{ value: 'USA' },
|
|
7
|
+
{ value: 'Canada' },
|
|
8
|
+
{ value: 'Brazil' },
|
|
9
|
+
{ value: 'Philippines' },
|
|
10
|
+
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
|
|
11
|
+
]
|
|
12
|
+
|
|
13
|
+
const popoverProps = {
|
|
14
|
+
width: "250px"
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<Filter
|
|
19
|
+
{...props}
|
|
20
|
+
double
|
|
21
|
+
filters={{
|
|
22
|
+
'Full Name': 'John Wick',
|
|
23
|
+
'City': 'San Francisco',
|
|
24
|
+
}}
|
|
25
|
+
popoverProps={popoverProps}
|
|
26
|
+
results={1}
|
|
27
|
+
sortOptions={{
|
|
28
|
+
popularity: 'Popularity',
|
|
29
|
+
// eslint-disable-next-line
|
|
30
|
+
manager_title: 'Manager\'s Title',
|
|
31
|
+
// eslint-disable-next-line
|
|
32
|
+
manager_name: 'Manager\'s Name',
|
|
33
|
+
}}
|
|
34
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
35
|
+
>
|
|
36
|
+
{({ closePopover }) => (
|
|
37
|
+
<form>
|
|
38
|
+
<TextInput
|
|
39
|
+
label="Example Text Field"
|
|
40
|
+
placeholder="Enter Text"
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
<Select
|
|
44
|
+
blankSelection="Select One..."
|
|
45
|
+
label="Example Collection Select"
|
|
46
|
+
name="Collection Select"
|
|
47
|
+
options={options}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
<Flex
|
|
51
|
+
spacing="between"
|
|
52
|
+
{...props}
|
|
53
|
+
>
|
|
54
|
+
<Button
|
|
55
|
+
onClick={closePopover}
|
|
56
|
+
text="Apply"
|
|
57
|
+
{...props}
|
|
58
|
+
/>
|
|
59
|
+
<Button
|
|
60
|
+
text="Clear"
|
|
61
|
+
variant="secondary"
|
|
62
|
+
{...props}
|
|
63
|
+
/>
|
|
64
|
+
</Flex>
|
|
65
|
+
</form>
|
|
66
|
+
)}
|
|
67
|
+
</Filter>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default FilterCustomWidth
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Filter can leverage `popover_props` to set a custom width to the popover, without affecting the Filter size.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Filter can leverage `popoverProps` to set a custom width to the popover, without affecting the Filter size.
|
|
@@ -9,6 +9,7 @@ examples:
|
|
|
9
9
|
- sort_only: Sort Only
|
|
10
10
|
- filter_max_width: Max Width for Popover Inside of Filter
|
|
11
11
|
- filter_max_height: Max Height for Popover Inside of Filter
|
|
12
|
+
- filter_custom_width: Custom Width for Popover Inside of Filter
|
|
12
13
|
- filter_placement: Filter Placement
|
|
13
14
|
|
|
14
15
|
react:
|
|
@@ -20,4 +21,6 @@ examples:
|
|
|
20
21
|
- sort_only: Sort Only
|
|
21
22
|
- filter_max_width: Max Width for Popover Inside of Filter
|
|
22
23
|
- filter_max_height: Max Height for Popover Inside of Filter
|
|
24
|
+
- filter_custom_width: Custom Width for Popover Inside of Filter
|
|
23
25
|
- filter_placement: Filter Placement
|
|
26
|
+
|
|
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
|
|
|
7
7
|
export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
|
8
8
|
export { default as FilterMaxHeight } from './_filter_max_height.jsx'
|
|
9
9
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|
|
10
|
+
export { default as FilterCustomWidth } from './_filter_custom_width.jsx'
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "100",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "101",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "102",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "103",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "104",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "105",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "106",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "107",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "108",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "109",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "110",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-reset-example",
|
|
69
|
+
name: "my_array",
|
|
70
|
+
tree_data: treeData,
|
|
71
|
+
return_all_selected: true
|
|
72
|
+
}) %>
|
|
73
|
+
|
|
74
|
+
<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<script>
|
|
78
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
79
|
+
const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
|
|
80
|
+
|
|
81
|
+
exampleResetButton.addEventListener("click", () => {
|
|
82
|
+
clearMultiLevelSelectById('multi-level-select-reset-example');
|
|
83
|
+
});
|
|
84
|
+
function clearMultiLevelSelectById(id) {
|
|
85
|
+
const clearFunction = window[`clearMultiLevelSelect_${id}`];
|
|
86
|
+
if (clearFunction) {
|
|
87
|
+
clearFunction();
|
|
88
|
+
} else {
|
|
89
|
+
console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
})
|
|
93
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work.
|
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
ADDED
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("flex") do %>
|
|
4
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
7
|
+
variant: "bubble",
|
|
8
|
+
size: "sm",
|
|
9
|
+
users: [
|
|
10
|
+
{
|
|
11
|
+
name: "Patrick Welch",
|
|
12
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
13
|
+
}
|
|
14
|
+
]
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
19
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
20
|
+
size: "sm",
|
|
21
|
+
variant: "bubble",
|
|
22
|
+
users: [
|
|
23
|
+
{
|
|
24
|
+
name: "Patrick Welch",
|
|
25
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: "Lucille Sanchez",
|
|
29
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
35
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
36
|
+
size: "sm",
|
|
37
|
+
variant: "bubble",
|
|
38
|
+
users: [
|
|
39
|
+
{
|
|
40
|
+
name: "Patrick Welch",
|
|
41
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: "Lucille Sanchez",
|
|
45
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "Beverly Reyes",
|
|
49
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
50
|
+
},
|
|
51
|
+
]
|
|
52
|
+
}) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
55
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
56
|
+
size: "sm",
|
|
57
|
+
variant: "bubble",
|
|
58
|
+
users: [
|
|
59
|
+
{
|
|
60
|
+
name: "Patrick Welch",
|
|
61
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: "Lucille Sanchez",
|
|
65
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
name: "Beverly Reyes",
|
|
69
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
name: "Keith Craig",
|
|
73
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: "Alicia Cooper",
|
|
77
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}) %>
|
|
81
|
+
<% end %>
|
|
82
|
+
<% end %>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
|
|
87
|
+
|
|
88
|
+
<%= pb_rails("flex") do %>
|
|
89
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
90
|
+
|
|
91
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
92
|
+
size: "md",
|
|
93
|
+
variant: "bubble",
|
|
94
|
+
users: [
|
|
95
|
+
{
|
|
96
|
+
name: "Patrick Welch",
|
|
97
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}) %>
|
|
101
|
+
|
|
102
|
+
<% end %>
|
|
103
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
104
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
105
|
+
size: "md",
|
|
106
|
+
variant: "bubble",
|
|
107
|
+
users: [
|
|
108
|
+
{
|
|
109
|
+
name: "Patrick Welch",
|
|
110
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
name: "Lucille Sanchez",
|
|
114
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}) %>
|
|
118
|
+
<% end %>
|
|
119
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
120
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
121
|
+
size: "md",
|
|
122
|
+
variant: "bubble",
|
|
123
|
+
users: [
|
|
124
|
+
{
|
|
125
|
+
name: "Patrick Welch",
|
|
126
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
name: "Lucille Sanchez",
|
|
130
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
name: "Beverly Reyes",
|
|
134
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
135
|
+
},
|
|
136
|
+
]
|
|
137
|
+
}) %>
|
|
138
|
+
<% end %>
|
|
139
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
140
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
141
|
+
size: "md",
|
|
142
|
+
variant: "bubble",
|
|
143
|
+
users: [
|
|
144
|
+
{
|
|
145
|
+
name: "Patrick Welch",
|
|
146
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
name: "Lucille Sanchez",
|
|
150
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
name: "Beverly Reyes",
|
|
154
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
name: "Keith Craig",
|
|
158
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
name: "Alicia Cooper",
|
|
162
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}) %>
|
|
166
|
+
<% end %>
|
|
167
|
+
<% end %>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
|
|
172
|
+
|
|
173
|
+
<%= pb_rails("flex") do %>
|
|
174
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
175
|
+
|
|
176
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
177
|
+
size: "lg",
|
|
178
|
+
variant: "bubble",
|
|
179
|
+
users: [
|
|
180
|
+
{
|
|
181
|
+
name: "Patrick Welch",
|
|
182
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
}) %>
|
|
186
|
+
|
|
187
|
+
<% end %>
|
|
188
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
189
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
190
|
+
size: "lg",
|
|
191
|
+
variant: "bubble",
|
|
192
|
+
users: [
|
|
193
|
+
{
|
|
194
|
+
name: "Patrick Welch",
|
|
195
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
name: "Lucille Sanchez",
|
|
199
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
200
|
+
}
|
|
201
|
+
]
|
|
202
|
+
}) %>
|
|
203
|
+
<% end %>
|
|
204
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
205
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
206
|
+
size: "lg",
|
|
207
|
+
variant: "bubble",
|
|
208
|
+
users: [
|
|
209
|
+
{
|
|
210
|
+
name: "Patrick Welch",
|
|
211
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
name: "Lucille Sanchez",
|
|
215
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
name: "Beverly Reyes",
|
|
219
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
220
|
+
},
|
|
221
|
+
]
|
|
222
|
+
}) %>
|
|
223
|
+
<% end %>
|
|
224
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
225
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
226
|
+
size: "lg",
|
|
227
|
+
variant: "bubble",
|
|
228
|
+
users: [
|
|
229
|
+
{
|
|
230
|
+
name: "Patrick Welch",
|
|
231
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
name: "Lucille Sanchez",
|
|
235
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
name: "Beverly Reyes",
|
|
239
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
name: "Keith Craig",
|
|
243
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
name: "Alicia Cooper",
|
|
247
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
248
|
+
}
|
|
249
|
+
]
|
|
250
|
+
}) %>
|
|
251
|
+
<% end %>
|
|
252
|
+
<% end %>
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
|
|
256
|
+
|
|
257
|
+
<%= pb_rails("flex") do %>
|
|
258
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
259
|
+
|
|
260
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
261
|
+
size: "xl",
|
|
262
|
+
variant: "bubble",
|
|
263
|
+
users: [
|
|
264
|
+
{
|
|
265
|
+
name: "Patrick Welch",
|
|
266
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
267
|
+
}
|
|
268
|
+
]
|
|
269
|
+
}) %>
|
|
270
|
+
|
|
271
|
+
<% end %>
|
|
272
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
273
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
274
|
+
size: "xl",
|
|
275
|
+
variant: "bubble",
|
|
276
|
+
users: [
|
|
277
|
+
{
|
|
278
|
+
name: "Patrick Welch",
|
|
279
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
name: "Lucille Sanchez",
|
|
283
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
284
|
+
}
|
|
285
|
+
]
|
|
286
|
+
}) %>
|
|
287
|
+
<% end %>
|
|
288
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
289
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
290
|
+
size: "xl",
|
|
291
|
+
variant: "bubble",
|
|
292
|
+
users: [
|
|
293
|
+
{
|
|
294
|
+
name: "Patrick Welch",
|
|
295
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
name: "Lucille Sanchez",
|
|
299
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
name: "Beverly Reyes",
|
|
303
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
304
|
+
},
|
|
305
|
+
]
|
|
306
|
+
}) %>
|
|
307
|
+
<% end %>
|
|
308
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
309
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
310
|
+
size: "xl",
|
|
311
|
+
variant: "bubble",
|
|
312
|
+
users: [
|
|
313
|
+
{
|
|
314
|
+
name: "Patrick Welch",
|
|
315
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
name: "Lucille Sanchez",
|
|
319
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
name: "Beverly Reyes",
|
|
323
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
name: "Keith Craig",
|
|
327
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
name: "Alicia Cooper",
|
|
331
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
332
|
+
}
|
|
333
|
+
]
|
|
334
|
+
}) %>
|
|
335
|
+
<% end %>
|
|
336
|
+
<% end %>
|