playbook_ui 14.5.0.pre.alpha.PBNTR568dropdowncleaning4044 → 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158

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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  3. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  4. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  5. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  6. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  7. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb +41 -0
  8. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx +71 -0
  9. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md +1 -0
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md +1 -0
  11. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  13. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  15. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +17 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  25. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  26. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  28. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  29. data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -1
  30. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  31. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  32. data/dist/chunks/{_typeahead-CT2ByCBK.js → _typeahead-BKndSDgc.js} +1 -1
  33. data/dist/chunks/_weekday_stacked-DBH_rF_4.js +45 -0
  34. data/dist/chunks/vendor.js +1 -1
  35. data/dist/playbook-doc.js +1 -1
  36. data/dist/playbook-rails-react-bindings.js +1 -1
  37. data/dist/playbook-rails.js +1 -1
  38. data/dist/playbook.css +1 -1
  39. data/lib/playbook/version.rb +1 -1
  40. metadata +13 -4
  41. data/dist/chunks/_weekday_stacked-BTS5z219.js +0 -45
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 %>
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx ADDED
@@ -0,0 +1,97 @@
1
+ import React from 'react'
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Title from '../../pb_title/_title'
4
+ import MultipleUsersStacked from '../_multiple_users_stacked'
5
+
6
+ const MultipleUsersStackedSize = (props) => {
7
+ const sizes = [
8
+ { label: 'S', size: 'sm' },
9
+ { label: 'M', size: 'md' },
10
+ { label: 'L', size: 'lg' },
11
+ { label: 'XL', size: 'xl' },
12
+ ]
13
+
14
+ const usersList = [
15
+ [
16
+ {
17
+ name: 'Patrick Welch',
18
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
19
+ },
20
+ ],
21
+ [
22
+ {
23
+ name: 'Patrick Welch',
24
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
25
+ },
26
+ {
27
+ name: 'Lucille Sanchez',
28
+ imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
29
+ },
30
+ ],
31
+ [
32
+ {
33
+ name: 'Patrick Welch',
34
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
35
+ },
36
+ {
37
+ name: 'Lucille Sanchez',
38
+ imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
39
+ },
40
+ {
41
+ name: 'Beverly Reyes',
42
+ imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
43
+ },
44
+ ],
45
+ [
46
+ {
47
+ name: 'Patrick Welch',
48
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
49
+ },
50
+ {
51
+ name: 'Lucille Sanchez',
52
+ imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
53
+ },
54
+ {
55
+ name: 'Beverly Reyes',
56
+ imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
57
+ },
58
+ {
59
+ name: 'Keith Craig',
60
+ imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
61
+ },
62
+ {
63
+ name: 'Alicia Cooper',
64
+ imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
65
+ },
66
+ ],
67
+ ]
68
+
69
+ return (
70
+ <>
71
+ {sizes.map(({ label, size }) => (
72
+ <Flex key={size}
73
+ orientation="column"
74
+ >
75
+ <Title paddingTop='sm' >{label}</Title>
76
+ <Flex>
77
+ {usersList.map((users, index) => (
78
+ <Flex key={index}
79
+ paddingRight='sm'
80
+ >
81
+ <MultipleUsersStacked
82
+ size={size}
83
+ users={users}
84
+ variant="bubble"
85
+ {...props}
86
+ />
87
+ </Flex>
88
+ ))}
89
+ </Flex>
90
+ <br />
91
+ </Flex>
92
+ ))}
93
+ </>
94
+ )
95
+ }
96
+
97
+ export default MultipleUsersStackedSize
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml CHANGED
@@ -3,11 +3,13 @@ examples:
3
3
  rails:
4
4
  - multiple_users_stacked_default: Default
5
5
  - multiple_users_stacked_bubble: Bubble
6
+ - multiple_users_stacked_size: Sizes
6
7
 
7
8
 
8
9
  react:
9
10
  - multiple_users_stacked_default: Default
10
11
  - multiple_users_stacked_bubble: Bubble
12
+ - multiple_users_stacked_size: Sizes
11
13
 
12
14
  swift:
13
15
  - multiple_users_stacked_default_swift: Default
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
2
2
  export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
3
+ export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'
data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb CHANGED
@@ -1,5 +1,15 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
2
+ <%= pb_rails(
3
+ "avatar",
4
+ props: object.users[0].merge({
5
+ classname: "pb_multiple_users_stacked_item first_item" +
6
+ (object.double_bubble ? " double_bubble" : "") +
7
+ (object.triple_bubble ? " triple_bubble" : "") +
8
+ (object.quadruple_bubble ? " quadruple_bubble" : ""),
9
+ dark: object.dark,
10
+ size: 'xs'
11
+ })
12
+ ) %>
3
13
 
4
14
  <% unless object.only_one %>
5
15
  <% if object.more_than_two && !object.bubble %>
@@ -8,14 +18,26 @@
8
18
  text: "+#{object.users.count - object.display_count}",
9
19
  variant: "primary",
10
20
  rounded: true,
