playbook_ui_docs 14.18.0 → 14.19.0.pre.alpha.PLAY1968typeaheadpreservesearchreact7796
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_beta.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +68 -16
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
|
|
5
5
|
const treeData = [
|
6
6
|
{
|
7
7
|
label: "Power Home Remodeling",
|
8
|
-
value: "
|
8
|
+
value: "powerHomeRemodeling",
|
9
9
|
id: "powerhome1",
|
10
10
|
expanded: true,
|
11
11
|
children: [
|
12
12
|
{
|
13
13
|
label: "People",
|
14
|
-
value: "
|
14
|
+
value: "people",
|
15
15
|
id: "people1",
|
16
16
|
expanded: true,
|
17
17
|
status: "active",
|
18
18
|
children: [
|
19
19
|
{
|
20
20
|
label: "Talent Acquisition",
|
21
|
-
value: "
|
21
|
+
value: "talentAcquisition",
|
22
22
|
id: "talent1",
|
23
23
|
},
|
24
24
|
{
|
25
25
|
label: "Business Affairs",
|
26
|
-
value: "
|
26
|
+
value: "businessAffairs",
|
27
27
|
id: "business1",
|
28
28
|
status: "active",
|
29
29
|
variant: "primary",
|
@@ -31,12 +31,12 @@ const treeData = [
|
|
31
31
|
children: [
|
32
32
|
{
|
33
33
|
label: "Initiatives",
|
34
|
-
value: "
|
34
|
+
value: "initiatives",
|
35
35
|
id: "initiative1",
|
36
36
|
},
|
37
37
|
{
|
38
38
|
label: "Learning & Development",
|
39
|
-
value: "
|
39
|
+
value: "learningAndDevelopment",
|
40
40
|
id: "development1",
|
41
41
|
status: "Inactive",
|
42
42
|
},
|
@@ -44,31 +44,31 @@ const treeData = [
|
|
44
44
|
},
|
45
45
|
{
|
46
46
|
label: "People Experience",
|
47
|
-
value: "
|
47
|
+
value: "peopleExperience",
|
48
48
|
id: "experience1",
|
49
49
|
},
|
50
50
|
],
|
51
51
|
},
|
52
52
|
{
|
53
53
|
label: "Contact Center",
|
54
|
-
value: "
|
54
|
+
value: "contactCenter",
|
55
55
|
id: "contact1",
|
56
56
|
status: "Inactive",
|
57
57
|
variant: "error",
|
58
58
|
children: [
|
59
59
|
{
|
60
60
|
label: "Appointment Management",
|
61
|
-
value: "
|
61
|
+
value: "appointmentManagement",
|
62
62
|
id: "appointment1",
|
63
63
|
},
|
64
64
|
{
|
65
65
|
label: "Customer Service",
|
66
|
-
value: "
|
66
|
+
value: "customerService",
|
67
67
|
id: "customer1",
|
68
68
|
},
|
69
69
|
{
|
70
70
|
label: "Energy",
|
71
|
-
value: "
|
71
|
+
value: "energy",
|
72
72
|
id: "energy1",
|
73
73
|
},
|
74
74
|
],
|
@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
|
|
5
5
|
const treeData = [
|
6
6
|
{
|
7
7
|
label: "Power Home Remodeling",
|
8
|
-
value: "
|
8
|
+
value: "powerHomeRemodeling",
|
9
9
|
id: "powerhome1",
|
10
10
|
expanded: true,
|
11
11
|
children: [
|
12
12
|
{
|
13
13
|
label: "People",
|
14
|
-
value: "
|
14
|
+
value: "people",
|
15
15
|
id: "people1",
|
16
16
|
expanded: true,
|
17
17
|
status: "active",
|
18
18
|
children: [
|
19
19
|
{
|
20
20
|
label: "Talent Acquisition",
|
21
|
-
value: "
|
21
|
+
value: "talentAcquisition",
|
22
22
|
id: "talent1",
|
23
23
|
},
|
24
24
|
{
|
25
25
|
label: "Business Affairs",
|
26
|
-
value: "
|
26
|
+
value: "businessAffairs",
|
27
27
|
id: "business1",
|
28
28
|
status: "active",
|
29
29
|
variant: "primary",
|
@@ -31,12 +31,12 @@ const treeData = [
|
|
31
31
|
children: [
|
32
32
|
{
|
33
33
|
label: "Initiatives",
|
34
|
-
value: "
|
34
|
+
value: "initiatives",
|
35
35
|
id: "initiative1",
|
36
36
|
},
|
37
37
|
{
|
38
38
|
label: "Learning & Development",
|
39
|
-
value: "
|
39
|
+
value: "learningAndDevelopment",
|
40
40
|
id: "development1",
|
41
41
|
status: "Inactive",
|
42
42
|
},
|
@@ -44,31 +44,31 @@ const treeData = [
|
|
44
44
|
},
|
45
45
|
{
|
46
46
|
label: "People Experience",
|
47
|
-
value: "
|
47
|
+
value: "peopleExperience",
|
48
48
|
id: "experience1",
|
49
49
|
},
|
50
50
|
],
|
51
51
|
},
|
52
52
|
{
|
53
53
|
label: "Contact Center",
|
54
|
-
value: "
|
54
|
+
value: "contactCenter",
|
55
55
|
id: "contact1",
|
56
56
|
status: "Inactive",
|
57
57
|
variant: "error",
|
58
58
|
children: [
|
59
59
|
{
|
60
60
|
label: "Appointment Management",
|
61
|
-
value: "
|
61
|
+
value: "appointmentManagement",
|
62
62
|
id: "appointment1",
|
63
63
|
},
|
64
64
|
{
|
65
65
|
label: "Customer Service",
|
66
|
-
value: "
|
66
|
+
value: "customerService",
|
67
67
|
id: "customer1",
|
68
68
|
},
|
69
69
|
{
|
70
70
|
label: "Energy",
|
71
|
-
value: "
|
71
|
+
value: "energy",
|
72
72
|
id: "energy1",
|
73
73
|
},
|
74
74
|
],
|
@@ -2,62 +2,62 @@
|
|
2
2
|
|
3
3
|
<% treeData = [{
|
4
4
|
label: "Power Home Remodeling",
|
5
|
-
value: "
|
5
|
+
value: "powerHomeRemodeling",
|
6
6
|
id: "powerhome1",
|
7
7
|
expanded: true,
|
8
8
|
children: [
|
9
9
|
{
|
10
10
|
label: "People",
|
11
|
-
value: "
|
11
|
+
value: "people",
|
12
12
|
id: "people1",
|
13
13
|
children: [
|
14
14
|
{
|
15
15
|
label: "Talent Acquisition",
|
16
|
-
value: "
|
16
|
+
value: "talentAcquisition",
|
17
17
|
id: "talent1",
|
18
18
|
},
|
19
19
|
{
|
20
20
|
label: "Business Affairs",
|
21
|
-
value: "
|
21
|
+
value: "businessAffairs",
|
22
22
|
id: "business1",
|
23
23
|
children: [
|
24
24
|
{
|
25
25
|
label: "Initiatives",
|
26
|
-
value: "
|
26
|
+
value: "initiatives",
|
27
27
|
id: "initiative1",
|
28
28
|
},
|
29
29
|
{
|
30
30
|
label: "Learning & Development",
|
31
|
-
value: "
|
31
|
+
value: "learningAndDevelopment",
|
32
32
|
id: "development1",
|
33
33
|
},
|
34
34
|
],
|
35
35
|
},
|
36
36
|
{
|
37
37
|
label: "People Experience",
|
38
|
-
value: "
|
38
|
+
value: "peopleExperience",
|
39
39
|
id: "experience1",
|
40
40
|
},
|
41
41
|
],
|
42
42
|
},
|
43
43
|
{
|
44
44
|
label: "Contact Center",
|
45
|
-
value: "
|
45
|
+
value: "contactCenter",
|
46
46
|
id: "contact1",
|
47
47
|
children: [
|
48
48
|
{
|
49
49
|
label: "Appointment Management",
|
50
|
-
value: "
|
50
|
+
value: "appointmentManagement",
|
51
51
|
id: "appointment1",
|
52
52
|
},
|
53
53
|
{
|
54
54
|
label: "Customer Service",
|
55
|
-
value: "
|
55
|
+
value: "customerService",
|
56
56
|
id: "customer1",
|
57
57
|
},
|
58
58
|
{
|
59
59
|
label: "Energy",
|
60
|
-
value: "
|
60
|
+
value: "energy",
|
61
61
|
id: "energy1",
|
62
62
|
},
|
63
63
|
],
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import PhoneNumberInput from '../_phone_number_input'
|
3
|
+
|
4
|
+
const PhoneNumberInputCountrySearch = (props) => (
|
5
|
+
<>
|
6
|
+
<PhoneNumberInput
|
7
|
+
countrySearch
|
8
|
+
id='country-search'
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<PhoneNumberInput
|
12
|
+
countrySearch
|
13
|
+
id='country-search-limited'
|
14
|
+
onlyCountries={["br", "us", "ph", "gb"]}
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
</>
|
18
|
+
)
|
19
|
+
|
20
|
+
export default PhoneNumberInputCountrySearch
|
@@ -0,0 +1 @@
|
|
1
|
+
Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.
|
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|
3
3
|
import Button from '../../pb_button/_button'
|
4
4
|
import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
|
5
5
|
import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
|
6
|
+
import Icon from '../../pb_icon/_icon'
|
6
7
|
|
7
8
|
const PhoneNumberInputValidation = (props) => {
|
8
9
|
const [formErrors, setFormErrors] = useState("");
|
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
|
|
29
30
|
setShowFormErrors(formErrors.length > 0);
|
30
31
|
}, [formErrors]);
|
31
32
|
|
33
|
+
const error = (
|
34
|
+
<>
|
35
|
+
<Icon icon="warning" /> Missing phone number.
|
36
|
+
</>
|
37
|
+
)
|
38
|
+
|
32
39
|
return (
|
33
40
|
<form
|
34
41
|
action=""
|
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
|
|
43
50
|
/>
|
44
51
|
)}
|
45
52
|
<PhoneNumberInput
|
46
|
-
error=
|
53
|
+
error={error}
|
47
54
|
id="validation"
|
48
55
|
initialCountry={countryCode}
|
49
56
|
onChange={handleOnChange}
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- phone_number_input_clear_field: Clearing the Input Field
|
10
10
|
- phone_number_input_access_input_element: Accessing the Input Element
|
11
11
|
- phone_number_input_format: Format as You Type
|
12
|
+
- phone_number_input_country_search: Country Search
|
12
13
|
|
13
14
|
rails:
|
14
15
|
- phone_number_input_default: Default
|
@@ -18,4 +19,5 @@ examples:
|
|
18
19
|
- phone_number_input_validation: Form Validation
|
19
20
|
- phone_number_input_format: Format as You Type
|
20
21
|
- phone_number_input_hidden_inputs: Hidden Inputs
|
22
|
+
- phone_number_input_country_search: Country Search
|
21
23
|
|
@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
|
|
6
6
|
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
7
7
|
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
8
8
|
export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
|
9
|
+
export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
|
@@ -0,0 +1,46 @@
|
|
1
|
+
<%= pb_rails("flex", props: {
|
2
|
+
dark: true,
|
3
|
+
orientation: "row",
|
4
|
+
vertical: "center",
|
5
|
+
margin_bottom: "md"
|
6
|
+
}) do %>
|
7
|
+
<%= pb_rails("body", props: { text: "Click info for more details" }) %>
|
8
|
+
|
9
|
+
<%= pb_rails("circle_icon_button", props: {
|
10
|
+
variant: "secondary",
|
11
|
+
icon: "info",
|
12
|
+
id: "append-to-popover-1"
|
13
|
+
}) %>
|
14
|
+
<%= pb_rails("popover", props: {
|
15
|
+
trigger_element_id: "append-to-popover-1",
|
16
|
+
tooltip_id: "append-to-tooltip-1",
|
17
|
+
offset: true,
|
18
|
+
position: "top",
|
19
|
+
append_to: "parent",
|
20
|
+
}) do %>
|
21
|
+
I'm a popover. I have been appended to my parent element.
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
|
25
|
+
<%= pb_rails("flex", props: {
|
26
|
+
dark: true,
|
27
|
+
orientation: "row",
|
28
|
+
vertical: "center"
|
29
|
+
}) do %>
|
30
|
+
<%= pb_rails("body", props: { text: "Click info for more details" }) %>
|
31
|
+
|
32
|
+
<%= pb_rails("circle_icon_button", props: {
|
33
|
+
variant: "secondary",
|
34
|
+
icon: "info",
|
35
|
+
id: "append-to-popover-2"
|
36
|
+
}) %>
|
37
|
+
<%= pb_rails("popover", props: {
|
38
|
+
trigger_element_id: "append-to-popover-2",
|
39
|
+
tooltip_id: "append-to-tooltip-2",
|
40
|
+
offset: true,
|
41
|
+
position: "top",
|
42
|
+
append_to: ".kit-show-wrapper",
|
43
|
+
}) do %>
|
44
|
+
I'm a popover. I have been appended to the .kit-show-wrapper.
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import Body from '../../pb_body/_body'
|
3
3
|
import Select from '../../pb_select/_select'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const SelectError = (props) => {
|
6
7
|
const options = [
|
@@ -18,10 +19,14 @@ const SelectError = (props) => {
|
|
18
19
|
},
|
19
20
|
]
|
20
21
|
|
22
|
+
const error = (<>
|
23
|
+
<Icon icon="warning" /> Please make a valid selection
|
24
|
+
</>)
|
25
|
+
|
21
26
|
return (
|
22
27
|
<div>
|
23
28
|
<Select
|
24
|
-
error=
|
29
|
+
error={error}
|
25
30
|
label="Favorite Food"
|
26
31
|
name="food"
|
27
32
|
options={options}
|
@@ -29,7 +34,7 @@ const SelectError = (props) => {
|
|
29
34
|
{...props}
|
30
35
|
/>
|
31
36
|
<Body
|
32
|
-
error=
|
37
|
+
error={error}
|
33
38
|
status="negative"
|
34
39
|
{...props}
|
35
40
|
/>
|
@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
|
|
8
8
|
|
9
9
|
const Content = () => {
|
10
10
|
return (
|
11
|
-
<Card
|
11
|
+
<Card
|
12
12
|
borderNone
|
13
13
|
borderRadius="none"
|
14
14
|
padding="md"
|
@@ -37,7 +37,7 @@ return (
|
|
37
37
|
|
38
38
|
</Table.Head>
|
39
39
|
<Table.Body>
|
40
|
-
<Table.Row collapsible
|
40
|
+
<Table.Row collapsible
|
41
41
|
collapsibleContent={<Content/>}
|
42
42
|
toggleCellId="cell-1"
|
43
43
|
{...props}
|
@@ -47,7 +47,7 @@ return (
|
|
47
47
|
<Table.Cell>{'Value 3'}</Table.Cell>
|
48
48
|
<Table.Cell>{'Value 4'}</Table.Cell>
|
49
49
|
<Table.Cell>{'Value 5'}</Table.Cell>
|
50
|
-
<Table.Cell cursor="pointer"
|
50
|
+
<Table.Cell cursor="pointer"
|
51
51
|
id="cell-1"
|
52
52
|
textAlign="right"
|
53
53
|
>
|
@@ -59,7 +59,7 @@ return (
|
|
59
59
|
</Table.Cell>
|
60
60
|
|
61
61
|
</Table.Row>
|
62
|
-
<Table.Row collapsible
|
62
|
+
<Table.Row collapsible
|
63
63
|
collapsibleContent={<Content/>}
|
64
64
|
toggleCellId="cell-2"
|
65
65
|
{...props}
|
@@ -69,7 +69,7 @@ return (
|
|
69
69
|
<Table.Cell>{'Value 3'}</Table.Cell>
|
70
70
|
<Table.Cell>{'Value 4'}</Table.Cell>
|
71
71
|
<Table.Cell>{'Value 5'}</Table.Cell>
|
72
|
-
<Table.Cell cursor="pointer"
|
72
|
+
<Table.Cell cursor="pointer"
|
73
73
|
id="cell-2"
|
74
74
|
textAlign="right"
|
75
75
|
>
|
@@ -81,7 +81,7 @@ return (
|
|
81
81
|
</Table.Cell>
|
82
82
|
|
83
83
|
</Table.Row>
|
84
|
-
<Table.Row collapsible
|
84
|
+
<Table.Row collapsible
|
85
85
|
collapsibleContent={<Content/>}
|
86
86
|
toggleCellId="cell-3"
|
87
87
|
{...props}
|
@@ -91,7 +91,7 @@ return (
|
|
91
91
|
<Table.Cell>{'Value 3'}</Table.Cell>
|
92
92
|
<Table.Cell>{'Value 4'}</Table.Cell>
|
93
93
|
<Table.Cell>{'Value 5'}</Table.Cell>
|
94
|
-
<Table.Cell cursor="pointer"
|
94
|
+
<Table.Cell cursor="pointer"
|
95
95
|
id="cell-3"
|
96
96
|
textAlign="right"
|
97
97
|
>
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
|
3
3
|
import TextInput from '../_text_input'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const TextInputError = (props) => {
|
6
7
|
const [email, setEmail] = useState('')
|
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
|
|
8
9
|
const handleUpdateEmail = ({ target }) => {
|
9
10
|
setEmail(target.value)
|
10
11
|
}
|
12
|
+
|
13
|
+
const error = (
|
14
|
+
<>
|
15
|
+
<Icon icon="warning" /> Please enter a valid email address
|
16
|
+
</>
|
17
|
+
)
|
18
|
+
|
11
19
|
return (
|
12
20
|
<div>
|
13
21
|
<TextInput
|
14
22
|
addOn={{ icon: 'user', alignment: 'left', border: true }}
|
15
|
-
error=
|
23
|
+
error={error}
|
16
24
|
label="Email Address"
|
17
25
|
onChange={handleUpdateEmail}
|
18
26
|
placeholder="Enter email address"
|
@@ -1,15 +1,21 @@
|
|
1
1
|
import React, {useState} from 'react'
|
2
2
|
import Textarea from '../../pb_textarea/_textarea'
|
3
|
+
import Icon from '../../pb_icon/_icon'
|
3
4
|
|
4
5
|
const TextareaError = (props) => {
|
5
6
|
const [value, setValue] = useState('default value text')
|
6
7
|
const handleChange = (event) => {
|
7
8
|
setValue(event.target.value)
|
8
9
|
}
|
10
|
+
const error = (
|
11
|
+
<>
|
12
|
+
<Icon icon="warning" /> This field has an error!
|
13
|
+
</>
|
14
|
+
)
|
9
15
|
return (
|
10
16
|
<div>
|
11
17
|
<Textarea
|
12
|
-
error=
|
18
|
+
error={error}
|
13
19
|
label="Label"
|
14
20
|
name="comment"
|
15
21
|
onChange={(e)=> handleChange(e)}
|
@@ -8,7 +8,14 @@
|
|
8
8
|
|
9
9
|
%>
|
10
10
|
|
11
|
-
<%= pb_rails("typeahead", props: {
|
11
|
+
<%= pb_rails("typeahead", props: {
|
12
|
+
id: "typeahead-error-example",
|
13
|
+
options: options,
|
14
|
+
error: "Please make a valid selection",
|
15
|
+
label: "Products",
|
16
|
+
name: :foo,
|
17
|
+
is_multi: false
|
18
|
+
}) %>
|
12
19
|
|
13
20
|
<!-- This section is an example of the available JavaScript event hooks -->
|
14
21
|
<%= javascript_tag defer: "defer" do %>
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState, useEffect } from 'react'
|
2
2
|
|
3
3
|
import Typeahead from '../_typeahead'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const options = [
|
6
7
|
{ label: 'Orange', value: '#FFA500' },
|
@@ -10,7 +11,10 @@ const options = [
|
|
10
11
|
]
|
11
12
|
|
12
13
|
const TypeaheadErrorState = (props) => {
|
13
|
-
const
|
14
|
+
const error = (<>
|
15
|
+
<Icon icon="warning" /> Please make a valid selection
|
16
|
+
</>)
|
17
|
+
const [errorState, setErrorState] = useState(error);
|
14
18
|
const [searchValue, setSearchValue] = useState(null);
|
15
19
|
|
16
20
|
const handleOnChange = (value) => setSearchValue(value)
|
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
|
|
19
23
|
if(searchValue) {
|
20
24
|
setErrorState("")
|
21
25
|
} else {
|
22
|
-
setErrorState(
|
26
|
+
setErrorState(error)
|
23
27
|
}
|
24
28
|
}, [searchValue])
|
25
29
|
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Typeahead from '../_typeahead'
|
4
|
+
|
5
|
+
const options = [
|
6
|
+
{ label: 'Orange', value: '#FFA500' },
|
7
|
+
{ label: 'Red', value: '#FF0000' },
|
8
|
+
{ label: 'Green', value: '#00FF00' },
|
9
|
+
{ label: 'Blue', value: '#0000FF' },
|
10
|
+
]
|
11
|
+
|
12
|
+
const TypeaheadPreserveInput = (props) => {
|
13
|
+
return (
|
14
|
+
<Typeahead
|
15
|
+
label="Colors"
|
16
|
+
options={options}
|
17
|
+
preserveSearchInput
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
)
|
21
|
+
}
|
22
|
+
|
23
|
+
export default TypeaheadPreserveInput
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus
|
@@ -15,3 +15,4 @@ export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_colo
|
|
15
15
|
export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
|
16
16
|
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|
17
17
|
export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
|
18
|
+
export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
|