playbook_ui 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855 → 14.9.0.pre.alpha.PLAY1731inputmasking4868

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +4 -9
  3. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
  6. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -5
  7. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -2
  8. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -106
  9. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +35 -3
  10. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +88 -0
  11. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  12. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  13. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +64 -0
  14. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +139 -2
  15. data/dist/chunks/_typeahead-Cx7J1O_I.js +22 -0
  16. data/dist/chunks/_weekday_stacked-Z6CSak-K.js +45 -0
  17. data/dist/chunks/{lib-CtS0DLMo.js → lib-SyD3buPZ.js} +3 -3
  18. data/dist/chunks/{pb_form_validation-C3vQKj7-.js → pb_form_validation-Dt8UJgrJ.js} +1 -1
  19. data/dist/chunks/vendor.js +1 -1
  20. data/dist/playbook-doc.js +1 -1
  21. data/dist/playbook-rails-react-bindings.js +1 -1
  22. data/dist/playbook-rails.js +1 -1
  23. data/dist/playbook.css +1 -1
  24. data/lib/playbook/version.rb +1 -1
  25. metadata +7 -16
  26. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +0 -75
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +0 -1
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +0 -108
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +0 -2
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +0 -94
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  32. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +0 -83
  33. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +0 -3
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +0 -120
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +0 -1
  36. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +0 -35
  37. data/dist/chunks/_typeahead-ClJHKLj6.js +0 -22
  38. data/dist/chunks/_weekday_stacked-DaVTrOfA.js +0 -45
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.9.0"
5
- VERSION = "14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855"
5
+ VERSION = "14.9.0.pre.alpha.PLAY1731inputmasking4868"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855
4
+ version: 14.9.0.pre.alpha.PLAY1731inputmasking4868
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -2632,16 +2632,6 @@ files:
2632
2632
  - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
2633
2633
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
2634
2634
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
2635
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2636
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md
2637
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
2638
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
2639
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
2640
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
2641
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx
2642
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md
2643
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx
2644
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
2645
2635
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
2646
2636
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
2647
2637
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -2654,7 +2644,6 @@ files:
2654
2644
  - app/pb_kits/playbook/pb_table/index.ts
2655
2645
  - app/pb_kits/playbook/pb_table/styles/_alignment.scss
2656
2646
  - app/pb_kits/playbook/pb_table/styles/_all.scss
2657
- - app/pb_kits/playbook/pb_table/styles/_collapsible.scss
2658
2647
  - app/pb_kits/playbook/pb_table/styles/_content.scss
2659
2648
  - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
2660
2649
  - app/pb_kits/playbook/pb_table/styles/_headers.scss
@@ -2718,12 +2707,14 @@ files:
2718
2707
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md
2719
2708
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
2720
2709
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
2710
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx
2721
2711
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb
2722
2712
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
2723
2713
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
2724
2714
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
2725
2715
  - app/pb_kits/playbook/pb_text_input/docs/example.yml
2726
2716
  - app/pb_kits/playbook/pb_text_input/docs/index.js
2717
+ - app/pb_kits/playbook/pb_text_input/inputMask.ts
2727
2718
  - app/pb_kits/playbook/pb_text_input/text_input.html.erb
2728
2719
  - app/pb_kits/playbook/pb_text_input/text_input.rb
2729
2720
  - app/pb_kits/playbook/pb_text_input/text_input.test.js
@@ -3200,11 +3191,11 @@ files:
3200
3191
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3201
3192
  - app/pb_kits/playbook/utilities/text.ts
3202
3193
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3203
- - dist/chunks/_typeahead-ClJHKLj6.js
3204
- - dist/chunks/_weekday_stacked-DaVTrOfA.js
3194
+ - dist/chunks/_typeahead-Cx7J1O_I.js
3195
+ - dist/chunks/_weekday_stacked-Z6CSak-K.js
3205
3196
  - dist/chunks/lazysizes-B7xYodB-.js
3206
- - dist/chunks/lib-CtS0DLMo.js
3207
- - dist/chunks/pb_form_validation-C3vQKj7-.js
3197
+ - dist/chunks/lib-SyD3buPZ.js
3198
+ - dist/chunks/pb_form_validation-Dt8UJgrJ.js
3208
3199
  - dist/chunks/vendor.js
3209
3200
  - dist/menu.yml
