playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21358

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 (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +0 -4
  3. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +5 -13
  4. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +0 -1
  5. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +104 -45
  6. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +100 -43
  7. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +104 -45
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +100 -43
  9. data/dist/playbook-rails.js +5 -5
  10. data/lib/playbook/version.rb +1 -1
  11. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f0644f1e685425faa2c4f2955e8631573bcafd8c9ec64b504c15e2a59aeb1e45
4
- data.tar.gz: 35d0cb4e4f59b4eb099fedd73819c0fe450e766b0d7d25fe5cf5e53fc043b5dc
3
+ metadata.gz: 6cffb4deb32026d50ebd6f176124e14a474b9dc07e363dc391f18ad3d4a76fc2
4
+ data.tar.gz: 547342907e5e3d82f0ef33986210c63d72d05c7561f911eee9090508892e2d69
5
5
  SHA512:
6
- metadata.gz: 73813bea1c749e60cacf7c60f886326ed297bf05842bad59be1af460c981a97104948bc49d45d9df25e079c1506956ea8f87b21ace412b8bd1762363a9e43fe1
7
- data.tar.gz: 368f7b2a0e4edba51e0ba7699cf3f54ed859bb0ee810d3814f1e125c71a737b3cc2827499eed7c192b971404589ad2c0c707fa842fd088d16a96bbdf8d4511df
6
+ metadata.gz: c95749136e16e3beb811eb0c904534c18574d2bae274e5614dc8ab3058698609818b20b00d9b8ca80809987a51c2f89f21408f145ae0931f2d8601fb777ebeec
7
+ data.tar.gz: b82ae99c6fa3d381b57a89d41c3ae4883648592a9e67f3e66166eba50fe98e24305fdf71ef99185d4d1655cfec5c51055d3bee6292ce3986f8b153864f4fca51
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss CHANGED
@@ -85,8 +85,4 @@
85
85
  .open {
86
86
  display: block;
87
87
  }
88
-
89
- .singleHidden {
90
- display: none
91
- }
92
88
  }
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -4,6 +4,7 @@ import { globalProps, GlobalProps } from "../utilities/globalProps"
4
4
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
5
5
  import Checkbox from "../pb_checkbox/_checkbox"
6
6
  import Radio from "../pb_radio/_radio"
7
+ import Body from "../pb_body/_body"
7
8
  import Icon from "../pb_icon/_icon"
8
9
  import FormPill from "../pb_form_pill/_form_pill"
9
10
  import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -335,17 +336,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
335
336
  return items
336
337
  }
337
338
 
338
- const singleHiddenInstances = document.querySelectorAll('.singleHidden');
339
-
340
- singleHiddenInstances.forEach(singleHiddenInstance => {
341
-
342
- const siblingElement = singleHiddenInstance.nextElementSibling as HTMLElement;
343
- if (siblingElement && siblingElement.classList.contains('pb_radio_button')) {
344
- siblingElement.style.display = 'none';
345
- }
346
- });
347
-
348
-
349
339
  // Rendering formattedData to UI based on typeahead
350
340
  const renderNestedOptions = (items: { [key: string]: any }[]) => {
351
341
  return (
@@ -378,9 +368,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
378
368
  />
379
369
  </div>
380
370
  { variant === "single" ? (
371
+ ultimateChildrenOnly && item.children ? (
372
+ <Body>{item.label}</Body>
373
+ ) :
381
374
  <Radio
382
375
  checked={item.checked}
383
- class={ultimateChildrenOnly ? item.children ? "singleHidden" : "" : null}
384
376
  id={`${item.id}-${item.label}`}
385
377
  label={item.label}
386
378
  name={inputName}
@@ -543,4 +535,4 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
543
535
  )
544
536
  }
545
537
 
546
- export default MultiLevelSelect
538
+ export default MultiLevelSelect
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb CHANGED
@@ -73,4 +73,3 @@
73
73
  selected_ids:["110","102"],
74
74
  tree_data: treeData,
75
75
  }) %>
