playbook_ui_docs 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 (21) 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_dialog/docs/_dialog_full_height.jsx +8 -4
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -4
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +4 -2
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +14 -6
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +8 -4
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +14 -7
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +73 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +87 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  18. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +2 -1
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +2 -1
  20. data/dist/playbook-doc.js +8 -8
  21. metadata +4 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 89209131b20f85248fd4a4d1a64e6004c480b6da49a6bc3ecb17bd11073744e3
4
- data.tar.gz: c504f8e5875381eeac9e3d4744e5046fa11ade5e29a23083b961dca9eac54a24
3
+ metadata.gz: 82b4a17420e2119b87abc12c82b4b928c95f19b4a9d5798bdad26090e62f754d
4
+ data.tar.gz: b228064669920f0316844f99a18ac23db1c6673a53ac8f0c4b5c2044f234785a
5
5
  SHA512:
6
- metadata.gz: 788eea36995ce9d1833c0bdb68781c0b15ad72da501ad75cd445bdd7b95a89e8fd09b0281f35ba9747c3fde551764f773797d5edc0126f4ed8767ef81bb75a32
7
- data.tar.gz: fa6de7550a612dca72b2a6d4e1afccd39358ed0f8be5b7cc6e0ea0c4243a6e1901ca05d0a3ff2dd34e324b787a37899d0db9dccbd0dfa5d24827d98be3ad1c2d
6
+ metadata.gz: 2ebaecdd1441dcb7188a7ef8a45a1bde1c08dcbb9ddd0f3c6990b27c904c43dcac70e53ed8c9b69121d143e1be357106be03af55868290ff0f3a8a78e4c47e04
7
+ data.tar.gz: c10e7dbc2f3ec6e53d448434bdc6572175ed914824bfb06fe64bdfd7e98bfd9a508b0ff8b658e0fdee3bf3f14494a90230b5109a926ae9feda2a4025592ef23b
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -57,7 +57,7 @@ const CardBackground = (props) => {
57
57
  background="product_1_background"
58
58
  marginBottom="sm"
59
59
  {...props}
60
- >
60
+ >
61
61
  <Body
62
62
  dark
63
63
  text="Product 1 Background"
@@ -69,11 +69,12 @@ const CardBackground = (props) => {
69
69
  <Card
70
70
  background="product_7_highlight"
71
71
  marginBottom="sm"
72
- {...props} >
72
+ {...props}
73
+ >
73
74
  <Body
74
75
  dark
75
- text="Product 7 Highlight"
76
- />
76
+ text="Product 7 Highlight"
77
+ />
77
78
  </Card>
78
79
 
79
80
 
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED
@@ -49,15 +49,18 @@ const DialogFullHeight = () => {
49
49
  <Flex wrap>
50
50
  <Button id="sm"
51
51
  marginRight="md"
52
- onClick={toggleHeaderSeparatorDialog}>
52
+ onClick={toggleHeaderSeparatorDialog}
53
+ >
53
54
  {"Small Dialog"}
54
55
  </Button>
55
56
  <Button marginRight="md"
56
- onClick={toggleFooterSeparatorDialog}>
57
+ onClick={toggleFooterSeparatorDialog}
58
+ >
57
59
  {"Medium Dialog"}
58
60
  </Button>
59
61
  <Button marginRight="md"
60
- onClick={toggleBothSeparatorsDialog}>
62
+ onClick={toggleBothSeparatorsDialog}
63
+ >
61
64
  {"Large Dialog"}
62
65
  </Button>
63
66
  </Flex>
@@ -89,7 +92,8 @@ const DialogFullHeight = () => {
89
92
  <Dialog.Footer>
90
93
  <Button onClick={toggle}>{"Send My Issue"}</Button>
91
94
  <Button onClick={toggle}
92
- variant="link">
95
+ variant="link"
96
+ >
93
97
  {"Back"}
94
98
  </Button>
95
99
  </Dialog.Footer>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED
@@ -48,15 +48,18 @@ const DialogFullHeightPlacement = () => {
48
48
  <Flex wrap>
49
49
  <Button id="sm"
50
50
  marginRight="md"
51
- onClick={toggleHeaderSeparatorDialog}>
51
+ onClick={toggleHeaderSeparatorDialog}
52
+ >
52
53
  {"Left Dialog"}
53
54
  </Button>
54
55
  <Button marginRight="xl"
55
- onClick={toggleFooterSeparatorDialog}>
56
+ onClick={toggleFooterSeparatorDialog}
57
+ >
56
58
  {"Center Dialog"}
57
59
  </Button>
58
60
  <Button marginRight="xl"
59
- onClick={toggleBothSeparatorsDialog}>
61
+ onClick={toggleBothSeparatorsDialog}
62
+ >
60
63
  {"Right Dialog"}
61
64
  </Button>
62
65
  </Flex>
@@ -88,7 +91,8 @@ const DialogFullHeightPlacement = () => {
88
91
  <Dialog.Footer>
89
92
  <Button onClick={toggle}>{"Send My Issue"}</Button>
90
93
  <Button onClick={toggle}
91
- variant="link">
94
+ variant="link"
95
+ >
92
96
  {"Back"}
93
97
  </Button>
94
98
  </Dialog.Footer>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED
@@ -16,10 +16,12 @@ const DialogScrollable = () => {
16
16
  return (
17
17
  <>
18
18
  <Button marginRight="md"
19
- onClick={toggleDialog1}>{'Open Dialog'}
19
+ onClick={toggleDialog1}
20
+ >{'Open Dialog'}
20
21
  </Button>
21
22
  <Button marginRight="md"
22
- onClick={toggleDialog2}>{'Open Full Height Dialog'}
23
+ onClick={toggleDialog2}
24
+ >{'Open Full Height Dialog'}
23
25
  </Button>
24
26
  <Dialog
25
27
  cancelButton="Cancel"
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED
@@ -84,7 +84,7 @@ const DialogStatus = () => {
84
84
  <Flex
85
85
  rowGap="xs"
86
86
  wrap
87
- >
87
+ >
88
88
  <Button
89
89
  marginRight="md"
90
90
  onClick={toggleDefaultAlert}
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED
@@ -74,7 +74,7 @@ const GaugeComplex = (props) => (
74
74
  <Body
75
75
  color="light"
76
76
  text="% Abandoned"
77
- />
77
+ />
78
78
  <Flex wrap>
79
79
  <FlexItem
80
80
  fixedSize="150px"
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED
@@ -8,6 +8,7 @@
8
8
  label: "People",
9
9
  value: "People",
10
10
  id: "people1",
11
+ checked: true,
11
12
  children: [
12
13
  {
13
14
  label: "Talent Acquisition",
@@ -18,6 +19,7 @@
18
19
  label: "Business Affairs",
19
20
  value: "Business Affairs",
20
21
  id: "business1",
22
+ checked: true,
21
23
  children: [
22
24
  {
23
25
  label: "Initiatives",
@@ -61,12 +63,18 @@
61
63
  ],
62
64
  },
63
65
  ],
64
- }] %>
66
+ }] %>
65
67
 
66
68
 
67
- <%= pb_rails("multi_level_select", props: {
68
- id: "default-multi-level-select",
69
- tree_data:treeData
70
- }) %>
71
-
72
69
 
70
+ <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
71
+ <%= pb_rails("multi_level_select", props: {
72
+ id: "default-multi-level-select-test",
73
+ name: "my_array[]",
74
+ tree_data: treeData
75
+ }) %>
76
+ <%= form.actions do |action| %>
77
+ <%= action.submit %>
78
+ <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
79
+ <% end %>
80
+ <% end %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED
@@ -72,15 +72,19 @@ const MultiLevelSelectDefault = (props) => {
72
72
  return (
73
73
  <div>
74
74
  <MultiLevelSelect
75
- id="multiselect-default"
75
+ id='multiselect-default'
76
76
  onSelect={(selectedNodes) =>
77
- console.log("Selected Items", selectedNodes)
78
- }
77
+ console.log(
78
+ "Selected Items (default... with ids only)",
79
+ selectedNodes
80
+ )
81
+ }
82
+ returnAllSelected
79
83
  treeData={treeData}
80
84
  {...props}
81
85
  />
82
86
  </div>
83
- );
87
+ )
84
88
  };
85
89
 
86
90
  export default MultiLevelSelectDefault;
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md CHANGED
@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
2
2
 
3
3
  For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
4
4
 
5
- For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.
5
+ By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects.
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb CHANGED
@@ -3,7 +3,6 @@
3
3
  value: "Power Home Remodeling",
4
4
  id: "powerhome1",
5
5
  expanded: true,
6
-
7
6
  children: [
8
7
  {
9
8
  label: "People",
@@ -62,11 +61,19 @@
62
61
  ],
63
62
  },
64
63
  ],
65
- }] %>
64
+ }] %>
65
+
66
66
 