11
- classname: "pb_multiple_users_stacked_item second_item" }) %>
21
+ classname: "pb_multiple_users_stacked_item second_item"
22
+ }) %>
12
23
  <% elsif object.bubble %>
13
- <% object.users.slice(1,3).each_with_index do |item, idx| %>
14
- <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
24
+ <% object.users.slice(1, 3).each_with_index do |item, idx| %>
25
+ <%= pb_rails(
26
+ "avatar",
27
+ props: item.merge({
28
+ classname: object.bubble_classname(idx),
29
+ dark: object.dark
30
+ })
31
+ ) %>
15
32
  <% end %>
16
33
  <% else %>
17
- <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
34
+ <%= pb_rails(
35
+ "avatar",
36
+ props: object.users[1].merge({
37
+ classname: "pb_multiple_users_stacked_item second_item",
38
+ dark: object.dark
39
+ })
40
+ ) %>
18
41
  <% end %>
19
42
  <% end %>
20
-
21
43
  <% end %>
data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb CHANGED
@@ -4,6 +4,9 @@ module Playbook
4
4
  module PbMultipleUsersStacked
5
5
  class MultipleUsersStacked < Playbook::KitBase
6
6
  prop :users, type: Playbook::Props::HashArray, required: true
7
+ prop :size, type: Playbook::Props::Enum,
8
+ values: %w[sm md lg xl],
9
+ default: "sm"
7
10
 
8
11
  prop :variant, type: Playbook::Props::Enum,
9
12
  values: %w[default bubble],
@@ -25,6 +28,10 @@ module Playbook
25
28
  variant == "bubble"
26
29
  end
27
30
 
31
+ def double_bubble
32
+ bubble && users.count === 2
33
+ end
34
+
28
35
  def triple_bubble
29
36
  bubble && users.count === 3
30
37
  end
@@ -33,8 +40,31 @@ module Playbook
33
40
  bubble && users.count > 3
34
41
  end
35
42
 
43
+ def size_class
44
+ "size_#{size}" if bubble
45
+ end
46
+
36
47
  def classname
37
- generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
48
+ generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class, size_class)
49
+ end
50
+
51
+ def bubble_classname(index)
52
+ base_classname = "pb_multiple_users_stacked_item "
53
+
54
+ case index
55
+ when 0
56
+ base_classname += "second_item"
57
+ base_classname += " double_bubble" if double_bubble
58
+ base_classname += " triple_bubble" if triple_bubble
59
+ base_classname += " quadruple_bubble" if quadruple_bubble
60
+ when 1
61
+ base_classname += "third_item"
62
+ base_classname += " quadruple_bubble" if quadruple_bubble
63
+ else
64
+ base_classname += "fourth_item"
65
+ end
66
+
67
+ base_classname
38
68
  end
39
69
 
40
70
  private
data/app/pb_kits/playbook/pb_popover/_popover.tsx CHANGED
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
79
79
  maxWidth,
80
80
  minHeight,
81
81
  minWidth,
82
+ width,
82
83
  targetId,
83
84
  } = props;
84
85
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
97
98
  maxHeight ? { maxHeight: maxHeight } : {},
98
99
  maxWidth ? { maxWidth: maxWidth } : {},
99
100
  minHeight ? { minHeight: minHeight } : {},
100
- minWidth ? { minWidth: minWidth } : {}
101
+ minWidth ? { minWidth: minWidth } : {},
102
+ width ? { width: width } : {}
101
103
  );
102
104
  };
103
105
  const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
167
169
  maxWidth,
168
170
  minHeight,
169
171
  minWidth,
172
+ width,
170
173
  } = props;
171
174
 
172
175
  useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
216
219
  placement={placement}
217
220
  referenceElement={referenceElement}
218
221
  targetId={targetId}
222
+ width={width}
219
223
  zIndex={zIndex}
220
224
  {...props}
221
225
  >
data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb CHANGED
@@ -14,7 +14,7 @@
14
14
  trigger_element_id: "regular-popover-1",
15
15
  tooltip_id: "tooltip-1",
16
16
  offset: true,
17
- position: "top"
17
+ position: "top",
18
18
  }) do %>
19
19
  I'm a popover. I can show content of any size.
20
20
  <% end %>
data/app/pb_kits/playbook/pb_popover/popover.rb CHANGED
@@ -12,6 +12,7 @@ module Playbook
12
12
  prop :max_width
13
13
  prop :min_width
14
14
  prop :min_height
15
+ prop :width
15
16
  prop :z_index, type: Playbook::Props::String
16
17
  prop :offset, type: Playbook::Props::Boolean, default: false
17
18
  prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ module Playbook
36
37
  out += "max-width: #{max_width}; " if max_width.present?
37
38
  out += "min-height: #{min_height}; " if min_height.present?
38
39
  out += "min-width: #{min_width};" if min_width.present?
40
+ out += "width: #{width};" if width.present?
39
41
  out
40
42
  end
41
43
 
42
44
  def width_height_class_helper
43
- "overflow_handling" if max_height || max_width
45
+ "overflow_handling" if max_height || max_width || width
44
46
  end
45
47
 
46
48
  def data