playbook_ui 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833 → 12.26.1.pre.alpha.railsmultilevelimprovements835

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +5 -4
  3. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +6 -3
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -4
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -4
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +4 -2
  7. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_filter/filter.test.js +6 -3
  9. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +2 -1
  10. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +1 -1
  12. data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
  13. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +8 -8
  14. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +5 -5
  15. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +163 -123
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +14 -6
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +8 -4
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +14 -7
  21. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +73 -0
  23. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +87 -0
  24. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
  25. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  26. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  27. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +7 -3
  28. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +6 -0
  29. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +2 -1
  30. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +2 -1
  31. data/app/pb_kits/playbook/pb_popover/_popover.tsx +3 -5
  32. data/app/pb_kits/playbook/pb_popover/index.ts +2 -5
  33. data/app/pb_kits/playbook/pb_popover/popover.test.js +6 -6
  34. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +4 -2
  35. data/dist/playbook-rails.js +5 -5
  36. data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
  37. data/lib/playbook/forms/builder.rb +1 -0
  38. data/lib/playbook/version.rb +1 -1
  39. metadata +5 -1
@@ -0,0 +1,87 @@
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
+ children: [
16
+ {
17
+ label: "Talent Acquisition",
18
+ value: "Talent Acquisition",
19
+ id: "talent1",
20
+ },
21
+ {
22
+ label: "Business Affairs",
23
+ value: "Business Affairs",
24
+ id: "business1",
25
+ children: [
26
+ {
27
+ label: "Initiatives",
28
+ value: "Initiatives",
29
+ id: "initiative1",
30
+ },
31
+ {
32
+ label: "Learning & Development",
33
+ value: "Learning & Development",
34
+ id: "development1",
35
+ },
36
+ ],
37
+ },
38
+ {
39
+ label: "People Experience",
40
+ value: "People Experience",
41
+ id: "experience1",
42
+ },
43
+ ],
44
+ },
45
+ {
46
+ label: "Contact Center",
47
+ value: "Contact Center",
48
+ id: "contact1",
49
+ children: [
50
+ {
51
+ label: "Appointment Management",
52
+ value: "Appointment Management",
53
+ id: "appointment1",
54
+ },
55
+ {
56
+ label: "Customer Service",
57
+ value: "Customer Service",
58
+ id: "customer1",
59
+ },
60
+ {
61
+ label: "Energy",
62
+ value: "Energy",
63
+ id: "energy1",
64
+ },
65
+ ],
66
+ },
67
+ ],
68
+ },
69
+ ]
70
+
71
+ const MultiLevelSelectDefault = (props) => {
72
+ return (
73
+ <div>
74
+ <MultiLevelSelect
75
+ id='multiselect-default'
76
+ onSelect={(selectedNodes) =>
77
+ console.log("Selected Items with Complete Data", selectedNodes)
78
+ }
79
+ returnCompleteData
80
+ treeData={treeData}
81
+ {...props}
82
+ />
83
+ </div>
84
+ )
85
+ }
86
+
87
+ export default MultiLevelSelectDefault
@@ -0,0 +1,72 @@
1
+ <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
2
+
3
+ <% treeData = [{
4
+ label: "Power Home Remodeling",
5
+ value: "Power Home Remodeling",
6
+ id: "powerhome1",
7
+ expanded: true,
8
+ children: [
9
+ {
10
+ label: "People",
11
+ value: "People",
12
+ id: "people1",
13
+ children: [
14
+ {
15
+ label: "Talent Acquisition",
16
+ value: "Talent Acquisition",
17
+ id: "talent1",
18
+ },
19
+ {
20
+ label: "Business Affairs",
21
+ value: "Business Affairs",
22
+ id: "business1",
23
+ children: [
24
+ {
25
+ label: "Initiatives",
26
+ value: "Initiatives",
27
+ id: "initiative1",
28
+ },
29
+ {
30
+ label: "Learning & Development",
31
+ value: "Learning & Development",
32
+ id: "development1",
33
+ },
34
+ ],
35
+ },
36
+ {
37
+ label: "People Experience",
38
+ value: "People Experience",
39
+ id: "experience1",
40
+ },
41
+ ],
42
+ },
43
+ {
44
+ label: "Contact Center",
45
+ value: "Contact Center",
46
+ id: "contact1",
47
+ children: [
48
+ {
49
+ label: "Appointment Management",
50
+ value: "Appointment Management",
51
+ id: "appointment1",
52
+ },
53
+ {
54
+ label: "Customer Service",
55
+ value: "Customer Service",
56
+ id: "customer1",
57
+ },
58
+ {
59
+ label: "Energy",
60
+ value: "Energy",
61
+ id: "energy1",
62
+ },
63
+ ],
64
+ },
65
+ ],
66
+ }] %>
67
+
68
+ <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
69
+ <%= form.actions do |action| %>
70
+ <%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
71
+ <% end %>
72
+ <% end %>
@@ -2,8 +2,11 @@ examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
4
  - multi_level_select_return_all_selected: Return All Selected
5
+ - multi_level_select_return_complete_data: Return Complete Data
6
+ - multi_level_select_with_form: With Form
5
7
 
6
8
  react:
7
9
  - multi_level_select_default: Default
8
10
  - multi_level_select_return_all_selected: Return All Selected
11
+ - multi_level_select_return_complete_data: Return Complete Data
9
12
 
@@ -1,2 +1,3 @@
1
1
  export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
