playbook_ui_docs 13.30.0.pre.alpha.PBNTR353draggablev53136 → 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096
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_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.
|