playbook_ui_docs 14.16.0.pre.alpha.play1960buttonkitdisablenotworkingdanger6850 → 14.16.0.pre.alpha.play1964tablekitheadertextstylefix6997
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/_advanced_table_pagination.jsx +0 -1
- 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_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_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_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx +50 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx +59 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/dist/playbook-doc.js +1 -1
- metadata +10 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c4e2b1870321f9564f30ba4e9107133a8880d9375a3344f7ea5a93eb448e59c2
|
|
4
|
+
data.tar.gz: 076410f859a2805caf15c872295d4819169008fd5f13bedd68e9d407174d49ed
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ed9ec069b0434185319f5a84d13688a91ac27782b8e705c0f9e4bb20168fb72c9bd98be68b5f1bee25933d7e81985389175322af15aa350cb304d87a431a54c3
|
|
7
|
+
data.tar.gz: 73bf2b79fb351484124304ec19981e1364ece9bbd3bec70e608b240dcac068136b12dd192c24b12c6df2fa3774b8b1896fba8af5a94278ea0756ce8ad9af882e
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import { AdvancedTable, Button, Flex } from "playbook-ui"
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
|
|
5
|
+
|
|
6
|
+
const AdvancedTableFullscreen = (props) => {
|
|
7
|
+
const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
|
|
8
|
+
const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
|
|
9
|
+
|
|
10
|
+
const columnDefinitions = [
|
|
11
|
+
{
|
|
12
|
+
accessor: "year",
|
|
13
|
+
label: "Year",
|
|
14
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "newEnrollments",
|
|
18
|
+
label: "New Enrollments",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "scheduledMeetings",
|
|
22
|
+
label: "Scheduled Meetings",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "attendanceRate",
|
|
26
|
+
label: "Attendance Rate",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "completedClasses",
|
|
30
|
+
label: "Completed Classes",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
accessor: "classCompletionRate",
|
|
34
|
+
label: "Class Completion Rate",
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
accessor: "graduatedStudents",
|
|
38
|
+
label: "Graduated Students",
|
|
39
|
+
},
|
|
40
|
+
]
|
|
41
|
+
|
|
42
|
+
const tableProps = {
|
|
43
|
+
sticky: true
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<Flex justify="end">
|
|
49
|
+
<Button
|
|
50
|
+
marginBottom="sm"
|
|
51
|
+
onClick={() => fullscreenToggleSmall?.()}
|
|
52
|
+
text="Fullscreen Small Table"
|
|
53
|
+
variant="secondary"
|
|
54
|
+
/>
|
|
55
|
+
</Flex>
|
|
56
|
+
<AdvancedTable
|
|
57
|
+
allowFullScreen
|
|
58
|
+
columnDefinitions={columnDefinitions}
|
|
59
|
+
fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
|
|
60
|
+
tableData={MOCK_DATA}
|
|
61
|
+
{...props}
|
|
62
|
+
>
|
|
63
|
+
<AdvancedTable.Header enableSorting />
|
|
64
|
+
<AdvancedTable.Body />
|
|
65
|
+
</AdvancedTable>
|
|
66
|
+
<Flex justify="end">
|
|
67
|
+
<Button
|
|
68
|
+
marginY="sm"
|
|
69
|
+
onClick={() => fullscreenToggleLarge?.()}
|
|
70
|
+
text="Fullscreen Large Table"
|
|
71
|
+
variant="secondary"
|
|
72
|
+
/>
|
|
73
|
+
</Flex>
|
|
74
|
+
<AdvancedTable
|
|
75
|
+
allowFullScreen
|
|
76
|
+
columnDefinitions={columnDefinitions}
|
|
77
|
+
fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
|
|
78
|
+
responsive="none"
|
|
79
|
+
tableData={PAGINATION_MOCK_DATA}
|
|
80
|
+
tableProps={tableProps}
|
|
81
|
+
{...props}
|
|
82
|
+
>
|
|
83
|
+
<AdvancedTable.Header enableSorting />
|
|
84
|
+
<AdvancedTable.Body />
|
|
85
|
+
</AdvancedTable>
|
|
86
|
+
</div>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export default AdvancedTableFullscreen
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props. `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
|
|
2
|
+
|
|
3
|
+
Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.
|
|
@@ -39,4 +39,5 @@ examples:
|
|
|
39
39
|
- advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
|
|
40
40
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
|
41
41
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
|
42
|
-
- advanced_table_inline_editing: Inline Cell Editing
|
|
42
|
+
- advanced_table_inline_editing: Inline Cell Editing
|
|
43
|
+
- advanced_table_fullscreen: Fullscreen
|
|
@@ -21,4 +21,5 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
|
|
|
21
21
|
export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
|
|
22
22
|
export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
|
|
23
23
|
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
|
24
|
-
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
|
24
|
+
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
|
25
|
+
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
|
@@ -4,14 +4,3 @@
|
|
|
4
4
|
inline: true,
|
|
5
5
|
picker_id: "date-picker-inline"
|
|
6
6
|
}) %>
|
|
7
|
-
|
|
8
|
-
<%= javascript_tag do %>
|
|
9
|
-
window.addEventListener("DOMContentLoaded", (event) => {
|
|
10
|
-
const fpInline = document.querySelector("#date-picker-inline")._flatpickr
|
|
11
|
-
<!-- Display the angle-down icon when a date has been selected -->
|
|
12
|
-
const showAngleDownHandler = () => {
|
|
13
|
-
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
|
14
|
-
}
|
|
15
|
-
fpInline.config.onChange.push(showAngleDownHandler)
|
|
16
|
-
})
|
|
17
|
-
<% end %>
|
|
@@ -3,19 +3,12 @@ import React from 'react'
|
|
|
3
3
|
import DatePicker from '../_date_picker'
|
|
4
4
|
|
|
5
5
|
const DatePickerInline = (props) => {
|
|
6
|
-
const showAngleDownHandler = (dateSelected) => {
|
|
7
|
-
if (dateSelected) {
|
|
8
|
-
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
6
|
return (
|
|
13
7
|
<div>
|
|
14
8
|
<DatePicker
|
|
15
9
|
className="inline-date-picker"
|
|
16
10
|
hideIcon
|
|
17
11
|
inLine
|
|
18
|
-
onChange={showAngleDownHandler}
|
|
19
12
|
pickerId="date-picker-inline"
|
|
20
13
|
{...props}
|
|
21
14
|
/>
|
|
@@ -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
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: {id: "
|
|
1
|
+
<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Table from '../../pb_table/_table'
|
|
4
|
+
|
|
5
|
+
const TableWithHeaderStyleBorderless = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<>
|
|
8
|
+
<Table
|
|
9
|
+
headerStyle="borderless"
|
|
10
|
+
size="sm"
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<thead>
|
|
14
|
+
<tr>
|
|
15
|
+
<th>{'Column 1'}</th>
|
|
16
|
+
<th>{'Column 2'}</th>
|
|
17
|
+
<th>{'Column 3'}</th>
|
|
18
|
+
<th>{'Column 4'}</th>
|
|
19
|
+
<th>{'Column 5'}</th>
|
|
20
|
+
</tr>
|
|
21
|
+
</thead>
|
|
22
|
+
<tbody>
|
|
23
|
+
<tr>
|
|
24
|
+
<td>{'Value 1'}</td>
|
|
25
|
+
<td>{'Value 2'}</td>
|
|
26
|
+
<td>{'Value 3'}</td>
|
|
27
|
+
<td>{'Value 4'}</td>
|
|
28
|
+
<td>{'Value 5'}</td>
|
|
29
|
+
</tr>
|
|
30
|
+
<tr>
|
|
31
|
+
<td>{'Value 1'}</td>
|
|
32
|
+
<td>{'Value 2'}</td>
|
|
33
|
+
<td>{'Value 3'}</td>
|
|
34
|
+
<td>{'Value 4'}</td>
|
|
35
|
+
<td>{'Value 5'}</td>
|
|
36
|
+
</tr>
|
|
37
|
+
<tr>
|
|
38
|
+
<td>{'Value 1'}</td>
|
|
39
|
+
<td>{'Value 2'}</td>
|
|
40
|
+
<td>{'Value 3'}</td>
|
|
41
|
+
<td>{'Value 4'}</td>
|
|
42
|
+
<td>{'Value 5'}</td>
|
|
43
|
+
</tr>
|
|
44
|
+
</tbody>
|
|
45
|
+
</Table>
|
|
46
|
+
</>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default TableWithHeaderStyleBorderless
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Customize your header by removing the header borders with the `headerStyle="borderless"` prop.
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Background from '../../pb_background/_background'
|
|
4
|
+
import Card from '../../pb_card/_card'
|
|
5
|
+
import Table from '../../pb_table/_table'
|
|
6
|
+
|
|
7
|
+
const TableWithHeaderStyleFloating = (props) => {
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<Card background="light"
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<Table
|
|
14
|
+
headerStyle="floating"
|
|
15
|
+
size="sm"
|
|
16
|
+
{...props}
|
|
17
|
+
>
|
|
18
|
+
<Table.Head>
|
|
19
|
+
<Background backgroundColor="light"
|
|
20
|
+
tag="tr"
|
|
21
|
+
{...props}
|
|
22
|
+
>
|
|
23
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
24
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
25
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
26
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
27
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
28
|
+
</Background>
|
|
29
|
+
</Table.Head>
|
|
30
|
+
<Table.Body>
|
|
31
|
+
<Table.Row>
|
|
32
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
33
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
34
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
35
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
36
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
37
|
+
</Table.Row>
|
|
38
|
+
<Table.Row>
|
|
39
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
40
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
41
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
42
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
43
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
44
|
+
</Table.Row>
|
|
45
|
+
<Table.Row>
|
|
46
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
47
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
48
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
49
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
50
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
51
|
+
</Table.Row>
|
|
52
|
+
</Table.Body>
|
|
53
|
+
</Table>
|
|
54
|
+
</Card>
|
|
55
|
+
</>
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export default TableWithHeaderStyleFloating
|
|
@@ -0,0 +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).
|
|
@@ -75,3 +75,5 @@ examples:
|
|
|
75
75
|
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
|
|
76
76
|
- table_with_clickable_rows: Table with Clickable Rows
|
|
77
77
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
78
|
+
- table_with_header_style_borderless: Header Style Borderless
|
|
79
|
+
- table_with_header_style_floating: Header Style Floating
|
|
@@ -35,3 +35,5 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
|
|
|
35
35
|
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
|
36
36
|
export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
|
|
37
37
|
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|
|
38
|
+
export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
|
|
39
|
+
export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
|