2
- export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
2
+ export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
3
+ export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
@@ -1,3 +1,7 @@
1
- <div id="pb_data_wrapper_<%= object.id %>" data-tree="">
2
- <%= react_component("MultiLevelSelect", object.multi_level_select_options ) %>
3
- </div>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ data: object.data,
4
+ id: object.id,
5
+ class: object.classname) do %>
6
+ <%= react_component("MultiLevelSelect", object.multi_level_select_options) %>
7
+ <% end %>
@@ -3,10 +3,14 @@
3
3
  module Playbook
4
4
  module PbMultiLevelSelect
5
5
  class MultiLevelSelect < Playbook::KitBase
6
+ prop :id
7
+ prop :name
6
8
  prop :tree_data, type: Playbook::Props::Array,
7
9
  default: []
8
10
  prop :return_all_selected, type: Playbook::Props::Boolean,
9
11
  default: false
12
+ prop :return_complete_data, type: Playbook::Props::Boolean,
13
+ default: false
10
14
 
11
15
  def classname
12
16
  generate_classname("pb_multi_level_select")
@@ -15,8 +19,10 @@ module Playbook
15
19
  def multi_level_select_options
16
20
  {
17
21
  id: id,
22
+ name: name,
18
23
  treeData: tree_data,
19
24
  returnAllSelected: return_all_selected,
25
+ returnCompleteData: return_complete_data,
20
26
  }
21
27
  end
22
28
  end
@@ -91,7 +91,8 @@ const PassphraseCommon = (props) => {
91
91
  <div>
92
92
  <Body
93
93
  marginBottom='md'
94
- text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`} />
94
+ text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`}
95
+ />
95
96
  <Passphrase
96
97
  onChange={handleChange}
97
98
  value={input}
@@ -5,7 +5,8 @@ const PhoneNumberInputDefault = (props) => (
5
5
  <>
6
6
  <PhoneNumberInput
7
7
  id='default'
8
- {...props} />
8
+ {...props}
9
+ />
9
10
  </>
10
11
  )
11
12
 
@@ -171,19 +171,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
171
171
 
172
172
  switch (closeOnClick) {
173
173
  case "outside":
174
- if (!targetIsPopover && !targetIsReference) {
174
+ if (!targetIsPopover || targetIsReference) {
175
175
  shouldClosePopover(true);
176
176
  }
177
177
  break;
178
178
  case "inside":
179
- if (targetIsPopover) {
179
+ if (targetIsPopover || targetIsReference) {
180
180
  shouldClosePopover(true);
181
181
  }
182
182
  break;
183
183
  case "any":
184
- if (targetIsPopover || !targetIsPopover && !targetIsReference) {
185
- shouldClosePopover(true);
186
- }
184
+ shouldClosePopover(true);
187
185
  break;
188
186
  }
189
187
  },
@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
49
49
  checkCloseTooltip() {
50
50
  document.querySelector('body').addEventListener('click', ({ target } ) => {
51
51
  const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
52
- const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
53
52
 
54
53
  switch (this.closeOnClick) {
55
54
  case 'any':
56
- if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
57
- this.hideTooltip()
58
- }
55
+ this.hideTooltip()
59
56
  break
60
57
  case 'outside':
61
- if (!isTooltipElement && !isTriggerElement) {
58
+ if (!isTooltipElement) {
62
59
  this.hideTooltip()
63
60
  }
64
61
  break
@@ -14,7 +14,7 @@ const PopoverTest = () => {
14
14
  const popoverReference = (
15
15
  <Button onClick={togglePopover}
16
16
  text="Click Me"
17
- />
17
+ />
18
18
  );
19
19
  return (
20
20
  <PbReactPopover
@@ -36,7 +36,7 @@ const PopoverTestZIndex = () => {
36
36
  const popoverReference = (
37
37
  <Button onClick={togglePopover}
38
38
  text="Click Me"
39
- />
39
+ />
40
40
  );
41
41
  return (
42
42
  <PbReactPopover
@@ -60,7 +60,7 @@ const PopoverTestHeight = () => {
60
60
  const popoverReference = (
61
61
  <Button onClick={togglePopover}
62
62
  text="Click Me"
63
- />
63
+ />
64
64
  );
65
65
  return (
66
66
  <PbReactPopover
@@ -88,7 +88,7 @@ const PopoverTestClicktoClose = () => {
88
88
  const popoverReference = (
89
89
  <Button onClick={togglePopover}
90
90
  text="Click Me"
91
- />
91
+ />
92
92
  );
93
93
  return (
94
94
  <PbReactPopover
@@ -116,7 +116,7 @@ const PopoverTestClicktoClose2 = () => {
116
116
  const popoverReference = (
117
117
  <Button onClick={togglePopover}
118
118
  text="Click Me"
119
- />
119
+ />
120
120
  );
121
121
  return (
122
122
  <PbReactPopover
@@ -144,7 +144,7 @@ const PopoverTestClicktoClose3 = () => {
144
144
  const popoverReference = (
145
145
  <Button onClick={togglePopover}
146
146
  text="Click Me"
147
- />
147
+ />
148
148
  );
149
149
  return (
150
150
  <PbReactPopover
@@ -8,7 +8,8 @@ const SelectableListCheckbox = () => {
8
8
  return (
9
9
  <SelectableList
10
10
  data={{ testid: testId }}
11
- variant="checkbox">
11
+ variant="checkbox"
12
+ >
12
13
  <SelectableList.Item
13
14
  label="Mild"
14
15
  name="checkbox-name-1"
@@ -28,7 +29,8 @@ const SelectableListRadio = () => {
28
29
  return (
29
30
  <SelectableList
30
31
  data={{ testid: testId }}
31
- variant="radio">
32
+ variant="radio"
33
+ >
32
34
  <SelectableList.Item
33
35
  label="Small"
34
36
  name="radio"