playbook_ui 13.19.0.pre.alpha.play1141iconkitusinglibrary2264 → 13.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -4
  3. data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
  4. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  5. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  6. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  9. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  10. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  11. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  12. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  13. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  14. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  15. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  16. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  17. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  18. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  19. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +18 -6
  20. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  21. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  22. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  23. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  24. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  25. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  26. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  27. data/lib/playbook/version.rb +1 -1
  28. metadata +9 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: dc85d46bc740674b47dbae257e9c81833befa30e371132c6b8c666e5b9085d10
4
- data.tar.gz: e5f9fddaf77380e589222c5a5a5b7d4f6113a3b972daf02d8b5a5a2428056111
3
+ metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
4
+ data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
5
5
  SHA512:
6
- metadata.gz: 873f1d7fd3362e9e8825e9565864de562f7df6a3867f872f34e937ad494595ff9741534192c545f28673e0ce2f6790483eb4a059fc733393dfe1342663f95a59
7
- data.tar.gz: 0b5450fc7b8d3311f2d1ae1d6f1923d3aaee4c4c5267daab6080e535fa88dec66695131ea87e28f95f8ee20cfd7bd6e8891e4c902b96421dfbd4a6de30d6f113
6
+ metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
7
+ data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9
@@ -20,7 +20,7 @@ import AdvancedTableContext from "./Context/AdvancedTableContext";
20
20
  import { TableHeader } from "./SubKits/TableHeader";
21
21
  import { TableBody } from "./SubKits/TableBody";
22
22
 
23
- import { DataType, ExpandedStateObject } from "./Utilities/types";
23
+ import { DataType } from "./Utilities/types";
24
24
 
