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.
Files changed (174) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +65 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  16. 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
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -5
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -2
  20. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  21. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  22. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  23. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  50. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  51. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  52. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
  53. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  54. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  55. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  56. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  57. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  58. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  59. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  60. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
  61. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  67. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  74. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  75. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  76. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  77. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  78. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
  79. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
  80. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  81. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  82. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  83. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  84. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  85. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
  86. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
  87. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
  88. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  89. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  90. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  91. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  92. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
  93. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  94. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  95. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  96. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  97. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  98. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  99. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  100. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  101. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
  102. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
  103. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
  104. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
  105. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
  106. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
  107. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
  108. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
  109. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
  110. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
  111. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
  112. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
  113. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
  114. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
  115. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
  116. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
  117. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
  118. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
  119. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
  120. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
  121. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
  122. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
  123. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
  124. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
  125. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
  126. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
  127. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
  128. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
  129. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
  130. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
  131. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
  132. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
  133. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
  134. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  135. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  136. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  137. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  138. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  139. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  140. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  141. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  142. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  143. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  144. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  145. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  146. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  147. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  148. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  149. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  150. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  151. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  152. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  153. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
  154. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
  155. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  156. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  157. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  158. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  159. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  160. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  161. data/dist/playbook-doc.js +2 -2
  162. metadata +68 -16
  163. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  164. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  165. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  166. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  167. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  168. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  169. /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
  170. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  171. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
  172. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  173. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
  174. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After call',
10
+ name: 'After Call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -12,7 +12,7 @@ const data = [
12
12
  value: 49,
13
13
  },
14
14
  {
15
- name: 'After call',
15
+ name: 'After Call',
16
16
  value: 10,
17
17
  },
18
18
  ]
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After call',
10
+ name: 'After Call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -14,7 +14,7 @@ const data = [
14
14
  value: 49,
15
15
  },
16
16
  {
17
- name: 'After call',
17
+ name: 'After Call',
18
18
  value: 10,
19
19
  },
20
20
  ]
@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
14
14
  value: 49,
15
15
  },
16
16
  {
17
- name: 'After call',
17
+ name: 'After Call',
18
18
  value: 10,
19
19
  },
20
20
  ])
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
29
29
  value: 12,
30
30
  },
31
31
  {
32
- name: 'After call',
32
+ name: 'After Call',
33
33
  value: 140,
34
34
  },
35
35
  ]
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
5
+
6
+ const data = [
7
+ {
8
+ name: 'Waiting for Calls',
9
+ y: 41,
10
+ },
11
+ {
12
+ name: 'On Call',
13
+ y: 49,
14
+ },
15
+ {
16
+ name: 'After Call',
17
+ y: 10,
18
+ },
19
+ ]
20
+
21
+ const baseOptions = {
22
+ series: [{ data: data }],
23
+ }
24
+
25
+ const CircleChartPbStyles = () => {
26
+ const options = Highcharts.merge({}, circleChartTheme, baseOptions )
27
+
28
+ return (
29
+ <div>
30
+ <HighchartsReact
31
+ highcharts={Highcharts}
32
+ options={options}
33
+ />
34
+ </div>
35
+ );
36
+ };
37
+
38
+ export default CircleChartPbStyles;
@@ -0,0 +1 @@
1
+ You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After call',
10
+ name: 'After Call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -12,7 +12,7 @@ const dataRounded = [
12
12
  value: 49,
13
13
  },
14
14
  {
15
- name: 'After call',
15
+ name: 'After Call',
16
16
  value: 10,
17
17
  },
18
18
  ]
@@ -14,6 +14,7 @@ examples:
14
14
 
15
15
  react:
16
16
  - circle_chart_default: Default Style
17
+ - circle_chart_pb_styles: Playbook Styles
17
18
  - circle_chart_live_data: Live Data
18
19
  - circle_chart_rounded: Rounded Corners
19
20
  - circle_chart_block: Accepts Any Block
@@ -22,7 +23,5 @@ examples:
22
23
  - circle_chart_with_legend_kit: Legend
23
24
  - circle_chart_legend_position: Legend Position
24
25
  - circle_chart_with_title: Title
25
- - circle_chart_inner_sizes: Inner Circle Size Options
26
+ - circle_chart_inner_sizes: Inner Circle Size Options
26
27
  - circle_chart_custom_tooltip: Tooltip Customization
27
-
28
-
@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
8
8
  export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
9
9
  export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
10
10
  export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
