playbook_ui_docs 14.17.0.pre.rc.0 → 14.18.0.pre.rc.0
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/docs/_advanced_table_fullscreen.jsx +90 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +0 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +0 -7
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
- 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 +50 -48
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +9 -6
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +190 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/dist/playbook-doc.js +1 -1
- metadata +27 -14
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
|
@@ -0,0 +1,110 @@
|
|
|
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;
|
|
@@ -0,0 +1,5 @@
|
|
|
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.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
|
|
3
3
|
import Flex from '../../pb_flex/_flex'
|
|
4
|
-
import { DraggableProvider } from '
|
|
4
|
+
import { DraggableProvider } from '../context'
|
|
5
5
|
import Avatar from '../../pb_avatar/_avatar'
|
|
6
6
|
import Body from '../../pb_body/_body'
|
|
7
7
|
import Table from '../../pb_table/_table'
|
|
@@ -2,4 +2,6 @@ The draggable kit can also be used in conjunction with the table kit to create d
|
|
|
2
2
|
|
|
3
3
|
- Wrap the Table with the `DraggableProvider` and manage state as shown.
|
|
4
4
|
- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
|
|
5
|
-
- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
|
|
5
|
+
- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
|
|
6
|
+
|
|
7
|
+
We recommending using the default `dropZone type` with the Table kit.
|
|
@@ -4,14 +4,17 @@ examples:
|
|
|
4
4
|
- draggable_with_list: Draggable with List Kit
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
|
-
-
|
|
7
|
+
- draggable_with_table: Draggable with Table
|
|
8
8
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
9
|
+
- draggable_drop_zones: Draggable Drop Zones
|
|
10
|
+
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
|
11
|
+
- draggable_drop_zones_line: Draggable Drop Zones Line
|
|
9
12
|
|
|
10
13
|
rails:
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
14
|
+
- draggable_default: Default
|
|
15
|
+
- draggable_with_list: Draggable with List Kit
|
|
16
|
+
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
17
|
+
- draggable_with_cards: Draggable with Cards
|
|
15
18
|
- draggable_with_table: Draggable with Table
|
|
16
|
-
-
|
|
19
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
17
20
|
|
|
@@ -3,4 +3,7 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
|
|
|
3
3
|
export { default as DraggableWithList } from './_draggable_with_list.jsx'
|
|
4
4
|
export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
|
|
5
5
|
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
|
6
|
-
export { default as
|
|
6
|
+
export { default as DraggableWithTable } from './_draggable_with_table.jsx'
|
|
7
|
+
export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
|
|
8
|
+
export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
|
|
9
|
+
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
|
@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
|
|
|
12
12
|
label: "Jasper Furniss",
|
|
13
13
|
value: "Jasper Furniss",
|
|
14
14
|
territory: "PHL",
|
|
15
|
-
title: "
|
|
15
|
+
title: "Lead UX Engineer",
|
|
16
16
|
id: "jasper-furniss",
|
|
17
17
|
status: "Offline"
|
|
18
18
|
},
|
|
@@ -25,18 +25,18 @@ const DropdownWithAutocomplete = (props) => {
|
|
|
25
25
|
status: "Away"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
label: "
|
|
29
|
-
value: "
|
|
28
|
+
label: "Carlos Lima",
|
|
29
|
+
value: "Carlos Lima",
|
|
30
30
|
territory: "PHL",
|
|
31
|
-
title: "
|
|
32
|
-
id: "
|
|
31
|
+
title: "Nitro Developer",
|
|
32
|
+
id: "carlos-lima",
|
|
33
33
|
status: "Online"
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
label: "Courtney Long",
|
|
37
37
|
value: "Courtney Long",
|
|
38
38
|
territory: "PHL",
|
|
39
|
-
title: "UX
|
|
39
|
+
title: "Lead UX Designer",
|
|
40
40
|
id: "courtney-long",
|
|
41
41
|
status: "Online"
|
|
42
42
|
}
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
CHANGED
|
@@ -15,7 +15,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
15
15
|
label: "Jasper Furniss",
|
|
16
16
|
value: "Jasper Furniss",
|
|
17
17
|
territory: "PHL",
|
|
18
|
-
title: "
|
|
18
|
+
title: "Lead UX Engineer",
|
|
19
19
|
id: "jasper-furniss",
|
|
20
20
|
status: "Offline"
|
|
21
21
|
},
|
|
@@ -28,18 +28,18 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
28
28
|
status: "Away"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
label: "
|
|
32
|
-
value: "
|
|
31
|
+
label: "Carlos Lima",
|
|
32
|
+
value: "Carlos Lima",
|
|
33
33
|
territory: "PHL",
|
|
34
|
-
title: "
|
|
35
|
-
id: "
|
|
34
|
+
title: "Nitro Developer",
|
|
35
|
+
id: "carlos-lima",
|
|
36
36
|
status: "Online"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
label: "Courtney Long",
|
|
40
40
|
value: "Courtney Long",
|
|
41
41
|
territory: "PHL",
|
|
42
|
-
title: "UX
|
|
42
|
+
title: "Lead UX Designer",
|
|
43
43
|
id: "courtney-long",
|
|
44
44
|
status: "Online"
|
|
45
45
|
}
|
|
@@ -15,7 +15,7 @@ const DropdownWithCustomDisplay = (props) => {
|
|
|
15
15
|
label: "Jasper Furniss",
|
|
16
16
|
value: "Jasper Furniss",
|
|
17
17
|
territory: "PHL",
|
|
18
|
-
title: "
|
|
18
|
+
title: "Lead UX Engineer",
|
|
19
19
|
id: "jasper-furniss",
|
|
20
20
|
status: "Offline"
|
|
21
21
|
},
|
|
@@ -28,18 +28,18 @@ const DropdownWithCustomDisplay = (props) => {
|
|
|
28
28
|
status: "Away"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
label: "
|
|
32
|
-
value: "
|
|
31
|
+
label: "Carlos Lima",
|
|
32
|
+
value: "Carlos Lima",
|
|
33
33
|
territory: "PHL",
|
|
34
|
-
title: "
|
|
35
|
-
id: "
|
|
34
|
+
title: "Nitro Developer",
|
|
35
|
+
id: "carlos-lima",
|
|
36
36
|
status: "Online"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
label: "Courtney Long",
|
|
40
40
|
value: "Courtney Long",
|
|
41
41
|
territory: "PHL",
|
|
42
|
-
title: "UX
|
|
42
|
+
title: "Lead UX Designer",
|
|
43
43
|
id: "courtney-long",
|
|
44
44
|
status: "Online"
|
|
45
45
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<%
|
|
2
|
-
|
|
2
|
+
options = [
|
|
3
3
|
{
|
|
4
4
|
label: "Jasper Furniss",
|
|
5
5
|
value: "Jasper Furniss",
|
|
6
6
|
territory: "PHL",
|
|
7
|
-
title: "
|
|
7
|
+
title: "Lead UX Engineer",
|
|
8
8
|
id: "jasper-furniss",
|
|
9
9
|
status: "Offline"
|
|
10
10
|
},
|
|
@@ -17,22 +17,22 @@
|
|
|
17
17
|
status: "Away"
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
|
-
label: "
|
|
21
|
-
value: "
|
|
20
|
+
label: "Carlos Lima",
|
|
21
|
+
value: "Carlos Lima",
|
|
22
22
|
territory: "PHL",
|
|
23
|
-
title: "
|
|
24
|
-
id: "
|
|
23
|
+
title: "Nitro Developer",
|
|
24
|
+
id: "carlos-lima",
|
|
25
25
|
status: "Online"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
label: "Courtney Long",
|
|
29
29
|
value: "Courtney Long",
|
|
30
30
|
territory: "PHL",
|
|
31
|
-
title: "UX
|
|
31
|
+
title: "Lead UX Designer",
|
|
32
32
|
id: "courtney-long",
|
|
33
33
|
status: "Online"
|
|
34
34
|
}
|
|
35
|
-
]
|
|
35
|
+
];
|
|
36
36
|
|
|
37
37
|
%>
|
|
38
38
|
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Layout from '../../pb_layout/_layout'
|
|
4
|
+
import Flex from '../../pb_flex/_flex'
|
|
5
|
+
import Body from '../../pb_body/_body'
|
|
6
|
+
import Caption from '../../pb_caption/_caption'
|
|
7
|
+
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
8
|
+
|
|
9
|
+
const LayoutBracket = () => {
|
|
10
|
+
return (
|
|
11
|
+
<div>
|
|
12
|
+
<Layout
|
|
13
|
+
layout="bracket"
|
|
14
|
+
>
|
|
15
|
+
<Layout.RoundLabel>
|
|
16
|
+
<Caption>Wild Card</Caption>
|
|
17
|
+
<SectionSeparator marginY="sm"/>
|
|
18
|
+
</Layout.RoundLabel>
|
|
19
|
+
<Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
|
|
20
|
+
<Layout.Game>
|
|
21
|
+
<Flex justify="between">
|
|
22
|
+
<Body>Packers</Body>
|
|
23
|
+
<Body>10</Body>
|
|
24
|
+
</Flex>
|
|
25
|
+
<Flex justify="between">
|
|
26
|
+
<Body><strong>Eagles</strong></Body>
|
|
27
|
+
<Body>22</Body>
|
|
28
|
+
</Flex>
|
|
29
|
+
</Layout.Game>
|
|
30
|
+
<Layout.Game>
|
|
31
|
+
<Flex justify="between">
|
|
32
|
+
<Body>Vikings</Body>
|
|
33
|
+
<Body>9</Body>
|
|
34
|
+
</Flex>
|
|
35
|
+
<Flex justify="between">
|
|
36
|
+
<Body><strong>Rams</strong></Body>
|
|
37
|
+
<Body>27</Body>
|
|
38
|
+
</Flex>
|
|
39
|
+
</Layout.Game>
|
|
40
|
+
<Layout.Game>
|
|
41
|
+
<Flex justify="between">
|
|
42
|
+
<Body><strong>Lions</strong></Body>
|
|
43
|
+
</Flex>
|
|
44
|
+
<Flex justify="between">
|
|
45
|
+
<Body>BYE</Body>
|
|
46
|
+
</Flex>
|
|
47
|
+
</Layout.Game>
|
|
48
|
+
<Layout.Game>
|
|
49
|
+
<Flex justify="between">
|
|
50
|
+
<Body><strong>Commanders</strong></Body>
|
|
51
|
+
<Body>23</Body>
|
|
52
|
+
</Flex>
|
|
53
|
+
<Flex justify="between">
|
|
54
|
+
<Body>Buccaneers</Body>
|
|
55
|
+
<Body>20</Body>
|
|
56
|
+
</Flex>
|
|
57
|
+
</Layout.Game>
|
|
58
|
+
<Layout.Game>
|
|
59
|
+
<Flex justify="between">
|
|
60
|
+
<Body><strong>Chiefs</strong></Body>
|
|
61
|
+
</Flex>
|
|
62
|
+
<Flex justify="between">
|
|
63
|
+
<Body>BYE</Body>
|
|
64
|
+
</Flex>
|
|
65
|
+
</Layout.Game>
|
|
66
|
+
<Layout.Game>
|
|
67
|
+
<Flex justify="between">
|
|
68
|
+
<Body>Chargers</Body>
|
|
69
|
+
<Body>12</Body>
|
|
70
|
+
</Flex>
|
|
71
|
+
<Flex justify="between">
|
|
72
|
+
<Body><strong>Texans</strong></Body>
|
|
73
|
+
<Body>32</Body>
|
|
74
|
+
</Flex>
|
|
75
|
+
</Layout.Game>
|
|
76
|
+
<Layout.Game>
|
|
77
|
+
<Flex justify="between">
|
|
78
|
+
<Body>Broncos</Body>
|
|
79
|
+
<Body>7</Body>
|
|
80
|
+
</Flex>
|
|
81
|
+
<Flex justify="between">
|
|
82
|
+
<Body><strong>Bills</strong></Body>
|
|
83
|
+
<Body>31</Body>
|
|
84
|
+
</Flex>
|
|
85
|
+
</Layout.Game>
|
|
86
|
+
<Layout.Game>
|
|
87
|
+
<Flex justify="between">
|
|
88
|
+
<Body>Steelers</Body>
|
|
89
|
+
<Body>14</Body>
|
|
90
|
+
</Flex>
|
|
91
|
+
<Flex justify="between">
|
|
92
|
+
<Body><strong>Ravens</strong></Body>
|
|
93
|
+
<Body>28</Body>
|
|
94
|
+
</Flex>
|
|
95
|
+
</Layout.Game>
|
|
96
|
+
</Layout.Round>
|
|
97
|
+
<Layout.RoundLabel>
|
|
98
|
+
<Caption>Divisional</Caption>
|
|
99
|
+
<SectionSeparator marginY="sm"/>
|
|
100
|
+
</Layout.RoundLabel>
|
|
101
|
+
<Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
|
|
102
|
+
<Layout.Game>
|
|
103
|
+
<Flex justify="between">
|
|
104
|
+
<Body>Rams</Body>
|
|
105
|
+
<Body>22</Body>
|
|
106
|
+
</Flex>
|
|
107
|
+
<Flex justify="between">
|
|
108
|
+
<Body><strong>Eagles</strong></Body>
|
|
109
|
+
<Body>28</Body>
|
|
110
|
+
</Flex>
|
|
111
|
+
</Layout.Game>
|
|
112
|
+
<Layout.Game>
|
|
113
|
+
<Flex justify="between">
|
|
114
|
+
<Body><strong>Commanders</strong></Body>
|
|
115
|
+
<Body>45</Body>
|
|
116
|
+
</Flex>
|
|
117
|
+
<Flex justify="between">
|
|
118
|
+
<Body>Lions</Body>
|
|
119
|
+
<Body>31</Body>
|
|
120
|
+
</Flex>
|
|
121
|
+
</Layout.Game>
|
|
122
|
+
<Layout.Game>
|
|
123
|
+
<Flex justify="between">
|
|
124
|
+
<Body>Texans</Body>
|
|
125
|
+
<Body>14</Body>
|
|
126
|
+
</Flex>
|
|
127
|
+
<Flex justify="between">
|
|
128
|
+
<Body><strong>Chiefs</strong></Body>
|
|
129
|
+
<Body>23</Body>
|
|
130
|
+
</Flex>
|
|
131
|
+
</Layout.Game>
|
|
132
|
+
<Layout.Game>
|
|
133
|
+
<Flex justify="between">
|
|
134
|
+
<Body>Ravens</Body>
|
|
135
|
+
<Body>25</Body>
|
|
136
|
+
</Flex>
|
|
137
|
+
<Flex justify="between">
|
|
138
|
+
<Body><strong>Bills</strong></Body>
|
|
139
|
+
<Body>27</Body>
|
|
140
|
+
</Flex>
|
|
141
|
+
</Layout.Game>
|
|
142
|
+
</Layout.Round>
|
|
143
|
+
<Layout.RoundLabel>
|
|
144
|
+
<Caption>Conference</Caption>
|
|
145
|
+
<SectionSeparator marginY="sm"/>
|
|
146
|
+
</Layout.RoundLabel>
|
|
147
|
+
<Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
|
|
148
|
+
<Layout.Game>
|
|
149
|
+
<Flex justify="between">
|
|
150
|
+
<Body>Commanders</Body>
|
|
151
|
+
<Body>23</Body>
|
|
152
|
+
</Flex>
|
|
153
|
+
<Flex justify="between">
|
|
154
|
+
<Body><strong>Eagles</strong></Body>
|
|
155
|
+
<Body>55</Body>
|
|
156
|
+
</Flex>
|
|
157
|
+
</Layout.Game>
|
|
158
|
+
<Layout.Game>
|
|
159
|
+
<Flex justify="between">
|
|
160
|
+
<Body>Bills</Body>
|
|
161
|
+
<Body>29</Body>
|
|
162
|
+
</Flex>
|
|
163
|
+
<Flex justify="between">
|
|
164
|
+
<Body><strong>Chiefs</strong></Body>
|
|
165
|
+
<Body>32</Body>
|
|
166
|
+
</Flex>
|
|
167
|
+
</Layout.Game>
|
|
168
|
+
</Layout.Round>
|
|
169
|
+
<Layout.RoundLabel>
|
|
170
|
+
<Caption>Super Bowl</Caption>
|
|
171
|
+
<SectionSeparator marginY="sm"/>
|
|
172
|
+
</Layout.RoundLabel>
|
|
173
|
+
<Layout.Round>
|
|
174
|
+
<Layout.Game>
|
|
175
|
+
<Flex justify="between">
|
|
176
|
+
<Body>Chiefs</Body>
|
|
177
|
+
<Body>22</Body>
|
|
178
|
+
</Flex>
|
|
179
|
+
<Flex justify="between">
|
|
180
|
+
<Body><strong>Eagles</strong></Body>
|
|
181
|
+
<Body>40</Body>
|
|
182
|
+
</Flex>
|
|
183
|
+
</Layout.Game>
|
|
184
|
+
</Layout.Round>
|
|
185
|
+
</Layout>
|
|
186
|
+
</div>
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
export default LayoutBracket
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
|
|
2
|
+
|
|
3
|
+
On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
|
|
4
|
+
|
|
5
|
+
Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.
|
|
@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
|
|
|
7
7
|
export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
|
|
8
8
|
export { default as LayoutContent } from './_layout_content.jsx'
|
|
9
9
|
export { default as LayoutMasonry } from './_layout_masonry.jsx'
|
|
10
|
+
export { default as LayoutBracket } from './_layout_bracket.jsx'
|
|
10
11
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th>Column 1</th>
|
|
5
|
+
<th>Column 2</th>
|
|
6
|
+
<th>Column 3</th>
|
|
7
|
+
<th>Column 4</th>
|
|
8
|
+
<th>Column 5</th>
|
|
9
|
+
</tr>
|
|
10
|
+
</thead>
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr>
|
|
13
|
+
<td>Value 1</td>
|
|
14
|
+
<td>Value 2</td>
|
|
15
|
+
<td>Value 3</td>
|
|
16
|
+
<td>Value 4</td>
|
|
17
|
+
<td>Value 5</td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>Value 1</td>
|
|
21
|
+
<td>Value 2</td>
|
|
22
|
+
<td>Value 3</td>
|
|
23
|
+
<td>Value 4</td>
|
|
24
|
+
<td>Value 5</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>Value 1</td>
|
|
28
|
+
<td>Value 2</td>
|
|
29
|
+
<td>Value 3</td>
|
|
30
|
+
<td>Value 4</td>
|
|
31
|
+
<td>Value 5</td>
|
|
32
|
+
</tr>
|
|
33
|
+
</tbody>
|
|
34
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Customize your header by removing the header borders with the `header_style: "borderless"` prop.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<%= pb_rails("card", props: { background: "light" }) do %>
|
|
2
|
+
<%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
|
|
3
|
+
<%= pb_rails("table/table_head") do %>
|
|
4
|
+
<%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
|
13
|
+
<%= pb_rails("table/table_row") do %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
18
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<%= pb_rails("table/table_row") do %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<%= pb_rails("table/table_row") do %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<% end %>
|
|
36
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).
|
|
1
|
+
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).
|
|
@@ -37,6 +37,8 @@ examples:
|
|
|
37
37
|
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
|
38
38
|
- table_with_clickable_rows: Table with Clickable Rows
|
|
39
39
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
40
|
+
- table_with_header_style_borderless: Header Style Borderless
|
|
41
|
+
- table_with_header_style_floating: Header Style Floating
|
|
40
42
|
|
|
41
43
|
react:
|
|
42
44
|
- table_sm: Small
|
|
@@ -18,18 +18,18 @@ const USERS = [
|
|
|
18
18
|
territory: "PHL",
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
|
-
name: "
|
|
22
|
-
title: "
|
|
21
|
+
name: "Carlos Lima",
|
|
22
|
+
title: "Nitro Developer",
|
|
23
23
|
territory: "PHL",
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
name: "Stephen Marshall",
|
|
27
|
-
title: "Senior
|
|
27
|
+
title: "Senior Nitro Developer",
|
|
28
28
|
territory: "PHL",
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
name: "Jasper Furniss",
|
|
32
|
-
title: "
|
|
32
|
+
title: "Lead User Experience Engineer",
|
|
33
33
|
territory: "PHL",
|
|
34
34
|
},
|
|
35
35
|
];
|