3210
3201
  - dist/playbook-doc.js
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx DELETED
@@ -1,75 +0,0 @@
1
- import React from 'react'
2
- import { Table, Icon, Body, Card } from 'playbook-ui'
3
-
4
- const TableWithCollapsible = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Card
9
- borderNone
10
- borderRadius="none"
11
- padding="md"
12
- {...props}
13
- >
14
- <Body {...props}>Nested content inside a Table Row</Body>
15
- </Card>
16
- );
17
- };
18
-
19
- return (
20
- <Table
21
- size="sm"
22
- {...props}
23
- >
24
- <Table.Head>
25
- <Table.Row>
26
- <Table.Header>{'Column 1'}</Table.Header>
27
- <Table.Header>{'Column 2'}</Table.Header>
28
- <Table.Header>{'Column 3'}</Table.Header>
29
- <Table.Header>{'Column 4'}</Table.Header>
30
- <Table.Header>{'Column 5'}</Table.Header>
31
- <Table.Header>{''}</Table.Header>
32
- </Table.Row>
33
-
34
- </Table.Head>
35
- <Table.Body>
36
- <Table.Row collapsible
37
- collapsibleContent={<Content/>}
38
- {...props}
39
- >
40
- <Table.Cell>{'Value 1'}</Table.Cell>
41
- <Table.Cell>{'Value 2'}</Table.Cell>
42
- <Table.Cell>{'Value 3'}</Table.Cell>
43
- <Table.Cell>{'Value 4'}</Table.Cell>
44
- <Table.Cell>{'Value 5'}</Table.Cell>
45
- <Table.Cell textAlign="right">{
46
- <Icon
47
- color="primary"
48
- fixedWidth
49
- icon="chevron-down"
50
- />}
51
- </Table.Cell>
52
-
53
- </Table.Row>
54
- <Table.Row>
55
- <Table.Cell>{'Value 1'}</Table.Cell>
56
- <Table.Cell>{'Value 2'}</Table.Cell>
57
- <Table.Cell>{'Value 3'}</Table.Cell>
58
- <Table.Cell>{'Value 4'}</Table.Cell>
59
- <Table.Cell>{'Value 5'}</Table.Cell>
60
- <Table.Cell>{''}</Table.Cell>
61
- </Table.Row>
62
- <Table.Row>
63
- <Table.Cell>{'Value 1'}</Table.Cell>
64
- <Table.Cell>{'Value 2'}</Table.Cell>
65
- <Table.Cell>{'Value 3'}</Table.Cell>
66
- <Table.Cell>{'Value 4'}</Table.Cell>
67
- <Table.Cell>{'Value 5'}</Table.Cell>
68
- <Table.Cell>{''}</Table.Cell>
69
- </Table.Row>
70
- </Table.Body>
71
- </Table>
72
- )
73
- }
74
-
75
- export default TableWithCollapsible
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md DELETED
@@ -1 +0,0 @@
1
- The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx DELETED
@@ -1,108 +0,0 @@
1
- import React from 'react'
2
- import { Table, Card, Icon, Body } from 'playbook-ui'
3
-
4
- const TableWithCollapsibleWithCustomClick = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Card
9
- borderNone
10
- borderRadius="none"
11
- padding="md"
12
- {...props}
13
- >
14
- <Body {...props}>Nested content inside a Table Row</Body>
15
- </Card>
16
- );
17
- };
18
-
19
-
20
- return (
21
- <Table
22
- size="sm"
23
- {...props}
24
- >
25
- <Table.Head>
26
- <Table.Row>
27
- <Table.Header>{'Column 1'}</Table.Header>
28
- <Table.Header>{'Column 2'}</Table.Header>
29
- <Table.Header>{'Column 3'}</Table.Header>
30
- <Table.Header>{'Column 4'}</Table.Header>
31
- <Table.Header>{'Column 5'}</Table.Header>
32
- <Table.Header>{''}</Table.Header>
33
- </Table.Row>
34
-
35
- </Table.Head>
36
- <Table.Body>
37
- <Table.Row collapsible
38
- collapsibleContent={<Content/>}
39
- toggleCellId="cell-1"
40
- {...props}
41
- >
42
- <Table.Cell>{'Value 1'}</Table.Cell>
43
- <Table.Cell>{'Value 2'}</Table.Cell>
44
- <Table.Cell>{'Value 3'}</Table.Cell>
45
- <Table.Cell>{'Value 4'}</Table.Cell>
46
- <Table.Cell>{'Value 5'}</Table.Cell>
47
- <Table.Cell cursor="pointer"
48
- id="cell-1"
49
- textAlign="right"
50
- >
51
- <Icon
52
- color="primary"
53
- fixedWidth
54
- icon="chevron-down"
55
- />
56
- </Table.Cell>
57
-
58
- </Table.Row>
59
- <Table.Row collapsible
60
- collapsibleContent={<Content/>}
61
- toggleCellId="cell-2"
62
- {...props}
63
- >
64
- <Table.Cell>{'Value 1'}</Table.Cell>
65
- <Table.Cell>{'Value 2'}</Table.Cell>
66
- <Table.Cell>{'Value 3'}</Table.Cell>
67
- <Table.Cell>{'Value 4'}</Table.Cell>
68
- <Table.Cell>{'Value 5'}</Table.Cell>
69
- <Table.Cell cursor="pointer"
70
- id="cell-2"
71
- textAlign="right"
72
- >
73
- <Icon
74
- color="primary"
75
- fixedWidth
76
- icon="chevron-down"
77
- />
78
- </Table.Cell>
79
-
80
- </Table.Row>
81
- <Table.Row collapsible
82
- collapsibleContent={<Content/>}
83
- toggleCellId="cell-3"
84
- {...props}
85
- >
86
- <Table.Cell>{'Value 1'}</Table.Cell>
87
- <Table.Cell>{'Value 2'}</Table.Cell>
88
- <Table.Cell>{'Value 3'}</Table.Cell>
89
- <Table.Cell>{'Value 4'}</Table.Cell>
90
- <Table.Cell>{'Value 5'}</Table.Cell>
91
- <Table.Cell cursor="pointer"
92
- id="cell-3"
93
- textAlign="right"
94
- >
95
- <Icon
96
- color="primary"
97
- fixedWidth
98
- icon="chevron-down"
99
- />
100
- </Table.Cell>
101
-
102
- </Table.Row>
103
- </Table.Body>
104
- </Table>
105
- )
106
- }
107
-
108
- export default TableWithCollapsibleWithCustomClick
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md DELETED
@@ -1,2 +0,0 @@
1
- When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
2
- __NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx DELETED
@@ -1,94 +0,0 @@
1
- import React from 'react'
2
- import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
3
-
4
- const TableWithCollapsibleWithCustomContent = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Card
9
- borderNone
10
- borderRadius="none"
11
- color="light"
12
- paddingX="xl"
13
- paddingY="md"
14
- {...props}
15
- >
16
- <Body paddingBottom="sm"
17
- text="Expanded Custom Layout"
18
- {...props}
19
- />
20
- <Flex justify="between">
21
- <Image
22
- url="https://via.placeholder.com/150"
23
- />
24
- <Image
25
- url="https://via.placeholder.com/150"
26
- />
27
- <Image
28
- url="https://via.placeholder.com/150"
29
- />
30
- <Image
31
- url="https://via.placeholder.com/150"
32
- />
33
- </Flex>
34
- </Card>
35
- );
36
- };
37
-
38
- return (
39
- <Table
40
- size="sm"
41
- {...props}
42
- >
43
- <Table.Head>
44
- <Table.Row>
45
- <Table.Header>{'Column 1'}</Table.Header>
46
- <Table.Header>{'Column 2'}</Table.Header>
47
- <Table.Header>{'Column 3'}</Table.Header>
48
- <Table.Header>{'Column 4'}</Table.Header>
49
- <Table.Header>{'Column 5'}</Table.Header>
50
- <Table.Header>{''}</Table.Header>
51
- </Table.Row>
52
-
53
- </Table.Head>
54
- <Table.Body>
55
- <Table.Row collapsible
56
- collapsibleContent={<Content/>}
57
- {...props}
58
- >
59
- <Table.Cell>{'Value 1'}</Table.Cell>
60
- <Table.Cell>{'Value 2'}</Table.Cell>
61
- <Table.Cell>{'Value 3'}</Table.Cell>
62
- <Table.Cell>{'Value 4'}</Table.Cell>
63
- <Table.Cell>{'Value 5'}</Table.Cell>
64
- <Table.Cell textAlign="right">{
65
- <Icon
66
- color="primary"
67
- fixedWidth
68
- icon="chevron-down"
69
- />}
70
- </Table.Cell>
71
-
72
- </Table.Row>
73
- <Table.Row>
74
- <Table.Cell>{'Value 1'}</Table.Cell>
75
- <Table.Cell>{'Value 2'}</Table.Cell>
76
- <Table.Cell>{'Value 3'}</Table.Cell>
77
- <Table.Cell>{'Value 4'}</Table.Cell>
78
- <Table.Cell>{'Value 5'}</Table.Cell>
79
- <Table.Cell>{''}</Table.Cell>
80
- </Table.Row>
81
- <Table.Row>
82
- <Table.Cell>{'Value 1'}</Table.Cell>
83
- <Table.Cell>{'Value 2'}</Table.Cell>
84
- <Table.Cell>{'Value 3'}</Table.Cell>
85
- <Table.Cell>{'Value 4'}</Table.Cell>
86
- <Table.Cell>{'Value 5'}</Table.Cell>
87
- <Table.Cell>{''}</Table.Cell>
88
- </Table.Row>
89
- </Table.Body>
90
- </Table>
91
- )
92
- }
93
-
94
- export default TableWithCollapsibleWithCustomContent
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx DELETED
@@ -1,83 +0,0 @@
1
- import React from 'react'
2
- import { Table, Background, Icon } from 'playbook-ui'
3
-
4
- const TableWithCollapsibleWithNestedRows = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Table
9
- borderRadius="none"
10
- container={false}
11
- size="sm"
12
- {...props}
13
- >
14
- <Background tag="tr"
15
- {...props}
16
- >
17
- <Table.Cell>Expanded</Table.Cell>
18
- <Table.Cell>Expanded</Table.Cell>
19
- <Table.Cell>Expanded</Table.Cell>
20
- <Table.Cell>Expanded</Table.Cell>
21
- <Table.Cell>Expanded</Table.Cell>
22
- </Background>
23
- </Table>
24
- );
25
- };
26
-
27
- return (
28
- <Table
29
- size="sm"
30
- {...props}
31
- >
32
- <Table.Head>
33
- <Table.Row>
34
- <Table.Header>{'Column 1'}</Table.Header>
35
- <Table.Header>{'Column 2'}</Table.Header>
36
- <Table.Header>{'Column 3'}</Table.Header>
37
- <Table.Header>{'Column 4'}</Table.Header>
38
- <Table.Header>{'Column 5'}</Table.Header>
39
- <Table.Header>{''}</Table.Header>
40
- </Table.Row>
41
-
42
- </Table.Head>
43
- <Table.Body>
44
- <Table.Row collapsible
45
- collapsibleContent={<Content/>}
46
- collapsibleSideHighlight={false}
47
- >
48
- <Table.Cell>{'Value 1'}</Table.Cell>
49
- <Table.Cell>{'Value 2'}</Table.Cell>
50
- <Table.Cell>{'Value 3'}</Table.Cell>
51
- <Table.Cell>{'Value 4'}</Table.Cell>
52
- <Table.Cell>{'Value 5'}</Table.Cell>
53
- <Table.Cell textAlign="right">{
54
- <Icon
55
- color="primary"
56
- fixedWidth
57
- icon="chevron-down"
58
- />}
59
- </Table.Cell>
60
-
61
- </Table.Row>
62
- <Table.Row>
63
- <Table.Cell>{'Value 1'}</Table.Cell>
64
- <Table.Cell>{'Value 2'}</Table.Cell>
65
- <Table.Cell>{'Value 3'}</Table.Cell>
66
- <Table.Cell>{'Value 4'}</Table.Cell>
67
- <Table.Cell>{'Value 5'}</Table.Cell>
68
- <Table.Cell>{''}</Table.Cell>
69
- </Table.Row>
70
- <Table.Row>
71
- <Table.Cell>{'Value 1'}</Table.Cell>
72
- <Table.Cell>{'Value 2'}</Table.Cell>
73
- <Table.Cell>{'Value 3'}</Table.Cell>
74
- <Table.Cell>{'Value 4'}</Table.Cell>
75
- <Table.Cell>{'Value 5'}</Table.Cell>
76
- <Table.Cell>{''}</Table.Cell>
77
- </Table.Row>
78
- </Table.Body>
79
- </Table>
80
- )
81
- }
82
-
83
- export default TableWithCollapsibleWithNestedRows
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md DELETED
@@ -1,3 +0,0 @@
1
- The `collapsibleContent` can display any content, including nested Table Rows.
2
-
3
- Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx DELETED
@@ -1,120 +0,0 @@
1
- import React from 'react'
2
- import {Pill, Background, Table, Icon} from "playbook-ui"
3
-
4
- const TableWithCollapsibleWithNestedTable = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Table
9
- borderRadius="none"
10
- container={false}
11
- size="sm"
12
- {...props}
13
- >
14
- <Table.Head>
15
- <Background
16
- tag="tr"
17
- {...props}
18
- >
19
- <Table.Header>{"Alt Header"}</Table.Header>
20
- <Table.Header>{"Alt Header"}</Table.Header>
21
- <Table.Header>{"Alt Header"}</Table.Header>
22
- <Table.Header>{"Alt Header"}</Table.Header>
23
- </Background>
24
- </Table.Head>
25
- <Table.Body>
26
- <Table.Row>
27
- <Table.Cell>{"Expanded"}</Table.Cell>
28
- <Table.Cell>{"Expanded"}</Table.Cell>
29
- <Table.Cell>{"Expanded"}</Table.Cell>
30
- <Table.Cell>
31
- <Pill text="Pill"
32
- variant="primary"
33
- {...props}
34
- />
35
- </Table.Cell>
36
- </Table.Row>
37
- <Table.Row>
38
- <Table.Cell>{"Expanded"}</Table.Cell>
39
- <Table.Cell>{"Expanded"}</Table.Cell>
40
- <Table.Cell>{"Expanded"}</Table.Cell>
41
- <Table.Cell>
42
- <Pill text="Pill"
43
- variant="primary"
44
- {...props}
45
- />
46
- </Table.Cell>
47
- </Table.Row>
48
- <Table.Row>
49
- <Table.Cell>{"Expanded"}</Table.Cell>
50
- <Table.Cell>{"Expanded"}</Table.Cell>
51
- <Table.Cell>{"Expanded"}</Table.Cell>
52
- <Table.Cell>
53
- <Pill text="Pill"
54
- variant="primary"
55
- {...props}
56
- />
57
- </Table.Cell>
58
- </Table.Row>
59
- </Table.Body>
60
- </Table>
61
- );
62
- };
63
-
64
- return (
65
- <Table
66
- size="sm"
67
- {...props}
68
- >
69
- <Table.Head>
70
- <Table.Row>
71
- <Table.Header>{'Column 1'}</Table.Header>
72
- <Table.Header>{'Column 2'}</Table.Header>
73
- <Table.Header>{'Column 3'}</Table.Header>
74
- <Table.Header>{'Column 4'}</Table.Header>
75
- <Table.Header>{'Column 5'}</Table.Header>
76
- <Table.Header>{''}</Table.Header>
77
- </Table.Row>
78
-
79
- </Table.Head>
80
- <Table.Body>
81
- <Table.Row collapsible
82
- collapsibleContent={<Content/>}
83
- collapsibleSideHighlight={false}
84
- >
85
- <Table.Cell>{'Value 1'}</Table.Cell>
86
- <Table.Cell>{'Value 2'}</Table.Cell>
87
- <Table.Cell>{'Value 3'}</Table.Cell>
88
- <Table.Cell>{'Value 4'}</Table.Cell>
89
- <Table.Cell>{'Value 5'}</Table.Cell>
90
- <Table.Cell textAlign="right">{
91
- <Icon
92
- color="primary"
93
- fixedWidth
94
- icon="chevron-down"
95
- />}
96
- </Table.Cell>
97
-
98
- </Table.Row>
99
- <Table.Row>
100
- <Table.Cell>{'Value 1'}</Table.Cell>
101
- <Table.Cell>{'Value 2'}</Table.Cell>
102
- <Table.Cell>{'Value 3'}</Table.Cell>
103
- <Table.Cell>{'Value 4'}</Table.Cell>
104
- <Table.Cell>{'Value 5'}</Table.Cell>
105
- <Table.Cell>{''}</Table.Cell>
106
- </Table.Row>
107
- <Table.Row>
108
- <Table.Cell>{'Value 1'}</Table.Cell>
109
- <Table.Cell>{'Value 2'}</Table.Cell>
110
- <Table.Cell>{'Value 3'}</Table.Cell>
111
- <Table.Cell>{'Value 4'}</Table.Cell>
112
- <Table.Cell>{'Value 5'}</Table.Cell>
113
- <Table.Cell>{''}</Table.Cell>
114
- </Table.Row>
115
- </Table.Body>
116
- </Table>
117
- )
118
- }
119
-
120
- export default TableWithCollapsibleWithNestedTable
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md DELETED
@@ -1 +0,0 @@
1
- The `collapsibleContent` can also be used to display nested Tables within each Row.
data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss DELETED
@@ -1,35 +0,0 @@
1
- @import "../../tokens/colors";
2
-
3
- .table_collapsible_side_highlight {
4
- border-left: 4px solid $primary;
5
- &.dark {
6
- border-left: 4px solid $active_dark;
7
- }
8
- }
9
-
10
- [class^="pb_table"] {
11
- &.table-sm,
12
- &.table-md,
13
- &.table-lg {
14
- &.table-card {
15
- tbody,
16
- .pb_table_tbody {
17
- tr,
18
- .pb_table_tr {
19
- &.collapsible_table_row {
20
- td,
21
- .pb_table_td {
22
- border-bottom-color: transparent;
23
- }
24
- &:hover {
25
- td,
26
- .pb_table_td {
27
- border-bottom-color: darken($border_light, 10%);
28
- }
29
- }
30
- }
31
- }
32
- }
33
- }
34
- }
35
- }