playbook_ui_docs 16.9.0.pre.alpha.PLAY296917309 → 16.9.0.pre.alpha.alphatesting72217215
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_fullscreen.jsx +92 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +44 -36
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +19 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +5 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_playground.overrides.json +0 -7
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +1 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +1 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +5 -5
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +1 -1
- metadata +4 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.html.erb +0 -35
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md +0 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2aa50b9adc83dca433cb471222d1dc21ec86d59790848c5472b6affbcc37d6c8
|
|
4
|
+
data.tar.gz: b5473cc677a4910e116c7a9ea6dd58459072d6141e6d13a0f226b7abb9de68b8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 29841f9d83ceb4b3df5d481ca715411f7667b91130eb4d94786c593845411c8b6b2180c68a039d842b69ae7614c170022231bdb26397118730b2bccd4379fb1a
|
|
7
|
+
data.tar.gz: 2f2a122830f0700a38f84bae13a1a047634bf8674beaddb704839d7ebd64caebc091e0b3841420bf090882351084371c4763d46a1b2b58f1aa20a9065873e8b8
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import Flex from '../../pb_flex/_flex'
|
|
4
|
+
import Button from '../../pb_button/_button'
|
|
5
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
6
|
+
import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
|
|
7
|
+
|
|
8
|
+
const AdvancedTableFullscreen = (props) => {
|
|
9
|
+
const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
|
|
10
|
+
const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
|
|
11
|
+
|
|
12
|
+
const columnDefinitions = [
|
|
13
|
+
{
|
|
14
|
+
accessor: "year",
|
|
15
|
+
label: "Year",
|
|
16
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "newEnrollments",
|
|
20
|
+
label: "New Enrollments",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "scheduledMeetings",
|
|
24
|
+
label: "Scheduled Meetings",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "attendanceRate",
|
|
28
|
+
label: "Attendance Rate",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
accessor: "completedClasses",
|
|
32
|
+
label: "Completed Classes",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
accessor: "classCompletionRate",
|
|
36
|
+
label: "Class Completion Rate",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
accessor: "graduatedStudents",
|
|
40
|
+
label: "Graduated Students",
|
|
41
|
+
},
|
|
42
|
+
]
|
|
43
|
+
|
|
44
|
+
const tableProps = {
|
|
45
|
+
sticky: true
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div>
|
|
50
|
+
<Flex justify="end">
|
|
51
|
+
<Button
|
|
52
|
+
marginBottom="sm"
|
|
53
|
+
onClick={() => fullscreenToggleSmall?.()}
|
|
54
|
+
text="Fullscreen Small Table"
|
|
55
|
+
variant="secondary"
|
|
56
|
+
/>
|
|
57
|
+
</Flex>
|
|
58
|
+
<AdvancedTable
|
|
59
|
+
allowFullScreen
|
|
60
|
+
columnDefinitions={columnDefinitions}
|
|
61
|
+
fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
|
|
62
|
+
tableData={MOCK_DATA}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<AdvancedTable.Header enableSorting />
|
|
66
|
+
<AdvancedTable.Body />
|
|
67
|
+
</AdvancedTable>
|
|
68
|
+
<Flex justify="end">
|
|
69
|
+
<Button
|
|
70
|
+
marginY="sm"
|
|
71
|
+
onClick={() => fullscreenToggleLarge?.()}
|
|
72
|
+
text="Fullscreen Large Table"
|
|
73
|
+
variant="secondary"
|
|
74
|
+
/>
|
|
75
|
+
</Flex>
|
|
76
|
+
<AdvancedTable
|
|
77
|
+
allowFullScreen
|
|
78
|
+
columnDefinitions={columnDefinitions}
|
|
79
|
+
fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
|
|
80
|
+
responsive="none"
|
|
81
|
+
tableData={PAGINATION_MOCK_DATA}
|
|
82
|
+
tableProps={tableProps}
|
|
83
|
+
{...props}
|
|
84
|
+
>
|
|
85
|
+
<AdvancedTable.Header enableSorting />
|
|
86
|
+
<AdvancedTable.Body />
|
|
87
|
+
</AdvancedTable>
|
|
88
|
+
</div>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export default AdvancedTableFullscreen
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props. `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
|
|
2
|
+
|
|
3
|
+
Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../_advanced_table'
|
|
3
|
-
import
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
|
|
4
4
|
import colors from '../../tokens/exports/_colors.module.scss'
|
|
5
5
|
|
|
6
6
|
|
|
@@ -55,7 +55,7 @@ const rowStyling = [
|
|
|
55
55
|
<AdvancedTable
|
|
56
56
|
columnDefinitions={columnDefinitions}
|
|
57
57
|
rowStyling={rowStyling}
|
|
58
|
-
tableData={
|
|
58
|
+
tableData={MOCK_DATA}
|
|
59
59
|
{...props}
|
|
60
60
|
/>
|
|
61
61
|
</div>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
CHANGED
|
@@ -1,39 +1,47 @@
|
|
|
1
1
|
<% column_definitions = [
|
|
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
|
-
},
|
|
2
|
+
{
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
accessor: "newEnrollments",
|
|
8
|
+
label: "New Enrollments",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
accessor: "scheduledMeetings",
|
|
12
|
+
label: "Scheduled Meetings",
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
accessor: "attendanceRate",
|
|
16
|
+
label: "Attendance Rate",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "completedClasses",
|
|
20
|
+
label: "Completed Classes",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "classCompletionRate",
|
|
24
|
+
label: "Class Completion Rate",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "graduatedStudents",
|
|
28
|
+
label: "Graduated Students",
|
|
29
|
+
}
|
|
31
30
|
] %>
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
32
|
+
<% table_data = 15.times.map do |index|
|
|
33
|
+
{
|
|
34
|
+
year: (2020 + index).to_s,
|
|
35
|
+
id: (2020 + index).to_s,
|
|
36
|
+
newEnrollments: (20 + index).to_s,
|
|
37
|
+
scheduledMeetings: (10 + index).to_s,
|
|
38
|
+
attendanceRate: "#{50 + index}%",
|
|
39
|
+
completedClasses: (3 + index).to_s,
|
|
40
|
+
classCompletionRate: "#{30 + index}%",
|
|
41
|
+
graduatedStudents: (19 + index).to_s,
|
|
42
|
+
}
|
|
43
|
+
end %>
|
|
44
|
+
|
|
45
|
+
<div style="max-height: 320px; overflow-y: auto;">
|
|
46
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
|
|
47
|
+
</div>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
const tableData = Array.from({ length: 15 }, (_, index) => ({
|
|
5
|
+
year: String(2020 + index),
|
|
6
|
+
newEnrollments: String(20 + index),
|
|
7
|
+
scheduledMeetings: String(10 + index),
|
|
8
|
+
attendanceRate: `${50 + index}%`,
|
|
9
|
+
completedClasses: String(3 + index),
|
|
10
|
+
classCompletionRate: `${30 + index}%`,
|
|
11
|
+
graduatedStudents: String(19 + index),
|
|
12
|
+
}))
|
|
4
13
|
|
|
5
14
|
const AdvancedTableTablePropsStickyHeader = (props) => {
|
|
6
15
|
const columnDefinitions = [
|
|
7
16
|
{
|
|
8
17
|
accessor: "year",
|
|
9
18
|
label: "Year",
|
|
10
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
11
19
|
},
|
|
12
20
|
{
|
|
13
21
|
accessor: "newEnrollments",
|
|
@@ -36,17 +44,18 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
|
|
|
36
44
|
]
|
|
37
45
|
|
|
38
46
|
const tableProps = {
|
|
39
|
-
sticky: true
|
|
47
|
+
sticky: true
|
|
40
48
|
}
|
|
41
49
|
|
|
42
50
|
return (
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
51
|
+
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
|
|
52
|
+
<AdvancedTable
|
|
53
|
+
columnDefinitions={columnDefinitions}
|
|
54
|
+
tableData={tableData}
|
|
55
|
+
tableProps={tableProps}
|
|
56
|
+
{...props}
|
|
57
|
+
/>
|
|
58
|
+
</div>
|
|
50
59
|
)
|
|
51
60
|
}
|
|
52
61
|
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
CHANGED
|
@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
|
|
|
2
2
|
|
|
3
3
|
**NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
|
|
4
4
|
|
|
5
|
+
Scroll inside the table preview to see the header stick.
|
|
6
|
+
|
|
7
|
+
This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
|
|
8
|
+
|
|
5
9
|
Expand the table above to see this in action.
|
|
6
10
|
|
|
7
11
|
A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and
|
|
1
|
+
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
|
|
2
2
|
|
|
3
|
-
**NOTE**:
|
|
3
|
+
**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
|
|
6
|
+
|
|
7
|
+
Expand the table above to see responsive behavior in action.
|
|
6
8
|
|
|
7
9
|
A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
|
|
@@ -233,6 +233,11 @@
|
|
|
233
233
|
"customSort": true
|
|
234
234
|
}
|
|
235
235
|
},
|
|
236
|
+
"fullScreenControl": {
|
|
237
|
+
"requires": {
|
|
238
|
+
"allowFullScreen": true
|
|
239
|
+
}
|
|
240
|
+
},
|
|
236
241
|
"enableSortingRemoval": {
|
|
237
242
|
"requires": {
|
|
238
243
|
"enableSorting": true
|
|
@@ -2949,7 +2954,9 @@
|
|
|
2949
2954
|
},
|
|
2950
2955
|
"hiddenProps": [
|
|
2951
2956
|
"sortControl",
|
|
2957
|
+
"fullScreenControl",
|
|
2952
2958
|
"expandedControl",
|
|
2959
|
+
"allowFullScreen",
|
|
2953
2960
|
"pagination",
|
|
2954
2961
|
"paginationProps"
|
|
2955
2962
|
],
|
|
@@ -73,7 +73,9 @@
|
|
|
73
73
|
},
|
|
74
74
|
"hiddenProps": [
|
|
75
75
|
"sortControl",
|
|
76
|
+
"fullScreenControl",
|
|
76
77
|
"expandedControl",
|
|
78
|
+
"allowFullScreen",
|
|
77
79
|
"pagination",
|
|
78
80
|
"paginationProps"
|
|
79
81
|
],
|
|
@@ -289,6 +291,11 @@
|
|
|
289
291
|
"customSort": true
|
|
290
292
|
}
|
|
291
293
|
},
|
|
294
|
+
"fullScreenControl": {
|
|
295
|
+
"requires": {
|
|
296
|
+
"allowFullScreen": true
|
|
297
|
+
}
|
|
298
|
+
},
|
|
292
299
|
"enableSortingRemoval": {
|
|
293
300
|
"requires": {
|
|
294
301
|
"enableSorting": true
|
|
@@ -23,6 +23,7 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
|
|
|
23
23
|
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
|
24
24
|
export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
|
|
25
25
|
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
|
26
|
+
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
|
26
27
|
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
|
27
28
|
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
|
28
29
|
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure
|
|
2
|
-
|
|
3
|
-
For lists that should stay separate, see [Independent Draggable Containers](#draggable_independent_containers).
|
|
1
|
+
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
|
|
1
|
+
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
|
|
@@ -17,7 +17,6 @@ examples:
|
|
|
17
17
|
- draggable_with_list: Draggable with List Kit
|
|
18
18
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
19
19
|
- draggable_with_cards: Draggable with Cards
|
|
20
|
-
- draggable_independent_containers: Independent Draggable Containers
|
|
21
20
|
- draggable_with_table: Draggable with Table
|
|
22
21
|
- draggable_drop_zones: Draggable Drop Zones
|
|
23
22
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
|
|
4
4
|
|
|
5
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_breached" }) %>
|
|
5
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
|
|
6
6
|
|
|
7
7
|
<script>
|
|
8
8
|
window.addEventListener("load", () => {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_common" }) %>
|
|
9
9
|
|
|
10
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_common" }) %>
|
|
10
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
<script>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "def_bar" }) %>
|
|
4
4
|
|
|
5
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "def_caption" }) %>
|
|
5
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "def_caption" }) %>
|
|
6
6
|
|
|
7
7
|
<%= pb_rails("text_input", props: { label: "Calculated Strength", value: "0", disabled: true, id: "calc_strength" }) %>
|
|
8
8
|
|
|
@@ -10,25 +10,25 @@
|
|
|
10
10
|
|
|
11
11
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "min_5_bar" }) %>
|
|
12
12
|
|
|
13
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_5_caption" }) %>
|
|
13
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_5_caption" }) %>
|
|
14
14
|
|
|
15
15
|
<%= pb_rails("passphrase", props: { label: "Min length = 30", classname: "min_30" }) %>
|
|
16
16
|
|
|
17
17
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "min_30_bar" }) %>
|
|
18
18
|
|
|
19
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_30_caption" }) %>
|
|
19
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_30_caption" }) %>
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("passphrase", props: { label: "Average Threshold = 1", classname: "avg_1" }) %>
|
|
22
22
|
|
|
23
23
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "avg_1_bar" }) %>
|
|
24
24
|
|
|
25
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "avg_1_caption" }) %>
|
|
25
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "avg_1_caption" }) %>
|
|
26
26
|
|
|
27
27
|
<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", classname: "strong_4" }) %>
|
|
28
28
|
|
|
29
29
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "strong_4_bar" }) %>
|
|
30
30
|
|
|
31
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "strong_4_caption" }) %>
|
|
31
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "strong_4_caption" }) %>
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
|
|
4
4
|
|
|
5
|
-
<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_change" }) %>
|
|
5
|
+
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
|
|
6
6
|
|
|
7
7
|
<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
|
|
8
8
|
|
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.9.0.pre.alpha.
|
|
4
|
+
version: 16.9.0.pre.alpha.alphatesting72217215
|
|
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-06-
|
|
12
|
+
date: 2026-06-22 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -100,6 +100,8 @@ files:
|
|
|
100
100
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
|
|
101
101
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
|
102
102
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
|
103
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
|
|
104
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
|
|
103
105
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
|
|
104
106
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
|
|
105
107
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
|
|
@@ -908,8 +910,6 @@ files:
|
|
|
908
910
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx
|
|
909
911
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md
|
|
910
912
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
|
|
911
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.html.erb
|
|
912
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md
|
|
913
913
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
|
914
914
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
|
915
915
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
<% lists = [
|
|
2
|
-
{
|
|
3
|
-
title: "Morning Crew",
|
|
4
|
-
items: [
|
|
5
|
-
{ id: "m1", name: "Alice Chen" },
|
|
6
|
-
{ id: "m2", name: "Ben Ortiz" },
|
|
7
|
-
{ id: "m3", name: "Cara Kim" },
|
|
8
|
-
],
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
title: "Afternoon Crew",
|
|
12
|
-
items: [
|
|
13
|
-
{ id: "a1", name: "Diana Patel" },
|
|
14
|
-
{ id: "a2", name: "Evan Brooks" },
|
|
15
|
-
{ id: "a3", name: "Fiona Lee" },
|
|
16
|
-
],
|
|
17
|
-
},
|
|
18
|
-
] %>
|
|
19
|
-
|
|
20
|
-
<%= pb_rails("flex", props: { gap: "md", justify_content: "center", wrap: true }) do %>
|
|
21
|
-
<% lists.each do |list| %>
|
|
22
|
-
<%= pb_rails("flex/flex_item", props: { fixed_size: "220px" }) do %>
|
|
23
|
-
<%= pb_rails("caption", props: { text: list[:title], text_align: "center", margin_bottom: "xs" }) %>
|
|
24
|
-
<%= pb_rails("draggable", props: { initial_items: list[:items] }) do %>
|
|
25
|
-
<%= pb_rails("draggable/draggable_container", props: { padding: "sm" }) do %>
|
|
26
|
-
<% list[:items].each do |item| %>
|
|
27
|
-
<%= pb_rails("draggable/draggable_item", props: { drag_id: item[:id], margin_bottom: "xs" }) do %>
|
|
28
|
-
<%= pb_rails("body", props: { text: item[:name] }) %>
|
|
29
|
-
<% end %>
|
|
30
|
-
<% end %>
|
|
31
|
-
<% end %>
|
|
32
|
-
<% end %>
|
|
33
|
-
<% end %>
|
|
34
|
-
<% end %>
|
|
35
|
-
<% end %>
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
Use a **separate** `draggable` kit for each list when items should reorder within their own column only.
|
|
2
|
-
|
|
3
|
-
Each instance creates its own drag boundary. Items stay inside that list on desktop and touch — they cannot be dropped into a neighboring list.
|
|
4
|
-
|
|
5
|
-
This is different from [Dragging Across Multiple Containers](#draggable_multiple_containers), which uses **one** `draggable` wrapping multiple `draggable/draggable_container` kits so items can move between columns.
|
|
6
|
-
|
|
7
|
-
On touch devices, drag from the grip handle. Swiping outside the handle scrolls as usual.
|
|
8
|
-
|