playbook_ui_docs 13.30.0.pre.alpha.PBNTR353draggablev53136 → 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +1 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +4 -11
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +2 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -7
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +4 -6
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +4 -4
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -4
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +4 -4
- metadata +2 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +0 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb +0 -24
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb +0 -11
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '05813b97210befb8bf5db329609990ff637f48a7defa0b0cb9a8f61ceaf68cd5'
|
|
4
|
+
data.tar.gz: 25da023059632ffbb44140ba1e24799de56d0c3dc198513c3f25cdfa98e0fd1f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8517a60878e5668d21cae27692409fb51350aa132a02263d96e47f2a0c141463a4dfac9962c1dcaee88f4592ab23400dc8ec97aafde94bfc4a792debfd2d1b40
|
|
7
|
+
data.tar.gz: 2e9fec1a843f16c91034368c8c0f2cb3b242b32d10f27d7043cb476f5b11c869405cd19d7362b66cf5225ceb8458337b7be0f4bcd6368267944483edb062f6b5
|
|
@@ -32,14 +32,13 @@ const DraggableDefault = (props) => {
|
|
|
32
32
|
<Draggable.Container {...props}>
|
|
33
33
|
<SelectableList variant="checkbox">
|
|
34
34
|
{initialState.map(({ id, text }) => (
|
|
35
|
-
<Draggable.Item
|
|
35
|
+
<Draggable.Item id={id}
|
|
36
36
|
key={id}
|
|
37
37
|
>
|
|
38
38
|
<SelectableList.Item
|
|
39
39
|
label={text}
|
|
40
40
|
name={id}
|
|
41
41
|
value={id}
|
|
42
|
-
{...props}
|
|
43
42
|
/>
|
|
44
43
|
</Draggable.Item>
|
|
45
44
|
))}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
|
|
2
2
|
|
|
3
3
|
The `Draggable.Container` specifies the container within which items can be dropped.
|
|
4
|
-
The `Draggable.Item` specifies the items that can be dragged and dropped. `
|
|
4
|
+
The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
|
|
@@ -113,13 +113,12 @@ const DraggableMultipleContainer = (props) => {
|
|
|
113
113
|
}) => (
|
|
114
114
|
<Draggable.Item
|
|
115
115
|
container={container}
|
|
116
|
-
|
|
116
|
+
id={id}
|
|
117
117
|
key={id}
|
|
118
118
|
>
|
|
119
119
|
<Card
|
|
120
120
|
marginBottom="sm"
|
|
121
121
|
padding="sm"
|
|
122
|
-
{...props}
|
|
123
122
|
>
|
|
124
123
|
<Flex justify="between">
|
|
125
124
|
<FlexItem>
|
|
@@ -132,7 +131,6 @@ const DraggableMultipleContainer = (props) => {
|
|
|
132
131
|
<Title paddingLeft="xs"
|
|
133
132
|
size={4}
|
|
134
133
|
text={title}
|
|
135
|
-
{...props}
|
|
136
134
|
/>
|
|
137
135
|
</Flex>
|
|
138
136
|
</FlexItem>
|
|
@@ -141,12 +139,10 @@ const DraggableMultipleContainer = (props) => {
|
|
|
141
139
|
rounded
|
|
142
140
|
text={badgeProperties(container).text}
|
|
143
141
|
variant={badgeProperties(container).color}
|
|
144
|
-
{...props}
|
|
145
142
|
/>
|
|
146
143
|
</Flex>
|
|
147
144
|
<Body paddingTop="xs"
|
|
148
145
|
text={description}
|
|
149
|
-
{...props}
|
|
150
146
|
/>
|
|
151
147
|
</Card>
|
|
152
148
|
</Draggable.Item>
|
|
@@ -36,32 +36,29 @@ const DraggableWithCards = (props) => {
|
|
|
36
36
|
>
|
|
37
37
|
<Draggable.Container {...props}>
|
|
38
38
|
{initialState.map(({ id, text }) => (
|
|
39
|
-
<Card
|
|
39
|
+
<Card
|
|
40
40
|
draggableItem
|
|
41
41
|
highlight={{ color: "primary", position: "side" }}
|
|
42
|
+
id={id}
|
|
42
43
|
key={id}
|
|
43
44
|
marginBottom="xs"
|
|
44
45
|
padding="xs"
|
|
45
|
-
{...props}
|
|
46
46
|
>
|
|
47
47
|
<Flex alignItems="stretch"
|
|
48
48
|
flexDirection="column"
|
|
49
49
|
>
|
|
50
50
|
<Flex gap="xs">
|
|
51
51
|
<Title size={4}
|
|
52
|
-
text={text}
|
|
53
|
-
{...props}
|
|
52
|
+
text={text}
|
|
54
53
|
/>
|
|
55
54
|
<Badge
|
|
56
55
|
text="35-12345"
|
|
57
56
|
variant="primary"
|
|
58
|
-
{...props}
|
|
59
57
|
/>
|
|
60
58
|
</Flex>
|
|
61
59
|
<Caption
|
|
62
60
|
size="xs"
|
|
63
61
|
text="8:00A • Township Name • 90210"
|
|
64
|
-
{...props}
|
|
65
62
|
/>
|
|
66
63
|
<Flex gap="xxs"
|
|
67
64
|
spacing="between"
|
|
@@ -69,7 +66,6 @@ const DraggableWithCards = (props) => {
|
|
|
69
66
|
<Flex gap="xxs">
|
|
70
67
|
<Caption color="error"
|
|
71
68
|
size="xs"
|
|
72
|
-
{...props}
|
|
73
69
|
>
|
|
74
70
|
<Icon icon="house-circle-exclamation" />
|
|
75
71
|
</Caption>
|
|
@@ -82,17 +78,14 @@ const DraggableWithCards = (props) => {
|
|
|
82
78
|
<Badge rounded
|
|
83
79
|
text="Schedule QA"
|
|
84
80
|
variant="warning"
|
|
85
|
-
{...props}
|
|
86
81
|
/>
|
|
87
82
|
<Badge rounded
|
|
88
83
|
text="Flex"
|
|
89
|
-
variant="primary"
|
|
90
|
-
{...props}
|
|
84
|
+
variant="primary"
|
|
91
85
|
/>
|
|
92
86
|
<Badge rounded
|
|
93
87
|
text="R99"
|
|
94
88
|
variant="primary"
|
|
95
|
-
{...props}
|
|
96
89
|
/>
|
|
97
90
|
</Flex>
|
|
98
91
|
</Flex>
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
For a simplified version of the Draggable API for the Card kit, You can use the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out
|
|
1
|
+
For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit.
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
The dev must manage state as shown.
|
|
3
|
+
The dev must manage state as shown and pass in id to the Card for dragging to work.
|
|
@@ -30,11 +30,11 @@ const DraggableWithList = (props) => {
|
|
|
30
30
|
<DraggableProvider initialItems={data}
|
|
31
31
|
onReorder={(items) => setInitialState(items)}
|
|
32
32
|
>
|
|
33
|
-
<List
|
|
33
|
+
<List draggable
|
|
34
34
|
{...props}
|
|
35
35
|
>
|
|
36
36
|
{initialState.map(({ id, text }) => (
|
|
37
|
-
<ListItem
|
|
37
|
+
<ListItem id={id}
|
|
38
38
|
key={id}
|
|
39
39
|
>
|
|
40
40
|
{text}
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `
|
|
2
|
-
|
|
3
|
-
In addition to the above, `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
|
|
4
|
-
|
|
5
|
-
The dev must manage state as shown.
|
|
6
|
-
|
|
7
|
-
The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.
|
|
1
|
+
For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.
|
|
@@ -29,18 +29,16 @@ const DraggableWithSelectableList = (props) => {
|
|
|
29
29
|
<DraggableProvider initialItems={data}
|
|
30
30
|
onReorder={(items) => setInitialState(items)}
|
|
31
31
|
>
|
|
32
|
-
<SelectableList
|
|
33
|
-
variant="
|
|
32
|
+
<SelectableList draggable
|
|
33
|
+
variant="checkbox"
|
|
34
34
|
{...props}
|
|
35
35
|
>
|
|
36
36
|
{initialState.map(({ id, text }) => (
|
|
37
|
-
<SelectableList.Item
|
|
38
|
-
dragId={id}
|
|
37
|
+
<SelectableList.Item id={id}
|
|
39
38
|
key={id}
|
|
40
39
|
label={text}
|
|
41
|
-
name=
|
|
40
|
+
name={id}
|
|
42
41
|
value={id}
|
|
43
|
-
{...props}
|
|
44
42
|
/>
|
|
45
43
|
))}
|
|
46
44
|
</SelectableList>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
Overlays
|
|
1
|
+
Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
|
|
2
2
|
|
|
3
|
-
The optional `layout` prop accepts
|
|
3
|
+
The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
|
|
4
4
|
|
|
5
|
-
The `position` key accepts `
|
|
5
|
+
The `position` key accepts `top`, `bottom`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
|
|
6
6
|
|
|
7
|
-
The `size` value
|
|
7
|
+
The `size` value accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.
|