playbook_ui 14.17.0.pre.alpha.PLAY20267223 → 14.17.0.pre.alpha.alphaforaudiences7167
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/Components/RegularTableView.tsx +3 -23
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +1 -11
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +128 -60
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +20 -43
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -68
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +3 -4
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +7 -19
- data/dist/chunks/{_typeahead-HqfDnjRe.js → _typeahead-7W5Ha5Td.js} +1 -1
- data/dist/chunks/_weekday_stacked-DSKatW3m.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +16 -21
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
- data/dist/chunks/_weekday_stacked-CPNaHtxQ.js +0 -45
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.17.0.pre.alpha.
|
4
|
+
version: 14.17.0.pre.alpha.alphaforaudiences7167
|
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: 2025-04-
|
12
|
+
date: 2025-04-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -344,8 +344,6 @@ files:
|
|
344
344
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
|
345
345
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
|
346
346
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
|
347
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
|
348
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
|
349
347
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
|
350
348
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
|
351
349
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
|
@@ -370,7 +368,6 @@ files:
|
|
370
368
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss
|
371
369
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
|
372
370
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
|
373
|
-
- app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss
|
374
371
|
- app/pb_kits/playbook/pb_advanced_table/table_body.html.erb
|
375
372
|
- app/pb_kits/playbook/pb_advanced_table/table_body.rb
|
376
373
|
- app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
|
@@ -1187,35 +1184,33 @@ files:
|
|
1187
1184
|
- app/pb_kits/playbook/pb_draggable/_draggable.tsx
|
1188
1185
|
- app/pb_kits/playbook/pb_draggable/context/index.tsx
|
1189
1186
|
- app/pb_kits/playbook/pb_draggable/context/types.ts
|
1190
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb
|
1191
1187
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
|
1188
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
|
1189
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
|
1192
1190
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
|
1193
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
|
1194
1191
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
|
1195
1192
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
|
1196
1193
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
|
1197
1194
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
|
1198
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
|
1199
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
|
1200
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
1201
1195
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
1196
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
|
1197
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
|
1202
1198
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
|
1203
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
|
1204
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
|
1205
1199
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
|
1200
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
|
1201
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
|
1206
1202
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
|
1207
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md
|
1208
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.html.erb
|
1209
1203
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
|
1204
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
|
1205
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
|
1210
1206
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
|
1211
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md
|
1212
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.html.erb
|
1213
1207
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
|
1208
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
|
1209
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
|
1214
1210
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
|
1215
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md
|
1216
1211
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
|
1217
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.
|
1218
|
-
- app/pb_kits/playbook/pb_draggable/docs/
|
1212
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
|
1213
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
|
1219
1214
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
|
1220
1215
|
- app/pb_kits/playbook/pb_draggable/docs/example.yml
|
1221
1216
|
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
@@ -3472,8 +3467,8 @@ files:
|
|
3472
3467
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3473
3468
|
- app/pb_kits/playbook/utilities/text.ts
|
3474
3469
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3475
|
-
- dist/chunks/_typeahead-
|
3476
|
-
- dist/chunks/_weekday_stacked-
|
3470
|
+
- dist/chunks/_typeahead-7W5Ha5Td.js
|
3471
|
+
- dist/chunks/_weekday_stacked-DSKatW3m.js
|
3477
3472
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3478
3473
|
- dist/chunks/lib-BGzBzFZX.js
|
3479
3474
|
- dist/chunks/pb_form_validation-BvNy9Bd6.js
|
@@ -1,58 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
-
|
5
|
-
const AdvancedTableStickyColumns = (props) => {
|
6
|
-
const columnDefinitions = [
|
7
|
-
{
|
8
|
-
accessor: "year",
|
9
|
-
label: "Year",
|
10
|
-
id: "year",
|
11
|
-
cellAccessors: ["quarter", "month", "day"],
|
12
|
-
},
|
13
|
-
{
|
14
|
-
accessor: "newEnrollments",
|
15
|
-
label: "New Enrollments",
|
16
|
-
id: "newEnrollments",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
accessor: "scheduledMeetings",
|
20
|
-
label: "Scheduled Meetings",
|
21
|
-
id: "scheduledMeetings",
|
22
|
-
},
|
23
|
-
{
|
24
|
-
accessor: "attendanceRate",
|
25
|
-
label: "Attendance Rate",
|
26
|
-
id: "attendanceRate",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
accessor: "completedClasses",
|
30
|
-
label: "Completed Classes",
|
31
|
-
id: "completedClasses",
|
32
|
-
},
|
33
|
-
{
|
34
|
-
accessor: "classCompletionRate",
|
35
|
-
label: "Class Completion Rate",
|
36
|
-
id: "classCompletionRate",
|
37
|
-
},
|
38
|
-
{
|
39
|
-
accessor: "graduatedStudents",
|
40
|
-
label: "Graduated Students",
|
41
|
-
id: "graduatedStudents",
|
42
|
-
},
|
43
|
-
]
|
44
|
-
|
45
|
-
return (
|
46
|
-
<div>
|
47
|
-
<AdvancedTable
|
48
|
-
columnDefinitions={columnDefinitions}
|
49
|
-
responsive="none"
|
50
|
-
stickyLeftColumn={["year", "newEnrollments"]}
|
51
|
-
tableData={MOCK_DATA}
|
52
|
-
{...props}
|
53
|
-
/>
|
54
|
-
</div>
|
55
|
-
)
|
56
|
-
}
|
57
|
-
|
58
|
-
export default AdvancedTableStickyColumns
|
@@ -1,6 +0,0 @@
|
|
1
|
-
To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
|
2
|
-
|
3
|
-
To achieve this:
|
4
|
-
- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string.
|
5
|
-
- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
|
6
|
-
- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.
|
@@ -1,97 +0,0 @@
|
|
1
|
-
@mixin advanced-table-sticky-mixin(
|
2
|
-
$border-color,
|
3
|
-
$bg-main,
|
4
|
-
$bg-secondary,
|
5
|
-
$highlight: $info_subtle
|
6
|
-
) {
|
7
|
-
border-radius: 4px;
|
8
|
-
box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
|
9
|
-
display: block;
|
10
|
-
[class^="pb_table"].table-sm.table-card thead tr th:first-child,
|
11
|
-
[class^="pb_table"].table-sm:not(.no-hover).table-card
|
12
|
-
tbody
|
13
|
-
tr
|
14
|
-
td:first-child {
|
15
|
-
border-left-width: 0px !important;
|
16
|
-
}
|
17
|
-
[class^="pb_table"].table-sm.table-card thead tr th:last-child,
|
18
|
-
[class^="pb_table"].table-sm:not(.no-hover).table-card
|
19
|
-
tbody
|
20
|
-
tr
|
21
|
-
td:last-child {
|
22
|
-
border-right-width: 0px;
|
23
|
-
}
|
24
|
-
[class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
|
25
|
-
[class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
|
26
|
-
border-radius: 0 0 0 0;
|
27
|
-
}
|
28
|
-
.table-header-cells:first-child,
|
29
|
-
td:first-child,
|
30
|
-
.pb_table_td:first-child,
|
31
|
-
.checkbox-cell.checkbox-cell-header:first-child,
|
32
|
-
.table-header-cells.sticky-left,
|
33
|
-
[class*="pinned-left"] {
|
34
|
-
background-color: $bg-main;
|
35
|
-
box-shadow: $shadow_deep !important;
|
36
|
-
position: sticky !important;
|
37
|
-
left: 0;
|
38
|
-
z-index: 2;
|
39
|
-
}
|
40
|
-
|
41
|
-
.bg-silver {
|
42
|
-
td:first-child,
|
43
|
-
.sticky-left {
|
44
|
-
background-color: $bg-secondary;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
.bg-row-selection {
|
48
|
-
td:first-child,
|
49
|
-
.sticky-left {
|
50
|
-
background-color: $highlight;
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
|
-
.bg-white {
|
55
|
-
td:first-child,
|
56
|
-
.sticky-left {
|
57
|
-
background-color: $bg-main;
|
58
|
-
}
|
59
|
-
}
|
60
|
-
|
61
|
-
.virtualized-table-row {
|
62
|
-
&.bg-silver td:first-child {
|
63
|
-
background-color: $bg-secondary;
|
64
|
-
}
|
65
|
-
&.bg-white td:first-child {
|
66
|
-
background-color: $bg-main;
|
67
|
-
}
|
68
|
-
&.bg-row-selection td:first-child {
|
69
|
-
background-color: $highlight;
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
.row-selection-actions-card {
|
74
|
-
border-right-width: 0px;
|
75
|
-
border-left-width: 0px;
|
76
|
-
position: sticky;
|
77
|
-
top: 0;
|
78
|
-
left: 0;
|
79
|
-
border-radius: unset;
|
80
|
-
}
|
81
|
-
|
82
|
-
.checkbox-cell {
|
83
|
-
display: table-cell !important;
|
84
|
-
}
|
85
|
-
|
86
|
-
.sticky-header {
|
87
|
-
thead {
|
88
|
-
th:first-child {
|
89
|
-
box-shadow: 1px 0 10px -2px $border-color !important;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
.pb_advanced_table_header {
|
94
|
-
box-shadow: none !important;
|
95
|
-
}
|
96
|
-
}
|
97
|
-
}
|
@@ -1,110 +0,0 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import Flex from '../../pb_flex/_flex'
|
3
|
-
import Caption from '../../pb_caption/_caption'
|
4
|
-
import Draggable from '../_draggable'
|
5
|
-
import { DraggableProvider } from '../context'
|
6
|
-
import Image from '../../pb_image/_image'
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
const dataLineVertical = [
|
11
|
-
{
|
12
|
-
id: "211",
|
13
|
-
url: "https://unsplash.it/500/400/?image=633",
|
14
|
-
},
|
15
|
-
{
|
16
|
-
id: "212",
|
17
|
-
url: "https://unsplash.it/500/400/?image=634",
|
18
|
-
},
|
19
|
-
{
|
20
|
-
id: "213",
|
21
|
-
url: "https://unsplash.it/500/400/?image=637",
|
22
|
-
},
|
23
|
-
];
|
24
|
-
|
25
|
-
const dataLineHorizontal = [
|
26
|
-
{
|
27
|
-
id: "2111",
|
28
|
-
url: "https://unsplash.it/500/400/?image=633",
|
29
|
-
},
|
30
|
-
{
|
31
|
-
id: "2122",
|
32
|
-
url: "https://unsplash.it/500/400/?image=634",
|
33
|
-
},
|
34
|
-
{
|
35
|
-
id: "2133",
|
36
|
-
url: "https://unsplash.it/500/400/?image=637",
|
37
|
-
},
|
38
|
-
];
|
39
|
-
|
40
|
-
const DraggableDropZones = (props) => {
|
41
|
-
const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
|
42
|
-
const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
|
43
|
-
|
44
|
-
return (
|
45
|
-
<>
|
46
|
-
<Caption marginBottom="xs"
|
47
|
-
marginTop="xl"
|
48
|
-
text="Vertical"
|
49
|
-
/>
|
50
|
-
<DraggableProvider
|
51
|
-
dropZone={{ type: "line", color: "purple" }}
|
52
|
-
initialItems={dataLineVertical}
|
53
|
-
onReorder={(items) => setInitialLineVerticalState(items)}
|
54
|
-
>
|
55
|
-
<Draggable.Container {...props}>
|
56
|
-
<Flex flexDirection="column"
|
57
|
-
height="367px"
|
58
|
-
>
|
59
|
-
{initialLineVerticalState.map(({ id, url }) => (
|
60
|
-
<Draggable.Item dragId={id}
|
61
|
-
key={id}
|
62
|
-
marginBottom="sm"
|
63
|
-
>
|
64
|
-
<Image alt={id}
|
65
|
-
size="md"
|
66
|
-
url={url}
|
67
|
-
/>
|
68
|
-
</Draggable.Item>
|
69
|
-
))}
|
70
|
-
</Flex>
|
71
|
-
</Draggable.Container>
|
72
|
-
</DraggableProvider>
|
73
|
-
<Caption marginBottom="xs"
|
74
|
-
marginTop="xl"
|
75
|
-
text="Horizontal"
|
76
|
-
/>
|
77
|
-
<Flex>
|
78
|
-
<DraggableProvider
|
79
|
-
dropZone={{ type: "line", direction: "horizontal" }}
|
80
|
-
initialItems={dataLineHorizontal}
|
81
|
-
onReorder={(items) => setInitialLineHorizontalState(items)}
|
82
|
-
>
|
83
|
-
<Draggable.Container
|
84
|
-
htmlOptions={{style:{ width: "285px"}}}
|
85
|
-
{...props}
|
86
|
-
>
|
87
|
-
<Flex alignItems="stretch"
|
88
|
-
flexDirection="row"
|
89
|
-
height="110px"
|
90
|
-
>
|
91
|
-
{initialLineHorizontalState.map(({ id, url }) => (
|
92
|
-
<Draggable.Item dragId={id}
|
93
|
-
key={id}
|
94
|
-
marginRight="sm"
|
95
|
-
>
|
96
|
-
<Image alt={id}
|
97
|
-
size="md"
|
98
|
-
url={url}
|
99
|
-
/>
|
100
|
-
</Draggable.Item>
|
101
|
-
))}
|
102
|
-
</Flex>
|
103
|
-
</Draggable.Container>
|
104
|
-
</DraggableProvider>
|
105
|
-
</Flex>
|
106
|
-
</>
|
107
|
-
);
|
108
|
-
};
|
109
|
-
|
110
|
-
export default DraggableDropZones;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
|
2
|
-
|
3
|
-
The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
|
4
|
-
|
5
|
-
Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
|