11
- export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
11
+ export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
12
+ export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"
@@ -1,4 +1,4 @@
1
- <%= pb_rails("date_picker", props: {
2
- error: "Invalid date. Please pick a valid date.",
1
+ <%= pb_rails("date_picker", props: {
2
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
3
3
  picker_id: "date-picker-error"
4
4
  }) %>
@@ -1,11 +1,14 @@
1
1
  import React from 'react'
2
2
 
3
3
  import DatePicker from '../_date_picker'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const DatePickerError = (props) => (
6
7
  <div>
7
8
  <DatePicker
8
- error="Invalid date. Please pick a valid date."
9
+ error={<>
10
+ <Icon icon="warning" /> Invalid date. Please pick a valid date.
11
+ </>}
9
12
  pickerId="date-picker-error"
10
13
  {...props}
11
14
  />
@@ -1,3 +1,7 @@
1
+ To use the `quickpick`:
2
+ - prop `mode` must be set to `range`
3
+ - prop `selection_type` must be set to `quickpick`
4
+
1
5
  This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
2
6
 
3
7
  Like all other date pickers, the quick pick does require a `picker_id`.
@@ -1 +1 @@
1
- Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
1
+ Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.
@@ -1 +1,5 @@
1
- Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
1
+ To use the `quickpick`:
2
+ - prop `mode` must be set to `range`
3
+ - prop `selectionType` must be set to `quickpick`
4
+
5
+ Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+ import DatePicker from "../_date_picker";
3
+
4
+ const DatePickerRangePattern = (props) => {
5
+ return (
6
+ <>
7
+ <DatePicker
8
+ controlsEndId="end-date-picker"
9
+ controlsStartId="start-date-picker"
10
+ mode="range"
11
+ pickerId="quickpick-for-range"
12
+ placeholder="Select a Range"
13
+ selectionType="quickpick"
14
+ {...props}
15
+ />
16
+
17
+ <DatePicker
18
+ pickerId="start-date-picker"
19
+ placeholder="Select a Start Date"
20
+ syncStartWith="quickpick-for-range"
21
+ {...props}
22
+ />
23
+
24
+ <DatePicker
25
+ pickerId="end-date-picker"
26
+ placeholder="Select a End Date"
27
+ syncEndWith="quickpick-for-range"
28
+ {...props}
29
+ />
30
+ </>
31
+ );
32
+ };
33
+
34
+ export default DatePickerRangePattern;
@@ -0,0 +1,14 @@
1
+ You can link a Quickpick DatePicker to standard DatePickers using the following props:
2
+
3
+ **For the Quickpick DatePicker**:
4
+ `controlsStartId`: ID of the DatePicker that should receive the start date.
5
+
6
+ `controlsEndId`: ID of the DatePicker that should receive the end date.
7
+
8
+ When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
9
+
10
+ **For the Start/End DatePickers**:
11
+ `syncStartWith`: ID of the quickpick this start date is synced to.
12
+ `syncEndWith`: ID of the quickpick this end date is synced to.
13
+
14
+ When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
@@ -0,0 +1,20 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ mode: "range",
3
+ picker_id: "quick-pick-date-range",
4
+ placeholder: "Select a Date Range",
5
+ selection_type: "quickpick",
6
+ controls_end_id: "quick-pick-date-range-end",
7
+ controls_start_id: "quick-pick-date-range-start",
8
+ }) %>
9
+
10
+ <%= pb_rails("date_picker", props: {
11
+ picker_id: "quick-pick-date-range-start",
12
+ placeholder: "Select a Start Date",
13
+ sync_start_with:"quick-pick-date-range",
14
+ }) %>
15
+
16
+ <%= pb_rails("date_picker", props: {
17
+ picker_id: "quick-pick-date-range-end",
18
+ placeholder: "Select an End Date",
19
+ sync_end_with:"quick-pick-date-range",
20
+ }) %>
@@ -0,0 +1,14 @@
1
+ You can link a Quickpick DatePicker to standard DatePickers using the following props:
2
+
3
+ **For the Quickpick DatePicker**:
4
+ `controls_start_id`: ID of the DatePicker that should receive the start date.
5
+
6
+ `controls_end_id`: ID of the DatePicker that should receive the end date.
7
+
8
+ When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
9
+
10
+ **For the Start/End DatePickers**:
11
+ `sync_start_with`: ID of the quickpick this start date is synced to.
12
+ `sync_end_with`: ID of the quickpick this end date is synced to.
13
+
14
+ When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
@@ -15,6 +15,7 @@ examples:
15
15
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
16
16
  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
17
17
  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
18
+ - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
18
19
  - date_picker_format: Format
19
20
  - date_picker_disabled: Disabled Dates
20
21
  - date_picker_min_max: Min Max
@@ -47,6 +48,7 @@ examples:
47
48
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
48
49
  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
49
50
  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
51
+ - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
50
52
  - date_picker_format: Format
51
53
  - date_picker_disabled: Disabled Dates
52
54
  - date_picker_min_max: Min Max
@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
26
26
  export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
27
27
  export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
28
28
  export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
29
+ export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
@@ -0,0 +1,64 @@
1
+ <% data_shadow = [
2
+ { id: "51", text: "Task 1" },
3
+ { id: "52", text: "Task 2" },
4
+ { id: "53", text: "Task 3" }
5
+ ] %>
6
+
7
+ <% data_outline = [
8
+ { id: "61", text: "Task 1" },
9
+ { id: "62", text: "Task 2" },
10
+ { id: "63", text: "Task 3" }
11
+ ] %>
12
+
13
+ <% data_line = [
14
+ { id: "71", text: "Task 1" },
15
+ { id: "72", text: "Task 2" },
16
+ { id: "73", text: "Task 3" }
17
+ ] %>
18
+
19
+ <%= pb_rails("flex", props: { justify: "between" }) do %>
20
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
21
+ <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
22
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
23
+ <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
24
+ <% data_shadow.each do |item| %>
25
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
26
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
27
+ <%= pb_rails("body", props: { text: item[:text] }) %>
28
+ <% end %>
29
+ <% end %>
30
+ <% end %>
31
+ <% end %>
32
+ <% end %>
33
+ <% end %>
34
+
35
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
36
+ <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
37
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
38
+ <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
39
+ <% data_outline.each do |item| %>
40
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
41
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
42
+ <%= pb_rails("body", props: { text: item[:text] }) %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
47
+ <% end %>
48
+ <% end %>
49
+
50
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
51
+ <%= pb_rails("draggable", props: { drop_zone_type: "line", initial_items: data_line }) do %>
52
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Line", text_align: "center" }) %>
53
+ <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical", html_options: { style: { width: "200px" } } }) do %>
54
+ <% data_line.each do |item| %>
55
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl", drop_zone_line_color: "primary" }) do %>
56
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
57
+ <%= pb_rails("body", props: { text: item[:text] }) %>
58
+ <% end %>
59
+ <% end %>
60
+ <% end %>
61
+ <% end %>
62
+ <% end %>
63
+ <% end %>
64
+ <% end %>
@@ -0,0 +1,55 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "141",
4
+ url: "https://unsplash.it/500/400/?image=633",
5
+ },
6
+ {
7
+ id: "142",
8
+ url: "https://unsplash.it/500/400/?image=634",
9
+ },
10
+ {
11
+ id: "143",
12
+ url: "https://unsplash.it/500/400/?image=637",
13
+ },
14
+ ] %>
15
+
16
+ <% next_init_items = [
17
+ {
18
+ id: "151",
19
+ url: "https://unsplash.it/500/400/?image=633",
20
+ },
21
+ {
22
+ id: "152",
23
+ url: "https://unsplash.it/500/400/?image=634",
24
+ },
25
+ {
26
+ id: "153",
27
+ url: "https://unsplash.it/500/400/?image=637",
28
+ },
29
+ ] %>
30
+
31
+ <%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
32
+ <%= pb_rails("draggable/draggable_container") do %>
33
+ <%= pb_rails("flex", props: { gap: "sm" }) do %>
34
+ <% initial_items.each do |item| %>
35
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
36
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
42
+
43
+ <br/>
44
+
45
+ <%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
46
+ <%= pb_rails("draggable/draggable_container") do %>
47
+ <%= pb_rails("flex", props: { gap: "sm" }) do %>
48
+ <% initial_items.each do |item| %>
49
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
50
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
51
+ <% end %>
52
+ <% end %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
@@ -0,0 +1 @@
1
+ The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
@@ -0,0 +1,55 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "211",
4
+ url: "https://unsplash.it/500/400/?image=633",
5
+ },
6
+ {
7
+ id: "212",
8
+ url: "https://unsplash.it/500/400/?image=634",
9
+ },
10
+ {
11
+ id: "213",
12
+ url: "https://unsplash.it/500/400/?image=637",
13
+ },
14
+ ] %>
15
+
16
+ <% next_init_items = [
17
+ {
18
+ id: "2111",
19
+ url: "https://unsplash.it/500/400/?image=633",
20
+ },
21
+ {
22
+ id: "2112",
23
+ url: "https://unsplash.it/500/400/?image=634",
24
+ },
25
+ {
26
+ id: "2113",
27
+ url: "https://unsplash.it/500/400/?image=637",
28
+ },
29
+ ] %>
30
+
31
+ <%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
32
+ <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
33
+ <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
34
+ <% initial_items.each do |item| %>
35
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
36
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
42
+
43
+ <br/>
44
+
45
+ <%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
46
+ <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
47
+ <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
48
+ <% initial_items.each do |item| %>
49
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
50
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
51
+ <% end %>
52
+ <% end %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
@@ -0,0 +1,5 @@
1
+ When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
2
+
3
+ The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
4
+
5
+ Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
@@ -0,0 +1,5 @@
1
+ The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
2
+
3
+ By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
4
+
5
+ When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).
@@ -0,0 +1,59 @@
1
+ import React, { useState } from "react";
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import Image from '../../pb_image/_image'
5
+ import Draggable from '../../pb_draggable/_draggable'
6
+ import { DraggableProvider } from '../../pb_draggable/context'
7
+
8
+ const data = [
9
+ {
10
+ id: "100",
11
+ url: "https://unsplash.it/500/400/?image=638",
12
+ },
13
+ {
14
+ id: "200",
15
+ url: "https://unsplash.it/500/400/?image=639",
16
+ },
17
+ {
18
+ id: "300",
19
+ url: "https://unsplash.it/500/400/?image=640",
20
+ },
21
+ ];
22
+
23
+ const DraggableDefault = (props) => {
24
+ const [initialState, setInitialState] = useState(data);
25
+
26
+ return (
27
+ <>
28
+ <DraggableProvider initialItems={data}
29
+ onReorder={(items) => setInitialState(items)}
30
+ >
31
+ <Draggable.Container {...props}>
32
+ <Flex>
33
+ {initialState.map(({ id, url }) => (
34
+ <Draggable.Item dragId={id}
35
+ key={id}
36
+ onDrag={() => console.log(`${id} drag!`)}
37
+ onDragEnd={() => console.log(`${id} drag end!`)}
38
+ onDragEnter={() => console.log(`${id} drag enter!`)}
39
+ onDragLeave={() => console.log(`${id} drag leave!`)}
40
+ onDragOver={() => console.log(`${id} drag over!`)}
41
+ onDragStart={() => console.log(`${id} drag start!`)}
42
+ onDrop={() => console.log(`${id} drop!`)}
43
+ >
44
+ <Image alt={id}
45
+ margin="xs"
46
+ size="md"
47
+ url={url}
48
+ />
49
+ </Draggable.Item>
50
+ ))}
51
+ </Flex>
52
+ </Draggable.Container>
53
+ </DraggableProvider>
54
+ </>
55
+
56
+ );
57
+ };
58
+
59
+ export default DraggableDefault;
@@ -0,0 +1 @@
1
+ You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.
@@ -9,6 +9,7 @@ examples:
9
9
  - draggable_drop_zones: Draggable Drop Zones
