playbook_ui 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.
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
@@ -3,6 +3,76 @@
3
3
  @import "../tokens/opacity";
4
4
  @import "../pb_avatar/avatar";
5
5
 
6
+ $sizes: (
7
+ "avatar": ("sm": 38px, "md": 60px, "lg": 80px, "xl": 100px),
8
+ "first-item-double": ("sm": 20px, "md": 32px, "lg": 44px, "xl": 56px),
9
+ "first-item-triple": ("sm": 16px, "md": 24px, "lg": 32px, "xl": 44px),
10
+ "first-item-quadruple": ("sm": 16px, "md": 28px, "lg": 36px, "xl": 44px),
11
+ "second-item-double": ("sm": 12px, "md": 16px, "lg": 20px, "xl": 24px),
12
+ "second-item-triple": ("sm": 12px, "md": 20px, "lg": 24px, "xl": 32px),
13
+ "second-item-quadruple": ("sm": 12px, "md": 20px, "lg": 28px, "xl": 32px),
14
+ "third-item-triple": ("sm": 10px, "md": 16px, "lg": 20px, "xl": 24px),
15
+ "third-item-quadruple": ("sm": 10px, "md": 16px, "lg": 24px, "xl": 24px),
16
+ "fourth-item": ("sm": 8px, "md": 12px, "lg": 16px, "xl": 16px)
17
+ );
18
+
19
+ $positions: (
20
+ "second-item-double": (
21
+ "sm": ("top": null, "bottom": 5px, "right": 4px, "left": null),
22
+ "md": ("top": null, "bottom": 10px, "right": 8px, "left": null),
23
+ "lg": ("top": 46px, "bottom": null, "right": 12px, "left": null),
24
+ "xl": ("top": 58px, "bottom": null, "right": 14px, "left": null)
25
+ ),
26
+ "second-item-triple": (
27
+ "sm": ("top": 12px, "bottom": null, "right": 2px, "left": null),
28
+ "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
29
+ "lg": ("top": 32px, "bottom": null, "right": 9px, "left": null),
30
+ "xl": ("top": 41px, "bottom": null, "right": 11px, "left": null)
31
+ ),
32
+ "second-item-quadruple": (
33
+ "sm": ("top": null, "bottom": 9px, "right": 4px, "left": null),
34
+ "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
35
+ "lg": ("top": 31px, "bottom": null, "right": 6px, "left": null),
36
+ "xl": ("top": 43px, "bottom": null, "right": 9px, "left": null)
37
+ ),
38
+ "third-item-triple": (
39
+ "sm": ("top": null, "bottom": 3px, "right": null, "left": 11px),
40
+ "md": ("top": null, "bottom": 6px, "right": null, "left": 16px),
41
+ "lg": ("top": null, "bottom": 10px, "right": null, "left": 23px),
42
+ "xl": ("top": null, "bottom": 13px, "right": null, "left": 27px)
43
+ ),
44
+ "third-item-quadruple": (
45
+ "sm": ("top": null, "bottom": 3px, "right": null, "left": 9px),
46
+ "md": ("top": null, "bottom": 5px, "right": null, "left": 15px),
47
+ "lg": ("top": null, "bottom": 7px, "right": null, "left": 20px),
48
+ "xl": ("top": null, "bottom": 11px, "right": null, "left": 27px)
49
+ ),
50
+ "fourth-item": (
51
+ "sm": ("top": 5px, "bottom": null, "right": 6px, "left": null),
52
+ "md": ("top": 7px, "bottom": null, "right": 12px, "left": null),
53
+ "lg": ("top": 9px, "bottom": null, "right": 16px, "left": null),
54
+ "xl": ("top": 16px, "bottom": null, "right": 24px, "left": null)
55
+ ),
56
+ "first-item-double": (
57
+ "sm": ("top": 4px, "bottom": null, "right": null, "left": 3px),
58
+ "md": ("top": 6px, "bottom": null, "right": null, "left": 8px),
59
+ "lg": ("top": 8px, "bottom": null, "right": null, "left": 8px),
60
+ "xl": ("top": 10px, "bottom": null, "right": null, "left": 10px)
61
+ ),
62
+ "first-item-triple": (
63
+ "sm": ("top": 4px, "bottom": null, "right": null, "left": 4px),
64
+ "md": ("top": 7px, "bottom": null, "right": null, "left": 7px),
65
+ "lg": ("top": 10px, "bottom": null, "right": null, "left": 10px),
66
+ "xl": ("top": 12px, "bottom": null, "right": null, "left": 12px)
67
+ ),
68
+ "first-item-quadruple": (
69
+ "sm": ("top": 5px, "bottom": null, "right": null, "left": 3px),
70
+ "md": ("top": 7px, "bottom": null, "right": null, "left": 5px),
71
+ "lg": ("top": 9px, "bottom": null, "right": null, "left": 7px),
72
+ "xl": ("top": 16px, "bottom": null, "right": null, "left": 10px)
73
+ )
74
+ );
75
+
6
76
  @mixin avatar-size($size) {
7
77
  height: $size;
8
78
  width: $size;
@@ -27,8 +97,8 @@
27
97
  $stacked_size: 18px;
28
98
  $max_to_display: 1, 2;
29
99
  display: inline-flex;
30
- width: $container_size;
31
- height: $container_size;
100
+ width: 28px;
101
+ height: 28px;
32
102
  flex-basis: $container_size;
33
103
  position: relative;
34
104
  flex-shrink: 0;
@@ -48,7 +118,7 @@
48
118
  }
