playbook_ui_docs 16.4.0.pre.rc.2 → 16.4.0.pre.rc.4
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_sort_parent_only.jsx +175 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +6 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +6 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb +224 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md +7 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.html.erb +46 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx +42 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_rails.md +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_react.md +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +56 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +13 -21
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -10
- metadata +11 -24
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb +0 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +0 -15
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +0 -17
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb +0 -6
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +0 -16
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx +0 -28
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +0 -35
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +0 -45
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -22
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +0 -13
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +0 -15
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb +0 -115
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +0 -42
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb +0 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +0 -14
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8902f1eb262540a26df5a764166592a97868c97ee40ea26ed7fa019106b9326a
|
|
4
|
+
data.tar.gz: 7a766d792452ed3c10e57dd830008af92a3ec88519000e67148ca10f8a66d260
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 46f7df87fb14694f3c1f3f5a7eb7a2ecd2c97e3d6582c2cea64c23c6324eb1cd2fc4fafdbdcb906abc735ce6c19de57760bff9f9ce071d23847c2ae7623cb39d
|
|
7
|
+
data.tar.gz: 9c721bf1df4b090ccfad3aad3f95673acfa133147530c5a67b13daa36e248019cd7917e4347f8ee1962ece4b211431c5e65219352bd542bf0f9724da9bd650d6
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
import Caption from "../../pb_caption/_caption"
|
|
6
|
+
|
|
7
|
+
const sharedColumnDefinitions = [
|
|
8
|
+
{
|
|
9
|
+
accessor: "year",
|
|
10
|
+
label: "Year",
|
|
11
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
accessor: "scheduledMeetings",
|
|
19
|
+
label: "Scheduled Meetings",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
accessor: "attendanceRate",
|
|
23
|
+
label: "Attendance Rate",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
accessor: "completedClasses",
|
|
27
|
+
label: "Completed Classes",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
accessor: "classCompletionRate",
|
|
31
|
+
label: "Class Completion Rate",
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
accessor: "graduatedStudents",
|
|
35
|
+
label: "Graduated Students",
|
|
36
|
+
},
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
const sortByColumnDefinitions = [
|
|
40
|
+
{
|
|
41
|
+
accessor: "year",
|
|
42
|
+
label: "Year",
|
|
43
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
accessor: "newEnrollments",
|
|
47
|
+
label: "New Enrollments",
|
|
48
|
+
enableSort: true,
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "scheduledMeetings",
|
|
52
|
+
label: "Scheduled Meetings",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
accessor: "attendanceRate",
|
|
56
|
+
label: "Attendance Rate",
|
|
57
|
+
enableSort: true,
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
accessor: "completedClasses",
|
|
61
|
+
label: "Completed Classes",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
accessor: "classCompletionRate",
|
|
65
|
+
label: "Class Completion Rate",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
accessor: "graduatedStudents",
|
|
69
|
+
label: "Graduated Students",
|
|
70
|
+
},
|
|
71
|
+
]
|
|
72
|
+
|
|
73
|
+
const sortByColumnMultiDefinitions = [
|
|
74
|
+
{
|
|
75
|
+
accessor: "year",
|
|
76
|
+
label: "Year",
|
|
77
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label: "Enrollment Data",
|
|
81
|
+
columns: [
|
|
82
|
+
{
|
|
83
|
+
label: "Enrollment Stats",
|
|
84
|
+
columns: [
|
|
85
|
+
{
|
|
86
|
+
accessor: "newEnrollments",
|
|
87
|
+
label: "New Enrollments",
|
|
88
|
+
enableSort: true,
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
accessor: "scheduledMeetings",
|
|
92
|
+
label: "Scheduled Meetings",
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
},
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
label: "Performance Data",
|
|
100
|
+
columns: [
|
|
101
|
+
{
|
|
102
|
+
label: "Completion Metrics",
|
|
103
|
+
columns: [
|
|
104
|
+
{
|
|
105
|
+
accessor: "completedClasses",
|
|
106
|
+
label: "Completed Classes",
|
|
107
|
+
enableSort: true,
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
accessor: "classCompletionRate",
|
|
111
|
+
label: "Class Completion Rate",
|
|
112
|
+
},
|
|
113
|
+
],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
label: "Attendance",
|
|
117
|
+
columns: [
|
|
118
|
+
{
|
|
119
|
+
accessor: "attendanceRate",
|
|
120
|
+
label: "Attendance Rate",
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
accessor: "scheduledMeetings",
|
|
124
|
+
label: "Scheduled Meetings",
|
|
125
|
+
},
|
|
126
|
+
],
|
|
127
|
+
},
|
|
128
|
+
],
|
|
129
|
+
},
|
|
130
|
+
]
|
|
131
|
+
|
|
132
|
+
const AdvancedTableSortParentOnly = (props) => {
|
|
133
|
+
return (
|
|
134
|
+
<div>
|
|
135
|
+
<Caption text="Enable Sorting (first column) + sortParentOnly" />
|
|
136
|
+
<AdvancedTable
|
|
137
|
+
columnDefinitions={sharedColumnDefinitions}
|
|
138
|
+
sortParentOnly
|
|
139
|
+
tableData={MOCK_DATA}
|
|
140
|
+
{...props}
|
|
141
|
+
>
|
|
142
|
+
<AdvancedTable.Header enableSorting />
|
|
143
|
+
<AdvancedTable.Body />
|
|
144
|
+
</AdvancedTable>
|
|
145
|
+
<Caption marginTop="md"
|
|
146
|
+
text="Sort by column + sortParentOnly"
|
|
147
|
+
/>
|
|
148
|
+
<AdvancedTable
|
|
149
|
+
columnDefinitions={sortByColumnDefinitions}
|
|
150
|
+
enableSortingRemoval
|
|
151
|
+
sortParentOnly
|
|
152
|
+
tableData={MOCK_DATA}
|
|
153
|
+
{...props}
|
|
154
|
+
>
|
|
155
|
+
<AdvancedTable.Header />
|
|
156
|
+
<AdvancedTable.Body />
|
|
157
|
+
</AdvancedTable>
|
|
158
|
+
<Caption marginTop="md"
|
|
159
|
+
text="Sort by column (multi-column) + sortParentOnly"
|
|
160
|
+
/>
|
|
161
|
+
<AdvancedTable
|
|
162
|
+
columnDefinitions={sortByColumnMultiDefinitions}
|
|
163
|
+
enableSortingRemoval
|
|
164
|
+
sortParentOnly
|
|
165
|
+
tableData={MOCK_DATA}
|
|
166
|
+
{...props}
|
|
167
|
+
>
|
|
168
|
+
<AdvancedTable.Header enableSorting />
|
|
169
|
+
<AdvancedTable.Body />
|
|
170
|
+
</AdvancedTable>
|
|
171
|
+
</div>
|
|
172
|
+
)
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
export default AdvancedTableSortParentOnly
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The `sortParentOnly` prop is a boolean set to `false` by default. When set to `true`, only parent (depth-0) rows are re-ordered when sorting; children and grandchildren stay grouped under their parent and keep their original order.
|
|
2
|
+
|
|
3
|
+
`sortParentOnly` works with every sorting mode: `enableSorting` on the header, per-column `enableSort: true`, and sortable leaf columns in the multi-header variant. Sort indicators behave as usual.
|
|
4
|
+
|
|
5
|
+
When omitted or `false`, sorting applies to all levels.
|
|
@@ -39,6 +39,7 @@ examples:
|
|
|
39
39
|
- advanced_table_sort_per_column: Enable Sort By Column
|
|
40
40
|
- advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
|
|
41
41
|
- advanced_table_custom_sort: Custom Sort
|
|
42
|
+
- advanced_table_sort_parent_only: Sort Parent Only
|
|
42
43
|
- advanced_table_expanded_control: Expanded Control
|
|
43
44
|
- advanced_table_expand_by_depth: Expand by Depth
|
|
44
45
|
- advanced_table_subrow_headers: SubRow Headers
|
|
@@ -49,4 +49,5 @@ export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_
|
|
|
49
49
|
export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
|
|
50
50
|
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
51
51
|
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
52
|
-
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
52
|
+
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
53
|
+
export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<% end %>
|
|
29
29
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
30
30
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
31
|
-
<%= pb_rails("
|
|
31
|
+
<%= pb_rails("textarea", props: {id: "default"}) %>
|
|
32
32
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
33
33
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
34
34
|
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
|
@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
|
|
|
4
4
|
import Button from '../../pb_button/_button'
|
|
5
5
|
import Caption from '../../pb_caption/_caption'
|
|
6
6
|
import Dialog from '../../pb_dialog/_dialog'
|
|
7
|
-
import
|
|
7
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
8
8
|
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
9
9
|
|
|
10
10
|
const DialogCompound = () => {
|
|
@@ -25,8 +25,11 @@ const DialogCompound = () => {
|
|
|
25
25
|
<Body>{'What do you need us to take care of?'}</Body>
|
|
26
26
|
</Dialog.Header>
|
|
27
27
|
<Dialog.Body>
|
|
28
|
-
<
|
|
29
|
-
|
|
28
|
+
<Textarea
|
|
29
|
+
id="default-example-1"
|
|
30
|
+
label="Description"
|
|
31
|
+
rows={4}
|
|
32
|
+
/>
|
|
30
33
|
<br />
|
|
31
34
|
<Caption>
|
|
32
35
|
{
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<% end %>
|
|
13
13
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
14
14
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
15
|
-
<%= pb_rails("
|
|
15
|
+
<%= pb_rails("textarea", props: {id: "default-7"}) %>
|
|
16
16
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
17
17
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
18
18
|
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<% end %>
|
|
32
32
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
33
33
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
34
|
-
<%= pb_rails("
|
|
34
|
+
<%= pb_rails("textarea", props: {id: "default-8"}) %>
|
|
35
35
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
36
36
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
37
37
|
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<% end %>
|
|
50
50
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
51
51
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
52
|
-
<%= pb_rails("
|
|
52
|
+
<%= pb_rails("textarea", props: {id: "default-9"}) %>
|
|
53
53
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
54
54
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
55
55
|
|
|
@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
|
|
|
5
5
|
import Dialog from '../../pb_dialog/_dialog'
|
|
6
6
|
import Flex from '../../pb_flex/_flex'
|
|
7
7
|
import Caption from '../../pb_caption/_caption'
|
|
8
|
-
import
|
|
8
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
9
9
|
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
10
10
|
|
|
11
11
|
const useDialog = (visible = false) => {
|
|
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
|
|
|
77
77
|
<Body>{title}</Body>
|
|
78
78
|
</Dialog.Header>
|
|
79
79
|
<Dialog.Body>
|
|
80
|
-
<
|
|
81
|
-
|
|
80
|
+
<Textarea
|
|
81
|
+
id="default-example-1"
|
|
82
|
+
label="Description"
|
|
83
|
+
rows={4}
|
|
84
|
+
/>
|
|
82
85
|
<br />
|
|
83
86
|
<Caption>
|
|
84
87
|
{
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<% end %>
|
|
14
14
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
15
15
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
16
|
-
<%= pb_rails("
|
|
16
|
+
<%= pb_rails("textarea", props: {id: "default-2"}) %>
|
|
17
17
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
18
18
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
19
19
|
<% end %>
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<% end %>
|
|
33
33
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
34
34
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
35
|
-
<%= pb_rails("
|
|
35
|
+
<%= pb_rails("textarea", props: {id: "default-3"}) %>
|
|
36
36
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
37
37
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
38
38
|
<% end %>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<% end %>
|
|
51
51
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
52
52
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
53
|
-
<%= pb_rails("
|
|
53
|
+
<%= pb_rails("textarea", props: {id: "default-4"}) %>
|
|
54
54
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
55
55
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
56
56
|
<% end %>
|
|
@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
|
|
|
5
5
|
import Dialog from '../../pb_dialog/_dialog'
|
|
6
6
|
import Flex from '../../pb_flex/_flex'
|
|
7
7
|
import Caption from '../../pb_caption/_caption'
|
|
8
|
-
import
|
|
8
|
+
import Textarea from "../../pb_textarea/_textarea";
|
|
9
9
|
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
10
10
|
|
|
11
11
|
const useDialog = (visible = false) => {
|
|
@@ -76,8 +76,11 @@ const DialogFullHeightPlacement = () => {
|
|
|
76
76
|
<Body>{title}</Body>
|
|
77
77
|
</Dialog.Header>
|
|
78
78
|
<Dialog.Body>
|
|
79
|
-
<
|
|
80
|
-
|
|
79
|
+
<Textarea
|
|
80
|
+
id={`default-example-2-${index}`}
|
|
81
|
+
label="Description"
|
|
82
|
+
rows={4}
|
|
83
|
+
/>
|
|
81
84
|
<br />
|
|
82
85
|
<Caption>
|
|
83
86
|
{
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
<%
|
|
2
|
+
default_options = [
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
|
+
{ label: 'India', value: 'India', id: 'in' },
|
|
7
|
+
{ label: 'Mexico', value: 'Mexico', id: 'mx' },
|
|
8
|
+
]
|
|
9
|
+
|
|
10
|
+
multi_options = [
|
|
11
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
12
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
13
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
14
|
+
{ label: 'India', value: 'india', id: 'in' },
|
|
15
|
+
{ label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
|
|
16
|
+
]
|
|
17
|
+
|
|
18
|
+
autocomplete_options = [
|
|
19
|
+
{ label: "United States", value: "unitedStates", areaCode: "+1", icon: "🇺🇸", id: "us" },
|
|
20
|
+
{ label: "United Kingdom", value: "unitedKingdom", areaCode: "+44", icon: "🇬🇧", id: "gb" },
|
|
21
|
+
{ label: "Pakistan", value: "pakistan", areaCode: "+92", icon: "🇵🇰", id: "pk" },
|
|
22
|
+
]
|
|
23
|
+
|
|
24
|
+
custom_display_options = [
|
|
25
|
+
{ label: "Strong Bad", value: "strongBad", id: "strong-bad", status: "Offline" },
|
|
26
|
+
{ label: "Strong Mad", value: "strongMad", id: "strong-mad", status: "Online" },
|
|
27
|
+
{ label: "Strong Sad", value: "strongSad", id: "strong-sad", status: "Away" },
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
custom_display_content = capture do
|
|
31
|
+
pb_rails("flex", props: { align: "center" }) do
|
|
32
|
+
concat(pb_rails("avatar", props: { name: "", size: "xs", id: "cet-dropdown-avatar" }))
|
|
33
|
+
concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "cet-dropdown-avatar-name" }))
|
|
34
|
+
concat(pb_rails("badge", props: { text: "", id: "cet-dropdown-avatar-status" }))
|
|
35
|
+
end
|
|
36
|
+
end
|
|
37
|
+
%>
|
|
38
|
+
|
|
39
|
+
<!-- Example 1: Default dropdown -->
|
|
40
|
+
<%= pb_rails("dropdown", props: {
|
|
41
|
+
custom_event_type: "form:submitted,pb:dropdown:clearRequest",
|
|
42
|
+
id: "dropdown-default-cet",
|
|
43
|
+
label: "Default dropdown",
|
|
44
|
+
margin_bottom: "sm",
|
|
45
|
+
options: default_options,
|
|
46
|
+
}) %>
|
|
47
|
+
<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
|
|
48
|
+
<%= pb_rails("button", props: { id: "clear-default-cet", text: "Clear", variant: "primary" }) %>
|
|
49
|
+
<%= pb_rails("button", props: { id: "select-default-cet", text: "Select Canada", variant: "secondary" }) %>
|
|
50
|
+
<%= pb_rails("button", props: { id: "simulate-default-cet", text: "Simulate form submit", variant: "secondary" }) %>
|
|
51
|
+
<% end %>
|
|
52
|
+
|
|
53
|
+
<script>
|
|
54
|
+
(function() {
|
|
55
|
+
var id = "dropdown-default-cet";
|
|
56
|
+
document.getElementById("clear-default-cet").addEventListener("click", function() {
|
|
57
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
|
|
58
|
+
});
|
|
59
|
+
document.getElementById("select-default-cet").addEventListener("click", function() {
|
|
60
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "ca" } }));
|
|
61
|
+
});
|
|
62
|
+
document.getElementById("simulate-default-cet").addEventListener("click", function() {
|
|
63
|
+
document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
|
|
64
|
+
});
|
|
65
|
+
})();
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<!-- Example 2: Multi select -->
|
|
69
|
+
<%= pb_rails("dropdown", props: {
|
|
70
|
+
custom_event_type: "form:submitted,pb:dropdown:clearRequest",
|
|
71
|
+
id: "dropdown-multi-cet",
|
|
72
|
+
label: "Multi select dropdown",
|
|
73
|
+
margin_bottom: "sm",
|
|
74
|
+
multi_select: true,
|
|
75
|
+
options: multi_options,
|
|
76
|
+
}) %>
|
|
77
|
+
<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
|
|
78
|
+
<%= pb_rails("button", props: { id: "clear-multi-cet", text: "Clear", variant: "primary" }) %>
|
|
79
|
+
<%= pb_rails("button", props: { id: "select-multi-cet", text: "Select US + UK", variant: "secondary" }) %>
|
|
80
|
+
<%= pb_rails("button", props: { id: "simulate-multi-cet", text: "Simulate form submit", variant: "secondary" }) %>
|
|
81
|
+
<% end %>
|
|
82
|
+
|
|
83
|
+
<script>
|
|
84
|
+
(function() {
|
|
85
|
+
var id = "dropdown-multi-cet";
|
|
86
|
+
document.getElementById("clear-multi-cet").addEventListener("click", function() {
|
|
87
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
|
|
88
|
+
});
|
|
89
|
+
document.getElementById("select-multi-cet").addEventListener("click", function() {
|
|
90
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionIds: ["us", "uk"] } }));
|
|
91
|
+
});
|
|
92
|
+
document.getElementById("simulate-multi-cet").addEventListener("click", function() {
|
|
93
|
+
document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
|
|
94
|
+
});
|
|
95
|
+
})();
|
|
96
|
+
</script>
|
|
97
|
+
|
|
98
|
+
<!-- Example 3: Autocomplete -->
|
|
99
|
+
<%= pb_rails("dropdown", props: {
|
|
100
|
+
autocomplete: true,
|
|
101
|
+
custom_event_type: "form:submitted,pb:dropdown:clearRequest",
|
|
102
|
+
id: "dropdown-autocomplete-cet",
|
|
103
|
+
label: "Autocomplete dropdown",
|
|
104
|
+
margin_bottom: "sm",
|
|
105
|
+
options: autocomplete_options,
|
|
106
|
+
}) %>
|
|
107
|
+
<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
|
|
108
|
+
<%= pb_rails("button", props: { id: "clear-autocomplete-cet", text: "Clear", variant: "primary" }) %>
|
|
109
|
+
<%= pb_rails("button", props: { id: "select-autocomplete-cet", text: "Select Pakistan", variant: "secondary" }) %>
|
|
110
|
+
<%= pb_rails("button", props: { id: "simulate-autocomplete-cet", text: "Simulate form submit", variant: "secondary" }) %>
|
|
111
|
+
<% end %>
|
|
112
|
+
|
|
113
|
+
<script>
|
|
114
|
+
(function() {
|
|
115
|
+
var id = "dropdown-autocomplete-cet";
|
|
116
|
+
document.getElementById("clear-autocomplete-cet").addEventListener("click", function() {
|
|
117
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
|
|
118
|
+
});
|
|
119
|
+
document.getElementById("select-autocomplete-cet").addEventListener("click", function() {
|
|
120
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "pk" } }));
|
|
121
|
+
});
|
|
122
|
+
document.getElementById("simulate-autocomplete-cet").addEventListener("click", function() {
|
|
123
|
+
document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
|
|
124
|
+
});
|
|
125
|
+
})();
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<!-- Example 4: Quick pick (Date Range) -->
|
|
129
|
+
<%= pb_rails("dropdown", props: {
|
|
130
|
+
custom_event_type: "form:submitted,pb:dropdown:clearRequest",
|
|
131
|
+
id: "dropdown-quickpick-cet",
|
|
132
|
+
label: "Quickpick dropdown",
|
|
133
|
+
margin_bottom: "sm",
|
|
134
|
+
variant: "quickpick",
|
|
135
|
+
}) %>
|
|
136
|
+
<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
|
|
137
|
+
<%= pb_rails("button", props: { id: "clear-quickpick-cet", text: "Clear", variant: "primary" }) %>
|
|
138
|
+
<%= pb_rails("button", props: { id: "select-quickpick-cet", text: "Select This Week", variant: "secondary" }) %>
|
|
139
|
+
<%= pb_rails("button", props: { id: "simulate-quickpick-cet", text: "Simulate form submit", variant: "secondary" }) %>
|
|
140
|
+
<% end %>
|
|
141
|
+
|
|
142
|
+
<script>
|
|
143
|
+
(function() {
|
|
144
|
+
var id = "dropdown-quickpick-cet";
|
|
145
|
+
document.getElementById("clear-quickpick-cet").addEventListener("click", function() {
|
|
146
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
|
|
147
|
+
});
|
|
148
|
+
document.getElementById("select-quickpick-cet").addEventListener("click", function() {
|
|
149
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "quickpick-this-week" } }));
|
|
150
|
+
});
|
|
151
|
+
document.getElementById("simulate-quickpick-cet").addEventListener("click", function() {
|
|
152
|
+
document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
|
|
153
|
+
});
|
|
154
|
+
})();
|
|
155
|
+
</script>
|
|
156
|
+
|
|
157
|
+
<!-- Example 5: Custom display -->
|
|
158
|
+
<%= pb_rails("dropdown", props: {
|
|
159
|
+
custom_event_type: "form:submitted,pb:dropdown:clearRequest",
|
|
160
|
+
id: "dropdown-custom-display-cet",
|
|
161
|
+
label: "Custom display (Subcomponent) dropdown",
|
|
162
|
+
margin_bottom: "sm",
|
|
163
|
+
options: custom_display_options,
|
|
164
|
+
}) do %>
|
|
165
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display_content }) %>
|
|
166
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
167
|
+
<% custom_display_options.each do |option| %>
|
|
168
|
+
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
|
|
169
|
+
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
|
170
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
171
|
+
<%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal" }) %>
|
|
172
|
+
<% end %>
|
|
173
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
174
|
+
<%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
175
|
+
<% end %>
|
|
176
|
+
<% end %>
|
|
177
|
+
<% end %>
|
|
178
|
+
<% end %>
|
|
179
|
+
<% end %>
|
|
180
|
+
<% end %>
|
|
181
|
+
<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
|
|
182
|
+
<%= pb_rails("button", props: { id: "clear-custom-display-cet", text: "Clear", variant: "primary" }) %>
|
|
183
|
+
<%= pb_rails("button", props: { id: "select-custom-display-cet", text: "Select Strong Sad", variant: "secondary" }) %>
|
|
184
|
+
<%= pb_rails("button", props: { id: "simulate-custom-display-cet", text: "Simulate form submit", variant: "secondary" }) %>
|
|
185
|
+
<% end %>
|
|
186
|
+
|
|
187
|
+
<script>
|
|
188
|
+
(function() {
|
|
189
|
+
var id = "dropdown-custom-display-cet";
|
|
190
|
+
document.getElementById("clear-custom-display-cet").addEventListener("click", function() {
|
|
191
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
|
|
192
|
+
});
|
|
193
|
+
document.getElementById("select-custom-display-cet").addEventListener("click", function() {
|
|
194
|
+
document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "strong-sad" } }));
|
|
195
|
+
});
|
|
196
|
+
document.getElementById("simulate-custom-display-cet").addEventListener("click", function() {
|
|
197
|
+
document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
|
|
198
|
+
});
|
|
199
|
+
|
|
200
|
+
document.addEventListener("pb:dropdown:selected", function(e) {
|
|
201
|
+
if (e.target && e.target.id === id && e.detail) {
|
|
202
|
+
var display = e.target.querySelector("[data-dropdown-trigger-custom-display]");
|
|
203
|
+
if (!display) return;
|
|
204
|
+
var nameEl = display.querySelector("#cet-dropdown-avatar-name");
|
|
205
|
+
if (nameEl) nameEl.textContent = e.detail.label;
|
|
206
|
+
var avatarEl = display.querySelector("#cet-dropdown-avatar");
|
|
207
|
+
if (avatarEl) {
|
|
208
|
+
var wrapper = avatarEl.querySelector(".avatar_wrapper");
|
|
209
|
+
if (wrapper) {
|
|
210
|
+
var initials = (e.detail.label[0] + (e.detail.label.split(" ").pop() || "")[0]).toUpperCase();
|
|
211
|
+
wrapper.dataset.name = e.detail.label;
|
|
212
|
+
wrapper.setAttribute("data-initials", initials);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
var badgeEl = display.querySelector("#cet-dropdown-avatar-status");
|
|
216
|
+
if (badgeEl && e.detail.status) {
|
|
217
|
+
var variant = e.detail.status === "Online" ? "success" : e.detail.status === "Offline" ? "neutral" : "warning";
|
|
218
|
+
badgeEl.querySelector("span").textContent = e.detail.status;
|
|
219
|
+
badgeEl.className = "pb_badge_kit_" + variant;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
})();
|
|
224
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The `custom_event_type` prop lets the dropdown clear when specific events are dispatched. Set it to a comma-separated list of event names (e.g. Turbo or app-specific); when any of those events fire with optional `detail: { dropdownId }`, the matching dropdown clears. You can also listen for selection changes (`pb:dropdown:selected`), clear by dispatching `pb:dropdown:clear`, or set the selection by dispatching `pb:dropdown:select` with `detail: { dropdownId, optionId }` (or `optionIds` for multi-select).
|
|
2
|
+
|
|
3
|
+
The examples show five distinct variants (default, multi select, autocomplete, quick pick, custom display). In each example, the first button clears the dropdown by dispatching a custom event that the dropdown listens for via `custom_event_type`. The second button sets the selection by dispatching `pb:dropdown:select`. The third button simulates a form submit by dispatching another custom event in `custom_event_type`, so the dropdown clears as it would after a real form submission.
|
|
4
|
+
|
|
5
|
+
Turbo events (e.g. `turbo:frame-load`, `turbo:frame-render`, `turbo:submit-end`) often fire for many actions or across the page, so using them as `custom_event_type` can clear the dropdown more often than intended. Use them when that scope is what you want; otherwise use app-specific event names and dispatch with `detail: { dropdownId }` when the action happens, or dispatch `pb:dropdown:clear` from your own handler.
|
|
6
|
+
|
|
7
|
+
Dropdowns with subcomponent structures that show custom displays (e.g. custom trigger or custom display) require a `pb:dropdown:selected` listener to update the visible UI from `event.detail` when a selection is made; clear is handled by the kit.
|
|
@@ -33,6 +33,7 @@ examples:
|
|
|
33
33
|
- dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
|
|
34
34
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
35
35
|
- dropdown_required_indicator: Required Indicator
|
|
36
|
+
- dropdown_custom_event_type: Custom Event Type
|
|
36
37
|
|
|
37
38
|
react:
|
|
38
39
|
- dropdown_default: Default
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { text: "Top Nav Toast", variant: "secondary", data: { toast: "#top-nav" } }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
4
|
+
classname: "top-nav-margin",
|
|
5
|
+
closeable: true,
|
|
6
|
+
id: "top-nav",
|
|
7
|
+
multi_line: true,
|
|
8
|
+
text: "Top nav Margin.",
|
|
9
|
+
status: "tip",
|
|
10
|
+
vertical: "top",
|
|
11
|
+
horizontal: "center",
|
|
12
|
+
nav_margin_top: true
|
|
13
|
+
}) %>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
<script type="text/javascript">
|
|
18
|
+
const navtoast = document.querySelectorAll(".top-nav-margin")
|
|
19
|
+
const navbutton = document.querySelectorAll("button[data-toast]")
|
|
20
|
+
|
|
21
|
+
const hideNavToast = () => {
|
|
22
|
+
navtoast.forEach((toast) => {
|
|
23
|
+
toast.style.display = "none"
|
|
24
|
+
})
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Hide toasts immediately
|
|
28
|
+
hideNavToast()
|
|
29
|
+
|
|
30
|
+
// Handle various page load/restore events
|
|
31
|
+
window.addEventListener('pageshow', hideNavToast)
|
|
32
|
+
document.addEventListener('DOMContentLoaded', hideNavToast)
|
|
33
|
+
document.addEventListener('turbolinks:load', hideNavToast)
|
|
34
|
+
document.addEventListener('turbo:load', hideNavToast)
|
|
35
|
+
|
|
36
|
+
navbutton.forEach((button) => {
|
|
37
|
+
button.onclick = () => {
|
|
38
|
+
hideNavToast()
|
|
39
|
+
let toast = document.querySelector(button.getAttribute("data-toast"))
|
|
40
|
+
|
|
41
|
+
if (toast) {
|
|
42
|
+
toast.style.display = "flex"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
})
|
|
46
|
+
</script>
|