playbook_ui_docs 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 → 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593
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_hooks.md +1 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/{_phone_number_input_default.html.erb → _phone_number_input_default_rails.html.erb} +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default_rails.md +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +5 -14
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +0 -102
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +0 -39
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +0 -39
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +0 -91
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +0 -5
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +0 -22
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +0 -66
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +0 -1
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.15.0.pre.alpha.
|
4
|
+
version: 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593
|
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-03-
|
12
|
+
date: 2025-03-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -59,8 +59,6 @@ files:
|
|
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
61
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
|
62
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
|
63
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
|
64
62
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
|
65
63
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
|
66
64
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
|
@@ -539,10 +537,8 @@ files:
|
|
539
537
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb
|
540
538
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx
|
541
539
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
|
542
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb
|
543
540
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
|
544
541
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
|
545
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb
|
546
542
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
|
547
543
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
|
548
544
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
|
@@ -1267,8 +1263,6 @@ files:
|
|
1267
1263
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
|
1268
1264
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb
|
1269
1265
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx
|
1270
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
1271
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
1272
1266
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
1273
1267
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
|
1274
1268
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
|
@@ -1469,14 +1463,13 @@ files:
|
|
1469
1463
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
|
1470
1464
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
|
1471
1465
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
|
1472
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
|
1473
1466
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
|
1474
1467
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
|
1468
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default_rails.html.erb
|
1469
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default_rails.md
|
1475
1470
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
|
1476
1471
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
|
1477
1472
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
|
1478
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb
|
1479
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md
|
1480
1473
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
|
1481
1474
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
|
1482
1475
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
|
@@ -2099,9 +2092,9 @@ files:
|
|
2099
2092
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
|
2100
2093
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
|
2101
2094
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
|
2095
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
|
2102
2096
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
|
2103
2097
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
|
2104
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
|
2105
2098
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
|
2106
2099
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
|
2107
2100
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
|
@@ -2156,8 +2149,6 @@ files:
|
|
2156
2149
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
2157
2150
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
2158
2151
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
2159
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
2160
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
2161
2152
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
2162
2153
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
|
2163
2154
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
|
@@ -1,102 +0,0 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import { AdvancedTable, TextInput, Body } from "playbook-ui";
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json";
|
4
|
-
|
5
|
-
const AdvancedTableInlineEditing = (props) => {
|
6
|
-
const [editedValues, setEditedValues] = useState({});
|
7
|
-
|
8
|
-
const EditableCell = ({ rowId, originalValue, onSave }) => {
|
9
|
-
const [localValue, setLocalValue] = useState(originalValue);
|
10
|
-
|
11
|
-
const handleChange = (e) => setLocalValue(e.target.value);
|
12
|
-
|
13
|
-
const handleBlur = () => {
|
14
|
-
originalValue !== localValue && onSave(rowId, localValue);
|
15
|
-
};
|
16
|
-
|
17
|
-
return (
|
18
|
-
<TextInput inline
|
19
|
-
marginBottom="none"
|
20
|
-
{...props}
|
21
|
-
>
|
22
|
-
<input
|
23
|
-
onBlur={handleBlur}
|
24
|
-
onChange={handleChange}
|
25
|
-
onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
|
26
|
-
value={localValue}
|
27
|
-
/>
|
28
|
-
</TextInput>
|
29
|
-
);
|
30
|
-
};
|
31
|
-
|
32
|
-
const columnDefinitions = [
|
33
|
-
{
|
34
|
-
accessor: "year",
|
35
|
-
label: "Year",
|
36
|
-
cellAccessors: ["quarter", "month", "day"],
|
37
|
-
},
|
38
|
-
{
|
39
|
-
accessor: "newEnrollments",
|
40
|
-
label: "New Enrollments",
|
41
|
-
},
|
42
|
-
{
|
43
|
-
accessor: "scheduledMeetings",
|
44
|
-
label: "Scheduled Meetings",
|
45
|
-
editable: true,
|
46
|
-
customRenderer: (row) => {
|
47
|
-
return (
|
48
|
-
<EditableCell
|
49
|
-
onSave={(id, val) => {
|
50
|
-
setEditedValues((prev) => ({ ...prev, [id]: val }));
|
51
|
-
}}
|
52
|
-
originalValue={
|
53
|
-
editedValues[row.id] ?? row.original.scheduledMeetings
|
54
|
-
}
|
55
|
-
rowId={row.id}
|
56
|
-
/>
|
57
|
-
);
|
58
|
-
},
|
59
|
-
},
|
60
|
-
{
|
61
|
-
accessor: "attendanceRate",
|
62
|
-
label: "Attendance Rate",
|
63
|
-
},
|
64
|
-
{
|
65
|
-
accessor: "completedClasses",
|
66
|
-
label: "Completed Classes",
|
67
|
-
},
|
68
|
-
{
|
69
|
-
accessor: "classCompletionRate",
|
70
|
-
label: "Class Completion Rate",
|
71
|
-
},
|
72
|
-
{
|
73
|
-
accessor: "graduatedStudents",
|
74
|
-
label: "Graduated Students",
|
75
|
-
},
|
76
|
-
];
|
77
|
-
|
78
|
-
return (
|
79
|
-
<div className="App">
|
80
|
-
<AdvancedTable
|
81
|
-
columnDefinitions={columnDefinitions}
|
82
|
-
tableData={MOCK_DATA}
|
83
|
-
{...props}
|
84
|
-
/>
|
85
|
-
{
|
86
|
-
editedValues && Object.keys(editedValues).length > 0 && (
|
87
|
-
<>
|
88
|
-
<Body
|
89
|
-
marginTop="md"
|
90
|
-
{...props}
|
91
|
-
>
|
92
|
-
Edited Values by Row Id:
|
93
|
-
</Body>
|
94
|
-
<pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
|
95
|
-
</>
|
96
|
-
)
|
97
|
-
}
|
98
|
-
</div>
|
99
|
-
);
|
100
|
-
};
|
101
|
-
|
102
|
-
export default AdvancedTableInlineEditing;
|
@@ -1,4 +0,0 @@
|
|
1
|
-
Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
|
2
|
-
|
3
|
-
Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
|
4
|
-
See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.
|
@@ -1,39 +0,0 @@
|
|
1
|
-
<%= pb_rails("date_picker", props: {
|
2
|
-
label: "Date Picker",
|
3
|
-
picker_id: "date-picker-onchange",
|
4
|
-
margin_bottom: "lg"
|
5
|
-
}) %>
|
6
|
-
<%= pb_rails("caption", props: { text: "Date Object" }) %>
|
7
|
-
<%= pb_rails("body", props: {
|
8
|
-
label: "Date Object",
|
9
|
-
text: "Select Date",
|
10
|
-
margin_bottom: "lg",
|
11
|
-
id: "date-picker-onchange-object",
|
12
|
-
}) %>
|
13
|
-
<%= pb_rails("caption", props: { text: "Date String" }) %>
|
14
|
-
<%= pb_rails("body", props: {
|
15
|
-
label: "Date String",
|
16
|
-
text: "Select Date",
|
17
|
-
margin_bottom: "lg",
|
18
|
-
id: "date-picker-onchange-string",
|
19
|
-
}) %>
|
20
|
-
|
21
|
-
|
22
|
-
<%= javascript_tag do %>
|
23
|
-
window.addEventListener("DOMContentLoaded", () => {
|
24
|
-
<%# Access flatpickr instance with picker id and assign it a variable %>
|
25
|
-
const fp = document.querySelector("#date-picker-onchange")._flatpickr
|
26
|
-
|
27
|
-
<%# Define Hook %>
|
28
|
-
const changeHook = (selectedDates, dateStr) => {
|
29
|
-
const object = document.querySelector('#date-picker-onchange-object')
|
30
|
-
object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
|
31
|
-
|
32
|
-
const string = document.querySelector('#date-picker-onchange-string')
|
33
|
-
string.textContent = dateStr
|
34
|
-
}
|
35
|
-
|
36
|
-
<%# Push one or more hooks to onChange config array %>
|
37
|
-
fp.config.onChange.push(changeHook)
|
38
|
-
})
|
39
|
-
<% end %>
|
@@ -1,39 +0,0 @@
|
|
1
|
-
<%= pb_rails("date_picker", props: {
|
2
|
-
label: "Date Picker",
|
3
|
-
picker_id: "date-picker-onclose",
|
4
|
-
margin_bottom: "lg"
|
5
|
-
}) %>
|
6
|
-
<%= pb_rails("caption", props: { text: "Date Object" }) %>
|
7
|
-
<%= pb_rails("body", props: {
|
8
|
-
label: "Date Object",
|
9
|
-
text: "Select Date",
|
10
|
-
margin_bottom: "lg",
|
11
|
-
id: "date-picker-onclose-object",
|
12
|
-
}) %>
|
13
|
-
<%= pb_rails("caption", props: { text: "Date String" }) %>
|
14
|
-
<%= pb_rails("body", props: {
|
15
|
-
label: "Date String",
|
16
|
-
text: "Select Date",
|
17
|
-
margin_bottom: "lg",
|
18
|
-
id: "date-picker-onclose-string",
|
19
|
-
}) %>
|
20
|
-
|
21
|
-
|
22
|
-
<%= javascript_tag do %>
|
23
|
-
window.addEventListener("DOMContentLoaded", () => {
|
24
|
-
<%# Access flatpickr instance with picker id and assign it a variable %>
|
25
|
-
const fp = document.querySelector("#date-picker-onclose")._flatpickr
|
26
|
-
|
27
|
-
<%# Define Hook %>
|
28
|
-
const closeHook = (selectedDates, dateStr) => {
|
29
|
-
const object = document.querySelector('#date-picker-onclose-object')
|
30
|
-
object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
|
31
|
-
|
32
|
-
const string = document.querySelector('#date-picker-onclose-string')
|
33
|
-
string.textContent = dateStr
|
34
|
-
}
|
35
|
-
|
36
|
-
<%# Push one or more hooks to onClose config array %>
|
37
|
-
fp.config.onClose.push(closeHook)
|
38
|
-
})
|
39
|
-
<% end %>
|
@@ -1,91 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import MultiLevelSelect from "../_multi_level_select"
|
3
|
-
import { useForm } from "react-hook-form"
|
4
|
-
|
5
|
-
const treeData = [
|
6
|
-
{
|
7
|
-
label: "Power Home Remodeling",
|
8
|
-
value: "Power Home Remodeling",
|
9
|
-
id: "powerhome1",
|
10
|
-
expanded: true,
|
11
|
-
children: [
|
12
|
-
{
|
13
|
-
label: "People",
|
14
|
-
value: "People",
|
15
|
-
id: "people1",
|
16
|
-
expanded: true,
|
17
|
-
children: [
|
18
|
-
{
|
19
|
-
label: "Talent Acquisition",
|
20
|
-
value: "Talent Acquisition",
|
21
|
-
id: "talent1",
|
22
|
-
},
|
23
|
-
{
|
24
|
-
label: "Business Affairs",
|
25
|
-
value: "Business Affairs",
|
26
|
-
id: "business1",
|
27
|
-
children: [
|
28
|
-
{
|
29
|
-
label: "Initiatives",
|
30
|
-
value: "Initiatives",
|
31
|
-
id: "initiative1",
|
32
|
-
},
|
33
|
-
{
|
34
|
-
label: "Learning & Development",
|
35
|
-
value: "Learning & Development",
|
36
|
-
id: "development1",
|
37
|
-
},
|
38
|
-
],
|
39
|
-
},
|
40
|
-
{
|
41
|
-
label: "People Experience",
|
42
|
-
value: "People Experience",
|
43
|
-
id: "experience1",
|
44
|
-
},
|
45
|
-
],
|
46
|
-
},
|
47
|
-
{
|
48
|
-
label: "Contact Center",
|
49
|
-
value: "Contact Center",
|
50
|
-
id: "contact1",
|
51
|
-
children: [
|
52
|
-
{
|
53
|
-
label: "Appointment Management",
|
54
|
-
value: "Appointment Management",
|
55
|
-
id: "appointment1",
|
56
|
-
},
|
57
|
-
{
|
58
|
-
label: "Customer Service",
|
59
|
-
value: "Customer Service",
|
60
|
-
id: "customer1",
|
61
|
-
},
|
62
|
-
{
|
63
|
-
label: "Energy",
|
64
|
-
value: "Energy",
|
65
|
-
id: "energy1",
|
66
|
-
},
|
67
|
-
],
|
68
|
-
},
|
69
|
-
],
|
70
|
-
},
|
71
|
-
]
|
72
|
-
|
73
|
-
const MultiLevelSelectReactHook = (props) => {
|
74
|
-
const { register, watch } = useForm()
|
75
|
-
const selectedItems = watch("departments")
|
76
|
-
selectedItems && console.log("Selected Items", selectedItems)
|
77
|
-
|
78
|
-
return (
|
79
|
-
<div>
|
80
|
-
<MultiLevelSelect
|
81
|
-
id="multiselect-default"
|
82
|
-
marginBottom="md"
|
83
|
-
treeData={treeData}
|
84
|
-
{...register("departments")}
|
85
|
-
{...props}
|
86
|
-
/>
|
87
|
-
</div>
|
88
|
-
)
|
89
|
-
}
|
90
|
-
|
91
|
-
export default MultiLevelSelectReactHook
|
@@ -1 +0,0 @@
|
|
1
|
-
You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
|
@@ -1 +0,0 @@
|
|
1
|
-
The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
|
2
|
-
<%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
|
3
|
-
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
|
4
|
-
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
5
|
-
Send Email
|
6
|
-
<% end %>
|
7
|
-
<%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
|
8
|
-
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
|
9
|
-
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
10
|
-
Send Email
|
11
|
-
<% end %>
|
12
|
-
<%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
|
13
|
-
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
|
14
|
-
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
15
|
-
Send Email
|
16
|
-
<% end %>
|
17
|
-
<%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
|
18
|
-
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
|
19
|
-
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
20
|
-
Send Email
|
21
|
-
<% end %>
|
22
|
-
<% end %>
|
@@ -1,66 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import { Typeahead, Title } from 'playbook-ui'
|
4
|
-
import { useForm } from 'react-hook-form'
|
5
|
-
|
6
|
-
const languages = [
|
7
|
-
{ label: 'JavaScript', value: '1995', category: 'Web Development' },
|
8
|
-
{ label: 'Python', value: '1991', category: 'General Purpose' },
|
9
|
-
{ label: 'Java', value: '1995', category: 'Enterprise' },
|
10
|
-
{ label: 'C++', value: '1985', category: 'Systems Programming' },
|
11
|
-
{ label: 'Go', value: '2009', category: 'Systems Programming' },
|
12
|
-
{ label: 'Rust', value: '2010', category: 'Systems Programming' },
|
13
|
-
{ label: 'Swift', value: '2014', category: 'Mobile Development' },
|
14
|
-
{ label: 'Kotlin', value: '2011', category: 'Mobile Development' },
|
15
|
-
{ label: 'Ruby', value: '1995', category: 'General Purpose' },
|
16
|
-
{ label: 'PHP', value: '1995', category: 'Web Development' },
|
17
|
-
]
|
18
|
-
|
19
|
-
const colors = [
|
20
|
-
{ label: 'Orange', value: '#FFA500' },
|
21
|
-
{ label: 'Red', value: '#FF0000' },
|
22
|
-
{ label: 'Green', value: '#00FF00' },
|
23
|
-
{ label: 'Blue', value: '#0000FF' },
|
24
|
-
]
|
25
|
-
|
26
|
-
const TypeaheadReactHook = (props) => {
|
27
|
-
const { register, watch } = useForm()
|
28
|
-
|
29
|
-
const selectedLanguages = watch('languages')
|
30
|
-
const selectedColor = watch('color')
|
31
|
-
|
32
|
-
return (
|
33
|
-
<>
|
34
|
-
<Typeahead
|
35
|
-
isMulti
|
36
|
-
label="Multi Select Languages"
|
37
|
-
multiKit="language"
|
38
|
-
options={languages}
|
39
|
-
{...props}
|
40
|
-
{...register('languages')}
|
41
|
-
/>
|
42
|
-
<Title
|
43
|
-
size={4}
|
44
|
-
text='Selected Languages'
|
45
|
-
/>
|
46
|
-
{selectedLanguages && selectedLanguages.map(language => (
|
47
|
-
<p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
|
48
|
-
))}
|
49
|
-
|
50
|
-
<Typeahead
|
51
|
-
label="Colors"
|
52
|
-
marginTop="lg"
|
53
|
-
options={colors}
|
54
|
-
{...props}
|
55
|
-
{...register('color')}
|
56
|
-
/>
|
57
|
-
<Title
|
58
|
-
size={4}
|
59
|
-
text='Selected Color'
|
60
|
-
/>
|
61
|
-
<p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
|
62
|
-
</>
|
63
|
-
)
|
64
|
-
}
|
65
|
-
|
66
|
-
export default TypeaheadReactHook
|
@@ -1 +0,0 @@
|
|
1
|
-
You can pass `react-hook-form` props to the Typeahead kit.
|