76
-
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb CHANGED
@@ -1,68 +1,127 @@
1
- <% treeData = [{
2
- label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
4
- id: "200",
5
- expanded: true,
1
+ <% treeData = [
2
+ {
3
+ label: "Philadelphia",
4
+ value: "Philadelphia",
5
+ id: "phl",
6
6
  children: [
7
7
  {
8
- label: "People",
9
- value: "People",
10
- id: "201",
11
- expanded: true,
8
+ label: "HQ",
9
+ value: "HQ",
10
+ id: "hq",
11
+ },
12
+ {
13
+ label: "Marketing & Sales PHL",
14
+ value: "Marketing & Sales PHL",
15
+ id: "marketing1",
16
+ },
17
+ {
18
+ label: "Installation Office PHL",
19
+ value: "Installation Office PHL",
20
+ id: "installation1",
21
+ },
22
+ {
23
+ label: "Warehouse PHL",
24
+ value: "Warehouse PHL",
25
+ id: "warehouse1",
26
+ },
27
+ ]
28
+ },
29
+ {
30
+ label: "New Jersey",
31
+ value: "New Jersey",
32
+ id: "nj",
33
+ children: [
34
+ {
35
+ label: "New Jersey",
36
+ value: "New Jersey",
37
+ id: "nj1",
12
38
  children: [
13
39
  {
14
- label: "Talent Acquisition",
15
- value: "Talent Acquisition",
16
- id: "202",
40
+ label: "Marketing & Sales NJ",
41
+ value: "Marketing & Sales NJ",
42
+ id: "marketing2",
17
43
  },
18
44
  {
19
- label: "Business Affairs",
20
- value: "Business Affairs",
21
- id: "203",
22
- children: [
23
- {
24
- label: "Initiatives",
25
- value: "Initiatives",
26
- id: "204",
27
- },
28
- {
29
- label: "Learning & Development",
30
- value: "Learning & Development",
31
- id: "205",
32
- },
33
- ],
45
+ label: "Installation Office NJ",
46
+ value: "Installation Office NJ",
47
+ id: "installation2",
34
48
  },
35
49
  {
36
- label: "People Experience",
37
- value: "People Experience",
38
- id: "206",
50
+ label: "Warehouse NJ",
51
+ value: "Warehouse NJ",
52
+ id: "warehouse2",
39
53
  },
40
54
  ],
41
55
  },
42
56
  {
43
- label: "Contact Center",
44
- value: "Contact Center",
45
- id: "207",
57
+ label: "Princeton",
58
+ value: "Princeton",
59
+ id: "princeton",
46
60
  children: [
47
61
  {
48
- label: "Appointment Management",
49
- value: "Appointment Management",
50
- id: "208",
62
+ label: "Marketing & Sales Princeton",
63
+ value: "Marketing & Sales Princeton",
64
+ id: "marketing3",
51
65
  },
52
66
  {
53
- label: "Customer Service",
54
- value: "Customer Service",
55
- id: "209",
67
+ label: "Installation Office Princeton",
68
+ value: "Installation Office Princeton",
69
+ id: "installation3",
56
70
  },
57
71
  {
58
- label: "Energy",
59
- value: "Energy",
60
- id: "210",
72
+ label: "Warehouse Princeton",
73
+ value: "Warehouse Princeton",
74
+ id: "warehouse3",
61
75
  },
62
- ],
76
+ ]
77
+ },
78
+ ]
79
+ },
80
+ {
81
+ label: "Maryland",
82
+ value: "Maryland",
83
+ id: "MD",
84
+ children: [
85
+ {
86
+ label: "Marketing & Sales MD",
87
+ value: "Marketing & Sales MD",
88
+ id: "marketing4",
89
+ },
90
+ {
91
+ label: "Installation Office MD",
92
+ value: "Installation Office MD",
93
+ id: "installation4",
94
+ },
95
+ {
96
+ label: "Warehouse MD",
97
+ value: "Warehouse MD",
98
+ id: "warehouse4",
99
+ },
100
+ ]
101
+ },
102
+ {
103
+ label: "Connecticut",
104
+ value: "Connecticut",
105
+ id: "CT",
106
+ children: [
107
+ {
108
+ label: "Marketing & Sales CT",
109
+ value: "Marketing & Sales CT",
110
+ id: "marketing5",
111
+ },
112
+ {
113
+ label: "Installation Office CT",
114
+ value: "Installation Office CT",
115
+ id: "installation5",
116
+ },
117
+ {
118
+ label: "Warehouse CT",
119
+ value: "Warehouse CT",
120
+ id: "warehouse5",
63
121
  },
64
- ],
65
- }] %>
122
+ ]
123
+ },
124
+ ]; %>
66
125
 