25
25
  type AdvancedTableProps = {
26
26
  aria?: { [key: string]: string };
@@ -80,7 +80,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
80
80
  ? expandedControl.onChange
81
81
  : setLocalExpanded;
82
82
 
83
- const columnHelper = createColumnHelper<DataType>();
83
+ const columnHelper = createColumnHelper();
84
84
 
85
85
  //Create cells for first columns
86
86
  const createCellFunction = (cellAccessors: string[]) => {
@@ -163,7 +163,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
163
163
  data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
164
164
  columns,
165
165
  onExpandedChange: setExpanded,
166
- getSubRows: (row) => row.children,
166
+ getSubRows: (row: DataType) => row.children,
167
167
  getCoreRowModel: getCoreRowModel(),
168
168
  getExpandedRowModel: getExpandedRowModel(),
169
169
  getSortedRowModel: getSortedRowModel(),
@@ -192,7 +192,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
192
192
  const handleExpandOrCollapse = (row: Row<DataType>) => {
193
193
  onToggleExpansionClick && onToggleExpansionClick(row);
194
194
 
195
- const expandedState = expanded as ExpandedStateObject;
195
+ const expandedState = expanded;
196
196
  const targetParent = row?.parentId;
197
197
  return setExpanded(
198
198
  updateExpandAndCollapseState(tableRows, expandedState, targetParent)
@@ -5,67 +5,60 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
6
 
7
7
  type TableProps = {
8
- aria?: { [key: string]: string },
9
- children: React.ReactNode[] | React.ReactNode,
10
- className: string,
11
- collapse?: "sm" | "md" | "lg",
12
- container?: boolean,
13
- dark?: boolean,
14
- data?: { [key: string]: string },
15
- dataTable: boolean,
16
- disableHover?: boolean,
17
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
- id?: string,
19
- responsive?: "collapse" | "scroll" | "none",
20
- singleLine?: boolean,
21
- size?: "sm" | "md" | "lg",
22
- sticky?: boolean,
23
- striped?: boolean,
24
- verticalBorder?: boolean,
8
+ aria?: { [key: string]: string },
9
+ children: React.ReactNode[] | React.ReactNode,
10
+ className: string,
11
+ collapse?: "sm" | "md" | "lg",
12
+ container?: boolean,
13
+ dark?: boolean,
14
+ data?: { [key: string]: string },
15
+ dataTable: boolean,
16
+ disableHover?: boolean,
17
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
18
+ id?: string,
19
+ responsive?: "collapse" | "scroll" | "none",
20
+ singleLine?: boolean,
21
+ size?: "sm" | "md" | "lg",
22
+ sticky?: boolean,
23
+ striped?: boolean,
24
+ tag?: "table" | "div",
25
+ verticalBorder?: boolean,
25
26
  } & GlobalProps
26
27
 
27
28
  const Table = (props: TableProps) => {
28
- const {
29
- aria = {},
30
- children,
31
- className,
32
- collapse = 'sm',
33
- container = true,
34
- dark,
35
- data = {},
36
- dataTable = false,
37
- disableHover = false,
38
- htmlOptions = {},
39
- id,
40
- responsive = 'collapse',
41
- singleLine = false,
42
- size = 'sm',
43
- sticky = false,
44
- striped = false,
45
- verticalBorder = false,
46
- } = props
29
+ const {
30
+ aria = {},
31
+ children,
32
+ className,
33
+ collapse = 'sm',
34
+ container = true,
35
+ dark,
36
+ data = {},
37
+ dataTable = false,
38
+ disableHover = false,
39
+ htmlOptions = {},
40
+ id,
41
+ responsive = 'collapse',
42
+ singleLine = false,
43
+ size = 'sm',
44
+ sticky = false,
45
+ striped = false,
46
+ tag = 'table',
47
+ verticalBorder = false,
48
+ } = props
47
49
 
48
- const ariaProps = buildAriaProps(aria)
49
- const dataProps = buildDataProps(data)
50
- const htmlProps = buildHtmlProps(htmlOptions)
51
- const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
52
- const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
50
+ const ariaProps = buildAriaProps(aria)
51
+ const dataProps = buildDataProps(data)
52
+ const htmlProps = buildHtmlProps(htmlOptions)
53
+ const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
54
+ const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
55
+ const isTableTag = tag === 'table'
53
56
 
54
- useEffect(() => {
55
- const instance = new PbTable()
56
- instance.connect()
57
- }, [])
58
-
59
- return (
60
- <table
61
- {...ariaProps}
62
- {...dataProps}
63
- {...htmlProps}
64
- className={classnames(
65
- 'pb_table',
66
- `table-${size}`,
67
- `table-responsive-${responsive}`,
68
- {
57
+ const classNames = classnames(
58
+ 'pb_table',
59
+ `table-${size}`,
60
+ `table-responsive-${responsive}`,
61
+ {
69
62
  'table-card': container,
70
63
  'table-dark': dark,
71
64
  'data_table': dataTable,
@@ -73,17 +66,43 @@ const Table = (props: TableProps) => {
73
66
  'no-hover': disableHover,
74
67
  'sticky-header': sticky,
75
68
  'striped': striped,
76
- },
77
- globalProps(props),
78
- tableCollapseCss,
79
- verticalBorderCss,
80
- className
81
- )}
82
- id={id}
83
- >
84
- {children}
85
- </table>
86
- )
69
+ },
70
+ globalProps(props),
71
+ tableCollapseCss,
72
+ verticalBorderCss,
73
+ className
74
+ )
75
+
76
+ useEffect(() => {
77
+ const instance = new PbTable()
78
+ instance.connect()
79
+ }, [])
80
+
81
+ return (
82
+ <>
83
+ {isTableTag ? (
84
+ <table
85
+ {...ariaProps}
86
+ {...dataProps}
87
+ {...htmlProps}
88
+ className={classNames}
89
+ id={id}
90
+ >
91
+ {children}
92
+ </table>
93
+ ) : (
94
+ <div
95
+ {...ariaProps}
96
+ {...dataProps}
97
+ {...htmlProps}
98
+ className={classNames}
99
+ id={id}
100
+ >
101
+ {children}
102
+ </div>
103
+ )}
104
+ </>
105
+ )
87
106
  }
88
107
 
89
108
  export default Table
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
2
+ <div class="pb_table_thead">
3
+ <div class="pb_table_tr">
4
+ <div class="pb_table_th">Column 1</div>
5
+ <div class="pb_table_th">Column 2</div>
6
+ <div class="pb_table_th">Column 3</div>
7
+ <div class="pb_table_th">Column 4</div>
8
+ <div class="pb_table_th">Column 5</div>
9
+ </div>
10
+ </div>
11
+ <div class="pb_table_tbody">
12
+ <div class="pb_table_tr">
13
+ <div class="pb_table_td">Value 1</div>
14
+ <div class="pb_table_td">Value 2</div>
15
+ <div class="pb_table_td">Value 3</div>
16
+ <div class="pb_table_td">Value 4</div>
17
+ <div class="pb_table_td">Value 5</div>
18
+ </div>
19
+ <div class="pb_table_tr">
20
+ <div class="pb_table_td">Value 1</div>
21
+ <div class="pb_table_td">Value 2</div>
22
+ <div class="pb_table_td">Value 3</div>
23
+ <div class="pb_table_td">Value 4</div>
24
+ <div class="pb_table_td">Value 5</div>
25
+ </div>
26
+ <div class="pb_table_tr">
27
+ <div class="pb_table_td">Value 1</div>
28
+ <div class="pb_table_td">Value 2</div>
29
+ <div class="pb_table_td">Value 3</div>
30
+ <div class="pb_table_td">Value 4</div>
31
+ <div class="pb_table_td">Value 5</div>
32
+ </div>
33
+ </div>
34
+ <% end %>
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableDiv = (props) => {
5
+ return (
6
+ <Table
7
+ size="sm"
8
+ tag="div"
9
+ {...props}
10
+ >
11
+ <div className="pb_table_thead">
12
+ <div className="pb_table_tr">
13
+ <div className="pb_table_th">{'Column 1'}</div>
14
+ <div className="pb_table_th">{'Column 2'}</div>
15
+ <div className="pb_table_th">{'Column 3'}</div>
16
+ <div className="pb_table_th">{'Column 4'}</div>
17
+ <div className="pb_table_th">{'Column 5'}</div>
18
+ </div>
19
+ </div>
20
+ <div className="pb_table_tbody">
21
+ <div className="pb_table_tr">
22
+ <div className="pb_table_td">{'Value 1'}</div>
23
+ <div className="pb_table_td">{'Value 2'}</div>
24
+ <div className="pb_table_td">{'Value 3'}</div>
25
+ <div className="pb_table_td">{'Value 4'}</div>
26
+ <div className="pb_table_td">{'Value 5'}</div>
27
+ </div>
28
+ <div className="pb_table_tr">
29
+ <div className="pb_table_td">{'Value 1'}</div>
30
+ <div className="pb_table_td">{'Value 2'}</div>
31
+ <div className="pb_table_td">{'Value 3'}</div>
32
+ <div className="pb_table_td">{'Value 4'}</div>
33
+ <div className="pb_table_td">{'Value 5'}</div>
34
+ </div>
35
+ <div className="pb_table_tr">
36
+ <div className="pb_table_td">{'Value 1'}</div>
37
+ <div className="pb_table_td">{'Value 2'}</div>
38
+ <div className="pb_table_td">{'Value 3'}</div>
39
+ <div className="pb_table_td">{'Value 4'}</div>
40
+ <div className="pb_table_td">{'Value 5'}</div>
41
+ </div>
42
+ </div>
43
+ </Table>
44
+ )
45
+ }
46
+
47
+ export default TableDiv
@@ -1,5 +1,6 @@
1
1
  examples:
2
2
  rails:
3
+ # - table_div: Div
3
4
  - table_sm: Small
4
5
  - table_md: Medium
5
6
  - table_lg: Large
@@ -26,6 +27,7 @@ examples:
26
27
  - table_striped: Striped Table
27
28
 
28
29
  react:
30
+ # - table_div: Div
29
31
  - table_sm: Small
30
32
  - table_md: Medium
31
33
  - table_lg: Large
@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
21
21
  export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
22
22
  export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
23
23
  export { default as TableStriped } from './_table_striped.jsx'
24
+ export { default as TableDiv } from './_table_div.jsx'
@@ -2,9 +2,9 @@
2
2
  &.table-sm,
3
3
  &.table-md,
4
4
  &.table-lg {
5
- tbody {
6
- tr {
7
- td {
5
+ tbody, .pb_table_tbody {
6
+ tr, .pb_table_tr {
7
+ td, .pb_table_td {
8
8
  font-size: $default-font-size;
9
9
  }
10
10
  }
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .pb_table_td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .pb_table_tbody {
102
+ tr, .pb_table_tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -4,9 +4,9 @@
4
4
  &.table-sm,
5
5
  &.table-md,
6
6
  &.table-lg {
7
- thead {
8
- tr {
9
- th {
7
+ thead, .pb_table_thead {
8
+ tr, .pb_table_tr {
9
+ th, .pb_table_th {
10
10
  @include caption;
11
11
  border-bottom: 1px solid $border_light;
12
12
  }
@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
9
9
  &.table-lg {
10
10
  &:not(.no-hover) {
11
11
  border-collapse: collapse;
12
- tbody {
13
- tr {
12
+ tbody, .pb_table_tbody {
13
+ tr, .pb_table_tr {
14
14
  box-shadow: 0 0 0 $white;
15
15
  transition: box-shadow $transition-speed ease;
16
- td {
16
+ td, .pb_table_td {
17
17
  border-top-color: transparent;
18
18
  border-top-width: 0;
19
19
  transition: all $transition-speed ease;
20
20
  }
21
21
  @media (hover:hover) {
22
- td {
22
+ td, .pb_table_td {
23
23
  position: relative;
24
24
  &:after {
25
25
  transition: background-color $transition-speed ease, height $transition-speed ease;
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
41
41
  }
42
42
  &:hover {
43
43
  box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
44
- td {
44
+ td, .pb_table_td {
45
45
  border-color: darken($border_light, 10%);
46
46
  border-top-width: 0;
47
47
  border-top-color: transparent;
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
57
57
  }
58
58
  &.table-card {
59
59
  border-collapse: separate;
60
- tbody {
61
- tr {
62
- td {
60
+ tbody, .pb_table_tbody {
61
+ tr, .pb_table_tr {
62
+ td, .pb_table_td {
63
63
  &:first-child {
64
64
  border-left-width: 1px;
65
65
  }
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
72
72
  }
73
73
 
74
74
  &.dark {
75
- tbody {
76
- tr {
75
+ tbody, .pb_table_tbody {
76
+ tr, .pb_table_tr {
77
77
  @media (hover:hover) {
78
78
  &:hover {
79
79
  box-shadow: 0 2px 10px 0 $shadow_dark;
80
- td {
80
+ td, .pb_table_td {
81
81
  border-top-width: 0;
82
82
  border-top-color: transparent;
83
83
  border-color: $border_hover_color_dark !important;
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .pb_table_td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .pb_table_tbody {
102
+ tr, .pb_table_tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .pb_table_td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .pb_table_tbody {
102
+ tr, .pb_table_tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -6,9 +6,9 @@
6
6
  background-color: unset;
7
7
  background: unset;
8
8
 
9
- thead {
10
- tr {
11
- th {
9
+ thead, .pb_table_thead {
10
+ tr, .pb_table_tr {
11
+ th, .pb_table_th {
12
12
  text-align: left;
13
13
  }
14
14
  }
@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
8
8
  }
9
9
 
10
10
  [class^=pb_table] {
11
- tbody {
11
+ tbody, .pb_table_tbody {
12
12
  [class^=pb_table_row_kit] {
13
13
  @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
14
14
  &[class*=_side_highlight_#{$color_name}] {
15
- td {
15
+ td, .pb_table_td {
16
16
  &:first-child {
17
17
  @include pb_table_row_kit_side_highlight($color_value);
18
18
  }
@@ -4,9 +4,9 @@
4
4
  max-width: 100vw;
5
5
  table-layout: fixed;
6
6
 
7
- tbody {
8
- tr {
9
- td {
7
+ tbody, .pb_table_tbody {
8
+ tr, .pb_table_tr {
9
+ td, .pb_table_td {
10
10
  white-space: nowrap;
11
11
  text-overflow: ellipsis;
12
12
 
@@ -20,7 +20,7 @@
20
20
  display: block !important;
21
21
  }
22
22
 
23
- br {
23
+ br, .pb_table_br {
24
24
  content:' ' !important;
25
25
 
26
26
  &::after {
@@ -2,7 +2,7 @@
2
2
 
3
3
  [class^="pb_table"] {
4
4
  &.sticky-header {
5
- thead {
5
+ thead, .pb_table_thead {
6
6
  background: $white;
7
7
  position: sticky;
8
8
  top: 0;
@@ -12,7 +12,7 @@
12
12
 
13
13
  &.dark {
14
14
  &.sticky-header {
15
- thead {
15
+ thead, .pb_table_thead {
16
16
  background: $bg_dark;
17
17
  position: sticky;
18
18
  top: 0;
@@ -1,7 +1,7 @@
1
1
  [class^=pb_table] {
2
2
  &.striped {
3
- tbody {
4
- tr:nth-child(odd) {
3
+ tbody, .pb_table_tbody {
4
+ tr:nth-child(odd), .tr:nth-child(odd) {
5
5
  background-color: $bg_light;
6
6
  }
7
7
  }
@@ -9,8 +9,8 @@
9
9
 
10
10
  &.dark {
11
11
  &.striped {
12
- tbody {
13
- tr:nth-child(odd) {
12
+ tbody, .pb_table_tbody {
13
+ tr:nth-child(odd), .tr:nth-child(odd) {
14
14
  background-color: $bg_dark;
15
15
  }
16
16
  }
@@ -1,12 +1,19 @@
1
1
  @import "../../tokens/colors";
2
2
 
3
3
  [class^=pb_table] {
4
+ display: table;
5
+
4
6
  @each $name, $value in $cell-pad-list {
5
7
  &.#{$name} {
6
8
  width: 100%;
7
- thead {
8
- tr {
9
- th {
9
+ thead, .pb_table_thead {
10
+ display: table-header-group;
11
+
12
+ tr, .pb_table_tr {
13
+ display: table-row;
14
+
15
+ th, .pb_table_th {
16
+ display: table-cell;
10
17
  padding: $cell-pad-md $cell-gutter;
11
18
 
12
19
  &:first-child {
@@ -18,9 +25,14 @@
18
25
  }
19
26
  }
20
27
  }
21
- tbody {
22
- tr {
23
- td {
28
+ tbody, .pb_table_tbody {
29
+ display: table-row-group;
30
+
31
+ tr, .pb_table_tr {
32
+ display: table-row;
33
+
34
+ td, .pb_table_td {
35
+ display: table-cell;
24
36
  border-color: $border_light;
25
37
  border-style: solid;
26
38
  border-width: 0 0 1px;
@@ -7,9 +7,9 @@
7
7
  border-spacing: 0;
8
8
  background: $white;
9
9
 
10
- thead {
11
- tr {
12
- th {
10
+ thead, .pb_table_thead {
11
+ tr, .pb_table_tr {
12
+ th, .pb_table_th {
13
13
  border-color: $border_light;
14
14
  border-style: solid;
15
15
  border-width: 1px 0 1px 0;
@@ -26,9 +26,9 @@
26
26
  }
27
27
  }
28
28
 
29
- tbody {
30
- tr {
31
- td {
29
+ tbody, .pb_table_tbody {
30
+ tr, .pb_table_tr {
31
+ td, .pb_table_td {
32
32
  border-color: $border_light;
33
33
  border-style: solid;
34
34
  border-width: 0 0 1px 0;
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  &:last-child {
45
- td {
45
+ td, .pb_table_td {
46
46
  border-width: 0 0 1px 0;
47
47
 
48
48
  &:first-child {
@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
7
7
  &.table-md,
8
8
  &.table-lg {
9
9
  &.table-dark {
10
- thead {
11
- tr {
10
+ thead, .pb_table_thead {
11
+ tr, .pb_table_tr {
12
12
  border-color: $border_dark !important;
13
13
 
14
- th {
14
+ th, .pb_table_th {
15
15
  border-color: $border_dark !important;
16
16
  color: $text_dk_light;
17
17
  }
18
18
  }
19
19
  }
20
- tbody {
21
- tr {
20
+ tbody, .pb_table_tbody {
21
+ tr, .pb_table_tr {
22
22
  border-color: $border_dark;
23
23
  transition: none !important;
24
24
 
25
- td {
25
+ td, .pb_table_td {
26
26
  border-color: $border_dark !important;
27
27
  color: $white;
28
28
 
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
31
31
  }
32
32
  }
33
33
  &:first-child {
34
- td {
34
+ td, .pb_table_td {
35
35
  border-top-width: 0 !important;
36
36
  }
37
37
  }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
54
54
  &.table-dark {
55
55
  background: none !important;
56
56
 
57
- tbody {
58
- tr {
59
- td {
57
+ tbody, .pb_table_tbody {
58
+ tr, .pb_table_tr {
59
+ td, .pb_table_td {
60
60
  background: $table-dark-card-bg !important;
61
61
  }
62
62
  }
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
64
64
  }
65
65
  }
66
66
  &.table-dark {
67
- tbody {
68
- tr {
69
- td {
67
+ tbody, .pb_table_tbody {
68
+ tr, .pb_table_tr {
69
+ td, .pb_table_td {
70
70
  &:first-child {
71
71
  border-top-color: $border_dark !important;
72
72
  }
73
73
  }
74
74
  &:first-child {
75
- td {
75
+ td, .pb_table_td {
76
76
  border-top-width: 1px !important;
77
77
  }
78
78
  }
@@ -10,7 +10,7 @@ $text_align_values: (
10
10
  );
11
11
 
12
12
  [class^=pb_table] {
13
- thead {
13
+ thead, .pb_table_thead {
14
14
  [class^=pb_table_header_kit] {
15
15
  @each $align_name, $align_value in $text_align_values {
16
16
  &[class*=_align_#{$align_name}] {
@@ -32,7 +32,7 @@ $text_align_values: (
32
32
  }
33
33
 
34
34
  [class^=pb_table] {
35
- thead {
35
+ thead, .pb_table_thead {
36
36
  [class^=pb_th_active] {
37
37
  color: $primary !important;
38
38
  }
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .pb_table_td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .pb_table_tbody {
102
+ tr, .pb_table_tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -1,13 +1,12 @@
1
1
  [class^=pb_table] {
2
2
  &.vertical-border {
3
- td,
4
- th {
3
+ td, th, .pb_table_td, .pb_table_th {
5
4
  border-right: 1px solid $border_light !important;
6
5
  }
7
6
 
8
7
  @media screen and (min-width: $screen-xs-min) {
9
- tr:hover {
10
- td:last-child {
8
+ tr:hover, .pb_table_tr:hover {
9
+ td:last-child, .pb_table_td:last-child {
11
10
  border-right-color: darken($border_light, 10%) !important;
12
11
  }
13
12
  }
@@ -1,9 +1,19 @@
1
1
  <%= content_tag(:div) do %>
2
- <%= content_tag(:table,
2
+ <% if object.tag == "table" %>
3
+ <%= content_tag(:table,
3
4
  aria: object.aria,
4
5
  class: object.classname,
5
6
  data: object.data,
6
7
  id: object.id) do %>
7
- <%= content.presence %>
8
+ <%= content.presence %>
9
+ <% end %>
10
+ <% else %>
11
+ <%= content_tag(:div,
12
+ aria: object.aria,
13
+ class: object.classname,
14
+ data: object.data,
15
+ id: object.id) do %>
16
+ <%= content.presence %>
17
+ <% end %>
8
18
  <% end %>
9
19
  <% end %>
@@ -27,6 +27,9 @@ module Playbook
27
27
  default: false
28
28
  prop :striped, type: Playbook::Props::Boolean,
29
29
  default: false
30
+ prop :tag, type: Playbook::Props::Enum,
31
+ values: %w[table div],
32
+ default: "table"
30
33
 
31
34
  def classname
32
35
  generate_classname(
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.19.0"
5
- VERSION = "13.19.0.pre.alpha.play1141iconkitusinglibrary2264"
5
+ VERSION = "13.20.0"
6
6
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.19.0.pre.alpha.play1141iconkitusinglibrary2264
4
+ version: 13.20.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-03-01 00:00:00.000000000 Z
12
+ date: 2024-03-05 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -2245,6 +2245,8 @@ files:
2245
2245
  - app/pb_kits/playbook/pb_table/docs/_table_data_table.md
2246
2246
  - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
2247
2247
  - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
2248
+ - app/pb_kits/playbook/pb_table/docs/_table_div.html.erb
2249
+ - app/pb_kits/playbook/pb_table/docs/_table_div.jsx
2248
2250
  - app/pb_kits/playbook/pb_table/docs/_table_header.html.erb
2249
2251
  - app/pb_kits/playbook/pb_table/docs/_table_header.md
2250
2252
  - app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
@@ -2849,7 +2851,7 @@ homepage: https://playbook.powerapp.cloud/
2849
2851
  licenses:
2850
2852
  - ISC
2851
2853
  metadata: {}
2852
- post_install_message:
2854
+ post_install_message:
2853
2855
  rdoc_options: []
2854
2856
  require_paths:
2855
2857
  - lib
@@ -2860,12 +2862,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2860
2862
  version: '0'
2861
2863
  required_rubygems_version: !ruby/object:Gem::Requirement
2862
2864
  requirements:
2863
- - - ">"
2865
+ - - ">="
2864
2866
  - !ruby/object:Gem::Version
2865
- version: 1.3.1
2867
+ version: '0'
2866
2868
  requirements: []
2867
2869
  rubygems_version: 3.3.7
2868
- signing_key:
2870
+ signing_key:
2869
2871
  specification_version: 4
2870
2872
  summary: Playbook Design System
2871
2873
  test_files: []