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