playbook_ui_docs 16.4.0.pre.alpha.PLAY2864circleiconbuttonloadingalignrails15138 → 16.4.0.pre.alpha.displaybreakpoints15091
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/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb +0 -25
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx +38 -97
- metadata +2 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md +0 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4d76349497c9aed9fbdb3db641ffc35173b5b359a82e3002169c22dac3bd7bd5
|
|
4
|
+
data.tar.gz: 93ac2b9d7fb72999554b19883582e24168ec8e00ebc57cc6a4a01aefeb81b1e0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5f7a324c2d795c8f7950252bc26fda991c90b20a71620f53646fcae7dea1e12c3f2e3fe777f51dae18f6b82cb74a9ef5483a4fd355847b51305353d96a8698a2
|
|
7
|
+
data.tar.gz: ac4f91556a586902d24d8a647dee141c1501dea08671ac8791ec2decb7b5942bf2949f8220f774dd38d46854c6cce8c9ca511cdb8e5d8d31426a69fe1e32ba16
|
|
@@ -7,7 +7,6 @@ examples:
|
|
|
7
7
|
- advanced_table_table_props: Table Props
|
|
8
8
|
- advanced_table_sticky_header_rails: Sticky Header
|
|
9
9
|
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
|
10
|
-
- advanced_table_pinned_rows_rails: Pinned Rows
|
|
11
10
|
- advanced_table_beta_sort: Enable Sorting
|
|
12
11
|
- advanced_table_responsive: Responsive Tables
|
|
13
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
@@ -27,28 +27,3 @@
|
|
|
27
27
|
icon: "user",
|
|
28
28
|
loading: true
|
|
29
29
|
}) %>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<%= pb_rails("button", props: { margin_top: "md", text: "Open Dialog to confirm PLAY-2837 fix still works", data: {"open-dialog": "dialog-1"} }) %>
|
|
33
|
-
|
|
34
|
-
<%= pb_rails("dialog", props: {
|
|
35
|
-
id:"dialog-1",
|
|
36
|
-
size: "md",
|
|
37
|
-
title: "Header Title is the Title Prop"
|
|
38
|
-
}) do %>
|
|
39
|
-
<%= pb_rails("dialog/dialog_body") do %>
|
|
40
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
|
|
41
|
-
<%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
|
|
42
|
-
<div style="height: 800px; background-color: lightgray;"></div>
|
|
43
|
-
<%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
|
|
44
|
-
<%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
|
|
45
|
-
<% end %>
|
|
46
|
-
|
|
47
|
-
<%= pb_rails("dialog/dialog_footer") do %>
|
|
48
|
-
<%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
|
|
49
|
-
<%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
|
|
50
|
-
<%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
|
|
51
|
-
<%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
|
|
52
|
-
<% end %>
|
|
53
|
-
<% end %>
|
|
54
|
-
<% end %>
|
|
@@ -1,102 +1,43 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import CircleIconButton from '../_circle_icon_button'
|
|
4
|
-
import Dialog from '../../pb_dialog/_dialog'
|
|
5
|
-
import Button from '../../pb_button/_button'
|
|
6
4
|
|
|
7
|
-
const CircleIconButtonLoading = (props) =>
|
|
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
|
-
icon="user"
|
|
45
|
-
loading
|
|
46
|
-
variant="link"
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
<>
|
|
50
|
-
<Button marginTop="md"
|
|
51
|
-
onClick={open}
|
|
52
|
-
>
|
|
53
|
-
{'Open Dialog to confirm PLAY-2837 fix still works for circle icon buttons'}
|
|
54
|
-
</Button>
|
|
55
|
-
<Dialog
|
|
56
|
-
onCancel={close}
|
|
57
|
-
onClose={close}
|
|
58
|
-
onConfirm={close}
|
|
59
|
-
opened={isOpen}
|
|
60
|
-
size="md"
|
|
61
|
-
title="Header Title is the Title Prop"
|
|
62
|
-
>
|
|
63
|
-
<Dialog.Body>
|
|
64
|
-
<Button
|
|
65
|
-
aria={{ label: 'Loading' }}
|
|
66
|
-
loading
|
|
67
|
-
text="Button Primary"
|
|
68
|
-
/>
|
|
69
|
-
<CircleIconButton
|
|
70
|
-
icon="plus"
|
|
71
|
-
loading
|
|
72
|
-
/>
|
|
73
|
-
<div style={{height: '800px', backgroundColor: 'lightgray'}} />
|
|
74
|
-
<Button
|
|
75
|
-
loading
|
|
76
|
-
text="Loading..."
|
|
77
|
-
/>
|
|
78
|
-
<CircleIconButton
|
|
79
|
-
icon="plus"
|
|
80
|
-
loading
|
|
81
|
-
/>
|
|
82
|
-
</Dialog.Body>
|
|
83
|
-
<Dialog.Footer>
|
|
84
|
-
<Button
|
|
85
|
-
loading
|
|
86
|
-
text="Send My Issue"
|
|
87
|
-
/>
|
|
88
|
-
<CircleIconButton
|
|
89
|
-
icon="plus"
|
|
90
|
-
loading
|
|
91
|
-
/>
|
|
92
|
-
<Button variant="link">
|
|
93
|
-
{"Back"}
|
|
94
|
-
</Button>
|
|
95
|
-
</Dialog.Footer>
|
|
96
|
-
</Dialog>
|
|
97
|
-
</>
|
|
98
|
-
</div>
|
|
99
|
-
)
|
|
100
|
-
}
|
|
5
|
+
const CircleIconButtonLoading = (props) => (
|
|
6
|
+
<div>
|
|
7
|
+
<CircleIconButton
|
|
8
|
+
icon="plus"
|
|
9
|
+
loading
|
|
10
|
+
variant="primary"
|
|
11
|
+
{...props}
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
<br />
|
|
15
|
+
|
|
16
|
+
<CircleIconButton
|
|
17
|
+
icon="pen"
|
|
18
|
+
loading
|
|
19
|
+
variant="secondary"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<br />
|
|
24
|
+
|
|
25
|
+
<CircleIconButton
|
|
26
|
+
disabled
|
|
27
|
+
icon="times"
|
|
28
|
+
loading
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
|
|
32
|
+
<br />
|
|
33
|
+
|
|
34
|
+
<CircleIconButton
|
|
35
|
+
icon="user"
|
|
36
|
+
loading
|
|
37
|
+
variant="link"
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
101
42
|
|
|
102
43
|
export default CircleIconButtonLoading
|
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.4.0.pre.alpha.
|
|
4
|
+
version: 16.4.0.pre.alpha.displaybreakpoints15091
|
|
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-03-
|
|
12
|
+
date: 2026-03-18 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -125,8 +125,6 @@ files:
|
|
|
125
125
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
|
|
126
126
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
|
|
127
127
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
|
|
128
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
|
|
129
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
|
|
130
128
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md
|
|
131
129
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
|
|
132
130
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
<%# Example sort method for demonstration purposes %>
|
|
2
|
-
<% if params["sort"] %>
|
|
3
|
-
<% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
|
|
4
|
-
<% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
|
|
5
|
-
<% @table_data_with_id.sort! do |a, b|
|
|
6
|
-
value_a = a[sort_param] || a[sort_param.to_sym]
|
|
7
|
-
value_b = b[sort_param] || b[sort_param.to_sym]
|
|
8
|
-
|
|
9
|
-
value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
|
|
10
|
-
value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
|
|
11
|
-
|
|
12
|
-
sort_direction * (value_a <=> value_b)
|
|
13
|
-
end %>
|
|
14
|
-
<% end %>
|
|
15
|
-
|
|
16
|
-
<% column_definitions = [
|
|
17
|
-
{
|
|
18
|
-
accessor: "year",
|
|
19
|
-
label: "Year",
|
|
20
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
21
|
-
sort_menu: [
|
|
22
|
-
{ item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
|
|
23
|
-
{ item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
|
|
24
|
-
],
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
accessor: "newEnrollments",
|
|
28
|
-
label: "New Enrollments",
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
accessor: "scheduledMeetings",
|
|
32
|
-
label: "Scheduled Meetings",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
accessor: "attendanceRate",
|
|
36
|
-
label: "Attendance Rate",
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
accessor: "completedClasses",
|
|
40
|
-
label: "Completed Classes",
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
accessor: "classCompletionRate",
|
|
44
|
-
label: "Class Completion Rate",
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
accessor: "graduatedStudents",
|
|
48
|
-
label: "Graduated Students",
|
|
49
|
-
}
|
|
50
|
-
] %>
|
|
51
|
-
|
|
52
|
-
<% pinned_rows = { top: ["8"] } %>
|
|
53
|
-
|
|
54
|
-
<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
|
|
55
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
|
|
56
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
|
|
57
|
-
<% end %>
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
|
|
2
|
-
|
|
3
|
-
**NOTE:**
|
|
4
|
-
- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
|
|
5
|
-
- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
|
|
6
|
-
- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
|
|
7
|
-
- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
|