playbook_ui_docs 13.29.0.pre.alpha.testingcollapsibleissue3052 → 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_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 +1 -1
- 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 +8 -7
- 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 +13 -32
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +3 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +5 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +5 -5
- 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.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 +4 -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 +19 -3
- data/dist/menu.yml +5 -1
- data/dist/playbook-doc.js +9 -9
- metadata +12 -2
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
|
@@ -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,7 +27,7 @@ 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">
|
@@ -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
4
|
The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
|
@@ -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
|
>
|
@@ -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,52 +32,34 @@ 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
|
-
<Draggable.Item id={id}
|
40
|
-
key={id}
|
41
|
-
>
|
42
39
|
<Card
|
43
|
-
|
40
|
+
draggableItem
|
41
|
+
highlight={{ color: "primary", position: "side" }}
|
42
|
+
id={id}
|
43
|
+
key={id}
|
44
44
|
marginBottom="xs"
|
45
|
+
padding="xs"
|
45
46
|
>
|
46
47
|
<Flex alignItems="stretch"
|
47
48
|
flexDirection="column"
|
48
|
-
|
49
|
+
>
|
49
50
|
<Flex gap="xs">
|
50
51
|
<Title size={4}
|
51
52
|
text={text}
|
52
|
-
|
53
|
+
/>
|
53
54
|
<Badge
|
54
55
|
text="35-12345"
|
55
56
|
variant="primary"
|
56
|
-
|
57
|
+
/>
|
57
58
|
</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
59
|
<Caption
|
69
60
|
size="xs"
|
70
|
-
text="Township Name"
|
71
|
-
/>
|
72
|
-
<Caption size="xs"
|
73
|
-
text="•"
|
61
|
+
text="8:00A • Township Name • 90210"
|
74
62
|
/>
|
75
|
-
<Caption size="xs"
|
76
|
-
text="90210"
|
77
|
-
/>
|
78
|
-
</Flex>
|
79
|
-
</Flex>
|
80
|
-
|
81
63
|
<Flex gap="xxs"
|
82
64
|
spacing="between"
|
83
65
|
>
|
@@ -109,7 +91,6 @@ const DraggableWithCards = (props) => {
|
|
109
91
|
</Flex>
|
110
92
|
</Flex>
|
111
93
|
</Card>
|
112
|
-
</Draggable.Item>
|
113
94
|
))}
|
114
95
|
</Draggable.Container>
|
115
96
|
</DraggableProvider>
|
@@ -0,0 +1,3 @@
|
|
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
|
+
|
3
|
+
The dev must manage state as shown and pass in id to the Card for dragging to work.
|
@@ -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,7 +28,7 @@ const DraggableWithList = (props) => {
|
|
28
28
|
return (
|
29
29
|
<>
|
30
30
|
<DraggableProvider initialItems={data}
|
31
|
-
|
31
|
+
onReorder={(items) => setInitialState(items)}
|
32
32
|
>
|
33
33
|
<List draggable
|
34
34
|
{...props}
|
@@ -1 +1 @@
|
|
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 `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.
|
@@ -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,7 +27,7 @@ const DraggableWithSelectableList = (props) => {
|
|
27
27
|
return (
|
28
28
|
<>
|
29
29
|
<DraggableProvider initialItems={data}
|
30
|
-
|
30
|
+
onReorder={(items) => setInitialState(items)}
|
31
31
|
>
|
32
32
|
<SelectableList draggable
|
33
33
|
variant="checkbox"
|
@@ -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 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
|
+
|
3
|
+
The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
|
4
|
+
|
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
|
+
|
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.
|
@@ -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.
|
@@ -1,34 +1,33 @@
|
|
1
|
-
<%= pb_rails("table") do %>
|
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
|
-
|
31
|
-
|
32
|
-
|
33
|
-
</tbody>
|
1
|
+
<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %>
|
2
|
+
<%= pb_rails("table/table_row") do %>
|
3
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center" }) %>
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<%= pb_rails("table/table_body") do %>
|
11
|
+
<%= pb_rails("table/table_row") do %>
|
12
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
13
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %>
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
|
17
|
+
<% end %>
|
18
|
+
<%= pb_rails("table/table_row") do %>
|
19
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %>
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
|
24
|
+
<% end %>
|
25
|
+
<%= pb_rails("table/table_row") do %>
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %>
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
|
31
|
+
<% end %>
|
32
|
+
<% end %>
|
34
33
|
<% end %>
|
@@ -67,9 +67,25 @@ module Playbook
|
|
67
67
|
stringified_code.gsub(" {...props}", "")
|
68
68
|
end
|
69
69
|
|
70
|
-
def read_kit_file(folder,
|
71
|
-
|
72
|
-
path
|
70
|
+
def read_kit_file(folder, file_name)
|
71
|
+
name_array = file_name.split(".")
|
72
|
+
path = ::Playbook.kit_path(kit, folder, file_name)
|
73
|
+
if name_array[1] != "md"
|
74
|
+
(path.exist? ? path.read : "")
|
75
|
+
else
|
76
|
+
if path.exist?
|
77
|
+
path.read
|
78
|
+
elsif type == "rails"
|
79
|
+
name_array[0] += "_rails"
|
80
|
+
file_name = name_array.join(".")
|
81
|
+
path = ::Playbook.kit_path(kit, folder, file_name)
|
82
|
+
elsif type == "react"
|
83
|
+
name_array[0] += "_react"
|
84
|
+
file_name = name_array.join(".")
|
85
|
+
path = ::Playbook.kit_path(kit, folder, file_name)
|
86
|
+
end
|
87
|
+
(path.exist? ? path.read : "")
|
88
|
+
end
|
73
89
|
end
|
74
90
|
end
|
75
91
|
end
|
data/dist/menu.yml
CHANGED
@@ -352,6 +352,9 @@ kits:
|
|
352
352
|
platforms: *web
|
353
353
|
description:
|
354
354
|
status: "stable"
|
355
|
+
- name: "overlay"
|
356
|
+
platforms: *react_only
|
357
|
+
status: "beta"
|
355
358
|
- name: "draggable"
|
356
359
|
platforms: *react_only
|
357
360
|
description:
|
@@ -467,4 +470,5 @@ kits:
|
|
467
470
|
status: "stable"
|
468
471
|
- name: "user"
|
469
472
|
platforms: *web
|
470
|
-
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
473
|
+
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
474
|
+
status: "stable"
|