playbook_ui_docs 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884 → 14.16.0.pre.alpha.PLAY1929bracketlayout6927
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/example.yml +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- 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_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/dist/playbook-doc.js +1 -1
- metadata +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +0 -90
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7f47619363e9acb1193720bc4553beadcda9cabdf7383fb463e33f08c260c55b
|
|
4
|
+
data.tar.gz: f83232175918739c27434f0e5a4fe265a95198cdd3519b418b875e6cf4eae354
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 68e9bb8c85aa481867223a6b09169c0fce0071d17cf6d354b29bc8876d0ecf6987aded852a102f87c166d69d2470def146f2cdd34c0fa33c68c90fe2d8ab45b7
|
|
7
|
+
data.tar.gz: ae790cd5e4cc0770a9f45f8ab7a29867ad14217de9d404b6cd7fe83690ecfd1f25c90ca8651f1f3a9740e6650998a70b60d77a46b934738ce477765cd255e924
|
|
@@ -39,5 +39,4 @@ 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
|
|
43
|
-
- advanced_table_fullscreen: Fullscreen
|
|
42
|
+
- advanced_table_inline_editing: Inline Cell Editing
|
|
@@ -21,5 +21,4 @@ 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'
|
|
25
|
-
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
|
24
|
+
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.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
|
/>
|
|
@@ -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
|
|