playbook_ui 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736 → 14.9.0.pre.alpha.play1703errorstatealignment4991

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +61 -17
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +50 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md +1 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +57 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json +5600 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -3
  11. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -2
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +53 -49
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
  14. data/app/pb_kits/playbook/pb_body/_body.scss +14 -13
  15. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +22 -16
  16. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +6 -0
  17. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -1
  18. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  19. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +9 -4
  20. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  21. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  22. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -5
  23. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +0 -10
  24. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -1
  25. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +5 -0
  26. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +7 -2
  27. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +8 -2
  28. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -2
  29. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +49 -0
  30. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +48 -2
  31. data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
  32. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +11 -1
  33. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +16 -2
  34. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  35. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +2 -2
  36. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  37. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +44 -36
  39. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  40. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +95 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
  42. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
  43. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  47. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
  48. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
  49. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
  50. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
  51. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  52. data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
  53. data/app/pb_kits/playbook/pb_table/index.ts +100 -26
  54. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -1
  55. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +35 -0
  56. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +106 -1
  57. data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_table/table.rb +17 -2
  59. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +35 -3
  60. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +88 -0
  61. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  62. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  63. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +64 -0
  64. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +139 -2
  65. data/app/pb_kits/playbook/pb_title/_title.scss +6 -5
  66. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +13 -0
  67. data/app/pb_kits/playbook/tokens/_titles.scss +0 -8
  68. data/app/pb_kits/playbook/utilities/_hover.scss +11 -2
  69. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -0
  70. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +15 -0
  71. data/dist/chunks/_typeahead-l1kq1p9m.js +22 -0
  72. data/dist/chunks/_weekday_stacked-B28kYXl9.js +45 -0
  73. data/dist/chunks/lib-CuCy3_xO.js +29 -0
  74. data/dist/chunks/{pb_form_validation-kPWA1Z2g.js → pb_form_validation-D37k10a0.js} +1 -1
  75. data/dist/chunks/vendor.js +1 -1
  76. data/dist/menu.yml +1 -1
  77. data/dist/playbook-doc.js +1 -1
  78. data/dist/playbook-rails-react-bindings.js +1 -1
  79. data/dist/playbook-rails.js +1 -1
  80. data/dist/playbook.css +1 -1
  81. data/lib/playbook/hover.rb +7 -1
  82. data/lib/playbook/version.rb +1 -1
  83. metadata +26 -6
  84. data/dist/chunks/_typeahead-DU1QgR52.js +0 -22
  85. data/dist/chunks/_weekday_stacked-BLOmRNnB.js +0 -45
  86. data/dist/chunks/lib-Ce7MLbJk.js +0 -29
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx ADDED
@@ -0,0 +1,108 @@
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 ADDED
@@ -0,0 +1,2 @@
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 ADDED
@@ -0,0 +1,94 @@
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 ADDED
@@ -0,0 +1,83 @@
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 ADDED
@@ -0,0 +1,3 @@
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 ADDED
@@ -0,0 +1,120 @@
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 ADDED
@@ -0,0 +1 @@
1
+ The `collapsibleContent` can also be used to display nested Tables within each Row.
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -55,3 +55,8 @@ examples:
55
55
  - table_with_subcomponents: Table with Sub Components (Table Elements)
56
56
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
57
57
  - table_outer_padding: Outer Padding
58
+ - table_with_collapsible: Table with Collapsible
59
+ - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
60
+ - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
61
+ - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
62
+ - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED
@@ -26,3 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
26
26
  export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
27
27
  export { default as TableOuterPadding } from './_table_outer_padding.jsx'
28
28
  export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
29
+ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
30
+ export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
31
+ export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
32
+ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
33
+ export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
data/app/pb_kits/playbook/pb_table/index.ts CHANGED
@@ -1,32 +1,106 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
2
 
