playbook_ui 12.26.1.pre.alpha.railsmultilevelimprovements835 → 12.26.1.pre.alpha.railsmultilevelimprovements842

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
  3. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +3 -6
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
  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 +3 -6
  9. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +1 -2
  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 +4 -8
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +8 -39
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +13 -21
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -2
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +2 -2
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +19 -23
  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_with_form.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  24. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
  25. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +1 -2
  26. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -2
  27. data/app/pb_kits/playbook/pb_popover/popover.test.js +6 -6
  28. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +2 -4
  29. data/dist/playbook-rails.js +5 -5
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +2 -4
  32. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +0 -73
  33. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +0 -87
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4b8393ab43cfea1ee6fca52882ebec02b26a56889dcbe66dde6cb4982fd4ca3b
4
- data.tar.gz: 394cb5663f1b83ed4e055db0a05beecc702b8a6d3d63dfdc444b0e86f1421db5
3
+ metadata.gz: 326f8eff50b791dc21ab3ec0bdb295adef8d14d3957277f4f92d8abdfe445686
4
+ data.tar.gz: 0a9d5b6672174df0cb045cc3aea6b017d0e30f1a978df27e0529b7f1d3cb3472
5
5
  SHA512:
6
- metadata.gz: 7d8b5e97bc020258bf1a121dc75354a688d9984104b1c4fbefbe6a3bfe68bc201fc3729dc7360399c25d42d369d8cf37de19712954a949879d714c7437929317
7
- data.tar.gz: e3388a6075cbb920bc57e006d408db4242586f516d64c9fbb8c7980e0517ede4c8277c82ae3499b2afdee9603f7db3d9bb01ff796acab984f170df4f0cfb0b9a
6
+ metadata.gz: 1b079256265e6bcdea4576a6930b527b944044f0064936376278147aad59cf1a5b311ba25632ca3878bb50e3fd62a33ccdf17cf805d7dd60eaece7d5d3e640fe
7
+ data.tar.gz: fa05822858223b65f2a3a2755a1f7fcecea6946d7a1f31ea40a32ad10ebd5b3df128cc3736fdab16b6329ba283e50d201412a8d79c6027745a646d8c6c94ac05
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,12 +69,11 @@ const CardBackground = (props) => {
69
69
  <Card
70
70
  background="product_7_highlight"
71
71
  marginBottom="sm"
72
- {...props}
73
- >
72
+ {...props} >
74
73
  <Body
75
74
  dark
76
- text="Product 7 Highlight"
77
- />
75
+ text="Product 7 Highlight"
76
+ />
78
77
  </Card>
79
78
 
80
79
 
data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js CHANGED
@@ -21,8 +21,7 @@ describe("DateYearStacked Kit", () => {
21
21
  render(
22
22
  <DateYearStacked
23
23
  data={{ testid: testId }}
24
- date={new Date(Date.now())}
25
- />
24
+ date={new Date(Date.now())} />
26
25
  );
27
26
 
28
27
  const kit = screen.getByTestId(testId);
@@ -33,8 +32,7 @@ describe("DateYearStacked Kit", () => {
33
32
  render(
34
33
  <DateYearStacked
35
34
  data={{ testid: testId }}
36
- date={new Date(Date.now())}
37
- />
35
+ date={new Date(Date.now())} />
38
36
  );
39
37
 
40
38
  const kit = screen.getByTestId(testId);
@@ -46,8 +44,7 @@ describe("DateYearStacked Kit", () => {
46
44
  render(
47
45
  <DateYearStacked
48
46
  data={{ testid: testId }}
49
- date={new Date(Date.now())}
50
- />
47
+ date={new Date(Date.now())} />
51
48
  );
52
49
 
53
50
  const kit = screen.getByTestId(testId);
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED
@@ -49,18 +49,15 @@ const DialogFullHeight = () => {
49
49
  <Flex wrap>
50
50
  <Button id="sm"
51
51
  marginRight="md"
52
- onClick={toggleHeaderSeparatorDialog}
53
- >
52
+ onClick={toggleHeaderSeparatorDialog}>
54
53
  {"Small Dialog"}
55
54
  </Button>
56
55
  <Button marginRight="md"
57
- onClick={toggleFooterSeparatorDialog}
58
- >
56
+ onClick={toggleFooterSeparatorDialog}>
59
57
  {"Medium Dialog"}
60
58
  </Button>
61
59
  <Button marginRight="md"
62
- onClick={toggleBothSeparatorsDialog}
63
- >
60
+ onClick={toggleBothSeparatorsDialog}>
64
61
  {"Large Dialog"}
65
62
  </Button>
66
63
  </Flex>
@@ -92,8 +89,7 @@ const DialogFullHeight = () => {
92
89
  <Dialog.Footer>
93
90
  <Button onClick={toggle}>{"Send My Issue"}</Button>
94
91
  <Button onClick={toggle}
95
- variant="link"
96
- >
92
+ variant="link">
97
93
  {"Back"}
98
94
  </Button>
99
95
  </Dialog.Footer>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED
@@ -48,18 +48,15 @@ const DialogFullHeightPlacement = () => {
48
48
  <Flex wrap>
49
49
  <Button id="sm"
50
50
  marginRight="md"
51
- onClick={toggleHeaderSeparatorDialog}
52
- >
51
+ onClick={toggleHeaderSeparatorDialog}>
53
52
  {"Left Dialog"}
54
53
  </Button>
55
54
  <Button marginRight="xl"
56
- onClick={toggleFooterSeparatorDialog}
57
- >
55
+ onClick={toggleFooterSeparatorDialog}>
58
56
  {"Center Dialog"}
59
57
  </Button>
60
58
  <Button marginRight="xl"
61
- onClick={toggleBothSeparatorsDialog}
62
- >
59
+ onClick={toggleBothSeparatorsDialog}>
63
60
  {"Right Dialog"}
64
61
  </Button>
65
62
  </Flex>
@@ -91,8 +88,7 @@ const DialogFullHeightPlacement = () => {
91
88
  <Dialog.Footer>
92
89
  <Button onClick={toggle}>{"Send My Issue"}</Button>
93
90
  <Button onClick={toggle}
94
- variant="link"
95
- >
91
+ variant="link">
96
92
  {"Back"}
97
93
  </Button>
98
94
  </Dialog.Footer>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED
@@ -16,12 +16,10 @@ const DialogScrollable = () => {
16
16
  return (
17
17
  <>
18
18
  <Button marginRight="md"
19
- onClick={toggleDialog1}
20
- >{'Open Dialog'}
19
+ onClick={toggleDialog1}>{'Open Dialog'}
21
20
  </Button>
22
21
  <Button marginRight="md"
23
- onClick={toggleDialog2}
24
- >{'Open Full Height Dialog'}
22
+ onClick={toggleDialog2}>{'Open Full Height Dialog'}
25
23
  </Button>
26
24
  <Dialog
27
25
  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_filter/filter.test.js CHANGED
@@ -46,15 +46,12 @@ function FilterTest(props) {
46
46
  {...props}
47
47
  />
48
48
  <Flex spacing="between"
49
- {...props}
50
- >
49
+ {...props}>
51
50
  <Button text="Apply"
52
- {...props}
53
- />
51
+ {...props} />
54
52
  <Button text="Clear"
55
53
  variant="secondary"
56
- {...props}
57
- />
54
+ {...props} />
58
55
  </Flex>
59
56
  </Filter>
60
57
  );
data/app/pb_kits/playbook/pb_form_group/form_group.test.js CHANGED
@@ -9,8 +9,7 @@ test("should render a div with a button child", () => {
9
9
  <FormGroup>
10
10
  <Button
11
11
  data={{ testid: testId }}
12
- text={"some text"}
13
- />
12
+ text={"some text"} />
14
13
  </FormGroup>
15
14
  )
16
15
 
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_home_address_street/home_adress_street.test.js CHANGED
@@ -23,7 +23,7 @@ function HomeAdressStreetTest(props) {
23
23
  territory="PHL"
24
24
  zipcode="19382"
25
25
  {...props}
26
- />
26
+ />
27
27
  );
28
28
  }
29
29
 
data/app/pb_kits/playbook/pb_icon/icon.test.js CHANGED
@@ -12,7 +12,7 @@ describe("Icon Kit", () => {
12
12
  data={{ testid: testId }}
13
13
  fixedWidth
14
14
  icon="user"
15
- />
15
+ />
16
16
  )
17
17
 
18
18
  const kit = screen.getByTestId(testId)
@@ -27,7 +27,7 @@ describe("Icon Kit", () => {
27
27
  fixedWidth
28
28
  icon="user"
29
29
  rotation={rotateProp}
30
- />
30
+ />
31
31
  )
32
32
 
33
33
  const kit = screen.getByTestId(testId)
@@ -44,7 +44,7 @@ describe("Icon Kit", () => {
44
44
  fixedWidth
45
45
  flip="horizontal"
46
46
  icon="user"
47
- />
47
+ />
48
48
  )
49
49
 
50
50
  const kit = screen.getByTestId(testId)
@@ -59,7 +59,7 @@ describe("Icon Kit", () => {
59
59
  fixedWidth
60
60
  icon="spinner"
61
61
  spin
62
- />
62
+ />
63
63
  )
64
64
 
65
65
  const kit = screen.getByTestId(testId)
@@ -73,7 +73,7 @@ describe("Icon Kit", () => {
73
73
  fixedWidth
74
74
  icon="arrow-left"
75
75
  pull="left"
76
- />
76
+ />
77
77
  )
78
78
 
79
79
  const kit = screen.getByTestId(testId)
@@ -87,7 +87,7 @@ describe("Icon Kit", () => {
87
87
  fixedWidth
88
88
  icon="arrow-left"
89
89
  pull="left"
90
- />
90
+ />
91
91
  )
92
92
 
93
93
  const kit = screen.getByTestId(testId)
@@ -101,7 +101,7 @@ describe("Icon Kit", () => {
101
101
  data={{ testid: testId }}
102
102
  fixedWidth
103
103
  icon="user"
104
- />
104
+ />
105
105
  )
106
106
 
107
107
  const kit = screen.getByTestId(testId)
@@ -128,7 +128,7 @@ describe("Icon Kit", () => {
128
128
  data={{ testid: testId }}
129
129
  icon="user"
130
130
  size={sizeProp}
131
- />
131
+ />
132
132
  )
133
133
 
134
134
  const kit = screen.getByTestId(testId)
@@ -145,7 +145,7 @@ describe("Icon Kit", () => {
145
145
  fixedWidth
146
146
  fontStyle="fas"
147
147
  icon="user"
148
- />
148
+ />
149
149
  )
150
150
 
151
151
  const kit = screen.getByTestId(testId)
data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js CHANGED
@@ -14,7 +14,7 @@ describe("IconStatValue Kit", () => {
14
14
  text="Electric"
15
15
  unit="kw"
16
16
  value={64.18}
17
- />
17
+ />
18
18
  )
19
19
 
20
20
  const kit = screen.getByTestId(testId)
@@ -29,7 +29,7 @@ describe("IconStatValue Kit", () => {
29
29
  text="Electric"
30
30
  unit="kw"
31
31
  value={64.18}
32
- />
32
+ />
33
33
  )
34
34
 
35
35
  const kit = screen.getByTestId(testId)
@@ -45,7 +45,7 @@ describe("IconStatValue Kit", () => {
45
45
  text="Electric"
46
46
  unit="kw"
47
47
  value={64.18}
48
- />
48
+ />
49
49
  )
50
50
 
51
51
  const kit = screen.getByTestId(testId)
@@ -61,7 +61,7 @@ describe("IconStatValue Kit", () => {
61
61
  text="Electric"
62
62
  unit="kw"
63
63
  value={64.18}
64
- />
64
+ />
65
65
  )
66
66
 
67
67
  const kit = screen.getByTestId(testId)
@@ -77,7 +77,7 @@ describe("IconStatValue Kit", () => {
77
77
  text="Electric"
78
78
  unit="kw"
79
79
  value={64.18}
80
- />
80
+ />
81
81
  )
82
82
 
83
83
  const kit = screen.getByTestId(testId)
@@ -97,7 +97,7 @@ describe("IconStatValue Kit", () => {
97
97
  text="Electric"
98
98
  unit="kw"
99
99
  value={64.18}
100
- />
100
+ />
101
101
  )
102
102
 
103
103
  const kit = screen.getByTestId(testId)
@@ -125,7 +125,7 @@ describe("IconStatValue Kit", () => {
125
125
  unit="kw"
126
126
  value={64.18}
127
127
  variant={colorProp}
128
- />
128
+ />
129
129
  )
130
130
 
131
131
  const kit = screen.getByTestId(testId)
@@ -144,7 +144,7 @@ describe("IconStatValue Kit", () => {
144
144
  text="Electric"
145
145
  unit="kw"
146
146
  value={64.18}
147
- />
147
+ />
148
148
  )
149
149
 
150
150
  const kit = screen.getByTestId(testId)
data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js CHANGED
@@ -12,7 +12,7 @@ describe("IconValue Kit", () => {
12
12
  data={{ testid: testId }}
13
13
  icon="clipboard"
14
14
  text="33-123456"
15
- />
15
+ />
16
16
  )
17
17
 
18
18
  const kit = screen.getByTestId(testId)
@@ -25,7 +25,7 @@ describe("IconValue Kit", () => {
25
25
  data={{ testid: testId }}
26
26
  icon="clipboard"
27
27
  text="33-123456"
28
- />
28
+ />
29
29
  )
30
30
 
31
31
  const kit = screen.getByTestId(testId)
@@ -39,7 +39,7 @@ describe("IconValue Kit", () => {
39
39
  data={{ testid: testId }}
40
40
  icon="clipboard"
41
41
  text="33-123456"
42
- />
42
+ />
43
43
  )
44
44
 
45
45
  const kit = screen.getByTestId(testId)
@@ -54,7 +54,7 @@ describe("IconValue Kit", () => {
54
54
  data={{ testid: testId }}
55
55
  icon="clipboard"
56
56
  text="33-123456"
57
- />
57
+ />
58
58
  )
59
59
 
60
60
  const kit = screen.getByTestId(testId)
@@ -68,7 +68,7 @@ describe("IconValue Kit", () => {
68
68
  data={{ testid: testId }}
69
69
  icon="clipboard"
70
70
  text="33-123456"
71
- />
71
+ />
72
72
  )
73
73
 
74
74
  const kit = screen.getByTestId(testId)
data/app/pb_kits/playbook/pb_layout/layout.test.js CHANGED
@@ -16,8 +16,7 @@ test("render all color variants", () => {
16
16
  testValues.forEach((variant) => {
17
17
  const { getByTestId } = render(
18
18
  <LayoutTest data={{ testid: `test-${variant}` }}
19
- variant={variant}
20
- />
19
+ variant={variant} />
21
20
  )
22
21
  expect(getByTestId(`test-${variant}`)).toHaveClass(
23
22
  `pb_layout_kit_sidebar_size_md_left_${
@@ -34,8 +33,7 @@ test("render transparent class", () => {
34
33
 
35
34
  const { getByTestId } = render(
36
35
  <LayoutTest data={{ testid: `test-${id}` }}
37
- variant={id}
38
- />
36
+ variant={id} />
39
37
  )
40
38
  expect(getByTestId(`test-${id}`)).toHaveClass(
41
39
  `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -49,8 +47,7 @@ test("render all sizes variants", () => {
49
47
  testValues.forEach((size) => {
50
48
  const { getByTestId } = render(
51
49
  <LayoutTest data={{ testid: `test-${size}` }}
52
- size={size}
53
- />
50
+ size={size} />
54
51
  )
55
52
  expect(getByTestId(`test-${size}`)).toHaveClass(
56
53
  `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -87,8 +84,7 @@ test("render all layout variants", () => {
87
84
  testValues.forEach(({ layout, expected }) => {
88
85
  const { getByTestId } = render(
89
86
  <Layout data={{ testid: `test-${layout}` }}
90
- layout={layout}
91
- >
87
+ layout={layout}>
92
88
  <Layout.Body>
93
89
  <Card>{"Card content"}</Card>
94
90
  </Layout.Body>
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -23,7 +23,6 @@ type MultiLevelSelectProps = {
23
23
  data?: { [key: string]: string }
24
24
  id?: string
25
25
  name?: string
26
- returnCompleteData?: boolean
27
26
  returnAllSelected?: boolean
28
27
  treeData?: { [key: string]: string }[]
29
28
  onSelect?: (prop: { [key: string]: any }) => void
@@ -37,7 +36,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
37
36
  id,
38
37
  name,
39
38
  returnAllSelected = false,
40
- returnCompleteData = false,
41
39
  treeData,
42
40
  onSelect = () => {},
43
41
  } = props
@@ -66,42 +64,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
66
64
  //state for return for default
67
65
  const [defaultReturn, setDefaultReturn] = useState([])
68
66
 
69
- const [formattedReturn, setFormattedReturn] = useState([])
70
-
71
- const getSelectedIds = (selectedData: { [key: string]: any }[]) => {
72
- return selectedData.map((item) => item.id)
73
- }
74
-
75
- const getValues = () => {
76
- if (returnCompleteData) {
77
- if (returnAllSelected) {
78
- return setFormattedReturn(returnedArray)
79
- } else {
80
- return setFormattedReturn(defaultReturn)
81
- }
82
- } else {
83
- if (returnAllSelected) {
84
- setFormattedReturn(getSelectedIds(returnedArray))
85
- } else {
86
- setFormattedReturn(getSelectedIds(defaultReturn))
87
- }
88
- }
89
- }
90
-
91
-
92
- useEffect(() => {
93
- getValues()
94
- }, [returnedArray, defaultReturn])
95
-
96
- useEffect(() => {
97
- onSelect(formattedReturn)
98
- }, [formattedReturn])
99
67
 
100
68
  useEffect(() => {
101
69
  setFormattedData(addCheckedAndParentProperty(treeData))
102
70
  }, [treeData])
103
71
 
104
-
105
72
  useEffect(() => {
106
73
  if (returnAllSelected) {
107
74
  setReturnedArray(getCheckedItems(formattedData))
@@ -281,8 +248,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
281
248
  {Array.isArray(items) &&
282
249
  items.map((item: { [key: string]: any }) => {
283
250
  return (
284
- <>
285
- <li key={item.id} className='dropdown_item' data-name={item.id}>
251
+ <div key={item.id}>
252
+ <li className='dropdown_item' data-name={item.id}>
286
253
  <div className='dropdown_item_checkbox_row'>
287
254
  <div
288
255
  key={isExpanded(item) ? "chevron-down" : "chevron-right"}
@@ -321,7 +288,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
321
288
  <div>{renderNestedOptions(item.children)}</div>
322
289
  )}
323
290
  </li>
324
- </>
291
+ </div>
325
292
  )
326
293
  })}
327
294
  </ul>
@@ -333,9 +300,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
333
300
  <div ref={dropdownRef} className='wrapper'>
334
301
  <div className='input_wrapper' onClick={handleInputWrapperClick}>
335
302
  <div className='input_inner_container'>
336
- {returnedArray.map((item) => (
337
- <input type='hidden' name={name} value={item.id} />
338
- ))}
303
+ {returnedArray.length !== 0 && returnAllSelected
304
+ ? returnedArray.map((item) => (
305
+ <input type='hidden' name={`${name}[]`} value={item.id} />
306
+ ))
307
+ : null}
339
308
 
340
309
  {returnedArray.length !== 0 && returnAllSelected
341
310
  ? returnedArray.map((item, index) => (
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED
@@ -1,64 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
3
  value: "Power Home Remodeling",
4
- id: "powerhome1",
4
+ id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
9
  value: "People",
10
- id: "people1",
11
- checked: true,
10
+ id: "101",
12
11
  children: [
13
12
  {
14
13
  label: "Talent Acquisition",
15
14
  value: "Talent Acquisition",
16
- id: "talent1",
15
+ id: "102",
17
16
  },
18
17
  {
19
18
  label: "Business Affairs",
20
19
  value: "Business Affairs",
21
- id: "business1",
22
- checked: true,
20
+ id: "103",
23
21
  children: [
24
22
  {
25
23
  label: "Initiatives",
26
24
  value: "Initiatives",
27
- id: "initiative1",
25
+ id: "104",
28
26
  },
29
27
  {
30
28
  label: "Learning & Development",
31
29
  value: "Learning & Development",
32
- id: "development1",
30
+ id: "105",
33
31
  },
34
32
  ],
35
33
  },
36
34
  {
37
35
  label: "People Experience",
38
36
  value: "People Experience",
39
- id: "experience1",
37
+ id: "106",
40
38
  },
41
39
  ],
42
40
  },
43
41
  {
44
42
  label: "Contact Center",
45
43
  value: "Contact Center",
46
- id: "contact1",
44
+ id: "107",
47
45
  children: [
48
46
  {
49
47
  label: "Appointment Management",
50
48
  value: "Appointment Management",
51
- id: "appointment1",
49
+ id: "108",
52
50
  },
53
51
  {
54
52
  label: "Customer Service",
55
53
  value: "Customer Service",
56
- id: "customer1",
54
+ id: "109",
57
55
  },
58
56
  {
59
57
  label: "Energy",
60
58
  value: "Energy",
61
- id: "energy1",
59
+ id: "110",
62
60
  },
63
61
  ],
64
62
  },
@@ -67,14 +65,8 @@
67
65
 
68
66
 
69
67
 
70
- <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
71
68
  <%= pb_rails("multi_level_select", props: {
72
- id: "default-multi-level-select-test",
73
- name: "my_array[]",
69
+ id: "multi-level-select-default-rails",
70
+ name: "my_array",
74
71
  tree_data: treeData
75
72
  }) %>
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
@@ -75,11 +75,10 @@ const MultiLevelSelectDefault = (props) => {
75
75
  id='multiselect-default'
76
76
  onSelect={(selectedNodes) =>
77
77
  console.log(
78
- "Selected Items (default... with ids only)",
78
+ "Selected Items",
79
79
  selectedNodes
80
80
  )
81
81
  }
82
- returnAllSelected
83
82
  treeData={treeData}
84
83
  {...props}
85
84
  />
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md CHANGED
@@ -1,5 +1,5 @@
1
1
  The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
2
2
 
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!
3
+ For the React version of the kit, the `onSelect` prop returns an array of objects. This array contains 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
- 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.
5
+ For the Rails version of the kit, there is no onselect. The form submits as a array of strings, following the typical rails pattern of utilizing hidden inputs. The strings are the values of the selected items' ids. For example, ["103", "106", "107"].