playbook_ui_docs 13.20.0 → 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438
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_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
- data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -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.jsx +48 -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/_table_with_subcomponents_rails.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -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 +10 -10
- metadata +15 -7
|
@@ -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,48 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Table from '../_table'
|
|
4
|
+
|
|
5
|
+
const TableWithSubcomponentsAsDivs = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<Table
|
|
8
|
+
size="sm"
|
|
9
|
+
tag="div"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<Table.Head tag="div">
|
|
13
|
+
<Table.Row tag="div">
|
|
14
|
+
<Table.Header tag="div">{'Column 1'}</Table.Header>
|
|
15
|
+
<Table.Header tag="div">{'Column 2'}</Table.Header>
|
|
16
|
+
<Table.Header tag="div">{'Column 3'}</Table.Header>
|
|
17
|
+
<Table.Header tag="div">{'Column 4'}</Table.Header>
|
|
18
|
+
<Table.Header tag="div">{'Column 5'}</Table.Header>
|
|
19
|
+
</Table.Row>
|
|
20
|
+
</Table.Head>
|
|
21
|
+
<Table.Body tag="div">
|
|
22
|
+
<Table.Row tag="div">
|
|
23
|
+
<Table.Cell tag="div">{'Value 1'}</Table.Cell>
|
|
24
|
+
<Table.Cell tag="div">{'Value 2'}</Table.Cell>
|
|
25
|
+
<Table.Cell tag="div">{'Value 3'}</Table.Cell>
|
|
26
|
+
<Table.Cell tag="div">{'Value 4'}</Table.Cell>
|
|
27
|
+
<Table.Cell tag="div">{'Value 5'}</Table.Cell>
|
|
28
|
+
</Table.Row>
|
|
29
|
+
<Table.Row tag="div">
|
|
30
|
+
<Table.Cell tag="div">{'Value 1'}</Table.Cell>
|
|
31
|
+
<Table.Cell tag="div">{'Value 2'}</Table.Cell>
|
|
32
|
+
<Table.Cell tag="div">{'Value 3'}</Table.Cell>
|
|
33
|
+
<Table.Cell tag="div">{'Value 4'}</Table.Cell>
|
|
34
|
+
<Table.Cell tag="div">{'Value 5'}</Table.Cell>
|
|
35
|
+
</Table.Row>
|
|
36
|
+
<Table.Row>
|
|
37
|
+
<Table.Cell tag="div">{'Value 1'}</Table.Cell>
|
|
38
|
+
<Table.Cell tag="div">{'Value 2'}</Table.Cell>
|
|
39
|
+
<Table.Cell tag="div">{'Value 3'}</Table.Cell>
|
|
40
|
+
<Table.Cell tag="div">{'Value 4'}</Table.Cell>
|
|
41
|
+
<Table.Cell tag="div">{'Value 5'}</Table.Cell>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
</Table.Body>
|
|
44
|
+
</Table>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default TableWithSubcomponentsAsDivs
|
|
@@ -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.
|
|
@@ -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 %>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
# - table_div: Div
|
|
4
3
|
- table_sm: Small
|
|
5
4
|
- table_md: Medium
|
|
6
5
|
- table_lg: Large
|
|
@@ -25,9 +24,11 @@ examples:
|
|
|
25
24
|
- table_with_background_kit: Table With Background Kit
|
|
26
25
|
- table_vertical_border: Vertical Borders
|
|
27
26
|
- table_striped: Striped Table
|
|
27
|
+
- table_with_subcomponents_rails: Table with Sub Components (Table Elements)
|
|
28
|
+
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
29
|
+
|
|
28
30
|
|
|
29
31
|
react:
|
|
30
|
-
# - table_div: Div
|
|
31
32
|
- table_sm: Small
|
|
32
33
|
- table_md: Medium
|
|
33
34
|
- table_lg: Large
|
|
@@ -51,3 +52,6 @@ examples:
|
|
|
51
52
|
- table_with_background_kit: Table With Background Kit
|
|
52
53
|
- table_vertical_border: Vertical Borders
|
|
53
54
|
- table_striped: Striped Table
|
|
55
|
+
- table_with_subcomponents: Table with Sub Components (Table Elements)
|
|
56
|
+
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
57
|
+
|
|
@@ -22,3 +22,5 @@ export { default as TableWithBackgroundKit } from './_table_with_background_kit.
|
|
|
22
22
|
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
|
23
23
|
export { default as TableStriped } from './_table_striped.jsx'
|
|
24
24
|
export { default as TableDiv } from './_table_div.jsx'
|
|
25
|
+
export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
|
|
26
|
+
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
|
@@ -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` |
|