3
3
  export default class PbTable extends PbEnhancedElement {
4
- static get selector(): string {
5
- return '.table-responsive-collapse'
6
- }
7
-
8
- connect(): void {
9
- const tables = document.querySelectorAll('.table-responsive-collapse');
10
-
11
- // Each Table
12
- [].forEach.call(tables, (table: HTMLTableElement) => {
13
- // Header Titles
14
- const headers: string[] = [];
15
- [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
16
- const colSpan = header.colSpan
17
- for (let i = 0; i < colSpan; i++) {
18
- headers.push(header.textContent.replace(/\r?\n|\r/, ''));
4
+ private stickyLeftColumns: string[] = [];
5
+ private handleStickyColumnsRef: () => void;
6
+
7
+ static get selector(): string {
8
+ return '.table-responsive-collapse'
9
+ }
10
+
11
+ connect(): void {
12
+ const tables = document.querySelectorAll('.table-responsive-collapse');
13
+ // Each Table
14
+ [].forEach.call(tables, (table: HTMLTableElement) => {
15
+ // Header Titles
16
+ const headers: string[] = [];
17
+ [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
18
+ const colSpan = header.colSpan
19
+ for (let i = 0; i < colSpan; i++) {
20
+ headers.push(header.textContent.replace(/\r?\n|\r/, ''));
21
+ }
22
+ });
23
+ // for each row in tbody
24
+ [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
25
+ // for each cell
26
+ [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
27
+ // apply the attribute
28
+ cell.setAttribute('data-title', headers[headerIndex])
29
+ })
30
+ })
31
+ });
32
+
33
+ // New sticky columns logic
34
+ this.initStickyColumns();
35
+ }
36
+
37
+ private initStickyColumns(): void {
38
+ // Find tables with sticky-left-column class
39
+ const tables = document.querySelectorAll('.sticky-left-column');
40
+
41
+ tables.forEach((table) => {
42
+ // Extract sticky left column IDs by looking at the component's class
43
+ const classList = Array.from(table.classList);
44
+
45
+ // Look for classes in the format sticky-left-column-{ids}
46
+ const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
47
+ if (stickyColumnClass) {
48
+ // Extract the IDs from the class name
49
+ this.stickyLeftColumns = stickyColumnClass
50
+ .replace('sticky-columns-', '')
51
+ .split('-');
52
+
53
+ if (this.stickyLeftColumns.length > 0) {
54
+ this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
55
+ this.handleStickyColumns();
56
+ window.addEventListener('resize', this.handleStickyColumnsRef);
57
+ }
19
58
  }
20
59
  });
60
+ }
21
61
 
22
- // for each row in tbody
23
- [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
24
- // for each cell
25
- [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
26
- // apply the attribute
27
- cell.setAttribute('data-title', headers[headerIndex])
28
- })
29
- })
30
- })
31
- }
32
- }
62
+ private handleStickyColumns(): void {
63
+ let accumulatedWidth = 0;
64
+
65
+ this.stickyLeftColumns.forEach((colId, index) => {
66
+ const isLastColumn = index === this.stickyLeftColumns.length - 1;
67
+ const header = document.querySelector(`th[id="${colId}"]`);
68
+ const cells = document.querySelectorAll(`td[id="${colId}"]`);
69
+
70
+ if (header) {
71
+ header.classList.add('sticky');
72
+ (header as HTMLElement).style.left = `${accumulatedWidth}px`;
73
+
74
+ if (!isLastColumn) {
75
+ header.classList.add('with-border');
76
+ header.classList.remove('sticky-shadow');
77
+ } else {
78
+ header.classList.remove('with-border');
79
+ header.classList.add('sticky-shadow');
80
+ }
81
+
82
+ accumulatedWidth += (header as HTMLElement).offsetWidth;
83
+ }
84
+
85
+ cells.forEach((cell) => {
86
+ cell.classList.add('sticky');
87
+ (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
88
+
89
+ if (!isLastColumn) {
90
+ cell.classList.add('with-border');
91
+ cell.classList.remove('sticky-shadow');
92
+ } else {
93
+ cell.classList.remove('with-border');
94
+ cell.classList.add('sticky-shadow');
95
+ }
96
+ });
97
+ });
98
+ }
99
+
100
+ // Cleanup method to remove event listener
101
+ disconnect(): void {
102
+ if (this.handleStickyColumnsRef) {
103
+ window.removeEventListener('resize', this.handleStickyColumnsRef);
104
+ }
105
+ }
106
+ }
data/app/pb_kits/playbook/pb_table/styles/_all.scss CHANGED
@@ -21,4 +21,5 @@
21
21
  @import "striped";
22
22
  @import "outer_padding";
23
23
  @import "sticky_columns";
24
- @import "scroll";
24
+ @import "scroll";
25
+ @import "collapsible";
data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss ADDED
@@ -0,0 +1,35 @@
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
+ }