playbook_ui_docs 14.16.0.pre.alpha.play1958formgrouperrorborder6922 → 14.16.0.pre.alpha.play1958formgrouperrorborder6992

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.
Files changed (16) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
  10. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +190 -0
  11. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
  12. data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
  15. data/dist/playbook-doc.js +1 -1
  16. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 06cd0f57d8bb95b6ebe94a35d057eb7a06faee0756c564ae575574a70b7ad8be
4
- data.tar.gz: 5d3c75600b98ab50a9b9a577e2641f8e31d1533b4133b014e0e5d21e6cb2b280
3
+ metadata.gz: 19615250c6ba0cff247ec40238b63b91de6593a883c17fb0d36796759542fce4
4
+ data.tar.gz: c41b4241018ea730702d5a311e1f37ec116e3f27ce5d7f0a0a3dfc66069308c4
5
5
  SHA512:
6
- metadata.gz: de0f339c8f36ef3a7e7e8fd568266b82460097efdc9980ae5f78a07b4c5b286b5a664bbefa9081998b76d909d29850b315f1f13e161118903ca7871499ce1f1b
7
- data.tar.gz: 0c0bbfb8bd73ea27eeeca47ceaa7de25bc994af3a2828679f73332012b96698af271ae6aacef3f220cbce1e714b701bb765fec6db071d421b618336f1784156e
6
+ metadata.gz: f77ec93a7d7f224839037e77d71205278600ee288ae0a9fd0c12b1aca030e0b57a957ea73d052f35b7f239462390dae031493f1a4724b69734cbcf0b6e046cde
7
+ data.tar.gz: a09077ebb18850428994d0b6c5239e0959f29a84f27b277be7b783a64eaa3e45a2ab393e9990749bc0761aa5e9290a332b37e00380811e71246e04c4dae13527
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -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
data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx CHANGED
@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
12
12
  label: "Jasper Furniss",
13
13
  value: "Jasper Furniss",
14
14
  territory: "PHL",
15
- title: "Senior UX Engineer",
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: "Jason Cypret",
29
- value: "Jason Cypret",
28
+ label: "Carlos Lima",
29
+ value: "Carlos Lima",
30
30
  territory: "PHL",
31
- title: "VP of User Experience",
32
- id: "jason-cypret",
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 Design Mentor",
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: "Senior UX Engineer",
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: "Jason Cypret",
32
- value: "Jason Cypret",
31
+ label: "Carlos Lima",
32
+ value: "Carlos Lima",
33
33
  territory: "PHL",
34
- title: "VP of User Experience",
35
- id: "jason-cypret",
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 Design Mentor",
42
+ title: "Lead UX Designer",
43
43
  id: "courtney-long",
44
44
  status: "Online"
45
45
  }
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx CHANGED
@@ -15,7 +15,7 @@ const DropdownWithCustomDisplay = (props) => {
15
15
  label: "Jasper Furniss",
16
16
  value: "Jasper Furniss",
17
17
  territory: "PHL",
18
- title: "Senior UX Engineer",
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: "Jason Cypret",
32
- value: "Jason Cypret",
31
+ label: "Carlos Lima",
32
+ value: "Carlos Lima",
33
33
  territory: "PHL",
34
- title: "VP of User Experience",
35
- id: "jason-cypret",
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 Design Mentor",
42
+ title: "Lead UX Designer",
43
43
  id: "courtney-long",
44
44
  status: "Online"
45
45
  }
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb CHANGED
@@ -1,10 +1,10 @@
1
1
  <%
2
- options = [
2
+ options = [
3
3
  {
4
4
  label: "Jasper Furniss",
5
5
  value: "Jasper Furniss",
6
6
  territory: "PHL",
7
- title: "Senior UX Engineer",
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: "Jason Cypret",
21
- value: "Jason Cypret",
20
+ label: "Carlos Lima",
21
+ value: "Carlos Lima",
22
22
  territory: "PHL",
23
- title: "VP of User Experience",
24
- id: "jason-cypret",
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 Design Mentor",
31
+ title: "Lead UX Designer",
32
32
  id: "courtney-long",
33
33
  status: "Online"
34
34
  }
35
- ]
35
+ ];
36
36
 
37
37
  %>
38
38
 
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_layout/docs/example.yml CHANGED
@@ -18,4 +18,5 @@ examples:
18
18
  - layout_kanban: Kanban Layout
19
19
  - layout_content: Content Layout
20
20
  - layout_masonry: Masonry Layout
21
+ - layout_bracket: Bracket Layout
21
22
 
data/app/pb_kits/playbook/pb_layout/docs/index.js CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED
@@ -18,18 +18,18 @@ const USERS = [
18
18
  territory: "PHL",
19
19
  },
20
20
  {
21
- name: "Jason Cypret",
22
- title: "Vice President of User Experience",
21
+ name: "Carlos Lima",
22
+ title: "Nitro Developer",
23
23
  territory: "PHL",
24
24
  },
25
25
  {
26
26
  name: "Stephen Marshall",
27
- title: "Senior User Experience Engineer",
27
+ title: "Senior Nitro Developer",
28
28
  territory: "PHL",
29
29
  },
30
30
  {
31
31
  name: "Jasper Furniss",
32
- title: "Senior User Experience Engineer",
32
+ title: "Lead User Experience Engineer",
33
33
  territory: "PHL",
34
34
  },
35
35
  ];