playbook_ui 14.3.2 → 14.4.0.pre.alpha.PBNTR490multilevelselect3832

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +2 -3
  3. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +245 -23
  4. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +117 -0
  6. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +227 -0
  7. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +1 -0
  8. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  9. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +1 -1
  11. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +20 -5
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +72 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +91 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +1 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +1 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +97 -21
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +166 -0
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +45 -6
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb +73 -0
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx +86 -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 +6 -2
  28. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +21 -1
  29. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +48 -0
  30. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md +1 -0
  31. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  32. data/app/pb_kits/playbook/pb_radio/index.js +17 -0
  33. data/app/pb_kits/playbook/pb_radio/radio.html.erb +35 -13
  34. data/app/pb_kits/playbook/pb_radio/radio.rb +3 -1
  35. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +16 -0
  36. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -0
  37. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +26 -18
  38. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +31 -0
  39. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +26 -0
  40. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +1 -0
  41. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +1 -0
  42. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  43. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
  45. data/app/pb_kits/playbook/tokens/_colors.scss +2 -0
  46. data/dist/chunks/{_typeahead-DbAz2Okr.js → _typeahead-BErpxkBz.js} +2 -2
  47. data/dist/chunks/{_weekday_stacked-CZ5S17_d.js → _weekday_stacked-CGwn8Bd7.js} +2 -2
  48. data/dist/chunks/lib-D2U4I1U6.js +16 -0
  49. data/dist/chunks/{pb_form_validation-u2wnZ3oe.js → pb_form_validation-zV9OpdSt.js} +1 -1
  50. data/dist/chunks/vendor.js +1 -1
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/version.rb +2 -2
  56. metadata +25 -9
  57. data/dist/chunks/lib-D9uVVKnh.js +0 -16
