playbook_ui 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2305 → 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2342
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/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +7 -11
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +15 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -45
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +2 -2
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +4 -2
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
- data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
- data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
- data/dist/playbook-rails.js +3 -3
- data/lib/playbook/version.rb +1 -1
- metadata +13 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cbe0a0d0edc14c654d38100f3a58f0b9c8c7529fe28014bf9459540abab33d8d
|
|
4
|
+
data.tar.gz: ce1e28ca286c04c064c40bc20e3fcb96472c1ae97e22fd3f7d75dd773911b4d3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 205385f86e7d6bbbb59f3ca6ad4d0796dfdc593453de54f169e8393e0d37605580ea4f26839c09084f3043022d4d9b42811a151c55cb680edb9e3c8339752dc4
|
|
7
|
+
data.tar.gz: 472fe0ef8288273f5058c2e60106943b46bbb7fa9954a48d6f00bc78406ed7fa9393f1f768424167c541ea62700767e7cc8d02ec43b4c2050222900ecac28734
|
|
@@ -36,6 +36,8 @@ $confirmation_toast_colors: (
|
|
|
36
36
|
z-index: $z_9;
|
|
37
37
|
display: flex;
|
|
38
38
|
justify-content: space-around;
|
|
39
|
+
max-width: max-content;
|
|
40
|
+
width: 90%;
|
|
39
41
|
|
|
40
42
|
&.top {
|
|
41
43
|
top: $space_md;
|
|
@@ -56,14 +58,6 @@ $confirmation_toast_colors: (
|
|
|
56
58
|
transform: translateX(-50%);
|
|
57
59
|
}
|
|
58
60
|
|
|
59
|
-
@media only screen and (max-width: 600px) {
|
|
60
|
-
&.center {
|
|
61
|
-
left: 5%;
|
|
62
|
-
right: 5%;
|
|
63
|
-
transform: translateX(-0%);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
61
|
&.right {
|
|
68
62
|
left: auto;
|
|
69
63
|
right: $space_md;
|
|
@@ -90,9 +84,11 @@ $confirmation_toast_colors: (
|
|
|
90
84
|
|
|
91
85
|
&[class*=_multi_line] .pb_fixed_confirmation_toast_text {
|
|
92
86
|
color: $white;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
display: -webkit-box;
|
|
89
|
+
-webkit-line-clamp: 3;
|
|
90
|
+
-webkit-box-orient: vertical;
|
|
91
|
+
white-space: normal;
|
|
96
92
|
}
|
|
97
93
|
}
|
|
98
94
|
}
|
|
@@ -1,9 +1,22 @@
|
|
|
1
|
-
<%= pb_rails("button", props: { text: "Multiline
|
|
1
|
+
<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-short" } }) %>
|
|
2
2
|
|
|
3
3
|
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
4
4
|
classname: "toast-to-hide",
|
|
5
5
|
closeable: true,
|
|
6
|
-
id: "toast-top-center-multi",
|
|
6
|
+
id: "toast-top-center-multi-short",
|
|
7
|
+
multi_line: true,
|
|
8
|
+
text: "Multi-line is used when the given text will not fit on one line.",
|
|
9
|
+
status: "tip",
|
|
10
|
+
vertical: "top",
|
|
11
|
+
horizontal: "center"
|
|
12
|
+
}) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-long" } }) %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
17
|
+
classname: "toast-to-hide",
|
|
18
|
+
closeable: true,
|
|
19
|
+
id: "toast-top-center-multi-long",
|
|
7
20
|
multi_line: true,
|
|
8
21
|
text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
|
|
9
22
|
status: "tip",
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
CHANGED
|
@@ -1,52 +1,69 @@
|
|
|
1
|
-
|
|
2
1
|
import React, { useState } from 'react'
|
|
3
2
|
|
|
4
3
|
import Button from '../../pb_button/_button'
|
|
5
4
|
import FixedConfirmationToast from '../_fixed_confirmation_toast'
|
|
6
5
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
6
|
+
const FixedConfirmationToastMultiLine = (props) => {
|
|
7
|
+
|
|
8
|
+
const [openShort, setOpenShort] = useState(false)
|
|
9
|
+
const [openLong, setOpenLong] = useState(false)
|
|
10
|
+
|
|
11
|
+
const handleClickShort = () => {
|
|
12
|
+
setOpenShort(true)
|
|
13
|
+
}
|
|
14
|
+
const handleClickLong= () => {
|
|
15
|
+
setOpenLong(true)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const handleCloseShort = () => {
|
|
19
|
+
setOpenShort(false)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const handleCloseLong= () => {
|
|
23
|
+
setOpenLong(false)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<>
|
|
28
|
+
<Button
|
|
29
|
+
onClick={handleClickShort}
|
|
30
|
+
text="Short Multiline"
|
|
31
|
+
variant="secondary"
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
{' '}
|
|
35
|
+
<Button
|
|
36
|
+
onClick={handleClickLong}
|
|
37
|
+
text="Long Multiline"
|
|
38
|
+
variant="secondary"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
|
|
42
|
+
<FixedConfirmationToast
|
|
43
|
+
closeable
|
|
44
|
+
horizontal='center'
|
|
45
|
+
multiLine
|
|
46
|
+
onClose={handleCloseShort}
|
|
47
|
+
open={openShort}
|
|
48
|
+
status='tip'
|
|
49
|
+
text='Multi-line is used when the given text will not fit on one line.'
|
|
50
|
+
vertical='top'
|
|
51
|
+
{...props}
|
|
52
|
+
/>
|
|
53
|
+
|
|
54
|
+
<FixedConfirmationToast
|
|
55
|
+
closeable
|
|
56
|
+
horizontal='center'
|
|
57
|
+
multiLine
|
|
58
|
+
onClose={handleCloseLong}
|
|
59
|
+
open={openLong}
|
|
60
|
+
status='tip'
|
|
61
|
+
text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
|
|
62
|
+
vertical='top'
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
</>
|
|
66
|
+
)
|
|
50
67
|
}
|
|
51
68
|
|
|
52
|
-
export default
|
|
69
|
+
export default FixedConfirmationToastMultiLine
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
<% if content %>
|
|
9
9
|
<%= content %>
|
|
10
10
|
<% elsif object.show_text? %>
|
|
11
|
-
<%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
|
|
11
|
+
<%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
|
|
12
12
|
<% end %>
|
|
13
13
|
|
|
14
|
-
<%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
|
|
14
|
+
<%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
|
|
15
15
|
<% end %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head") do %>
|
|
3
|
+
<%= pb_rails("table/table_row") do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body") do %>
|
|
12
|
+
<%= pb_rails("table/table_row") do %>
|
|
13
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("table/table_row") do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<%= pb_rails("table/table_row") do %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head", props: {tag:"div"}) do %>
|
|
3
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body", props: {tag:"div"}) do %>
|
|
12
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
13
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components.
|
|
2
|
+
|
|
3
|
+
*NOTE: The `tag` prop defaults to `table`, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.
|
|
@@ -25,6 +25,9 @@ examples:
|
|
|
25
25
|
- table_with_background_kit: Table With Background Kit
|
|
26
26
|
- table_vertical_border: Vertical Borders
|
|
27
27
|
- table_striped: Striped Table
|
|
28
|
+
- table_with_subcomponents: Table with Sub Components (Table Elements)
|
|
29
|
+
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
30
|
+
|
|
28
31
|
|
|
29
32
|
react:
|
|
30
33
|
# - table_div: Div
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[class^=pb_table] {
|
|
2
2
|
&.striped {
|
|
3
3
|
tbody, .pb_table_tbody {
|
|
4
|
-
tr:nth-child(odd), .
|
|
4
|
+
tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
|
|
5
5
|
background-color: $bg_light;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
&.dark {
|
|
11
11
|
&.striped {
|
|
12
12
|
tbody, .pb_table_tbody {
|
|
13
|
-
tr:nth-child(odd), .
|
|
13
|
+
tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
|
|
14
14
|
background-color: $bg_dark;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
&.data_table {
|
|
51
|
-
thead tr th
|
|
51
|
+
thead tr th,
|
|
52
|
+
.pb_table_thead .pb_table_tr .pb_table_th {
|
|
52
53
|
padding-top: $cell-pad-sm;
|
|
53
54
|
padding-bottom: $cell-pad-sm;
|
|
54
55
|
&:first-child {
|
|
@@ -58,7 +59,8 @@
|
|
|
58
59
|
padding-right: $cell-pad-sm;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
|
-
tbody tr td
|
|
62
|
+
tbody tr td,
|
|
63
|
+
.pb_table_tbody .pb_table_tr .pb_table_td {
|
|
62
64
|
padding-top: $cell-pad-sm;
|
|
63
65
|
padding-bottom: $cell-pad-sm;
|
|
64
66
|
&:first-child {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<% if object.tag == "table" %>
|
|
2
|
+
<%= content_tag(:tbody,
|
|
3
|
+
aria: object.aria,
|
|
4
|
+
class: object.classname,
|
|
5
|
+
data: object.data,
|
|
6
|
+
id: object.id) do %>
|
|
7
|
+
<%= content.presence %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% else %>
|
|
10
|
+
<%= content_tag(:div,
|
|
11
|
+
aria: object.aria,
|
|
12
|
+
class: object.classname,
|
|
13
|
+
data: object.data,
|
|
14
|
+
id: object.id) do %>
|
|
15
|
+
<%= content.presence %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbTable
|
|
5
|
+
class TableBody < Playbook::KitBase
|
|
6
|
+
prop :tag, type: Playbook::Props::Enum,
|
|
7
|
+
values: %w[table div],
|
|
8
|
+
default: "table"
|
|
9
|
+
|
|
10
|
+
def classname
|
|
11
|
+
generate_classname("pb_table_tbody")
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
end
|
|
15
|
+
end
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<% if object.tag == "table" %>
|
|
2
|
+
<%= content_tag(:td,
|
|
3
|
+
aria: object.aria,
|
|
4
|
+
class: object.classname,
|
|
5
|
+
data: object.data,
|
|
6
|
+
id: object.id) do %>
|
|
7
|
+
<%= content.presence || object.text %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% else %>
|
|
10
|
+
<%= content_tag(:div,
|
|
11
|
+
aria: object.aria,
|
|
12
|
+
class: object.classname,
|
|
13
|
+
data: object.data,
|
|
14
|
+
id: object.id) do %>
|
|
15
|
+
<%= content.presence || object.text %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbTable
|
|
5
|
+
class TableCell < Playbook::KitBase
|
|
6
|
+
prop :tag, type: Playbook::Props::Enum,
|
|
7
|
+
values: %w[table div],
|
|
8
|
+
default: "table"
|
|
9
|
+
prop :text, type: Playbook::Props::String,
|
|
10
|
+
default: ""
|
|
11
|
+
|
|
12
|
+
def classname
|
|
13
|
+
generate_classname("pb_table_td")
|
|
14
|
+
end
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<% if object.tag == "table" %>
|
|
2
|
+
<%= content_tag(:thead,
|
|
3
|
+
aria: object.aria,
|
|
4
|
+
class: object.classname,
|
|
5
|
+
data: object.data,
|
|
6
|
+
id: object.id) do %>
|
|
7
|
+
<%= content.presence %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% else %>
|
|
10
|
+
<%= content_tag(:div,
|
|
11
|
+
aria: object.aria,
|
|
12
|
+
class: object.classname,
|
|
13
|
+
data: object.data,
|
|
14
|
+
id: object.id) do %>
|
|
15
|
+
<%= content.presence %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbTable
|
|
5
|
+
class TableHead < Playbook::KitBase
|
|
6
|
+
prop :tag, type: Playbook::Props::Enum,
|
|
7
|
+
values: %w[table div],
|
|
8
|
+
default: "table"
|
|
9
|
+
|
|
10
|
+
def classname
|
|
11
|
+
generate_classname("pb_table_thead")
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
end
|
|
15
|
+
end
|
|
@@ -1,47 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<%=
|
|
10
|
-
<% end %>
|
|
11
|
-
<% else %>
|
|
12
|
-
<%= link_to next_link, style: link_style do %>
|
|
13
|
-
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
|
|
1
|
+
<% if object.tag == "table" %>
|
|
2
|
+
<%= content_tag(:th,
|
|
3
|
+
colspan: object.colspan,
|
|
4
|
+
aria: object.aria,
|
|
5
|
+
class: object.classname,
|
|
6
|
+
data: object.data,
|
|
7
|
+
id: "pb-th#{object.id}" ) do %>
|
|
8
|
+
<% unless sorting_style? %>
|
|
9
|
+
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
|
|
14
10
|
<%= content.presence || object.text %>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
<% end %>
|
|
12
|
+
<% else %>
|
|
13
|
+
<%= link_to next_link, style: link_style do %>
|
|
14
|
+
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
|
|
15
|
+
<%= content.presence || object.text %>
|
|
16
|
+
<% if sorting_style? %>
|
|
17
|
+
<%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
|
|
18
|
+
fixed_width: true,
|
|
19
|
+
classname: active_item.any? ? "pb_th_active" : "",
|
|
20
|
+
padding_left: "xs" }) %>
|
|
21
|
+
<% end %>
|
|
20
22
|
<% end %>
|
|
21
23
|
<% end %>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
24
|
+
<% if use_dropdown_select %>
|
|
25
|
+
<%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
|
|
26
|
+
close_on_click: "outside",
|
|
27
|
+
trigger_element_id: "pb-th#{object.id}",
|
|
28
|
+
tooltip_id: "sort-filter-btn-tooltip#{object.id}",
|
|
29
|
+
position: object.placement ,
|
|
30
|
+
padding: 'none'}) do %>
|
|
31
|
+
<%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
|
|
32
|
+
<% object.sort_items.each do |sort_item| %>
|
|
33
|
+
<% item = active_or_first_item(sort_items_for(sort_item)) %>
|
|
34
|
+
<%= pb_rails("nav/item", props: {
|
|
35
|
+
text: item[:item],
|
|
36
|
+
link: next_link(sort_item: sort_item),
|
|
37
|
+
highlighted_border: false,
|
|
38
|
+
padding: "xs",
|
|
39
|
+
icon_right: sort_icon(item[:direction], item[:active]),
|
|
40
|
+
active: item[:active],
|
|
41
|
+
classname: "header_nav_item"
|
|
42
|
+
}) %>
|
|
43
|
+
<% end %>
|
|
42
44
|
<% end %>
|
|
43
45
|
<% end %>
|
|
44
46
|
<% end %>
|
|
45
47
|
<% end %>
|
|
46
48
|
<% end %>
|
|
47
|
-
<%
|
|
49
|
+
<% else %>
|
|
50
|
+
<%= content_tag(:div,
|
|
51
|
+
aria: object.aria,
|
|
52
|
+
class: object.classname,
|
|
53
|
+
data: object.data,
|
|
54
|
+
id: object.id) do %>
|
|
55
|
+
<%= content.presence || object.text %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
@@ -23,9 +23,16 @@ module Playbook
|
|
|
23
23
|
default: ""
|
|
24
24
|
prop :sort_dropdown, type: Playbook::Props::Boolean,
|
|
25
25
|
default: false
|
|
26
|
+
prop :tag, type: Playbook::Props::Enum,
|
|
27
|
+
values: %w[table div],
|
|
28
|
+
default: "table"
|
|
26
29
|
|
|
27
30
|
def classname
|
|
28
|
-
generate_classname("pb_table_header_kit", align_class)
|
|
31
|
+
generate_classname("pb_table_header_kit", align_class) + tag_class
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
def tag_class
|
|
35
|
+
" pb_table_th"
|
|
29
36
|
end
|
|
30
37
|
|
|
31
38
|
def align_class
|
|
@@ -1,7 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
<% if object.tag == "table" %>
|
|
2
|
+
<%= content_tag(:tr,
|
|
3
|
+
aria: object.aria,
|
|
4
|
+
class: object.classname,
|
|
5
|
+
data: object.data,
|
|
6
|
+
id: object.id) do %>
|
|
7
|
+
<%= content.presence %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% else %>
|
|
10
|
+
<%= content_tag(:div,
|
|
11
|
+
aria: object.aria,
|
|
12
|
+
class: object.classname,
|
|
13
|
+
data: object.data,
|
|
14
|
+
id: object.id) do %>
|
|
15
|
+
<%= content.presence %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -5,14 +5,21 @@ module Playbook
|
|
|
5
5
|
class TableRow < Playbook::KitBase
|
|
6
6
|
prop :side_highlight_color, type: Playbook::Props::String,
|
|
7
7
|
default: "none"
|
|
8
|
+
prop :tag, type: Playbook::Props::Enum,
|
|
9
|
+
values: %w[table div],
|
|
10
|
+
default: "table"
|
|
8
11
|
|
|
9
12
|
def classname
|
|
10
|
-
generate_classname("pb_table_row_kit", side_highlight_class)
|
|
13
|
+
generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
|
|
11
14
|
end
|
|
12
15
|
|
|
13
16
|
def side_highlight_class
|
|
14
17
|
side_highlight_color.present? ? "side_highlight_#{side_highlight_color}" : nil
|
|
15
18
|
end
|
|
19
|
+
|
|
20
|
+
def tag_class
|
|
21
|
+
" pb_table_tr"
|
|
22
|
+
end
|
|
16
23
|
end
|
|
17
24
|
end
|
|
18
25
|
end
|