playbook_ui_docs 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424
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_column_styling.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +4 -12
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +2 -16
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +2 -16
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +5 -12
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json +2 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json +1 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +0 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md +1 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_select_examples.html.erb +31 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +19 -20
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx +21 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md +7 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb +83 -85
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx +86 -88
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md +1 -1
- metadata +7 -12
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.md +0 -66
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb +0 -62
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md +0 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx +0 -68
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md +0 -7
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb +0 -90
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx +0 -100
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md +0 -1
|
@@ -1,85 +1,83 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<% end %>
|
|
85
|
-
</div>
|
|
1
|
+
<%= pb_rails("table", props: { sticky: true }) do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th>Column 1</th>
|
|
5
|
+
<th>Column 2</th>
|
|
6
|
+
<th>Column 3</th>
|
|
7
|
+
<th>Column 4</th>
|
|
8
|
+
<th>Column 5</th>
|
|
9
|
+
</tr>
|
|
10
|
+
</thead>
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr>
|
|
13
|
+
<td>Value 1</td>
|
|
14
|
+
<td>Value 2</td>
|
|
15
|
+
<td>Value 3</td>
|
|
16
|
+
<td>Value 4</td>
|
|
17
|
+
<td>Value 5</td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>Value 1</td>
|
|
21
|
+
<td>Value 2</td>
|
|
22
|
+
<td>Value 3</td>
|
|
23
|
+
<td>Value 4</td>
|
|
24
|
+
<td>Value 5</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>Value 1</td>
|
|
28
|
+
<td>Value 2</td>
|
|
29
|
+
<td>Value 3</td>
|
|
30
|
+
<td>Value 4</td>
|
|
31
|
+
<td>Value 5</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr>
|
|
34
|
+
<td>Value 1</td>
|
|
35
|
+
<td>Value 2</td>
|
|
36
|
+
<td>Value 3</td>
|
|
37
|
+
<td>Value 4</td>
|
|
38
|
+
<td>Value 5</td>
|
|
39
|
+
</tr>
|
|
40
|
+
<tr>
|
|
41
|
+
<td>Value 1</td>
|
|
42
|
+
<td>Value 2</td>
|
|
43
|
+
<td>Value 3</td>
|
|
44
|
+
<td>Value 4</td>
|
|
45
|
+
<td>Value 5</td>
|
|
46
|
+
</tr>
|
|
47
|
+
<tr>
|
|
48
|
+
<td>Value 1</td>
|
|
49
|
+
<td>Value 2</td>
|
|
50
|
+
<td>Value 3</td>
|
|
51
|
+
<td>Value 4</td>
|
|
52
|
+
<td>Value 5</td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td>Value 1</td>
|
|
56
|
+
<td>Value 2</td>
|
|
57
|
+
<td>Value 3</td>
|
|
58
|
+
<td>Value 4</td>
|
|
59
|
+
<td>Value 5</td>
|
|
60
|
+
</tr>
|
|
61
|
+
<tr>
|
|
62
|
+
<td>Value 1</td>
|
|
63
|
+
<td>Value 2</td>
|
|
64
|
+
<td>Value 3</td>
|
|
65
|
+
<td>Value 4</td>
|
|
66
|
+
<td>Value 5</td>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr>
|
|
69
|
+
<td>Value 1</td>
|
|
70
|
+
<td>Value 2</td>
|
|
71
|
+
<td>Value 3</td>
|
|
72
|
+
<td>Value 4</td>
|
|
73
|
+
<td>Value 5</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td>Value 1</td>
|
|
77
|
+
<td>Value 2</td>
|
|
78
|
+
<td>Value 3</td>
|
|
79
|
+
<td>Value 4</td>
|
|
80
|
+
<td>Value 5</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
<% end %>
|
|
@@ -3,94 +3,92 @@ import React from "react"
|
|
|
3
3
|
import Table from "../_table"
|
|
4
4
|
|
|
5
5
|
const TableSticky = (props) => (
|
|
6
|
-
<
|
|
7
|
-
|
|
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
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</Table>
|
|
93
|
-
</div>
|
|
6
|
+
<Table
|
|
7
|
+
sticky
|
|
8
|
+
{...props}
|
|
9
|
+
>
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th>{'Column 1'}</th>
|
|
13
|
+
<th>{'Column 2'}</th>
|
|
14
|
+
<th>{'Column 3'}</th>
|
|
15
|
+
<th>{'Column 4'}</th>
|
|
16
|
+
<th>{'Column 5'}</th>
|
|
17
|
+
</tr>
|
|
18
|
+
</thead>
|
|
19
|
+
<tbody>
|
|
20
|
+
<tr>
|
|
21
|
+
<td>{'Value 1'}</td>
|
|
22
|
+
<td>{'Value 2'}</td>
|
|
23
|
+
<td>{'Value 3'}</td>
|
|
24
|
+
<td>{'Value 4'}</td>
|
|
25
|
+
<td>{'Value 5'}</td>
|
|
26
|
+
</tr>
|
|
27
|
+
<tr>
|
|
28
|
+
<td>{'Value 1'}</td>
|
|
29
|
+
<td>{'Value 2'}</td>
|
|
30
|
+
<td>{'Value 3'}</td>
|
|
31
|
+
<td>{'Value 4'}</td>
|
|
32
|
+
<td>{'Value 5'}</td>
|
|
33
|
+
</tr>
|
|
34
|
+
<tr>
|
|
35
|
+
<td>{'Value 1'}</td>
|
|
36
|
+
<td>{'Value 2'}</td>
|
|
37
|
+
<td>{'Value 3'}</td>
|
|
38
|
+
<td>{'Value 4'}</td>
|
|
39
|
+
<td>{'Value 5'}</td>
|
|
40
|
+
</tr>
|
|
41
|
+
<tr>
|
|
42
|
+
<td>{'Value 1'}</td>
|
|
43
|
+
<td>{'Value 2'}</td>
|
|
44
|
+
<td>{'Value 3'}</td>
|
|
45
|
+
<td>{'Value 4'}</td>
|
|
46
|
+
<td>{'Value 5'}</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td>{'Value 1'}</td>
|
|
50
|
+
<td>{'Value 2'}</td>
|
|
51
|
+
<td>{'Value 3'}</td>
|
|
52
|
+
<td>{'Value 4'}</td>
|
|
53
|
+
<td>{'Value 5'}</td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td>{'Value 1'}</td>
|
|
57
|
+
<td>{'Value 2'}</td>
|
|
58
|
+
<td>{'Value 3'}</td>
|
|
59
|
+
<td>{'Value 4'}</td>
|
|
60
|
+
<td>{'Value 5'}</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>{'Value 1'}</td>
|
|
64
|
+
<td>{'Value 2'}</td>
|
|
65
|
+
<td>{'Value 3'}</td>
|
|
66
|
+
<td>{'Value 4'}</td>
|
|
67
|
+
<td>{'Value 5'}</td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td>{'Value 1'}</td>
|
|
71
|
+
<td>{'Value 2'}</td>
|
|
72
|
+
<td>{'Value 3'}</td>
|
|
73
|
+
<td>{'Value 4'}</td>
|
|
74
|
+
<td>{'Value 5'}</td>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr>
|
|
77
|
+
<td>{'Value 1'}</td>
|
|
78
|
+
<td>{'Value 2'}</td>
|
|
79
|
+
<td>{'Value 3'}</td>
|
|
80
|
+
<td>{'Value 4'}</td>
|
|
81
|
+
<td>{'Value 5'}</td>
|
|
82
|
+
</tr>
|
|
83
|
+
<tr>
|
|
84
|
+
<td>{'Value 1'}</td>
|
|
85
|
+
<td>{'Value 2'}</td>
|
|
86
|
+
<td>{'Value 3'}</td>
|
|
87
|
+
<td>{'Value 4'}</td>
|
|
88
|
+
<td>{'Value 5'}</td>
|
|
89
|
+
</tr>
|
|
90
|
+
</tbody>
|
|
91
|
+
</Table>
|
|
94
92
|
)
|
|
95
93
|
|
|
96
94
|
export default TableSticky
|
|
@@ -2,9 +2,7 @@ React: Use `sticky` on a table to allow the table header to be fixed in place wh
|
|
|
2
2
|
|
|
3
3
|
Rails: Pass `sticky: true` to props.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
If the table header is not sticking in the right place you will need to pass an inline `top` style to the `thead`. This is often needed when a parent adds padding above the table.
|
|
5
|
+
If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
|
|
8
6
|
React Example: `<thead style={{ top: "-16px" }}>`
|
|
9
7
|
Rails Example: `<thead style="top: -16px">`
|
|
10
8
|
|
|
@@ -36,4 +36,4 @@ When `filter` is present, `filter_content` and `filter_props` are ignored.
|
|
|
36
36
|
<% end %>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
For Nitro apps that use a shared search/filter pattern, reference the
|
|
39
|
+
For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.8.0.pre.alpha.
|
|
4
|
+
version: 16.8.0.pre.alpha.PLAY2945selectformblankselection16424
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-
|
|
12
|
+
date: 2026-05-18 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -76,8 +76,6 @@ files:
|
|
|
76
76
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
|
|
77
77
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
|
|
78
78
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
|
|
79
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.jsx
|
|
80
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.md
|
|
81
79
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
|
|
82
80
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
|
|
83
81
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
|
|
@@ -94,8 +92,6 @@ files:
|
|
|
94
92
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
|
|
95
93
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
|
96
94
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
|
97
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb
|
|
98
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md
|
|
99
95
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
|
|
100
96
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
|
|
101
97
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
|
@@ -177,8 +173,6 @@ files:
|
|
|
177
173
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
|
|
178
174
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
|
|
179
175
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
|
|
180
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx
|
|
181
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md
|
|
182
176
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
|
|
183
177
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
|
|
184
178
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
|
|
@@ -1198,6 +1192,7 @@ files:
|
|
|
1198
1192
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
|
|
1199
1193
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
|
|
1200
1194
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
|
|
1195
|
+
- app/pb_kits/playbook/pb_form/docs/_form_form_with_select_examples.html.erb
|
|
1201
1196
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb
|
|
1202
1197
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md
|
|
1203
1198
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.html.erb
|
|
@@ -1309,6 +1304,9 @@ files:
|
|
|
1309
1304
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
|
1310
1305
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
|
|
1311
1306
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md
|
|
1307
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb
|
|
1308
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx
|
|
1309
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md
|
|
1312
1310
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
|
|
1313
1311
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx
|
|
1314
1312
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md
|
|
@@ -1842,9 +1840,6 @@ files:
|
|
|
1842
1840
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
|
|
1843
1841
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
|
|
1844
1842
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
|
|
1845
|
-
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb
|
|
1846
|
-
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx
|
|
1847
|
-
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md
|
|
1848
1843
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
|
|
1849
1844
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
|
|
1850
1845
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
|
|
@@ -2962,7 +2957,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
2962
2957
|
- !ruby/object:Gem::Version
|
|
2963
2958
|
version: '0'
|
|
2964
2959
|
requirements: []
|
|
2965
|
-
rubygems_version: 3.5.
|
|
2960
|
+
rubygems_version: 3.5.3
|
|
2966
2961
|
signing_key:
|
|
2967
2962
|
specification_version: 4
|
|
2968
2963
|
summary: Playbook Design System Docs
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import AdvancedTable from "../_advanced_table"
|
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Kit doc: compares fixed width, floor-only, TanStack band, and min/preferred/max band.
|
|
7
|
-
*/
|
|
8
|
-
const AdvancedTableColumnStylingWidth = (props) => {
|
|
9
|
-
const columnDefinitions = [
|
|
10
|
-
{
|
|
11
|
-
accessor: "year",
|
|
12
|
-
label: "Year (fixed)",
|
|
13
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
14
|
-
// width alone locks min + max to the same value (128px).
|
|
15
|
-
columnStyling: { width: 128 },
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
accessor: "newEnrollments",
|
|
19
|
-
label: "Enrollments (floor)",
|
|
20
|
-
columnStyling: { minWidth: 160 },
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
accessor: "scheduledMeetings",
|
|
24
|
-
label: "Meetings (TanStack band)",
|
|
25
|
-
size: 200,
|
|
26
|
-
minSize: 160,
|
|
27
|
-
maxSize: 240,
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
accessor: "attendanceRate",
|
|
31
|
-
label: "Attendance (min / pref / max)",
|
|
32
|
-
columnStyling: { minWidth: 108, width: 124, maxWidth: 168 },
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
accessor: "completedClasses",
|
|
36
|
-
label: "Completed",
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
accessor: "classCompletionRate",
|
|
40
|
-
label: "Completion %",
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
accessor: "graduatedStudents",
|
|
44
|
-
label: "Graduated",
|
|
45
|
-
},
|
|
46
|
-
]
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<AdvancedTable
|
|
50
|
-
columnDefinitions={columnDefinitions}
|
|
51
|
-
tableData={MOCK_DATA}
|
|
52
|
-
{...props}
|
|
53
|
-
/>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export default AdvancedTableColumnStylingWidth
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
AdvancedTable column width is controlled in two equivalent places on each leaf `columnDefinitions` entry. Playbook maps them to inline styles on header and body cells (and forwards numeric values into TanStack Table’s column model).
|
|
2
|
-
|
|
3
|
-
1) Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
|
|
4
|
-
|
|
5
|
-
- Preferred / target width: `columnStyling` `width` maps to TanStack `size` on the same column object.
|
|
6
|
-
- Minimum width (floor): `columnStyling` `minWidth` maps to TanStack `minSize`.
|
|
7
|
-
- Maximum width (ceiling): `columnStyling` `maxWidth` maps to TanStack `maxSize`.
|
|
8
|
-
|
|
9
|
-
Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g. `"12rem"`, `"200px"`). TanStack fields accept numbers only.
|
|
10
|
-
|
|
11
|
-
If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
|
|
12
|
-
|
|
13
|
-
2) Fixed width: set `width` only
|
|
14
|
-
|
|
15
|
-
If you pass only `width` (or only `size`) and do not set `minWidth` / `maxWidth` (or `minSize` / `maxSize`), Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
|
|
16
|
-
|
|
17
|
-
```jsx
|
|
18
|
-
columnStyling: { width: 128 }
|
|
19
|
-
// Applied as width, minWidth, and maxWidth: 128px
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
```jsx
|
|
23
|
-
size: 200
|
|
24
|
-
// Forwarded as size, minSize, and maxSize: 200
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
|
|
28
|
-
|
|
29
|
-
3) Floor only: `minWidth` / `minSize`
|
|
30
|
-
|
|
31
|
-
Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
|
|
32
|
-
|
|
33
|
-
```jsx
|
|
34
|
-
columnStyling: { minWidth: 160 }
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
4) Flexible band: min + preferred + max
|
|
38
|
-
|
|
39
|
-
Set two or three values when you want a range. CSS uses preferred `width` clamped between `minWidth` and `maxWidth`:
|
|
40
|
-
|
|
41
|
-
- `minWidth`: won’t shrink below this.
|
|
42
|
-
- `width`: preferred size when space allows.
|
|
43
|
-
- `maxWidth`: won’t grow above this.
|
|
44
|
-
|
|
45
|
-
Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWidth: 168` → preferred 124px, allowed between 108 and 168.
|
|
46
|
-
|
|
47
|
-
You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
|
|
48
|
-
|
|
49
|
-
5) TanStack band without `columnStyling`
|
|
50
|
-
|
|
51
|
-
The Meetings column uses only TanStack fields:
|
|
52
|
-
|
|
53
|
-
```jsx
|
|
54
|
-
{ accessor: "scheduledMeetings", size: 200, minSize: 160, maxSize: 240 }
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Playbook applies the same min / preferred / max idea to cell styles. Setting only `size: 200` would lock all three to 200, same as `width: 200` in `columnStyling`.
|
|
58
|
-
|
|
59
|
-
6) What the example table shows
|
|
60
|
-
|
|
61
|
-
- Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
|
|
62
|
-
- Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.
|
|
63
|
-
- Meetings (TanStack band): `size` / `minSize` / `maxSize` — preferred 200px, between 160–240.
|
|
64
|
-
- Attendance (min / pref / max): all three in `columnStyling` — preferred 124px, between 108–168.
|
|
65
|
-
|
|
66
|
-
Grouped columns: put width options on leaf definitions (columns with an `accessor`), not on parent group headers.
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
column_definitions = [
|
|
3
|
-
{
|
|
4
|
-
accessor: "year",
|
|
5
|
-
label: "Year",
|
|
6
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
accessor: "newEnrollments",
|
|
10
|
-
label: "New Enrollments",
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
accessor: "scheduledMeetings",
|
|
14
|
-
label: "Scheduled Meetings",
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
accessor: "attendanceRate",
|
|
18
|
-
label: "Attendance Rate",
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
accessor: "completedClasses",
|
|
22
|
-
label: "Completed Classes",
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
accessor: "classCompletionRate",
|
|
26
|
-
label: "Class Completion Rate",
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
accessor: "graduatedStudents",
|
|
30
|
-
label: "Graduated Students",
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
subrow_headers = ["Quarter", "Month", "Day"]
|
|
35
|
-
%>
|
|
36
|
-
|
|
37
|
-
<%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
|
|
38
|
-
|
|
39
|
-
<%= pb_rails("advanced_table", props: {
|
|
40
|
-
id: "enable-toggle-expansion-normal",
|
|
41
|
-
table_data: @table_data,
|
|
42
|
-
column_definitions: column_definitions,
|
|
43
|
-
enable_toggle_expansion: "all"
|
|
44
|
-
}) %>
|
|
45
|
-
|
|
46
|
-
<%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
|
|
47
|
-
|
|
48
|
-
<%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
|
|
49
|
-
<%= pb_rails("advanced_table/table_header", props: {
|
|
50
|
-
table_id: "enable-toggle-expansion-subcomponents",
|
|
51
|
-
table_data: @table_data,
|
|
52
|
-
column_definitions: column_definitions,
|
|
53
|
-
enable_toggle_expansion: "all"
|
|
54
|
-
}) %>
|
|
55
|
-
<%= pb_rails("advanced_table/table_body", props: {
|
|
56
|
-
table_id: "enable-toggle-expansion-subcomponents",
|
|
57
|
-
table_data: @table_data,
|
|
58
|
-
column_definitions: column_definitions,
|
|
59
|
-
subrow_headers: subrow_headers,
|
|
60
|
-
enable_toggle_expansion: "all"
|
|
61
|
-
}) %>
|
|
62
|
-
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
`enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
|
|
2
|
-
|
|
3
|
-
When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
|
|
4
|
-
|
|
5
|
-
When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
|
|
6
|
-
|
|
7
|
-
Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.
|