@@ -0,0 +1,227 @@
1
+ import React from 'react'
2
+ import { FormPill, Title } from 'playbook-ui'
3
+
4
+ const FormPillColors = (props) => {
5
+ return (
6
+ <div>
7
+ <Title
8
+ marginBottom="sm"
9
+ size={4}
10
+ text="Status Colors"
11
+ {...props}
12
+ />
13
+ <FormPill
14
+ onClick={() => {
15
+ alert('Click!')
16
+ }}
17
+ tabIndex={0}
18
+ text="Primary"
19
+ {...props}
20
+ />
21
+ <FormPill
22
+ color="neutral"
23
+ onClick={() => {
24
+ alert('Click!')
25
+ }}
26
+ tabIndex={0}
27
+ text="Neutral"
28
+ {...props}
29
+ />
30
+ <FormPill
31
+ color="success"
32
+ onClick={() => {
33
+ alert('Click!')
34
+ }}
35
+ tabIndex={0}
36
+ text="Success"
37
+ {...props}
38
+ />
39
+ <FormPill
40
+ color="warning"
41
+ onClick={() => {
42
+ alert('Click!')
43
+ }}
44
+ tabIndex={0}
45
+ text="Warning"
46
+ {...props}
47
+ />
48
+ <FormPill
49
+ color="error"
50
+ onClick={() => {
51
+ alert('Click!')
52
+ }}
53
+ tabIndex={0}
54
+ text="Error"
55
+ {...props}
56
+ />
57
+ <FormPill
58
+ color="info"
59
+ onClick={() => {
60
+ alert('Click!')
61
+ }}
62
+ tabIndex={0}
63
+ text="Info"
64
+ {...props}
65
+ />
66
+ <Title
67
+ marginBottom="sm"
68
+ marginTop="md"
69
+ size={4}
70
+ text="Data Colors"
71
+ {...props}
72
+ />
73
+ <FormPill
74
+ color="data_1"
75
+ onClick={() => {
76
+ alert('Click!')
77
+ }}
78
+ tabIndex={0}
79
+ text="Data 1"
80
+ {...props}
81
+ />
82
+ <FormPill
83
+ color="data_2"
84
+ onClick={() => {
85
+ alert('Click!')
86
+ }}
87
+ tabIndex={0}
88
+ text="Data 2"
89
+ {...props}
90
+ />
91
+ <FormPill
92
+ color="data_3"
93
+ onClick={() => {
94
+ alert('Click!')
95
+ }}
96
+ tabIndex={0}
97
+ text="Data 3"
98
+ {...props}
99
+ />
100
+ <FormPill
101
+ color="data_4"
102
+ onClick={() => {
103
+ alert('Click!')
104
+ }}
105
+ tabIndex={0}
106
+ text="Data 4"
107
+ {...props}
108
+ />
109
+ <FormPill
110
+ color="data_5"
111
+ onClick={() => {
112
+ alert('Click!')
113
+ }}
114
+ tabIndex={0}
115
+ text="Data 5"
116
+ {...props}
117
+ />
118
+ <FormPill
119
+ color="data_6"
120
+ onClick={() => {
121
+ alert('Click!')
122
+ }}
123
+ tabIndex={0}
124
+ text="Data 6"
125
+ {...props}
126
+ />
127
+ <FormPill
128
+ color="data_7"
129
+ onClick={() => {
130
+ alert('Click!')
131
+ }}
132
+ tabIndex={0}
133
+ text="Data 7"
134
+ {...props}
135
+ />
136
+ <FormPill
137
+ color="data_8"
138
+ onClick={() => {
139
+ alert('Click!')
140
+ }}
141
+ tabIndex={0}
142
+ text="Data 8"
143
+ {...props}
144
+ />
145
+ <Title
146
+ marginBottom="sm"
147
+ marginTop="md"
148
+ size={4}
149
+ text="Product Colors"
150
+ {...props}
151
+ />
152
+ <FormPill
153
+ color="windows"
154
+ onClick={() => {
155
+ alert('Click!')
156
+ }}
157
+ tabIndex={0}
158
+ text="Windows"
159
+ {...props}
160
+ />
161
+ <FormPill
162
+ color="siding"
163
+ onClick={() => {
164
+ alert('Click!')
165
+ }}
166
+ tabIndex={0}
167
+ text="Siding"
168
+ {...props}
169
+ />
170
+ <FormPill
171
+ color="roofing"
172
+ onClick={() => {
173
+ alert('Click!')
174
+ }}
175
+ tabIndex={0}
176
+ text="Roofing"
177
+ {...props}
178
+ />
179
+ <FormPill
180
+ color="doors"
181
+ onClick={() => {
182
+ alert('Click!')
183
+ }}
184
+ tabIndex={0}
185
+ text="Doors"
186
+ {...props}
187
+ />
188
+ <FormPill
189
+ color="gutters"
190
+ onClick={() => {
191
+ alert('Click!')
192
+ }}
193
+ tabIndex={0}
194
+ text="Gutters"
195
+ {...props}
196
+ />
197
+ <FormPill
198
+ color="solar"
199
+ onClick={() => {
200
+ alert('Click!')
201
+ }}
202
+ tabIndex={0}
203
+ text="Solar"
204
+ {...props}
205
+ />
206
+ <FormPill
207
+ color="insulation"
208
+ onClick={() => {
209
+ alert('Click!')
210
+ }}
211
+ tabIndex={0}
212
+ text="Insulation"
213
+ {...props}
214
+ />
215
+ <FormPill
216
+ color="accessories"
217
+ onClick={() => {
218
+ alert('Click!')
219
+ }}
220
+ tabIndex={0}
221
+ text="Accessories"
222
+ {...props}
223
+ />
224
+ </div>
225
+ )
226
+ }
227
+ export default FormPillColors
@@ -0,0 +1 @@
1
+ The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop.
@@ -6,6 +6,7 @@ examples:
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
8
  - form_pill_icon: Form Pill Icon
9
+ - form_pill_colors: Form Pill Colors
9
10
 
10
11
  react:
11
12
  - form_pill_user: Form Pill User
