playbook_ui 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/_table.tsx +67 -99
- data/app/pb_kits/playbook/pb_table/_table_row.tsx +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +25 -24
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +8 -22
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -3
- data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
- data/app/pb_kits/playbook/pb_table/table.rb +0 -3
- data/app/pb_kits/playbook/pb_table/table.test.js +1 -142
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +39 -49
- data/app/pb_kits/playbook/pb_table/table_header.rb +1 -8
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +7 -17
- data/app/pb_kits/playbook/pb_table/table_row.rb +1 -8
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +3 -20
- data/app/pb_kits/playbook/pb_table/SubKits/_table_body.tsx +0 -64
- data/app/pb_kits/playbook/pb_table/SubKits/_table_cell.tsx +0 -66
- data/app/pb_kits/playbook/pb_table/SubKits/_table_head.tsx +0 -64
- data/app/pb_kits/playbook/pb_table/SubKits/_table_header.tsx +0 -66
- data/app/pb_kits/playbook/pb_table/SubKits/_table_row.tsx +0 -74
- data/app/pb_kits/playbook/pb_table/SubKits/index.tsx +0 -5
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +0 -47
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +0 -47
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +0 -48
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +0 -17
- data/app/pb_kits/playbook/pb_table/table_body.rb +0 -15
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +0 -17
- data/app/pb_kits/playbook/pb_table/table_cell.rb +0 -17
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +0 -17
- data/app/pb_kits/playbook/pb_table/table_head.rb +0 -15
@@ -10,21 +10,21 @@
|
|
10
10
|
width: 100%;
|
11
11
|
background: none !important;
|
12
12
|
|
13
|
-
thead
|
14
|
-
tr
|
13
|
+
thead {
|
14
|
+
tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th
|
19
|
+
th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody
|
26
|
-
tr
|
27
|
-
td
|
25
|
+
tbody {
|
26
|
+
tr {
|
27
|
+
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 {
|
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 {
|
78
|
+
tr {
|
79
|
+
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 {
|
102
|
+
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 {
|
112
|
+
tr {
|
113
|
+
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 {
|
14
|
+
tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th
|
19
|
+
th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody
|
26
|
-
tr
|
27
|
-
td
|
25
|
+
tbody {
|
26
|
+
tr {
|
27
|
+
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 {
|
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 {
|
78
|
+
tr {
|
79
|
+
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 {
|
102
|
+
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 {
|
112
|
+
tr {
|
113
|
+
td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -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 {
|
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 {
|
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 {
|
8
|
+
tr {
|
9
|
+
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 {
|
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 {
|
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 {
|
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 {
|
4
|
+
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 {
|
13
|
+
tr:nth-child(odd) {
|
14
14
|
background-color: $bg_dark;
|
15
15
|
}
|
16
16
|
}
|
@@ -1,19 +1,12 @@
|
|
1
1
|
@import "../../tokens/colors";
|
2
2
|
|
3
3
|
[class^=pb_table] {
|
4
|
-
display: table;
|
5
|
-
|
6
4
|
@each $name, $value in $cell-pad-list {
|
7
5
|
&.#{$name} {
|
8
6
|
width: 100%;
|
9
|
-
thead
|
10
|
-
|
11
|
-
|
12
|
-
tr, .pb_table_tr {
|
13
|
-
display: table-row;
|
14
|
-
|
15
|
-
th, .pb_table_th {
|
16
|
-
display: table-cell;
|
7
|
+
thead {
|
8
|
+
tr {
|
9
|
+
th {
|
17
10
|
padding: $cell-pad-md $cell-gutter;
|
18
11
|
|
19
12
|
&:first-child {
|
@@ -25,14 +18,9 @@
|
|
25
18
|
}
|
26
19
|
}
|
27
20
|
}
|
28
|
-
tbody
|
29
|
-
|
30
|
-
|
31
|
-
tr, .pb_table_tr {
|
32
|
-
display: table-row;
|
33
|
-
|
34
|
-
td, .pb_table_td {
|
35
|
-
display: table-cell;
|
21
|
+
tbody {
|
22
|
+
tr {
|
23
|
+
td {
|
36
24
|
border-color: $border_light;
|
37
25
|
border-style: solid;
|
38
26
|
border-width: 0 0 1px;
|
@@ -48,8 +36,7 @@
|
|
48
36
|
}
|
49
37
|
}
|
50
38
|
&.data_table {
|
51
|
-
thead tr th
|
52
|
-
.pb_table_thead .pb_table_tr .pb_table_th {
|
39
|
+
thead tr th {
|
53
40
|
padding-top: $cell-pad-sm;
|
54
41
|
padding-bottom: $cell-pad-sm;
|
55
42
|
&:first-child {
|
@@ -59,8 +46,7 @@
|
|
59
46
|
padding-right: $cell-pad-sm;
|
60
47
|
}
|
61
48
|
}
|
62
|
-
tbody tr td
|
63
|
-
.pb_table_tbody .pb_table_tr .pb_table_td {
|
49
|
+
tbody tr td {
|
64
50
|
padding-top: $cell-pad-sm;
|
65
51
|
padding-bottom: $cell-pad-sm;
|
66
52
|
&:first-child {
|
@@ -7,9 +7,9 @@
|
|
7
7
|
border-spacing: 0;
|
8
8
|
background: $white;
|
9
9
|
|
10
|
-
thead
|
11
|
-
tr
|
12
|
-
th
|
10
|
+
thead {
|
11
|
+
tr {
|
12
|
+
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 {
|
30
|
+
tr {
|
31
|
+
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 {
|
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 {
|
11
|
+
tr {
|
12
12
|
border-color: $border_dark !important;
|
13
13
|
|
14
|
-
th
|
14
|
+
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 {
|
21
|
+
tr {
|
22
22
|
border-color: $border_dark;
|
23
23
|
transition: none !important;
|
24
24
|
|
25
|
-
td
|
25
|
+
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 {
|
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 {
|
58
|
+
tr {
|
59
|
+
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 {
|
68
|
+
tr {
|
69
|
+
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 {
|
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 {
|
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 {
|
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 {
|
14
|
+
tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th
|
19
|
+
th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody
|
26
|
-
tr
|
27
|
-
td
|
25
|
+
tbody {
|
26
|
+
tr {
|
27
|
+
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 {
|
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 {
|
78
|
+
tr {
|
79
|
+
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 {
|
102
|
+
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 {
|
112
|
+
tr {
|
113
|
+
td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -1,12 +1,13 @@
|
|
1
1
|
[class^=pb_table] {
|
2
2
|
&.vertical-border {
|
3
|
-
td,
|
3
|
+
td,
|
4
|
+
th {
|
4
5
|
border-right: 1px solid $border_light !important;
|
5
6
|
}
|
6
7
|
|
7
8
|
@media screen and (min-width: $screen-xs-min) {
|
8
|
-
tr:hover
|
9
|
-
td:last-child
|
9
|
+
tr:hover {
|
10
|
+
td:last-child {
|
10
11
|
border-right-color: darken($border_light, 10%) !important;
|
11
12
|
}
|
12
13
|
}
|
@@ -1,19 +1,9 @@
|
|
1
1
|
<%= content_tag(:div) do %>
|
2
|
-
|
3
|
-
<%= content_tag(:table,
|
2
|
+
<%= content_tag(:table,
|
4
3
|
aria: object.aria,
|
5
4
|
class: object.classname,
|
6
5
|
data: object.data,
|
7
6
|
id: object.id) do %>
|
8
|
-
|
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 %>
|
7
|
+
<%= content.presence %>
|
18
8
|
<% end %>
|
19
9
|
<% end %>
|