67
67
 
68
- <%= pb_rails("multi_level_select", props: {
69
- id: "parent-persistence-multi-level-select",
70
- tree_data:treeData,
71
- return_all_selected: true
72
- }) %>
68
+ <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
69
+ <%= pb_rails("multi_level_select", props: {
70
+ id: "default-multi-level-select-test-return-all-selected",
71
+ name: "q[user_title_org_level_id_in]",
72
+ tree_data: treeData,
73
+ return_all_selected: true
74
+ }) %>
75
+ <%= form.actions do |action| %>
76
+ <%= action.submit %>
77
+ <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
78
+ <% end %>
79
+ <% end %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx CHANGED
@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
74
74
  <MultiLevelSelect
75
75
  id="multiselect-parent-persistence"
76
76
  onSelect={(selectedNodes) =>
77
- console.log("Selected Items", selectedNodes)
77
+ console.log("Selected Items with Return All Selected Data", selectedNodes)
78
78
  }
79
79
  returnAllSelected
80
80
  treeData={treeData}
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb ADDED
@@ -0,0 +1,73 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "powerhome1",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "people1",
11
+ children: [
12
+ {
13
+ label: "Talent Acquisition",
14
+ value: "Talent Acquisition",
15
+ id: "talent1",
16
+ },
17
+ {
18
+ label: "Business Affairs",
19
+ value: "Business Affairs",
20
+ id: "business1",
21
+ children: [
22
+ {
23
+ label: "Initiatives",
24
+ value: "Initiatives",
25
+ id: "initiative1",
26
+ },
27
+ {
28
+ label: "Learning & Development",
29
+ value: "Learning & Development",
30
+ id: "development1",
31
+ },
32
+ ],
33
+ },
34
+ {
35
+ label: "People Experience",
36
+ value: "People Experience",
37
+ id: "experience1",
38
+ },
39
+ ],
40
+ },
41
+ {
42
+ label: "Contact Center",
43
+ value: "Contact Center",
44
+ id: "contact1",
45
+ children: [
46
+ {
47
+ label: "Appointment Management",
48
+ value: "Appointment Management",
49
+ id: "appointment1",
50
+ },
51
+ {
52
+ label: "Customer Service",
53
+ value: "Customer Service",
54
+ id: "customer1",
55
+ },
56
+ {
57
+ label: "Energy",
58
+ value: "Energy",
59
+ id: "energy1",
60
+ },
61
+ ],
62
+ },
63
+ ],
64
+ }] %>
65
+
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "default-multi-level-select",
69
+ tree_data: treeData,
70
+ return_complete_data: true
71
+ }) %>
72
+
73
+
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_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