playbook_ui_docs 14.16.0.pre.alpha.play1958formgrouperrorborder7022 → 14.16.0.pre.alpha.play1959tablekitstripedlogicoverridesbackground6892
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 +11 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +7 -0
- 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/example.yml +0 -1
- data/app/pb_kits/playbook/pb_layout/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/dist/playbook-doc.js +1 -1
- metadata +2 -6
- 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
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +0 -190
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +0 -5
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 14.16.0.pre.alpha.
|
|
4
|
+
version: 14.16.0.pre.alpha.play1959tablekitstripedlogicoverridesbackground6892
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-
|
|
12
|
+
date: 2025-03-26 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -58,8 +58,6 @@ files:
|
|
|
58
58
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
|
59
59
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
|
60
60
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
|
61
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
|
|
62
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
|
|
63
61
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
|
|
64
62
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
|
|
65
63
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
|
|
@@ -1149,8 +1147,6 @@ files:
|
|
|
1149
1147
|
- app/pb_kits/playbook/pb_label_value/docs/example.yml
|
|
1150
1148
|
- app/pb_kits/playbook/pb_label_value/docs/index.js
|
|
1151
1149
|
- app/pb_kits/playbook/pb_layout/docs/_description.md
|
|
1152
|
-
- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx
|
|
1153
|
-
- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md
|
|
1154
1150
|
- app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
|
|
1155
1151
|
- app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
|
|
1156
1152
|
- app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
|
|
@@ -1,90 +0,0 @@
|
|
|
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
|
|
@@ -1,3 +0,0 @@
|
|
|
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.
|
|
@@ -1,190 +0,0 @@
|
|
|
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
|
|
@@ -1,5 +0,0 @@
|
|
|
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.
|