playbook_ui_docs 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2306 → 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/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_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_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-doc.js +4 -4
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2bf2a6fbdf1df7d8880e725378565e87c9be8fbf72ec36b443ca2d3ef3682623
|
|
4
|
+
data.tar.gz: adb2241f70e688036e2ea3a102f720ea6e5430123478420912a360a275969e94
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 209def633f30078d76898bb19b2e05197f2239f754400d7982b8eb70dc71c1df282105078b1c81d476f659307074b695ceb088f77e0ba6c7cf1013bcdf816c1d
|
|
7
|
+
data.tar.gz: 3a408e1ca64672cd6c3f2c9e0103125e97b01112ecf27a9eed255b600c6054f031e8443da1ec9d85b6fbf50d04891c7b50ee28c9d94331bfc4729c1e5cbbb57d
|
|
@@ -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
|
|
@@ -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
|
|
@@ -58,6 +58,16 @@ const TextInputAddOn = (props) => {
|
|
|
58
58
|
{...props}
|
|
59
59
|
/>
|
|
60
60
|
</div>
|
|
61
|
+
<div>
|
|
62
|
+
<TextInput
|
|
63
|
+
addOn={{ icon: 'frog', alignment: 'right', border: true }}
|
|
64
|
+
label="Right-Aligned Add On With Child Input"
|
|
65
|
+
onChange={handleUpdateFourthInput}
|
|
66
|
+
{...props}
|
|
67
|
+
>
|
|
68
|
+
<input />
|
|
69
|
+
</TextInput>
|
|
70
|
+
</div>
|
|
61
71
|
<div>
|
|
62
72
|
<TextInput
|
|
63
73
|
addOn={{ icon: 'percent', alignment: 'left', border: false }}
|
|
@@ -76,6 +86,16 @@ const TextInputAddOn = (props) => {
|
|
|
76
86
|
{...props}
|
|
77
87
|
/>
|
|
78
88
|
</div>
|
|
89
|
+
<div>
|
|
90
|
+
<TextInput
|
|
91
|
+
addOn={{ icon: 'frog', alignment: 'left', border: true }}
|
|
92
|
+
label="Left-Aligned Add On With Child Input"
|
|
93
|
+
onChange={handleUpdateFourthInput}
|
|
94
|
+
{...props}
|
|
95
|
+
>
|
|
96
|
+
<input />
|
|
97
|
+
</TextInput>
|
|
98
|
+
</div>
|
|
79
99
|
</>
|
|
80
100
|
)
|
|
81
101
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
```swift
|
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
|
5
|
+
PBUser(
|
|
6
|
+
name: name,
|
|
7
|
+
|
|
8
|
+
image: img,
|
|
9
|
+
size: .small,
|
|
10
|
+
territory: "PHL",
|
|
11
|
+
title: title,
|
|
12
|
+
status: .online
|
|
13
|
+
)
|
|
14
|
+
PBUser(
|
|
15
|
+
name: name,
|
|
16
|
+
image: img,
|
|
17
|
+
territory: "PHL",
|
|
18
|
+
title: title,
|
|
19
|
+
status: .away
|
|
20
|
+
)
|
|
21
|
+
PBUser(
|
|
22
|
+
name: name,
|
|
23
|
+
image: img,
|
|
24
|
+
size: .large,
|
|
25
|
+
territory: "PHL",
|
|
26
|
+
title: title,
|
|
27
|
+
status: .offline
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
```
|
|
@@ -7,4 +7,5 @@
|
|
|
7
7
|
| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
|
|
8
8
|
| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
|
|
9
9
|
| **territory** | `String` | Adds the User's territory | | |
|
|
10
|
-
| **title** | `String` | Adds a title | | |
|
|
10
|
+
| **title** | `String` | Adds a title | | |
|
|
11
|
+
| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
|