10
10
  - draggable_drop_zones_colors: Draggable Drop Zones Colors
11
11
  - draggable_drop_zones_line: Draggable Drop Zones Line
12
+ - draggable_event_listeners: Draggable Event Listeners
12
13
 
13
14
  rails:
14
15
  - draggable_default: Default
@@ -17,5 +18,7 @@ examples:
17
18
  - draggable_with_cards: Draggable with Cards
18
19
  - draggable_with_table: Draggable with Table
19
20
  - draggable_multiple_containers: Dragging Across Multiple Containers
21
+ - draggable_drop_zones: Draggable Drop Zones
22
+ - draggable_drop_zones_colors: Draggable Drop Zones Colors
23
+ - draggable_drop_zones_line: Draggable Drop Zones Line
20
24
  - draggable_event_listeners: Draggable Event Listeners
21
-
@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
6
6
  export { default as DraggableWithTable } from './_draggable_with_table.jsx'
7
7
  export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
8
8
  export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
9
- export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
9
+ export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
10
+ export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
@@ -1,4 +1,4 @@
1
- <%
1
+ <%
2
2
  options = [
3
3
  { label: 'United States', value: 'United States', id: 'us' },
4
4
  { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,4 +6,7 @@
6
6
  ]
7
7
  %>
8
8
 
9
- <%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
9
+ <%= pb_rails("dropdown", props: {
10
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
11
+ options: options
12
+ }) %>
@@ -1,9 +1,12 @@
1
1
  import React, { useState } from 'react'
2
2
  import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const DropdownError = (props) => {
5
6
  const [selectedOption, setSelectedOption] = useState()
6
- const error = selectedOption?.value ? null : "Please make a valid selection"
7
+ const error = selectedOption?.value ? null : (<>
8
+ <Icon icon="warning" /> Please make a valid selection
9
+ </>)
7
10
  const options = [
8
11
  {
9
12
  label: "United States",
@@ -0,0 +1,28 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "United Kingdom",
12
+ value: "United Kingdom",
13
+ areaCode: "+44",
14
+ icon: "🇬🇧",
15
+ id: "gb"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>