playbook_ui 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158 → 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  3. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  4. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  5. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  6. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  7. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +0 -2
  8. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +0 -2
  9. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +1 -4
  10. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -3
  11. data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
  12. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  13. data/app/pb_kits/playbook/pb_filter/filter.rb +0 -2
  14. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -17
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
  23. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -5
  24. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  25. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -3
  26. data/dist/chunks/{_typeahead-BKndSDgc.js → _typeahead-CT2ByCBK.js} +1 -1
  27. data/dist/chunks/_weekday_stacked-BFqyoTft.js +45 -0
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/playbook-doc.js +1 -1
  30. data/dist/playbook-rails-react-bindings.js +1 -1
  31. data/dist/playbook-rails.js +1 -1
  32. data/dist/playbook.css +1 -1
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +4 -14
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb +0 -41
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx +0 -71
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md +0 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  43. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
  44. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
  45. data/dist/chunks/_weekday_stacked-DBH_rF_4.js +0 -45
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.5.0"
5
- VERSION = "14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158"
5
+ VERSION = "14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158
4
+ version: 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-10-18 00:00:00.000000000 Z
12
+ date: 2024-10-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1126,8 +1126,6 @@ files:
1126
1126
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
1127
1127
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
1128
1128
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
1129
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
1130
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
1131
1129
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
1132
1130
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
1133
1131
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -1216,10 +1214,6 @@ files:
1216
1214
  - app/pb_kits/playbook/pb_filter/_filter.scss
1217
1215
  - app/pb_kits/playbook/pb_filter/_filter.tsx
1218
1216
  - app/pb_kits/playbook/pb_filter/docs/_description.md
1219
- - app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb
1220
- - app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx
1221
- - app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md
1222
- - app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md
1223
1217
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
1224
1218
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
1225
1219
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
@@ -1810,8 +1804,6 @@ files:
1810
1804
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
1811
1805
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
1812
1806
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
1813
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
1814
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
1815
1807
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
1816
1808
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
1817
1809
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
@@ -1865,8 +1857,6 @@ files:
1865
1857
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
1866
1858
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
1867
1859
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
1868
- - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
1869
- - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
1870
1860
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
1871
1861
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
1872
1862
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
@@ -3089,8 +3079,8 @@ files:
3089
3079
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3090
3080
  - app/pb_kits/playbook/utilities/text.ts
3091
3081
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3092
- - dist/chunks/_typeahead-BKndSDgc.js
3093
- - dist/chunks/_weekday_stacked-DBH_rF_4.js
3082
+ - dist/chunks/_typeahead-CT2ByCBK.js
3083
+ - dist/chunks/_weekday_stacked-BFqyoTft.js
3094
3084
  - dist/chunks/lazysizes-B7xYodB-.js
3095
3085
  - dist/chunks/lib-CEpcaI8y.js
3096
3086
  - dist/chunks/pb_form_validation-D9zkwt2b.js
@@ -1,45 +0,0 @@
1
- import React, { useRef } from 'react'
2
- import { Button, Dropdown } from 'playbook-ui'
3
-
4
- const options = [
5
- {
6
- label: "United States",
7
- value: "United States",
8
- },
9
- {
10
- label: "Canada",
11
- value: "Canada",
12
- },
13
- {
14
- label: "Pakistan",
15
- value: "Pakistan",
16
- }
17
- ]
18
-
19
- const DropdownClearSelection = (props) => {
20
- const dropdownRef = useRef(null)
21
-
22
- const handleReset = () => {
23
- if (dropdownRef.current) {
24
- dropdownRef.current.clearSelected()
25
- }
26
- }
27
-
28
- return (
29
- <>
30
- <Dropdown
31
- defaultValue={options[2]}
32
- options={options}
33
- ref={dropdownRef}
34
- {...props}
35
- />
36
- <Button
37
- marginTop="md"
38
- onClick={handleReset}
39
- text="Reset"
40
- />
41
- </>
42
- )
43
- }
44
-
45
- export default DropdownClearSelection
@@ -1 +0,0 @@
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.
@@ -1,41 +0,0 @@
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 %>
@@ -1,71 +0,0 @@
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
@@ -1 +0,0 @@
1
- Filter can leverage `popover_props` to set a custom width to the popover, without affecting the Filter size.
@@ -1 +0,0 @@
1
- Filter can leverage `popoverProps` to set a custom width to the popover, without affecting the Filter size.
@@ -1,93 +0,0 @@
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>
@@ -1 +0,0 @@
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.
@@ -1,336 +0,0 @@
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 %>