playbook_ui_docs 13.29.0.pre.alpha.removeduplicatekitexampleclass3063 → 13.30.0.pre.alpha.PBNTR353draggablev53136
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_bar_graph/docs/_bar_graph_horizontal.html.erb +58 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +68 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +3 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +13 -8
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +23 -35
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +7 -7
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +7 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +11 -9
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +7 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb +24 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +36 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb +32 -33
- data/dist/app/components/playbook/pb_docs/kit_example.rb +94 -0
- data/dist/menu.yml +5 -1
- data/dist/playbook-doc.js +9 -9
- metadata +16 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f561299e831e96ce1418236e2bebc1a33e5655c53226bc50c877ab38d4a698d9
|
4
|
+
data.tar.gz: 35ef55ef238504ef32ecb0ccd9d4108e3428272716437aecf1abcd081b059354
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d4a4e79a56df618ad59184c57aef9fd59bce593a98f06cffc3017d17c6d25e176bdfac1f63bdc373a0391f01e92aa3d71ea2ca3584761ed004f4486e6b0ac48a
|
7
|
+
data.tar.gz: 6c3e50107b18352613cd01680687574fa752cd55320300a2106a4370117e42aa4447214b5f65739edc51359ea48b5f716bf473d13baaff4f3b8f5c2d910f011f
|
@@ -0,0 +1,58 @@
|
|
1
|
+
<% bar_graph_options = {
|
2
|
+
customOptions: {
|
3
|
+
chart: {
|
4
|
+
type: 'bar'
|
5
|
+
},
|
6
|
+
title: {
|
7
|
+
text: 'Historic World Population by Region',
|
8
|
+
align: 'left'
|
9
|
+
},
|
10
|
+
subtitle: {
|
11
|
+
text: 'Source: <a ' +
|
12
|
+
'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
|
13
|
+
'target="_blank">Wikipedia.org</a>',
|
14
|
+
align: 'left'
|
15
|
+
},
|
16
|
+
xAxis: {
|
17
|
+
categories: ['Africa', 'America', 'Asia', 'Europe'],
|
18
|
+
lineWidth: 0
|
19
|
+
},
|
20
|
+
yAxis: {
|
21
|
+
min: 0,
|
22
|
+
title: {
|
23
|
+
text: 'Population (millions)',
|
24
|
+
align: 'high'
|
25
|
+
},
|
26
|
+
labels: {
|
27
|
+
overflow: 'justify'
|
28
|
+
},
|
29
|
+
},
|
30
|
+
tooltip: {
|
31
|
+
valueSuffix: ' millions'
|
32
|
+
},
|
33
|
+
plotOptions: {
|
34
|
+
bar: {
|
35
|
+
dataLabels: {
|
36
|
+
enabled: true
|
37
|
+
},
|
38
|
+
groupPadding: 0.1
|
39
|
+
}
|
40
|
+
},
|
41
|
+
series: [{
|
42
|
+
name: 'Year 1990',
|
43
|
+
data: [631, 727, 3202, 721]
|
44
|
+
}, {
|
45
|
+
name: 'Year 2000',
|
46
|
+
data: [814, 841, 3714, 726]
|
47
|
+
}, {
|
48
|
+
name: 'Year 2018',
|
49
|
+
data: [1276, 1007, 4561, 746]
|
50
|
+
}]
|
51
|
+
}
|
52
|
+
} %>
|
53
|
+
|
54
|
+
<%= pb_rails("bar_graph", props: {
|
55
|
+
id: "bar-horizontal",
|
56
|
+
y_axis_min: 0,
|
57
|
+
custom_options: bar_graph_options,
|
58
|
+
}) %>
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import BarGraph from '../_bar_graph'
|
4
|
+
|
5
|
+
|
6
|
+
const barGraphOptions = {
|
7
|
+
chart: {
|
8
|
+
type: 'bar'
|
9
|
+
},
|
10
|
+
title: {
|
11
|
+
text: 'Historic World Population by Region',
|
12
|
+
align: 'left'
|
13
|
+
},
|
14
|
+
subtitle: {
|
15
|
+
text: 'Source: <a ' +
|
16
|
+
'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
|
17
|
+
'target="_blank">Wikipedia.org</a>',
|
18
|
+
align: 'left'
|
19
|
+
},
|
20
|
+
xAxis: {
|
21
|
+
categories: ['Africa', 'America', 'Asia', 'Europe'],
|
22
|
+
lineWidth: 0
|
23
|
+
},
|
24
|
+
yAxis: {
|
25
|
+
min: 0,
|
26
|
+
title: {
|
27
|
+
text: 'Population (millions)',
|
28
|
+
align: 'high'
|
29
|
+
},
|
30
|
+
labels: {
|
31
|
+
overflow: 'justify'
|
32
|
+
},
|
33
|
+
},
|
34
|
+
tooltip: {
|
35
|
+
valueSuffix: ' millions'
|
36
|
+
},
|
37
|
+
plotOptions: {
|
38
|
+
bar: {
|
39
|
+
dataLabels: {
|
40
|
+
enabled: true
|
41
|
+
},
|
42
|
+
groupPadding: 0.1
|
43
|
+
}
|
44
|
+
},
|
45
|
+
series: [{
|
46
|
+
name: 'Year 1990',
|
47
|
+
data: [631, 727, 3202, 721]
|
48
|
+
}, {
|
49
|
+
name: 'Year 2000',
|
50
|
+
data: [814, 841, 3714, 726]
|
51
|
+
}, {
|
52
|
+
name: 'Year 2018',
|
53
|
+
data: [1276, 1007, 4561, 746]
|
54
|
+
}]
|
55
|
+
}
|
56
|
+
|
57
|
+
const BarGraphHorizontal = (props) => (
|
58
|
+
<div>
|
59
|
+
<BarGraph
|
60
|
+
customOptions={barGraphOptions}
|
61
|
+
id="bar-horizontal"
|
62
|
+
yAxisMin={0}
|
63
|
+
{...props}
|
64
|
+
/>
|
65
|
+
</div>
|
66
|
+
)
|
67
|
+
|
68
|
+
export default BarGraphHorizontal
|
@@ -12,6 +12,7 @@ examples:
|
|
12
12
|
- bar_graph_stacked: Stacked
|
13
13
|
- bar_graph_negative_numbers: Negative Numbers
|
14
14
|
- bar_graph_secondary_y_axis: Secondary Y-Axis
|
15
|
+
- bar_graph_horizontal: Custom Options From Highcharts
|
15
16
|
|
16
17
|
|
17
18
|
react:
|
@@ -26,3 +27,4 @@ examples:
|
|
26
27
|
- bar_graph_stacked: Stacked
|
27
28
|
- bar_graph_negative_numbers: Negative Numbers
|
28
29
|
- bar_graph_secondary_y_axis: Secondary Y-Axis
|
30
|
+
- bar_graph_horizontal: Custom Options From Highcharts
|
@@ -9,3 +9,4 @@ export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
|
|
9
9
|
export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
|
10
10
|
export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
|
11
11
|
export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
|
12
|
+
export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
|
@@ -27,18 +27,19 @@ const DraggableDefault = (props) => {
|
|
27
27
|
return (
|
28
28
|
<>
|
29
29
|
<DraggableProvider initialItems={data}
|
30
|
-
|
30
|
+
onReorder={(items) => setInitialState(items)}
|
31
31
|
>
|
32
32
|
<Draggable.Container {...props}>
|
33
33
|
<SelectableList variant="checkbox">
|
34
34
|
{initialState.map(({ id, text }) => (
|
35
|
-
<Draggable.Item
|
35
|
+
<Draggable.Item dragId={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}
|
42
43
|
/>
|
43
44
|
</Draggable.Item>
|
44
45
|
))}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `
|
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. `dragId` is a REQUIRED prop for Draggable.Item.
|
@@ -18,7 +18,7 @@ const containers = ["To Do", "In Progress", "Done"];
|
|
18
18
|
// Initial items to be dragged
|
19
19
|
const data = [
|
20
20
|
{
|
21
|
-
id: "
|
21
|
+
id: "11",
|
22
22
|
container: "To Do",
|
23
23
|
title: "Task 1",
|
24
24
|
description: "Bug fixes",
|
@@ -26,7 +26,7 @@ const data = [
|
|
26
26
|
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
27
27
|
},
|
28
28
|
{
|
29
|
-
id: "
|
29
|
+
id: "12",
|
30
30
|
container: "To Do",
|
31
31
|
title: "Task 2",
|
32
32
|
description: "Documentation",
|
@@ -34,7 +34,7 @@ const data = [
|
|
34
34
|
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
35
35
|
},
|
36
36
|
{
|
37
|
-
id: "
|
37
|
+
id: "13",
|
38
38
|
container: "In Progress",
|
39
39
|
title: "Task 3",
|
40
40
|
description: "Add a variant",
|
@@ -42,7 +42,7 @@ const data = [
|
|
42
42
|
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
43
43
|
},
|
44
44
|
{
|
45
|
-
id: "
|
45
|
+
id: "14",
|
46
46
|
container: "To Do",
|
47
47
|
title: "Task 4",
|
48
48
|
description: "Add jest tests",
|
@@ -50,7 +50,7 @@ const data = [
|
|
50
50
|
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
51
51
|
},
|
52
52
|
{
|
53
|
-
id: "
|
53
|
+
id: "15",
|
54
54
|
container: "Done",
|
55
55
|
title: "Task 5",
|
56
56
|
description: "Alpha testing",
|
@@ -58,7 +58,7 @@ const data = [
|
|
58
58
|
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
59
59
|
},
|
60
60
|
{
|
61
|
-
id: "
|
61
|
+
id: "16",
|
62
62
|
container: "In Progress",
|
63
63
|
title: "Task 6",
|
64
64
|
description: "Release",
|
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
|
|
83
83
|
|
84
84
|
return (
|
85
85
|
<DraggableProvider initialItems={data}
|
86
|
-
|
86
|
+
onReorder={(items) => setInitialState(items)}
|
87
87
|
>
|
88
88
|
<Flex
|
89
89
|
justifyContent="center"
|
@@ -92,6 +92,7 @@ const DraggableMultipleContainer = (props) => {
|
|
92
92
|
{containers?.map((container) => (
|
93
93
|
<Draggable.Container
|
94
94
|
container={container}
|
95
|
+
htmlOptions={{style:{ width: "200px", height: "70vh"}}}
|
95
96
|
key={container}
|
96
97
|
padding="sm"
|
97
98
|
>
|
@@ -112,12 +113,13 @@ const DraggableMultipleContainer = (props) => {
|
|
112
113
|
}) => (
|
113
114
|
<Draggable.Item
|
114
115
|
container={container}
|
115
|
-
|
116
|
+
dragId={id}
|
116
117
|
key={id}
|
117
118
|
>
|
118
119
|
<Card
|
119
120
|
marginBottom="sm"
|
120
121
|
padding="sm"
|
122
|
+
{...props}
|
121
123
|
>
|
122
124
|
<Flex justify="between">
|
123
125
|
<FlexItem>
|
@@ -130,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
|
|
130
132
|
<Title paddingLeft="xs"
|
131
133
|
size={4}
|
132
134
|
text={title}
|
135
|
+
{...props}
|
133
136
|
/>
|
134
137
|
</Flex>
|
135
138
|
</FlexItem>
|
@@ -138,10 +141,12 @@ const DraggableMultipleContainer = (props) => {
|
|
138
141
|
rounded
|
139
142
|
text={badgeProperties(container).text}
|
140
143
|
variant={badgeProperties(container).color}
|
144
|
+
{...props}
|
141
145
|
/>
|
142
146
|
</Flex>
|
143
147
|
<Body paddingTop="xs"
|
144
148
|
text={description}
|
149
|
+
{...props}
|
145
150
|
/>
|
146
151
|
</Card>
|
147
152
|
</Draggable.Item>
|
@@ -0,0 +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.
|
@@ -13,15 +13,15 @@ import {
|
|
13
13
|
// Initial items to be dragged
|
14
14
|
const data = [
|
15
15
|
{
|
16
|
-
id: "
|
16
|
+
id: "21",
|
17
17
|
text: "Joe Black",
|
18
18
|
},
|
19
19
|
{
|
20
|
-
id: "
|
20
|
+
id: "22",
|
21
21
|
text: "Nancy White",
|
22
22
|
},
|
23
23
|
{
|
24
|
-
id: "
|
24
|
+
id: "23",
|
25
25
|
text: "Bill Green",
|
26
26
|
},
|
27
27
|
];
|
@@ -32,58 +32,44 @@ const DraggableWithCards = (props) => {
|
|
32
32
|
return (
|
33
33
|
<DraggableProvider
|
34
34
|
initialItems={data}
|
35
|
-
|
35
|
+
onReorder={(items) => setInitialState(items)}
|
36
36
|
>
|
37
37
|
<Draggable.Container {...props}>
|
38
38
|
{initialState.map(({ id, text }) => (
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
highlight={{ position: "side", color: "primary" }}
|
39
|
+
<Card dragId={id}
|
40
|
+
draggableItem
|
41
|
+
highlight={{ color: "primary", position: "side" }}
|
42
|
+
key={id}
|
44
43
|
marginBottom="xs"
|
44
|
+
padding="xs"
|
45
|
+
{...props}
|
45
46
|
>
|
46
47
|
<Flex alignItems="stretch"
|
47
48
|
flexDirection="column"
|
48
|
-
|
49
|
+
>
|
49
50
|
<Flex gap="xs">
|
50
51
|
<Title size={4}
|
51
|
-
text={text}
|
52
|
-
|
52
|
+
text={text}
|
53
|
+
{...props}
|
54
|
+
/>
|
53
55
|
<Badge
|
54
56
|
text="35-12345"
|
55
57
|
variant="primary"
|
56
|
-
|
58
|
+
{...props}
|
59
|
+
/>
|
57
60
|
</Flex>
|
58
|
-
|
59
|
-
<Flex
|
60
|
-
gap="sm"
|
61
|
-
spacing="between"
|
62
|
-
>
|
63
|
-
<Caption
|
64
|
-
size="xs"
|
65
|
-
text="8:00A"
|
66
|
-
/>
|
67
|
-
<Flex gap="xxs">
|
68
61
|
<Caption
|
69
62
|
size="xs"
|
70
|
-
text="Township Name"
|
71
|
-
|
72
|
-
<Caption size="xs"
|
73
|
-
text="•"
|
63
|
+
text="8:00A • Township Name • 90210"
|
64
|
+
{...props}
|
74
65
|
/>
|
75
|
-
<Caption size="xs"
|
76
|
-
text="90210"
|
77
|
-
/>
|
78
|
-
</Flex>
|
79
|
-
</Flex>
|
80
|
-
|
81
66
|
<Flex gap="xxs"
|
82
67
|
spacing="between"
|
83
68
|
>
|
84
69
|
<Flex gap="xxs">
|
85
70
|
<Caption color="error"
|
86
71
|
size="xs"
|
72
|
+
{...props}
|
87
73
|
>
|
88
74
|
<Icon icon="house-circle-exclamation" />
|
89
75
|
</Caption>
|
@@ -96,20 +82,22 @@ const DraggableWithCards = (props) => {
|
|
96
82
|
<Badge rounded
|
97
83
|
text="Schedule QA"
|
98
84
|
variant="warning"
|
85
|
+
{...props}
|
99
86
|
/>
|
100
87
|
<Badge rounded
|
101
88
|
text="Flex"
|
102
|
-
variant="primary"
|
89
|
+
variant="primary"
|
90
|
+
{...props}
|
103
91
|
/>
|
104
92
|
<Badge rounded
|
105
93
|
text="R99"
|
106
94
|
variant="primary"
|
95
|
+
{...props}
|
107
96
|
/>
|
108
97
|
</Flex>
|
109
98
|
</Flex>
|
110
99
|
</Flex>
|
111
100
|
</Card>
|
112
|
-
</Draggable.Item>
|
113
101
|
))}
|
114
102
|
</Draggable.Container>
|
115
103
|
</DraggableProvider>
|
@@ -0,0 +1,5 @@
|
|
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 of by setting `dragHandle` to false on the Card kit.
|
2
|
+
|
3
|
+
In addition to the above, `dragId` is a REQUIRED prop to be passed to the Card kit when implementing dragging.
|
4
|
+
|
5
|
+
The dev must manage state as shown.
|
@@ -4,19 +4,19 @@ import { DraggableProvider, List, ListItem } from "../../";
|
|
4
4
|
// Initial items to be dragged
|
5
5
|
const data = [
|
6
6
|
{
|
7
|
-
id: "
|
7
|
+
id: "31",
|
8
8
|
text: "Philadelphia",
|
9
9
|
},
|
10
10
|
{
|
11
|
-
id: "
|
11
|
+
id: "32",
|
12
12
|
text: "New Jersey",
|
13
13
|
},
|
14
14
|
{
|
15
|
-
id: "
|
15
|
+
id: "33",
|
16
16
|
text: "Maryland",
|
17
17
|
},
|
18
18
|
{
|
19
|
-
id: "
|
19
|
+
id: "34",
|
20
20
|
text: "Connecticut",
|
21
21
|
},
|
22
22
|
];
|
@@ -28,13 +28,13 @@ const DraggableWithList = (props) => {
|
|
28
28
|
return (
|
29
29
|
<>
|
30
30
|
<DraggableProvider initialItems={data}
|
31
|
-
|
31
|
+
onReorder={(items) => setInitialState(items)}
|
32
32
|
>
|
33
|
-
<List
|
33
|
+
<List enableDrag
|
34
34
|
{...props}
|
35
35
|
>
|
36
36
|
{initialState.map(({ id, text }) => (
|
37
|
-
<ListItem
|
37
|
+
<ListItem dragId={id}
|
38
38
|
key={id}
|
39
39
|
>
|
40
40
|
{text}
|
@@ -1 +1,7 @@
|
|
1
|
-
For a simplified version of the Draggable API
|
1
|
+
For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop.
|
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.
|
@@ -4,19 +4,19 @@ import { SelectableList, DraggableProvider } from "../../";
|
|
4
4
|
// Initial items to be dragged
|
5
5
|
const data = [
|
6
6
|
{
|
7
|
-
id: "
|
7
|
+
id: "41",
|
8
8
|
text: "Task 1",
|
9
9
|
},
|
10
10
|
{
|
11
|
-
id: "
|
11
|
+
id: "42",
|
12
12
|
text: "Task 2",
|
13
13
|
},
|
14
14
|
{
|
15
|
-
id: "
|
15
|
+
id: "43",
|
16
16
|
text: "Task 3",
|
17
17
|
},
|
18
18
|
{
|
19
|
-
id: "
|
19
|
+
id: "44",
|
20
20
|
text: "Task 4",
|
21
21
|
},
|
22
22
|
];
|
@@ -27,18 +27,20 @@ const DraggableWithSelectableList = (props) => {
|
|
27
27
|
return (
|
28
28
|
<>
|
29
29
|
<DraggableProvider initialItems={data}
|
30
|
-
|
30
|
+
onReorder={(items) => setInitialState(items)}
|
31
31
|
>
|
32
|
-
<SelectableList
|
33
|
-
variant="
|
32
|
+
<SelectableList enableDrag
|
33
|
+
variant="radio"
|
34
34
|
{...props}
|
35
35
|
>
|
36
36
|
{initialState.map(({ id, text }) => (
|
37
|
-
<SelectableList.Item
|
37
|
+
<SelectableList.Item
|
38
|
+
dragId={id}
|
38
39
|
key={id}
|
39
40
|
label={text}
|
40
|
-
name=
|
41
|
+
name="radio-test"
|
41
42
|
value={id}
|
43
|
+
{...props}
|
42
44
|
/>
|
43
45
|
))}
|
44
46
|
</SelectableList>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop.
|
2
|
+
|
3
|
+
In addition to the above, `dragId` is a REQUIRED prop to be passed to the SelectableList 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 SelectableList kit.
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("overlay") do %>
|
2
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
3
|
+
<thead>
|
4
|
+
<tr>
|
5
|
+
<th>Column 1</th>
|
6
|
+
<th>Column 2</th>
|
7
|
+
<th>Column 3</th>
|
8
|
+
<th>Column 4</th>
|
9
|
+
<th>Column 5</th>
|
10
|
+
</tr>
|
11
|
+
</thead>
|
12
|
+
<tbody>
|
13
|
+
<% 7.times do %>
|
14
|
+
<tr>
|
15
|
+
<td>Value 1</td>
|
16
|
+
<td>Value 2</td>
|
17
|
+
<td>Value 3</td>
|
18
|
+
<td>Value 4</td>
|
19
|
+
<td>Value 5</td>
|
20
|
+
</tr>
|
21
|
+
<% end %>
|
22
|
+
</tbody>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import {
|
3
|
+
Overlay,
|
4
|
+
Table,
|
5
|
+
} from '../..'
|
6
|
+
|
7
|
+
const TableExample = () => {
|
8
|
+
return (
|
9
|
+
<Table size="sm">
|
10
|
+
<thead>
|
11
|
+
<tr>
|
12
|
+
<th>{'Column 1'}</th>
|
13
|
+
<th>{'Column 2'}</th>
|
14
|
+
<th>{'Column 3'}</th>
|
15
|
+
<th>{'Column 4'}</th>
|
16
|
+
<th>{'Column 5'}</th>
|
17
|
+
</tr>
|
18
|
+
</thead>
|
19
|
+
<tbody>
|
20
|
+
{Array.from({ length: 7 }, (_, index) => (
|
21
|
+
<tr key={index}>
|
22
|
+
{Array.from({ length: 5 }, (_, columnIndex) => (
|
23
|
+
<td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
|
24
|
+
))}
|
25
|
+
</tr>
|
26
|
+
))}
|
27
|
+
</tbody>
|
28
|
+
</Table>
|
29
|
+
)
|
30
|
+
}
|
31
|
+
|
32
|
+
const OverlayDefault = () => (
|
33
|
+
<>
|
34
|
+
<Overlay>
|
35
|
+
<TableExample />
|
36
|
+
</Overlay>
|
37
|
+
</>
|
38
|
+
)
|
39
|
+
|
40
|
+
export default OverlayDefault
|
@@ -0,0 +1,7 @@
|
|
1
|
+
Overlays optionally accept 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
|
+
|
3
|
+
The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
|
4
|
+
|
5
|
+
The `position` key accepts `bottom` (default), `top`, `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
|
+
|
7
|
+
The `size` value is `full` (100%) by default, but 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(s).
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
3
|
+
<% 15.times do %>
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
5
|
+
<%= pb_rails("card") do %>
|
6
|
+
Card content
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import {
|
3
|
+
Overlay,
|
4
|
+
Card,
|
5
|
+
Flex,
|
6
|
+
FlexItem,
|
7
|
+
} from '../..'
|
8
|
+
|
9
|
+
const InlineCardsExample = () => {
|
10
|
+
return (
|
11
|
+
<Flex
|
12
|
+
columnGap="lg"
|
13
|
+
orientation="row"
|
14
|
+
overflowX="auto"
|
15
|
+
>
|
16
|
+
{Array.from({ length: 15 }, (_, index) => (
|
17
|
+
<FlexItem key={index}>
|
18
|
+
<Card>{"Card Content"}</Card>
|
19
|
+
</FlexItem>
|
20
|
+
))}
|
21
|
+
</Flex>
|
22
|
+
)
|
23
|
+
}
|
24
|
+
|
25
|
+
const OverlayMultiDirectional = () => (
|
26
|
+
<>
|
27
|
+
<Overlay
|
28
|
+
color="card_light"
|
29
|
+
layout={{"x": "xl"}}
|
30
|
+
>
|
31
|
+
<InlineCardsExample />
|
32
|
+
</Overlay>
|
33
|
+
</>
|
34
|
+
)
|
35
|
+
|
36
|
+
export default OverlayMultiDirectional
|
@@ -0,0 +1,5 @@
|
|
1
|
+
Optionally, you can pass multi-directional options (`x` or `y`) to the `position` key, which creates multiple overlays.
|
2
|
+
|
3
|
+
Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` value you set.
|
4
|
+
|
5
|
+
NOTE: Multi-directional overlays share the available container space, so passing `full` or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.
|