67
126
  <%= pb_rails("multi_level_select", props: {
68
127
  id: "multi-level-select-single-rails",
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx CHANGED
@@ -3,69 +3,126 @@ import MultiLevelSelect from "../_multi_level_select";
3
3
 
4
4
  const treeData = [
5
5
  {
6
- label: "Power Home Remodeling",
7
- value: "Power Home Remodeling",
8
- id: "powerhome2",
9
- expanded: true,
6
+ label: "Philadelphia",
7
+ value: "Philadelphia",
8
+ id: "phl",
10
9
  children: [
11
10
  {
12
- label: "People",
13
- value: "People",
14
- id: "people2",
15
- expanded: true,
11
+ label: "HQ",
12
+ value: "HQ",
13
+ id: "hq",
14
+ },
15
+ {
16
+ label: "Marketing & Sales PHL",
17
+ value: "Marketing & Sales PHL",
18
+ id: "marketing1",
19
+ },
20
+ {
21
+ label: "Installation Office PHL",
22
+ value: "Installation Office PHL",
23
+ id: "installation1",
24
+ },
25
+ {
26
+ label: "Warehouse PHL",
27
+ value: "Warehouse PHL",
28
+ id: "warehouse1",
29
+ },
30
+ ]
31
+ },
32
+ {
33
+ label: "New Jersey",
34
+ value: "New Jersey",
35
+ id: "nj",
36
+ children: [
37
+ {
38
+ label: "New Jersey",
39
+ value: "New Jersey",
40
+ id: "nj1",
16
41
  children: [
17
42
  {
18
- label: "Talent Acquisition",
19
- value: "Talent Acquisition",
20
- id: "talent2",
43
+ label: "Marketing & Sales NJ",
44
+ value: "Marketing & Sales NJ",
45
+ id: "marketing2",
21
46
  },
22
47
  {
23
- label: "Business Affairs",
24
- value: "Business Affairs",
25
- id: "business2",
26
- children: [
27
- {
28
- label: "Initiatives",
29
- value: "Initiatives",
30
- id: "initiative2",
31
- },
32
- {
33
- label: "Learning & Development",
34
- value: "Learning & Development",
35
- id: "development2",
36
- },
37
- ],
48
+ label: "Installation Office NJ",
49
+ value: "Installation Office NJ",
50
+ id: "installation2",
38
51
  },
39
52
  {
40
- label: "People Experience",
41
- value: "People Experience",
42
- id: "experience2",
53
+ label: "Warehouse NJ",
54
+ value: "Warehouse NJ",
55
+ id: "warehouse2",
43
56
  },
44
57
  ],
45
58
  },
46
59
  {
47
- label: "Contact Center",
48
- value: "Contact Center",
49
- id: "contact2",
60
+ label: "Princeton",
61
+ value: "Princeton",
62
+ id: "princeton",
50
63
  children: [
51
64
  {
52
- label: "Appointment Management",
53
- value: "Appointment Management",
54
- id: "appointment2",
65
+ label: "Marketing & Sales Princeton",
66
+ value: "Marketing & Sales Princeton",
67
+ id: "marketing3",
55
68
  },
56
69
  {
57
- label: "Customer Service",
58
- value: "Customer Service",
59
- id: "customer2",
70
+ label: "Installation Office Princeton",
71
+ value: "Installation Office Princeton",
72
+ id: "installation3",
60
73
  },
61
74
  {
62
- label: "Energy",
63
- value: "Energy",
64
- id: "energy2",
75
+ label: "Warehouse Princeton",
76
+ value: "Warehouse Princeton",
77
+ id: "warehouse3",
65
78
  },
66
- ],
79
+ ]
80
+ },
81
+ ]
82
+ },
83
+ {
84
+ label: "Maryland",
85
+ value: "Maryland",
86
+ id: "MD",
87
+ children: [
88
+ {
89
+ label: "Marketing & Sales MD",
90
+ value: "Marketing & Sales MD",
91
+ id: "marketing4",
92
+ },
93
+ {
94
+ label: "Installation Office MD",
95
+ value: "Installation Office MD",
96
+ id: "installation4",
97
+ },
98
+ {
99
+ label: "Warehouse MD",
100
+ value: "Warehouse MD",
101
+ id: "warehouse4",
102
+ },
103
+ ]
104
+ },
105
+ {
106
+ label: "Connecticut",
107
+ value: "Connecticut",
108
+ id: "CT",
109
+ children: [
110
+ {
111
+ label: "Marketing & Sales CT",
112
+ value: "Marketing & Sales CT",
113
+ id: "marketing5",
114
+ },
115
+ {
116
+ label: "Installation Office CT",
117
+ value: "Installation Office CT",
118
+ id: "installation5",
119
+ },
120
+ {
121
+ label: "Warehouse CT",
122
+ value: "Warehouse CT",
123
+ id: "warehouse5",
67
124
  },
68
- ],
125
+ ]
69
126
  },
70
127
  ];
