playbook_ui_docs 13.18.0 → 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346
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.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +49 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +68 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +42 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -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 +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -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/menu.yml +1 -1
- data/dist/playbook-doc.js +9 -9
- metadata +22 -7
@@ -1,33 +1,59 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Icon } from '../../'
|
3
3
|
|
4
|
-
// import Icons as config from 'power-icons'
|
5
4
|
const config = {
|
6
|
-
|
7
|
-
<svg
|
8
|
-
ariaHidden="true"
|
9
|
-
focusable="false"
|
10
|
-
role="img"
|
11
|
-
viewBox="0 0 512 512"
|
5
|
+
icon: (
|
6
|
+
<svg viewBox="0 -256 1792 1792"
|
12
7
|
xmlns="http://www.w3.org/2000/svg"
|
13
8
|
>
|
14
|
-
<
|
15
|
-
d="
|
16
|
-
|
17
|
-
/>
|
9
|
+
<g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
|
10
|
+
<path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
|
11
|
+
</g>
|
18
12
|
</svg>
|
19
13
|
),
|
20
14
|
}
|
21
15
|
|
22
16
|
const IconCustom = (props) => {
|
23
17
|
return (
|
24
|
-
<
|
25
|
-
<
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
18
|
+
<React.Fragment>
|
19
|
+
<p>
|
20
|
+
<Icon
|
21
|
+
icon={config.icon}
|
22
|
+
{...props}
|
23
|
+
/>
|
24
|
+
</p>
|
25
|
+
<p>
|
26
|
+
<Icon
|
27
|
+
icon={config.icon}
|
28
|
+
rotation={90}
|
29
|
+
size="2x"
|
30
|
+
{...props}
|
31
|
+
/>
|
32
|
+
</p>
|
33
|
+
<p>
|
34
|
+
<Icon
|
35
|
+
icon={config.icon}
|
36
|
+
size="3x"
|
37
|
+
spin
|
38
|
+
{...props}
|
39
|
+
/>
|
40
|
+
</p>
|
41
|
+
<p>
|
42
|
+
<Icon
|
43
|
+
icon={config.icon}
|
44
|
+
size="5x"
|
45
|
+
{...props}
|
46
|
+
/>
|
47
|
+
</p>
|
48
|
+
<p>
|
49
|
+
<Icon
|
50
|
+
flip="horizontal"
|
51
|
+
icon={config.icon}
|
52
|
+
size="5x"
|
53
|
+
{...props}
|
54
|
+
/>
|
55
|
+
</p>
|
56
|
+
</React.Fragment>
|
31
57
|
)
|
32
58
|
}
|
33
59
|
|
@@ -4,16 +4,12 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
|
|
4
4
|
|
5
5
|
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
6
6
|
|
7
|
-
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
8
8
|
|
9
|
-
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
|
10
10
|
|
11
|
-
You must source
|
12
|
-
|
13
|
-
### React
|
14
|
-
|
15
|
-
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
11
|
+
You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
|
16
12
|
|
17
13
|
### Rails
|
18
14
|
|
19
|
-
|
15
|
+
Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
|
2
|
+
<div class="pb_table_thead">
|
3
|
+
<div class="pb_table_tr">
|
4
|
+
<div class="pb_table_th">Column 1</div>
|
5
|
+
<div class="pb_table_th">Column 2</div>
|
6
|
+
<div class="pb_table_th">Column 3</div>
|
7
|
+
<div class="pb_table_th">Column 4</div>
|
8
|
+
<div class="pb_table_th">Column 5</div>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
<div class="pb_table_tbody">
|
12
|
+
<div class="pb_table_tr">
|
13
|
+
<div class="pb_table_td">Value 1</div>
|
14
|
+
<div class="pb_table_td">Value 2</div>
|
15
|
+
<div class="pb_table_td">Value 3</div>
|
16
|
+
<div class="pb_table_td">Value 4</div>
|
17
|
+
<div class="pb_table_td">Value 5</div>
|
18
|
+
</div>
|
19
|
+
<div class="pb_table_tr">
|
20
|
+
<div class="pb_table_td">Value 1</div>
|
21
|
+
<div class="pb_table_td">Value 2</div>
|
22
|
+
<div class="pb_table_td">Value 3</div>
|
23
|
+
<div class="pb_table_td">Value 4</div>
|
24
|
+
<div class="pb_table_td">Value 5</div>
|
25
|
+
</div>
|
26
|
+
<div class="pb_table_tr">
|
27
|
+
<div class="pb_table_td">Value 1</div>
|
28
|
+
<div class="pb_table_td">Value 2</div>
|
29
|
+
<div class="pb_table_td">Value 3</div>
|
30
|
+
<div class="pb_table_td">Value 4</div>
|
31
|
+
<div class="pb_table_td">Value 5</div>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
<% end %>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Table from '../_table'
|
3
|
+
|
4
|
+
const TableDiv = (props) => {
|
5
|
+
return (
|
6
|
+
<Table
|
7
|
+
size="sm"
|
8
|
+
tag="div"
|
9
|
+
{...props}
|
10
|
+
>
|
11
|
+
<div className="pb_table_thead">
|
12
|
+
<div className="pb_table_tr">
|
13
|
+
<div className="pb_table_th">{'Column 1'}</div>
|
14
|
+
<div className="pb_table_th">{'Column 2'}</div>
|
15
|
+
<div className="pb_table_th">{'Column 3'}</div>
|
16
|
+
<div className="pb_table_th">{'Column 4'}</div>
|
17
|
+
<div className="pb_table_th">{'Column 5'}</div>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
<div className="pb_table_tbody">
|
21
|
+
<div className="pb_table_tr">
|
22
|
+
<div className="pb_table_td">{'Value 1'}</div>
|
23
|
+
<div className="pb_table_td">{'Value 2'}</div>
|
24
|
+
<div className="pb_table_td">{'Value 3'}</div>
|
25
|
+
<div className="pb_table_td">{'Value 4'}</div>
|
26
|
+
<div className="pb_table_td">{'Value 5'}</div>
|
27
|
+
</div>
|
28
|
+
<div className="pb_table_tr">
|
29
|
+
<div className="pb_table_td">{'Value 1'}</div>
|
30
|
+
<div className="pb_table_td">{'Value 2'}</div>
|
31
|
+
<div className="pb_table_td">{'Value 3'}</div>
|
32
|
+
<div className="pb_table_td">{'Value 4'}</div>
|
33
|
+
<div className="pb_table_td">{'Value 5'}</div>
|
34
|
+
</div>
|
35
|
+
<div className="pb_table_tr">
|
36
|
+
<div className="pb_table_td">{'Value 1'}</div>
|
37
|
+
<div className="pb_table_td">{'Value 2'}</div>
|
38
|
+
<div className="pb_table_td">{'Value 3'}</div>
|
39
|
+
<div className="pb_table_td">{'Value 4'}</div>
|
40
|
+
<div className="pb_table_td">{'Value 5'}</div>
|
41
|
+
</div>
|
42
|
+
</div>
|
43
|
+
</Table>
|
44
|
+
)
|
45
|
+
}
|
46
|
+
|
47
|
+
export default TableDiv
|
@@ -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.
|
@@ -1,5 +1,6 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
|
+
# - table_div: Div
|
3
4
|
- table_sm: Small
|
4
5
|
- table_md: Medium
|
5
6
|
- table_lg: Large
|
@@ -24,8 +25,12 @@ examples:
|
|
24
25
|
- table_with_background_kit: Table With Background Kit
|
25
26
|
- table_vertical_border: Vertical Borders
|
26
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
|
+
|
27
31
|
|
28
32
|
react:
|
33
|
+
# - table_div: Div
|
29
34
|
- table_sm: Small
|
30
35
|
- table_md: Medium
|
31
36
|
- table_lg: Large
|
@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
|
|
21
21
|
export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
|
22
22
|
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
23
23
|
export { default as TableStriped } from './_table_striped.jsx'
|
24
|
+
export { default as TableDiv } from './_table_div.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` |
|
data/dist/menu.yml
CHANGED
@@ -55,7 +55,7 @@ kits:
|
|
55
55
|
- name: "advanced_table"
|
56
56
|
platforms: *react_only
|
57
57
|
description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
|
58
|
-
status: "
|
58
|
+
status: "stable"
|
59
59
|
- name: "list"
|
60
60
|
platforms: *web
|
61
61
|
description: Lists display a vertical set of related content.
|