playbook_ui 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 (39) 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_date_year_stacked/date_year_stacked.test.js +6 -3
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -4
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -4
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +4 -2
  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 +6 -3
  9. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +2 -1
  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 +8 -4
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +163 -123
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +14 -6
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +8 -4
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +14 -7
  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_return_complete_data.html.erb +73 -0
  23. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +87 -0
  24. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
  25. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  26. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  27. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +7 -3
  28. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +6 -0
  29. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +2 -1
  30. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +2 -1
  31. data/app/pb_kits/playbook/pb_popover/_popover.tsx +3 -5
  32. data/app/pb_kits/playbook/pb_popover/index.ts +2 -5
  33. data/app/pb_kits/playbook/pb_popover/popover.test.js +6 -6
  34. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +4 -2
  35. data/dist/playbook-rails.js +5 -5
  36. data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
  37. data/lib/playbook/forms/builder.rb +1 -0
  38. data/lib/playbook/version.rb +1 -1
  39. metadata +5 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: bc05d54c9a3beeca0cdfd89f672b2aa6a3b5ed7cd3eb0ce9fe49aad64c2c5cf4
4
- data.tar.gz: 40811095a508f62f3b0be30ba0910c8f7bf1e0a058b3c3cef71418c2db782382
3
+ metadata.gz: 4b8393ab43cfea1ee6fca52882ebec02b26a56889dcbe66dde6cb4982fd4ca3b
4
+ data.tar.gz: 394cb5663f1b83ed4e055db0a05beecc702b8a6d3d63dfdc444b0e86f1421db5
5
5
  SHA512:
6
- metadata.gz: 21ae38d7936b12cafb50c6fb7a6bd7a1c250359e0c375eb34e713c9127876c583f22e7b983dea3fb8c54207997ea55e15221af2dc78cc87765b99868bd22b1ba
7
- data.tar.gz: 1253d8ba46fb06dab662b03797e95f5b82ed240d613e4d8277d1b65c185823933ac54985828fc782c05de3cd72a889902393ffb9d0445d5ca9bbb35ebf011f11
6
+ metadata.gz: 7d8b5e97bc020258bf1a121dc75354a688d9984104b1c4fbefbe6a3bfe68bc201fc3729dc7360399c25d42d369d8cf37de19712954a949879d714c7437929317
7
+ data.tar.gz: e3388a6075cbb920bc57e006d408db4242586f516d64c9fbb8c7980e0517ede4c8277c82ae3499b2afdee9603f7db3d9bb01ff796acab984f170df4f0cfb0b9a
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_date_year_stacked/date_year_stacked.test.js CHANGED
@@ -21,7 +21,8 @@ describe("DateYearStacked Kit", () => {
21
21
  render(
22
22
  <DateYearStacked
23
23
  data={{ testid: testId }}
24
- date={new Date(Date.now())} />
24
+ date={new Date(Date.now())}
25
+ />
25
26
  );
26
27
 
27
28
  const kit = screen.getByTestId(testId);
@@ -32,7 +33,8 @@ describe("DateYearStacked Kit", () => {
32
33
  render(
33
34
  <DateYearStacked
34
35
  data={{ testid: testId }}
35
- date={new Date(Date.now())} />
36
+ date={new Date(Date.now())}
37
+ />
36
38
  );
37
39
 
38
40
  const kit = screen.getByTestId(testId);
@@ -44,7 +46,8 @@ describe("DateYearStacked Kit", () => {
44
46
  render(
45
47
  <DateYearStacked
46
48
  data={{ testid: testId }}
47
- date={new Date(Date.now())} />
49
+ date={new Date(Date.now())}
50
+ />
48
51
  );
49
52
 
50
53
  const kit = screen.getByTestId(testId);
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_filter/filter.test.js CHANGED
@@ -46,12 +46,15 @@ function FilterTest(props) {
46
46
  {...props}
47
47
  />
48
48
  <Flex spacing="between"
49
- {...props}>
49
+ {...props}
50
+ >
50
51
  <Button text="Apply"
51
- {...props} />
52
+ {...props}
53
+ />
52
54
  <Button text="Clear"
53
55
  variant="secondary"
54
- {...props} />
56
+ {...props}
57
+ />
55
58
  </Flex>
56
59
  </Filter>
57
60
  );
data/app/pb_kits/playbook/pb_form_group/form_group.test.js CHANGED
@@ -9,7 +9,8 @@ test("should render a div with a button child", () => {
9
9
  <FormGroup>
10
10
  <Button
11
11
  data={{ testid: testId }}
12
- text={"some text"} />
12
+ text={"some text"}
13
+ />
13
14
  </FormGroup>
14
15
  )
15
16
 
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,7 +16,8 @@ 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} />
19
+ variant={variant}
20
+ />
20
21
  )
21
22
  expect(getByTestId(`test-${variant}`)).toHaveClass(
22
23
  `pb_layout_kit_sidebar_size_md_left_${
@@ -33,7 +34,8 @@ test("render transparent class", () => {
33
34
 
34
35
  const { getByTestId } = render(
35
36
  <LayoutTest data={{ testid: `test-${id}` }}
36
- variant={id} />
37
+ variant={id}
38
+ />
37
39
  )
38
40
  expect(getByTestId(`test-${id}`)).toHaveClass(
39
41
  `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -47,7 +49,8 @@ test("render all sizes variants", () => {
47
49
  testValues.forEach((size) => {
48
50
  const { getByTestId } = render(
49
51
  <LayoutTest data={{ testid: `test-${size}` }}
50
- size={size} />
52
+ size={size}
53
+ />
51
54
  )
52
55
  expect(getByTestId(`test-${size}`)).toHaveClass(
53
56
  `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -84,7 +87,8 @@ test("render all layout variants", () => {
84
87
  testValues.forEach(({ layout, expected }) => {
85
88
  const { getByTestId } = render(
86
89
  <Layout data={{ testid: `test-${layout}` }}
87
- layout={layout}>
90
+ layout={layout}
91
+ >
88
92
  <Layout.Body>
89
93
  <Card>{"Card content"}</Card>
90
94
  </Layout.Body>