71
128
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb CHANGED
@@ -1,68 +1,127 @@
1
- <% treeData = [{
2
- label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
4
- id: "300",
5
- expanded: true,
1
+ <% treeData = [
2
+ {
3
+ label: "Philadelphia",
4
+ value: "Philadelphia",
5
+ id: "phl",
6
6
  children: [
7
7
  {
8
- label: "People",
9
- value: "People",
10
- id: "301",
11
- expanded: true,
8
+ label: "HQ",
9
+ value: "HQ",
10
+ id: "hq",
11
+ },
12
+ {
13
+ label: "Marketing & Sales PHL",
14
+ value: "Marketing & Sales PHL",
15
+ id: "marketing1",
16
+ },
17
+ {
18
+ label: "Installation Office PHL",
19
+ value: "Installation Office PHL",
20
+ id: "installation1",
21
+ },
22
+ {
23
+ label: "Warehouse PHL",
24
+ value: "Warehouse PHL",
25
+ id: "warehouse1",
26
+ },
27
+ ]
28
+ },
29
+ {
30
+ label: "New Jersey",
31
+ value: "New Jersey",
32
+ id: "nj",
33
+ children: [
34
+ {
35
+ label: "New Jersey",
36
+ value: "New Jersey",
37
+ id: "nj1",
12
38
  children: [
13
39
  {
14
- label: "Talent Acquisition",
15
- value: "Talent Acquisition",
16
- id: "302",
40
+ label: "Marketing & Sales NJ",
41
+ value: "Marketing & Sales NJ",
42
+ id: "marketing2",
17
43
  },
18
44
  {
19
- label: "Business Affairs",
20
- value: "Business Affairs",
21
- id: "303",
22
- children: [
23
- {
24
- label: "Initiatives",
25
- value: "Initiatives",
26
- id: "304",
27
- },
28
- {
29
- label: "Learning & Development",
30
- value: "Learning & Development",
31
- id: "305",
32
- },
33
- ],
45
+ label: "Installation Office NJ",
46
+ value: "Installation Office NJ",
47
+ id: "installation2",
34
48
  },
35
49
  {
36
- label: "People Experience",
37
- value: "People Experience",
38
- id: "306",
50
+ label: "Warehouse NJ",
51
+ value: "Warehouse NJ",
52
+ id: "warehouse2",
39
53
  },
40
54
  ],
41
55
  },
42
56
  {
43
- label: "Contact Center",
44
- value: "Contact Center",
45
- id: "307",
57
+ label: "Princeton",
58
+ value: "Princeton",
59
+ id: "princeton",
46
60
  children: [
47
61
  {
48
- label: "Appointment Management",
49
- value: "Appointment Management",
50
- id: "308",
62
+ label: "Marketing & Sales Princeton",
63
+ value: "Marketing & Sales Princeton",
64
+ id: "marketing3",
51
65
  },
52
66
  {
53
- label: "Customer Service",
54
- value: "Customer Service",
55
- id: "309",
67
+ label: "Installation Office Princeton",
68
+ value: "Installation Office Princeton",
69
+ id: "installation3",
56
70
  },
57
71
  {
58
- label: "Energy",
59
- value: "Energy",
60
- id: "310",
72
+ label: "Warehouse Princeton",
73
+ value: "Warehouse Princeton",
74
+ id: "warehouse3",
61
75
  },
62
- ],
76
+ ]
77
+ },
78
+ ]
79
+ },
80
+ {
81
+ label: "Maryland",
82
+ value: "Maryland",
83
+ id: "MD",
84
+ children: [
85
+ {
86
+ label: "Marketing & Sales MD",
87
+ value: "Marketing & Sales MD",
88
+ id: "marketing4",
89
+ },
90
+ {
91
+ label: "Installation Office MD",
92
+ value: "Installation Office MD",
93
+ id: "installation4",
94
+ },
95
+ {
96
+ label: "Warehouse MD",
97
+ value: "Warehouse MD",
98
+ id: "warehouse4",
99
+ },
100
+ ]
101
+ },
102
+ {
103
+ label: "Connecticut",
104
+ value: "Connecticut",
105
+ id: "CT",
106
+ children: [
107
+ {
108
+ label: "Marketing & Sales CT",
109
+ value: "Marketing & Sales CT",
110
+ id: "marketing5",
111
+ },
112
+ {
113
+ label: "Installation Office CT",
114
+ value: "Installation Office CT",
115
+ id: "installation5",
116
+ },
117
+ {
118
+ label: "Warehouse CT",
119
+ value: "Warehouse CT",
120
+ id: "warehouse5",
63
121
  },
64
- ],
65
- }] %>
122
+ ]
123
+ },
124
+ ]; %>
66
125
 
67
126
  <%= pb_rails("multi_level_select", props: {
68
127
  id: "multi-level-select-single-children-only-rails",