playbook_ui_docs 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 (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