playbook_ui 13.4.0 → 13.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
- data/app/pb_kits/playbook/pb_background/background.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +38 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +112 -47
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +2 -2
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3fbde0c47559510e98e402f39e88e8eee92d920fe6316a10cf69edd6433c593d
|
|
4
|
+
data.tar.gz: 528eb97cc4627c05a97fdc42c44e2b306481fe8467f9abf38dd135e95916c5a1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 476c5d3b3afc10856fad58a4a417b9124a45bce23ac7af0987fb94e7e5987785786472c35b35a8fe8c1acb8db6c5c040c423f29886c26a0dd8ec7c7ea2baf072
|
|
7
|
+
data.tar.gz: ae782bd74d7a7cf8ee5f88a804079742e28044fc0f7228b1243292711c1d40bf6c8f54c2ed004bc8994321183d35efe7e975c867a99e5baba781f939d8eb76e9
|
|
@@ -25,7 +25,7 @@ type BackgroundProps = {
|
|
|
25
25
|
id?: string,
|
|
26
26
|
imageUrl?: string,
|
|
27
27
|
padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
|
|
28
|
-
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
|
|
28
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
|
|
29
29
|
transition?: 'fade' | 'blur' | 'scale',
|
|
30
30
|
} & GlobalProps
|
|
31
31
|
|
|
@@ -92,7 +92,7 @@ module Playbook
|
|
|
92
92
|
prop :image_url
|
|
93
93
|
|
|
94
94
|
prop :tag, type: Playbook::Props::Enum,
|
|
95
|
-
values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
|
|
95
|
+
values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
|
|
96
96
|
default: "div"
|
|
97
97
|
|
|
98
98
|
prop :transition, type: Playbook::Props::Enum,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
You can individually align a
|
|
1
|
+
You can individually align a piece of table data, but a more practical use would be applied to align a column.
|
|
2
2
|
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
You can individually shift a
|
|
1
|
+
You can individually shift a piece of table data, or shift an entire column.
|
|
2
2
|
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
|
|
@@ -38,4 +38,41 @@
|
|
|
38
38
|
<td>Value 3</td>
|
|
39
39
|
</tr>
|
|
40
40
|
</tbody>
|
|
41
|
-
<% end %>
|
|
41
|
+
<% end %>
|
|
42
|
+
|
|
43
|
+
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
|
|
44
|
+
<colgroup>
|
|
45
|
+
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
|
|
46
|
+
<%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
|
|
47
|
+
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
|
|
48
|
+
</colgroup>
|
|
49
|
+
<%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
|
|
50
|
+
<tr>
|
|
51
|
+
<th>Column 1</th>
|
|
52
|
+
<th>Column 2</th>
|
|
53
|
+
<th>Column 3</th>
|
|
54
|
+
</tr>
|
|
55
|
+
<% end %>
|
|
56
|
+
<tbody>
|
|
57
|
+
<tr>
|
|
58
|
+
<td>Value 1</td>
|
|
59
|
+
<td>Value 2</td>
|
|
60
|
+
<td>Value 3</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>Value 1</td>
|
|
64
|
+
<td>Value 2</td>
|
|
65
|
+
<td>Value 3</td>
|
|
66
|
+
</tr>
|
|
67
|
+
<tr>
|
|
68
|
+
<td>Value 1</td>
|
|
69
|
+
<td>Value 2</td>
|
|
70
|
+
<td>Value 3</td>
|
|
71
|
+
</tr>
|
|
72
|
+
<tr>
|
|
73
|
+
<td>Value 1</td>
|
|
74
|
+
<td>Value 2</td>
|
|
75
|
+
<td>Value 3</td>
|
|
76
|
+
</tr>
|
|
77
|
+
</tbody>
|
|
78
|
+
<% end %>
|
|
@@ -6,57 +6,122 @@ import Background from "../../pb_background/_background"
|
|
|
6
6
|
const TableWithBackgroundKit = (props) => {
|
|
7
7
|
return (
|
|
8
8
|
<div>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
9
|
+
<div>
|
|
10
|
+
<Table
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<thead>
|
|
14
|
+
<tr>
|
|
15
|
+
<th>{'Column 1'}</th>
|
|
16
|
+
<th>{'Column 2'}</th>
|
|
17
|
+
<th>{'Column 3'}</th>
|
|
18
|
+
</tr>
|
|
19
|
+
</thead>
|
|
20
|
+
<tbody>
|
|
21
|
+
<tr>
|
|
22
|
+
<td>{'Value 1'}</td>
|
|
23
|
+
<td>{'Value 2'}</td>
|
|
24
|
+
<td>{'Value 3'}</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<Background
|
|
27
|
+
backgroundColor="error_subtle"
|
|
28
|
+
tag='tr'
|
|
29
|
+
>
|
|
30
|
+
<td>{'Value 1'}</td>
|
|
31
|
+
<td>{'Value 2'}</td>
|
|
32
|
+
<td>{'Value 3'}</td>
|
|
33
|
+
</Background>
|
|
34
|
+
<tr>
|
|
35
|
+
<td>{'Value 1'}</td>
|
|
36
|
+
<td>{'Value 2'}</td>
|
|
37
|
+
<td>{'Value 3'}</td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<td>{'Value 1'}</td>
|
|
41
|
+
<td>{'Value 2'}</td>
|
|
42
|
+
<td>{'Value 3'}</td>
|
|
43
|
+
</tr>
|
|
44
|
+
<Background
|
|
45
|
+
backgroundColor="warning_subtle"
|
|
46
|
+
tag='tr'
|
|
47
|
+
>
|
|
48
|
+
<td>{'Value 1'}</td>
|
|
49
|
+
<td>{'Value 2'}</td>
|
|
50
|
+
<td>{'Value 3'}</td>
|
|
51
|
+
</Background>
|
|
52
|
+
<tr>
|
|
53
|
+
<td>{'Value 1'}</td>
|
|
54
|
+
<td>{'Value 2'}</td>
|
|
55
|
+
<td>{'Value 3'}</td>
|
|
56
|
+
</tr>
|
|
57
|
+
</tbody>
|
|
58
|
+
</Table>
|
|
59
|
+
</div>
|
|
60
|
+
<div>
|
|
61
|
+
<Table
|
|
62
|
+
paddingTop="sm"
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<colgroup>
|
|
66
|
+
<Background
|
|
67
|
+
backgroundColor="error_subtle"
|
|
68
|
+
tag='col'
|
|
69
|
+
/>
|
|
70
|
+
<Background
|
|
71
|
+
backgroundColor="card_light"
|
|
72
|
+
tag='col'
|
|
73
|
+
/>
|
|
74
|
+
<Background
|
|
75
|
+
backgroundColor="warning_subtle"
|
|
76
|
+
tag='col'
|
|
77
|
+
/>
|
|
78
|
+
</colgroup>
|
|
25
79
|
<Background
|
|
26
|
-
backgroundColor="
|
|
27
|
-
tag='
|
|
80
|
+
backgroundColor="card_light"
|
|
81
|
+
tag='thead'
|
|
28
82
|
>
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
83
|
+
<tr>
|
|
84
|
+
<th>{'Column 1'}</th>
|
|
85
|
+
<th>{'Column 2'}</th>
|
|
86
|
+
<th>{'Column 3'}</th>
|
|
87
|
+
</tr>
|
|
32
88
|
</Background>
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
89
|
+
<tbody>
|
|
90
|
+
<tr>
|
|
91
|
+
<td>{'Value 1'}</td>
|
|
92
|
+
<td>{'Value 2'}</td>
|
|
93
|
+
<td>{'Value 3'}</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td>{'Value 1'}</td>
|
|
97
|
+
<td>{'Value 2'}</td>
|
|
98
|
+
<td>{'Value 3'}</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td>{'Value 1'}</td>
|
|
102
|
+
<td>{'Value 2'}</td>
|
|
103
|
+
<td>{'Value 3'}</td>
|
|
104
|
+
</tr>
|
|
105
|
+
<tr>
|
|
106
|
+
<td>{'Value 1'}</td>
|
|
107
|
+
<td>{'Value 2'}</td>
|
|
108
|
+
<td>{'Value 3'}</td>
|
|
109
|
+
</tr>
|
|
110
|
+
<tr>
|
|
111
|
+
<td>{'Value 1'}</td>
|
|
112
|
+
<td>{'Value 2'}</td>
|
|
113
|
+
<td>{'Value 3'}</td>
|
|
114
|
+
</tr>
|
|
115
|
+
<tr>
|
|
116
|
+
<td>{'Value 1'}</td>
|
|
117
|
+
<td>{'Value 2'}</td>
|
|
118
|
+
<td>{'Value 3'}</td>
|
|
119
|
+
</tr>
|
|
120
|
+
</tbody>
|
|
121
|
+
</Table>
|
|
122
|
+
</div>
|
|
58
123
|
</div>
|
|
59
124
|
)
|
|
60
125
|
}
|
|
61
126
|
|
|
62
|
-
export default TableWithBackgroundKit
|
|
127
|
+
export default TableWithBackgroundKit
|