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

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 (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
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb CHANGED
@@ -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 %>
data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb CHANGED
@@ -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
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx CHANGED
@@ -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}
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_popover/_popover.tsx CHANGED
@@ -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
  },
data/app/pb_kits/playbook/pb_popover/index.ts CHANGED
@@ -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
data/app/pb_kits/playbook/pb_popover/popover.test.js CHANGED
@@ -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
data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js CHANGED
@@ -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"