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

Sign up to get free protection for your applications and to get access to all the features.
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",