@@ -13,3 +14,4 @@ examples:
13
14
  - form_pill_tag: Form Pill Tag
14
15
  - form_pill_example: Example
15
16
  - form_pill_icon: Form Pill Icon
17
+ - form_pill_colors: Form Pill Colors
@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
3
3
  export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
+ export { default as FormPillColors } from './_form_pill_colors.jsx'
@@ -12,7 +12,7 @@ module Playbook
12
12
  values: %w[none lowercase],
13
13
  default: "none"
14
14
  prop :color, type: Playbook::Props::Enum,
15
- values: %w[primary neutral],
15
+ values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
16
16
  default: "primary"
17
17
  prop :tabindex
18
18
  prop :icon
@@ -9,7 +9,7 @@ module Playbook
9
9
  prop :border, type: Playbook::Props::Boolean,
10
10
  default: false
11
11
  prop :fixed_width, type: Playbook::Props::Boolean,
12
- default: false
12
+ default: true
13
13
  prop :flip, type: Playbook::Props::Enum,
14
14
  values: ["horizontal", "vertical", "both", nil],
15
15
  default: nil
@@ -34,6 +34,7 @@ type MultiLevelSelectProps = {
34
34
  onSelect?: (prop: { [key: string]: any }) => void
35
35
  selectedIds?: string[]
36
36
  variant?: "multi" | "single"
37
+ pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
37
38
  } & GlobalProps
38
39
 
39
40
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -50,7 +51,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
50
51
  treeData,
51
52
  onSelect = () => null,
52
53
  selectedIds,
53
- variant = "multi"
54
+ variant = "multi",
55
+ pillColor = "primary"
54
56
  } = props
55
57
 
56
58
  const ariaProps = buildAriaProps(aria)
@@ -86,6 +88,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
86
88
  item: []
87
89
  })
88
90
 
91
+ const arrowDownElementId = `arrow_down_${id}`
92
+ const arrowUpElementId = `arrow_up_${id}`
93
+
89
94
  const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