49
119
  }
50
120
  &[class*=_single] .pb_multiple_users_stacked_item {
51
- @include avatar-size($container_size);
121
+ @include avatar-size(28px);
52
122
  }
53
123
  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
54
124
  @include position((bottom: 0, right: 0));
@@ -71,72 +141,106 @@
71
141
  color: transparent;
72
142
  }
73
143
 
74
- &[class*=_bubble] {
75
- @include avatar-size($bubble_container_size);
76
- background-color: $bg_light;
77
- border-radius: 50%;
78
-
79
- &.dark {
80
- background-color: $card_dark;
81
- }
82
-
83
- [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
84
- &.dark {
85
- .avatar_wrapper {
86
- border: $border_size solid $border_dark;
87
- }
88
- }
89
- }
90
-
91
- [class^=pb_avatar_kit] {
92
- &.first_item {
93
- @include position((top: 4px, left: 3px));
94
- @include avatar-size(20px);
95
-
96
- &.triple_bubble {
97
- @include position((top: 4px, left: 4px));
98
- @include avatar-size(16px);
144
+ // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
145
+ @each $size_name, $size_value in $avatar-sizes {
146
+ &[class*=_bubble_][class*=_size_#{$size_name}] {
147
+ // Set bubble container size based on the class
148
+ $bubble_container_size: $size_value;
149
+ $container_size: $size_value;
150
+
151
+ // Apply the bubble container size
152
+ @include avatar-size($bubble_container_size);
153
+ width: $bubble_container_size;
154
+ height: $bubble_container_size;
155
+ flex-basis: $bubble_container_size;
156
+
157
+ background-color: $bg_light;
158
+ border-radius: 50%;
159
+
160
+ &.dark {
161
+ background-color: $card_dark;
99
162
  }
100
-
101
- &.quadruple_bubble {
102
- @include position((top: 5px, left: 3px));
103
- @include avatar-size(16px);
104
- }
105
- }
106
-
107
- &.second_item {
108
- @include position((bottom: 5px, right: 4px));
109
- @include avatar-size(12px);
110
-
111
- &.triple_bubble {
112
- @include position((top: 13px, right: 2px));
163
+
164
+ [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
165
+ @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
166
+
167
+ &.dark {
168
+ .avatar_wrapper {
169
+ border: $border_size solid $border_dark;
170
+ }
171
+ }
172
+
173
+ .avatar_wrapper {
174
+ border: $border_size solid $white;
175
+ }
113
176
  }
114
-
115
- &.quadruple_bubble {
116
- @include position((bottom: 9px, right: 4px));
177
+
178
+ [class^=pb_avatar_kit] {
179
+ // First Item
180
+ &.first_item {
181
+ @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
182
+ @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
183
+
184
+ &.double_bubble {
185
+ @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
186
+ @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
187
+ }
188
+
189
+ &.triple_bubble {
190
+ @include position(map-get(map-get($positions, 'first-item-triple'), $size_name));
191
+ @include avatar-size(map-get(map-get($sizes, 'first-item-triple'), $size_name));
192
+ }
193
+
194
+ &.quadruple_bubble {
195
+ @include position(map-get(map-get($positions, 'first-item-quadruple'), $size_name));
196
+ @include avatar-size(map-get(map-get($sizes, 'first-item-quadruple'), $size_name));
197
+ }
198
+ }
199
+
200
+ // Second Item
201
+ &.second_item {
202
+ @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
203
+
204
+ &.double_bubble {
205
+ @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
206
+ @include avatar-size(map-get(map-get($sizes, 'second-item-double'), $size_name));
207
+ }
208
+
209
+ &.triple_bubble {
210
+ @include position(map-get(map-get($positions, 'second-item-triple'), $size_name));
211
+ @include avatar-size(map-get(map-get($sizes, 'second-item-triple'), $size_name));
212
+ }
213
+
214
+ &.quadruple_bubble {
215
+ @include position(map-get(map-get($positions, 'second-item-quadruple'), $size_name));
216
+ @include avatar-size(map-get(map-get($sizes, 'second-item-quadruple'), $size_name));
217
+ }
218
+ }
219
+
220
+ // Third Item
221
+ &.third_item {
222
+ @include position(map-get(map-get($positions, 'third-item-triple'), $size_name));
223
+ @include avatar-size(map-get(map-get($sizes, 'third-item-triple'), $size_name));
224
+
225
+ &.quadruple_bubble {
226
+ @include position(map-get(map-get($positions, 'third-item-quadruple'), $size_name));
227
+ @include avatar-size(map-get(map-get($sizes, 'third-item-quadruple'), $size_name));
228
+ }
229
+ }
230
+
231
+ // Fourth Item
232
+ &.fourth_item {
233
+ @include position(map-get(map-get($positions, 'fourth-item'), $size_name));
234
+ @include avatar-size(map-get(map-get($sizes, 'fourth-item'), $size_name));
235
+ }
117
236
  }
118
- }
119
-
120
- &.third_item {
121
- @include position((bottom: 3px, left: 11px));
122
- @include avatar-size(10px);
123
-
124
- &.quadruple_bubble {
125
- @include position((bottom: 3px, left: 9px));
237
+
238
+ &[class*=_single_bubble] {
239
+ [class^=pb_avatar_kit].first_item {
240
+ @include position((top: 0, left: 0));
241
+ @include avatar-size($bubble_container_size);
242
+ }
126
243
  }
127
244
  }
128
-
129
- &.fourth_item {
130
- @include position((top: 5px, right: 6px));
131
- @include avatar-size(8px);
132
- }
133
- }
134
- }
135
-
136
- &[class*=_single_bubble] {
137
- [class^=pb_avatar_kit].first_item {
138
- @include position((top: 0, left: 0));
139
- @include avatar-size($bubble_container_size);
140
245
  }
141
246
  }
142
- }
@@ -81,7 +81,7 @@ const MultipleUsersStackedSingleBubble = () => {
81
81
  test('should have a single bubble', () => {
82
82
  render(<MultipleUsersStackedSingleBubble />)
83
83
  const kit = screen.getByTestId(testId)
84
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
84
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble_size_sm")
85
85
 
86
86
  const firstItem = kit.querySelector('.first_item');
87
87
  expect(firstItem).toBeInTheDocument();
@@ -113,7 +113,7 @@ const MultipleUsersStackedDoubleBubble = () => {
113
113
  test('should have a double bubble', () => {
114
114
  render(<MultipleUsersStackedDoubleBubble />)
115
115
  const kit = screen.getByTestId(testId)
116
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
116
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
117
117
 
118
118
  const firstItem = kit.querySelector('.first_item');
119
119
  expect(firstItem).toBeInTheDocument();
@@ -153,7 +153,7 @@ const MultipleUsersStackedTripleBubble = () => {
153
153
  test('should have a triple bubble', () => {
154
154
  render(<MultipleUsersStackedTripleBubble />)
155
155
  const kit = screen.getByTestId(testId)
156
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
156
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
157
157
 
158
158
  const firstItem = kit.querySelector('.first_item');
159
159
  expect(firstItem).toBeInTheDocument();
@@ -208,7 +208,7 @@ const MultipleUsersStackedQuadrupleBubble = () => {
208
208
  test('should have a quadruple bubble', () => {
209
209
  render(<MultipleUsersStackedQuadrupleBubble />)
210
210
  const kit = screen.getByTestId(testId)
211
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
211
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
212
212
 
213
213
  const firstItem = kit.querySelector('.first_item');
214
214
  expect(firstItem).toBeInTheDocument();
@@ -224,4 +224,4 @@ test('should have a quadruple bubble', () => {
224
224
 
225
225
  const fourthItem = kit.querySelector('.fourth_item');
226
226
  expect(fourthItem).toBeInTheDocument();
227
- })
227
+ })
@@ -14,6 +14,7 @@ type MultipleUsersStackedProps = {
14
14
  data?: { [key: string]: string },
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  id?: string,
17
+ size?: "md" | "lg" | "sm" | "xl"
17
18
  users: Array<{ [key: string]: string }>,
18
19
  variant: "default" | "bubble",
19
20
  }
@@ -27,14 +28,17 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
27
28
  htmlOptions = {},
28
29
  id,
29
30
  users,
31
+ size = "sm",
30
32
  variant = "default",
31
33
  } = props
32
34
 
33
35
  const moreThanTwo = users.length > 2
34
36
  const onlyOne = users.length == 1
35
37
  const isBubble = variant === "bubble"
38
+ const doubleBubble = isBubble && users.length === 2
36
39
  const tripleBubble = isBubble && users.length === 3
37
40
  const quadrupleBubble = isBubble && users.length > 3
41
+ const sizeClass = isBubble ? `size_${size}` : ""
38
42
  const displayCount = () => {
39
43
  return moreThanTwo ? 1 : users.length
40
44
  }
@@ -43,17 +47,19 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
43
47
  const htmlProps = buildHtmlProps(htmlOptions)
44
48
  const classes = classnames(buildCss(
45
49
  'pb_multiple_users_stacked_kit',
46
- { single: onlyOne, bubble: isBubble }), globalProps(props), className)
50
+ { single: onlyOne, bubble: isBubble }, sizeClass),
51
+ globalProps(props),
52
+ className)
47
53
 
48
54
  const firstUser = () => {
49
55
  return users.slice(0, 1).map((userObject, index) => {
50
56
  return (
51
57
  <Avatar
52
58
  {...userObject}
53
- className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
59
+ className={`pb_multiple_users_stacked_item first_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
54
60
  dark={dark}
55
61
  key={index}
56
- size={isBubble ? "sm" : "xs"}
62
+ size={isBubble ? "md" : "xs"}
57
63
  />
58
64
  )
59
65
  })
@@ -65,10 +71,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
65
71
  return (
66
72
  <Avatar
67
73
  {...userObject}
68
- className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
74
+ className={`pb_multiple_users_stacked_item second_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
69
75
  dark={dark}
70
76
  key={index}
71
- size="xs"
77
+ size={isBubble ? "md" : "xs"}
72
78
  />
73
79
  )
74
80
  })
@@ -81,10 +87,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
81
87
  return (
82
88
  <Avatar
83
89
  {...userObject}
84
- className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
90
+ className={`pb_multiple_users_stacked_item third_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
85
91
  dark={dark}
86
92
  key={index}
87
- size="xs"
93
+ size="md"
88
94
  />
89
95
  )
90
96
  })
@@ -97,10 +103,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
97
103
  return (
98
104
  <Avatar
99
105
  {...userObject}
100
- className="pb_multiple_users_stacked_item fourth_item"
106
+ className="pb_multiple_users_stacked_item fourth_item quadruple_bubble"
101
107
  dark={dark}
102
108
  key={index}
103
- size="xs"
109
+ size="md"
104
110
  />
105
111
  )
106
112
  })