playbook_ui 13.22.0.pre.alpha.playbookgemspecrailsversion2608 → 13.22.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +4 -8
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +1 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -2
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +0 -34
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +1 -17
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +2 -18
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +0 -14
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +0 -5
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +0 -6
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +0 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
- data/app/pb_kits/playbook/pb_list/list.rb +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids_react.jsx → _multi_level_select_selected_ids.jsx} +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.scss +10 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +13 -7
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +9 -6
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +7 -18
- data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +6 -39
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +12 -17
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_toggle/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -2
- data/app/pb_kits/playbook/pb_toggle/toggle.test.js +0 -7
- data/app/pb_kits/playbook/utilities/_positioning.scss +10 -23
- data/app/pb_kits/playbook/utilities/globalProps.ts +8 -26
- data/dist/menu.yml +0 -4
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/bottom.rb +3 -6
- data/lib/playbook/kit_base.rb +1 -1
- data/lib/playbook/left.rb +3 -6
- data/lib/playbook/pb_doc_helper.rb +1 -1
- data/lib/playbook/props/percentage.rb +2 -2
- data/lib/playbook/right.rb +3 -6
- data/lib/playbook/top.rb +3 -6
- data/lib/playbook/version.rb +2 -2
- metadata +41 -17
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json +0 -278
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +0 -5
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +0 -11
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +0 -21
- data/lib/playbook/position_props_css.rb +0 -17
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 20dedee9f937269953108554e36cb3c5042ff4999f15dec70143e72522721d84
|
4
|
+
data.tar.gz: 453c265095034c8e3e4a1a3d5154fb5f592141a5fc22e2c0bfa43266c3674543
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bd751bf0d81ff9eed595af9455bee5d8e0994f5e8c9c7f39fa6e865752e7224fb164c1d1652b8137793d7a3b917526d59cbe87824f14b2d08a52b04f8d138dcd
|
7
|
+
data.tar.gz: 4cec9331876c4df09bf429ed9d719a3670b3b9694e801d256263b8cbe51da044518e641c59b3af7ecd51027058116e6ff8be755bd7713d138c17dc751c3a5d88
|
@@ -24,16 +24,12 @@ export const CustomCell = ({
|
|
24
24
|
row,
|
25
25
|
value,
|
26
26
|
}: CustomCellProps & GlobalProps) => {
|
27
|
-
const { setExpanded, expanded,
|
27
|
+
const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
|
28
28
|
|
29
29
|
const handleOnExpand = (row: Row<GenericObject>) => {
|
30
|
-
onRowToggleClick && onRowToggleClick(row)
|
31
|
-
|
32
|
-
|
33
|
-
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
|
34
|
-
}
|
35
|
-
};
|
36
|
-
|
30
|
+
onRowToggleClick && onRowToggleClick(row)
|
31
|
+
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
|
32
|
+
}
|
37
33
|
const RowHasChildren = row.original.children ? true : false
|
38
34
|
const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
|
39
35
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useState } from "react"
|
2
2
|
import { AdvancedTable } from "../../"
|
3
|
-
import MOCK_DATA from "./
|
3
|
+
import { MOCK_DATA } from "./_mock_data"
|
4
4
|
|
5
5
|
const AdvancedTableExpandedControl = (props) => {
|
6
6
|
const columnDefinitions = [
|
@@ -44,16 +44,11 @@ const AdvancedTableExpandedControl = (props) => {
|
|
44
44
|
onChange: setExpanded,
|
45
45
|
}
|
46
46
|
|
47
|
-
const onRowToggleClick = (row) => {
|
48
|
-
setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
|
49
|
-
}
|
50
|
-
|
51
47
|
return (
|
52
48
|
<div>
|
53
49
|
<AdvancedTable
|
54
50
|
columnDefinitions={columnDefinitions}
|
55
51
|
expandedControl={expandedControl}
|
56
|
-
onRowToggleClick={onRowToggleClick}
|
57
52
|
tableData={MOCK_DATA}
|
58
53
|
{...props}
|
59
54
|
/>
|
@@ -1,5 +1,3 @@
|
|
1
|
-
**NOTE**: If using `expandedControl` the dev is expected to manage the row level expansion state themselves, the kit itself will NOT do it by default.
|
2
|
-
|
3
1
|
`expandedControl` is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc.
|
4
2
|
|
5
3
|
In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state.
|
@@ -0,0 +1,278 @@
|
|
1
|
+
export const MOCK_DATA = [
|
2
|
+
{
|
3
|
+
year: "2021",
|
4
|
+
quarter: null,
|
5
|
+
month: null,
|
6
|
+
day: null,
|
7
|
+
newEnrollments: "20",
|
8
|
+
scheduledMeetings: "10",
|
9
|
+
attendanceRate: "51%",
|
10
|
+
completedClasses: "3",
|
11
|
+
classCompletionRate: "33%",
|
12
|
+
graduatedStudents: "19",
|
13
|
+
children: [
|
14
|
+
{
|
15
|
+
year: "2021",
|
16
|
+
quarter: "Q1",
|
17
|
+
month: null,
|
18
|
+
day: null,
|
19
|
+
newEnrollments: "2",
|
20
|
+
scheduledMeetings: "35",
|
21
|
+
attendanceRate: "32%",
|
22
|
+
completedClasses: "15",
|
23
|
+
classCompletionRate: "52%",
|
24
|
+
graduatedStudents: "36",
|
25
|
+
children: [
|
26
|
+
{
|
27
|
+
year: "2021",
|
28
|
+
quarter: "Q1",
|
29
|
+
month: "January",
|
30
|
+
day: null,
|
31
|
+
newEnrollments: "16",
|
32
|
+
scheduledMeetings: "20",
|
33
|
+
attendanceRate: "11%",
|
34
|
+
completedClasses: "13",
|
35
|
+
classCompletionRate: "47%",
|
36
|
+
graduatedStudents: "28",
|
37
|
+
children: [
|
38
|
+
{
|
39
|
+
year: "2021",
|
40
|
+
quarter: "Q1",
|
41
|
+
month: "January",
|
42
|
+
day: "10",
|
43
|
+
newEnrollments: "34",
|
44
|
+
scheduledMeetings: "28",
|
45
|
+
attendanceRate: "97%",
|
46
|
+
completedClasses: "20",
|
47
|
+
classCompletionRate: "15%",
|
48
|
+
graduatedStudents: "17",
|
49
|
+
},
|
50
|
+
{
|
51
|
+
year: "2021",
|
52
|
+
quarter: "Q1",
|
53
|
+
month: "January",
|
54
|
+
day: "20",
|
55
|
+
newEnrollments: "43",
|
56
|
+
scheduledMeetings: "23",
|
57
|
+
attendanceRate: "66%",
|
58
|
+
completedClasses: "26",
|
59
|
+
classCompletionRate: "47%",
|
60
|
+
graduatedStudents: "9",
|
61
|
+
},
|
62
|
+
],
|
63
|
+
},
|
64
|
+
{
|
65
|
+
year: "2021",
|
66
|
+
quarter: "Q1",
|
67
|
+
month: "February",
|
68
|
+
day: null,
|
69
|
+
newEnrollments: "20",
|
70
|
+
scheduledMeetings: "41",
|
71
|
+
attendanceRate: "95%",
|
72
|
+
completedClasses: "26",
|
73
|
+
classCompletionRate: "83%",
|
74
|
+
graduatedStudents: "43",
|
75
|
+
children: [
|
76
|
+
{
|
77
|
+
year: "2011",
|
78
|
+
quarter: "Q1",
|
79
|
+
month: "February",
|
80
|
+
day: "15",
|
81
|
+
newEnrollments: "19",
|
82
|
+
scheduledMeetings: "35",
|
83
|
+
attendanceRate: "69%",
|
84
|
+
completedClasses: "8",
|
85
|
+
classCompletionRate: "75%",
|
86
|
+
graduatedStudents: "23",
|
87
|
+
},
|
88
|
+
],
|
89
|
+
},
|
90
|
+
],
|
91
|
+
},
|
92
|
+
],
|
93
|
+
},
|
94
|
+
{
|
95
|
+
year: "2022",
|
96
|
+
quarter: null,
|
97
|
+
month: null,
|
98
|
+
day: null,
|
99
|
+
newEnrollments: "25",
|
100
|
+
scheduledMeetings: "17",
|
101
|
+
attendanceRate: "75%",
|
102
|
+
completedClasses: "5",
|
103
|
+
classCompletionRate: "45%",
|
104
|
+
graduatedStudents: "32",
|
105
|
+
children: [
|
106
|
+
{
|
107
|
+
year: "2022",
|
108
|
+
quarter: "Q1",
|
109
|
+
month: null,
|
110
|
+
day: null,
|
111
|
+
newEnrollments: "2",
|
112
|
+
scheduledMeetings: "35",
|
113
|
+
attendanceRate: "32%",
|
114
|
+
completedClasses: "15",
|
115
|
+
classCompletionRate: "52%",
|
116
|
+
graduatedStudents: "36",
|
117
|
+
children: [
|
118
|
+
{
|
119
|
+
year: "2022",
|
120
|
+
quarter: "Q1",
|
121
|
+
month: "January",
|
122
|
+
day: null,
|
123
|
+
newEnrollments: "16",
|
124
|
+
scheduledMeetings: "20",
|
125
|
+
attendanceRate: "11%",
|
126
|
+
completedClasses: "13",
|
127
|
+
classCompletionRate: "47%",
|
128
|
+
graduatedStudents: "28",
|
129
|
+
children: [
|
130
|
+
{
|
131
|
+
year: "2022",
|
132
|
+
quarter: "Q1",
|
133
|
+
month: "January",
|
134
|
+
day: "15",
|
135
|
+
newEnrollments: "34",
|
136
|
+
scheduledMeetings: "28",
|
137
|
+
attendanceRate: "97%",
|
138
|
+
completedClasses: "20",
|
139
|
+
classCompletionRate: "15%",
|
140
|
+
graduatedStudents: "17",
|
141
|
+
},
|
142
|
+
{
|
143
|
+
year: "2022",
|
144
|
+
quarter: "Q1",
|
145
|
+
month: "January",
|
146
|
+
day: "25",
|
147
|
+
newEnrollments: "43",
|
148
|
+
scheduledMeetings: "23",
|
149
|
+
attendanceRate: "66%",
|
150
|
+
completedClasses: "26",
|
151
|
+
classCompletionRate: "47%",
|
152
|
+
graduatedStudents: "9",
|
153
|
+
},
|
154
|
+
],
|
155
|
+
},
|
156
|
+
{
|
157
|
+
year: "2022",
|
158
|
+
quarter: "Q1",
|
159
|
+
month: "May",
|
160
|
+
day: null,
|
161
|
+
newEnrollments: "20",
|
162
|
+
scheduledMeetings: "41",
|
163
|
+
attendanceRate: "95%",
|
164
|
+
completedClasses: "26",
|
165
|
+
classCompletionRate: "83%",
|
166
|
+
graduatedStudents: "43",
|
167
|
+
children: [
|
168
|
+
{
|
169
|
+
year: "2011",
|
170
|
+
quarter: "Q1",
|
171
|
+
month: "May",
|
172
|
+
day: "2",
|
173
|
+
newEnrollments: "19",
|
174
|
+
scheduledMeetings: "35",
|
175
|
+
attendanceRate: "69%",
|
176
|
+
completedClasses: "8",
|
177
|
+
classCompletionRate: "75%",
|
178
|
+
graduatedStudents: "23",
|
179
|
+
},
|
180
|
+
],
|
181
|
+
},
|
182
|
+
],
|
183
|
+
},
|
184
|
+
],
|
185
|
+
},
|
186
|
+
{
|
187
|
+
year: "2023",
|
188
|
+
quarter: null,
|
189
|
+
month: null,
|
190
|
+
day: null,
|
191
|
+
newEnrollments: "10",
|
192
|
+
scheduledMeetings: "15",
|
193
|
+
attendanceRate: "65%",
|
194
|
+
completedClasses: "4",
|
195
|
+
classCompletionRate: "49%",
|
196
|
+
graduatedStudents: "29",
|
197
|
+
children: [
|
198
|
+
{
|
199
|
+
year: "2023",
|
200
|
+
quarter: "Q1",
|
201
|
+
month: null,
|
202
|
+
day: null,
|
203
|
+
newEnrollments: "2",
|
204
|
+
scheduledMeetings: "35",
|
205
|
+
attendanceRate: "32%",
|
206
|
+
completedClasses: "15",
|
207
|
+
classCompletionRate: "52%",
|
208
|
+
graduatedStudents: "36",
|
209
|
+
children: [
|
210
|
+
{
|
211
|
+
year: "2023",
|
212
|
+
quarter: "Q1",
|
213
|
+
month: "March",
|
214
|
+
day: null,
|
215
|
+
newEnrollments: "16",
|
216
|
+
scheduledMeetings: "20",
|
217
|
+
attendanceRate: "11%",
|
218
|
+
completedClasses: "13",
|
219
|
+
classCompletionRate: "47%",
|
220
|
+
graduatedStudents: "28",
|
221
|
+
children: [
|
222
|
+
{
|
223
|
+
year: "2023",
|
224
|
+
quarter: "Q1",
|
225
|
+
month: "March",
|
226
|
+
day: "10",
|
227
|
+
newEnrollments: "34",
|
228
|
+
scheduledMeetings: "28",
|
229
|
+
attendanceRate: "97%",
|
230
|
+
completedClasses: "20",
|
231
|
+
classCompletionRate: "15%",
|
232
|
+
graduatedStudents: "17",
|
233
|
+
},
|
234
|
+
{
|
235
|
+
year: "2023",
|
236
|
+
quarter: "Q1",
|
237
|
+
month: "March",
|
238
|
+
day: "11",
|
239
|
+
newEnrollments: "43",
|
240
|
+
scheduledMeetings: "23",
|
241
|
+
attendanceRate: "66%",
|
242
|
+
completedClasses: "26",
|
243
|
+
classCompletionRate: "47%",
|
244
|
+
graduatedStudents: "9",
|
245
|
+
},
|
246
|
+
],
|
247
|
+
},
|
248
|
+
{
|
249
|
+
year: "2023",
|
250
|
+
quarter: "Q1",
|
251
|
+
month: "April",
|
252
|
+
day: null,
|
253
|
+
newEnrollments: "20",
|
254
|
+
scheduledMeetings: "41",
|
255
|
+
attendanceRate: "95%",
|
256
|
+
completedClasses: "26",
|
257
|
+
classCompletionRate: "83%",
|
258
|
+
graduatedStudents: "43",
|
259
|
+
children: [
|
260
|
+
{
|
261
|
+
year: "2023",
|
262
|
+
quarter: "Q1",
|
263
|
+
month: "April",
|
264
|
+
day: "15",
|
265
|
+
newEnrollments: "19",
|
266
|
+
scheduledMeetings: "35",
|
267
|
+
attendanceRate: "69%",
|
268
|
+
completedClasses: "8",
|
269
|
+
classCompletionRate: "75%",
|
270
|
+
graduatedStudents: "23",
|
271
|
+
},
|
272
|
+
],
|
273
|
+
},
|
274
|
+
],
|
275
|
+
},
|
276
|
+
],
|
277
|
+
},
|
278
|
+
]
|
@@ -10,6 +10,13 @@
|
|
10
10
|
picker_id: "date-picker-default-date2"
|
11
11
|
}) %>
|
12
12
|
|
13
|
+
<%= pb_rails("date_picker", props: {
|
14
|
+
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
15
|
+
label: "Default Date Range",
|
16
|
+
mode: "range",
|
17
|
+
picker_id: "date-picker-default-date3"
|
18
|
+
}) %>
|
19
|
+
|
13
20
|
<%= pb_rails("date_picker", props: {
|
14
21
|
label: "Default Behavior",
|
15
22
|
picker_id: "date-picker-default-date4"
|
@@ -16,6 +16,13 @@ const DatePickerDefaultDate = (props) => (
|
|
16
16
|
pickerId="date-picker-default-date2"
|
17
17
|
{...props}
|
18
18
|
/>
|
19
|
+
<DatePicker
|
20
|
+
defaultDate={[new Date(), new Date().fp_incr(7)]}
|
21
|
+
label="Default Date Range"
|
22
|
+
mode="range"
|
23
|
+
pickerId="date-picker-default-date3"
|
24
|
+
{...props}
|
25
|
+
/>
|
19
26
|
<DatePicker
|
20
27
|
label="Default Behavior"
|
21
28
|
pickerId="date-picker-default-date4"
|
@@ -2,11 +2,4 @@
|
|
2
2
|
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
3
3
|
mode: "range",
|
4
4
|
picker_id: "date-picker-range"
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<%= pb_rails("date_picker", props: {
|
8
|
-
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
9
|
-
label: "Default Date Range",
|
10
|
-
mode: "range",
|
11
|
-
picker_id: "date-picker-default-date3"
|
12
5
|
}) %>
|
@@ -10,13 +10,6 @@ const DatePickerRange = (props) => (
|
|
10
10
|
pickerId="date-picker-range"
|
11
11
|
{...props}
|
12
12
|
/>
|
13
|
-
<DatePicker
|
14
|
-
defaultDate={[new Date(), new Date().fp_incr(7)]}
|
15
|
-
label="Default Date Range"
|
16
|
-
mode="range"
|
17
|
-
pickerId="date-picker-default-date3"
|
18
|
-
{...props}
|
19
|
-
/>
|
20
13
|
</div>
|
21
14
|
)
|
22
15
|
|
@@ -7,7 +7,7 @@ examples:
|
|
7
7
|
- date_picker_allow_input: Allow Input
|
8
8
|
- date_picker_input: Input Field
|
9
9
|
- date_picker_label: Label
|
10
|
-
|
10
|
+
- date_picker_range: Range
|
11
11
|
- date_picker_quick_pick_rails: Range (Quick Pick)
|
12
12
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
13
13
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
@@ -37,7 +37,7 @@ examples:
|
|
37
37
|
- date_picker_label: Label
|
38
38
|
- date_picker_on_change: onChange
|
39
39
|
- date_picker_on_close: onClose
|
40
|
-
|
40
|
+
- date_picker_range: Range
|
41
41
|
- date_picker_quick_pick_react: Range (Quick Pick)
|
42
42
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
43
43
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
@@ -9,7 +9,7 @@
|
|
9
9
|
<%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
|
10
10
|
<%= object.confirm_button %>
|
11
11
|
<% end %>
|
12
|
-
<%= pb_rails("button", props: {
|
12
|
+
<%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
|
13
13
|
<%= object.cancel_button %>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
@@ -6,8 +6,8 @@
|
|
6
6
|
**combined_html_options) do %>
|
7
7
|
<%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
|
8
8
|
<%= content.presence || object.title %>
|
9
|
-
|
10
|
-
<button class="dialog-button-class"
|
9
|
+
|
10
|
+
<button class="dialog-button-class" data-close-dialog= <%= object.id %> >
|
11
11
|
<%= pb_rails("icon", props:{icon: "times"}) %>
|
12
12
|
</button>
|
13
13
|
<% end %>
|
@@ -1,7 +1,6 @@
|
|
1
1
|
<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
|
2
2
|
|
3
3
|
<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
|
4
|
-
<form>
|
5
4
|
<%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
|
6
5
|
<%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
|
7
6
|
<% end %>
|
@@ -13,5 +12,4 @@
|
|
13
12
|
|
14
13
|
<% end %>
|
15
14
|
<%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
|
16
|
-
</form>
|
17
15
|
<% end %>
|
@@ -57,36 +57,6 @@
|
|
57
57
|
margin-bottom: 16px;
|
58
58
|
}
|
59
59
|
|
60
|
-
& > [class^=pb_phone_number_input]:not(:last-child) {
|
61
|
-
.text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
|
62
|
-
border-bottom-right-radius: 0;
|
63
|
-
border-top-right-radius: 0;
|
64
|
-
border-right-width: 0;
|
65
|
-
}
|
66
|
-
}
|
67
|
-
|
68
|
-
& > [class^=pb_phone_number_input]:not(:first-child) {
|
69
|
-
.text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
|
70
|
-
border-bottom-left-radius: 0;
|
71
|
-
border-top-left-radius: 0;
|
72
|
-
}
|
73
|
-
}
|
74
|
-
|
75
|
-
& > div:not(:first-child) > [class^=pb_phone_number_input] {
|
76
|
-
.text_input {
|
77
|
-
border-bottom-left-radius: 0;
|
78
|
-
border-top-left-radius: 0;
|
79
|
-
}
|
80
|
-
}
|
81
|
-
|
82
|
-
& > div:not(:last-child) > [class^=pb_phone_number_input] {
|
83
|
-
.text_input {
|
84
|
-
border-bottom-right-radius: 0;
|
85
|
-
border-top-right-radius: 0;
|
86
|
-
border-right: none;
|
87
|
-
}
|
88
|
-
}
|
89
|
-
|
90
60
|
&[class*=rails] > [class^=pb_date_picker_kit] {
|
91
61
|
margin-bottom: 0px;
|
92
62
|
}
|
@@ -112,10 +82,6 @@
|
|
112
82
|
border-bottom-right-radius: 0;
|
113
83
|
border-top-right-radius: 0;
|
114
84
|
border-right-width: 0;
|
115
|
-
&:focus {
|
116
|
-
outline: $primary solid 1px;
|
117
|
-
outline-offset: -1px;
|
118
|
-
}
|
119
85
|
}
|
120
86
|
}
|
121
87
|
|
@@ -1,7 +1,6 @@
|
|
1
1
|
<div>
|
2
|
-
|
3
2
|
<%= pb_rails("form_group") do %>
|
4
|
-
<%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
|
3
|
+
<%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
|
5
4
|
<%= pb_rails("select", props: {
|
6
5
|
blank_selection: "Genre",
|
7
6
|
options: [
|
@@ -17,19 +16,4 @@
|
|
17
16
|
]
|
18
17
|
}) %>
|
19
18
|
<% end %>
|
20
|
-
<br>
|
21
|
-
<br>
|
22
|
-
<%= pb_rails("form_group") do %>
|
23
|
-
<%= pb_rails("select", props: {
|
24
|
-
blank_selection: "Phone",
|
25
|
-
options: [
|
26
|
-
{ value: "Cell" },
|
27
|
-
{ value: "Work" },
|
28
|
-
{ value: "Home" },
|
29
|
-
]
|
30
|
-
}) %>
|
31
|
-
<%= pb_rails("phone_number_input", props: {
|
32
|
-
id: "phone"
|
33
|
-
}) %>
|
34
|
-
<% end %>
|
35
19
|
</div>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import FormGroup from '../_form_group'
|
4
|
-
|
4
|
+
|
5
5
|
import Select from '../../pb_select/_select'
|
6
6
|
import TextInput from '../../pb_text_input/_text_input'
|
7
7
|
|
@@ -18,16 +18,11 @@ const FormGroupSelect = (props) => {
|
|
18
18
|
{ value: 'Other' },
|
19
19
|
]
|
20
20
|
|
21
|
-
const phoneOptions = [
|
22
|
-
{ value: 'Cell' },
|
23
|
-
{ value: 'Work' },
|
24
|
-
{ value: 'Home' },
|
25
|
-
]
|
26
|
-
|
27
21
|
return (
|
28
22
|
<div>
|
29
23
|
<FormGroup>
|
30
24
|
<TextInput
|
25
|
+
label="Artist"
|
31
26
|
placeholder="Enter Artist Name"
|
32
27
|
{...props}
|
33
28
|
/>
|
@@ -37,17 +32,6 @@ const FormGroupSelect = (props) => {
|
|
37
32
|
{...props}
|
38
33
|
/>
|
39
34
|
</FormGroup>
|
40
|
-
<br />
|
41
|
-
<br />
|
42
|
-
<FormGroup>
|
43
|
-
<Select
|
44
|
-
blankSelection="Phone"
|
45
|
-
options={phoneOptions}
|
46
|
-
/>
|
47
|
-
<PhoneNumberInput
|
48
|
-
id='default'
|
49
|
-
/>
|
50
|
-
</FormGroup>
|
51
35
|
</div>
|
52
36
|
)
|
53
37
|
}
|