90
95
  if (!Array.isArray(tree)) {
91
96
  return
@@ -171,7 +176,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
171
176
  useEffect(() => {
172
177
  // Function to handle clicks outside the dropdown
173
178
  const handleClickOutside = (event: any) => {
174
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
179
+ if (
180
+ dropdownRef.current &&
181
+ !dropdownRef.current.contains(event.target) &&
182
+ event.target.id !== arrowDownElementId &&
183
+ event.target.id !== arrowUpElementId
184
+ ) {
175
185
  setIsDropdownClosed(true)
176
186
  }
177
187
  }
@@ -258,7 +268,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
258
268
 
259
269
  // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
260
270
  const handleInputWrapperClick = (e: any) => {
261
- e.stopPropagation()
262
271
  if (
263
272
  e.target.id === "multiselect_input" ||
264
273
  e.target.classList.contains("pb_form_pill_tag")
@@ -467,6 +476,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
467
476
  inputDisplay === "pills"
468
477
  ? returnedArray.map((item, index) => (
469
478
  <FormPill
479
+ color={pillColor}
470
480
  key={index}
471
481
  onClick={(event: any) => handlePillClose(event, item)}
472
482
  text={item.label}
@@ -479,6 +489,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
479
489
  inputDisplay === "pills"
480
490
  ? defaultReturn.map((item, index) => (
481
491
  <FormPill
492
+ color={pillColor}
482
493
  key={index}
483
494
  onClick={(event: any) => handlePillClose(event, item)}
484
495
  text={item.label}
@@ -514,16 +525,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
514
525
  </div>
515
526
 
516
527
  {isDropdownClosed ? (
517
- <div key="chevron-down">
528
+ <div id={arrowDownElementId}
529
+ key="chevron-down">
518
530
  <Icon
519
531
  icon="chevron-down"
532
+ id={arrowDownElementId}
520
533
  size="xs"
521
534
  />
522
535
  </div>
523
536
  ) : (
524
- <div key="chevron-up">
537
+ <div id={arrowUpElementId}
538
+ key="chevron-up">
525
539
  <Icon
526
540
  icon="chevron-up"
541
+ id={arrowUpElementId}
527
542
  size="xs"
528
543
  />
529
544
  </div>
@@ -0,0 +1,72 @@
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-default-rails",
69
+ name: "my_array",
70
+ tree_data: treeData,
71
+ pill_color: "neutral"
72
+ }) %>
@@ -0,0 +1,91 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+
4
+ const treeData = [
5
+ {
6
+ label: "Power Home Remodeling",
7
+ value: "Power Home Remodeling",
8
+ id: "powerhome1",
9
+ expanded: true,
10
+ children: [
11
+ {
12
+ label: "People",
13
+ value: "People",
14
+ id: "people1",
15
+ expanded: true,
16
+ children: [
17
+ {
18
+ label: "Talent Acquisition",
19
+ value: "Talent Acquisition",
20
+ id: "talent1",
21
+ },
22
+ {
23
+ label: "Business Affairs",
24
+ value: "Business Affairs",
25
+ id: "business1",
26
+ children: [
27
+ {
28
+ label: "Initiatives",
29
+ value: "Initiatives",
30
+ id: "initiative1",
31
+ },
32
+ {
33
+ label: "Learning & Development",
34
+ value: "Learning & Development",
35
+ id: "development1",
36
+ },
37
+ ],
38
+ },
39
+ {
40
+ label: "People Experience",
41
+ value: "People Experience",
42
+ id: "experience1",
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ label: "Contact Center",
48
+ value: "Contact Center",
49
+ id: "contact1",
50
+ children: [
51
+ {
52
+ label: "Appointment Management",
53
+ value: "Appointment Management",
54
+ id: "appointment1",
55
+ },
56
+ {
57
+ label: "Customer Service",
58
+ value: "Customer Service",
59
+ id: "customer1",
60
+ },
61
+ {
62
+ label: "Energy",
63
+ value: "Energy",
64
+ id: "energy1",
65
+ },
66
+ ],
67
+ },
68
+ ],
69
+ },
70
+ ];
71
+
72
+ const MultiLevelSelectColor = (props) => {
73
+ return (
74
+ <div>
75
+ <MultiLevelSelect
76
+ id='multiselect-color'
77
+ onSelect={(selectedNodes) =>
78
+ console.log(
79
+ "Selected Items",
80
+ selectedNodes
81
+ )
82
+ }
83
+ pillColor="neutral"
84
+ treeData={treeData}
85
+ {...props}
86
+ />
87
+ </div>
88
+ )
89
+ };
90
+
91
+ export default MultiLevelSelectColor;
@@ -0,0 +1 @@
1
+ Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
@@ -0,0 +1 @@
1
+ Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
@@ -6,6 +6,7 @@ examples:
6
6
  - multi_level_select_return_all_selected: Return All Selected
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
+ - multi_level_select_color: With Pills (Custom Color)
9
10
 
10
11
  react:
11
12
  - multi_level_select_default: Default
@@ -13,3 +14,4 @@ examples:
13
14
  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
14
15
  - multi_level_select_return_all_selected: Return All Selected
15
16
  - multi_level_select_selected_ids_react: Selected Ids
17
+ - multi_level_select_color: With Pills (Custom Color)
@@ -3,3 +3,4 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
3
3
  export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
+ export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
@@ -19,6 +19,9 @@ module Playbook
19
19
  prop :variant, type: Playbook::Props::Enum,
20
20
  values: %w[multi single],
21
21
  default: "multi"
22
+ prop :pill_color, type: Playbook::Props::Enum,
23
+ values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
24
+ default: "primary"
22
25
 
23
26
  def classname
24
27
  generate_classname("pb_multi_level_select")
@@ -34,6 +37,7 @@ module Playbook
34
37
  selectedIds: selected_ids,
35
38
  input_name: input_name,
36
39
  variant: variant,
40
+ pillColor: pill_color,
37
41
  }
38
42
  end
39
43
  end