playbook_ui_docs 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572 → 14.15.0.pre.alpha.play1907passglobalpropstotooltiprails6706

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 (354) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +3 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +8 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +102 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +2 -2
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +3 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  29. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +2 -2
  36. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +6 -2
  38. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +2 -2
  41. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +2 -2
  42. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
  44. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +3 -1
  46. data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +2 -1
  51. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +2 -1
  53. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +1 -1
  60. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +1 -1
  62. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +3 -1
  63. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +2 -1
  64. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +1 -1
  65. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +1 -1
  67. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  68. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +1 -1
  69. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +2 -1
  70. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +4 -1
  71. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  72. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +1 -1
  73. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +1 -1
  74. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +7 -1
  75. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +7 -1
  76. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  77. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -1
  78. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx +1 -1
  79. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +1 -1
  80. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +4 -1
  81. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +1 -1
  83. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +3 -1
  84. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +5 -1
  85. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +1 -1
  86. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +3 -1
  87. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -1
  88. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +4 -1
  89. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +4 -1
  90. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +2 -1
  91. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +3 -1
  92. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
  93. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +3 -1
  94. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
  95. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +3 -1
  96. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  97. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +1 -1
  98. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -1
  99. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +1 -1
  100. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +1 -1
  101. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +1 -1
  102. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +1 -1
  103. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +7 -8
  104. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +3 -1
  105. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -9
  106. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -9
  107. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +2 -1
  108. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -1
  109. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +3 -1
  110. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx +2 -1
  111. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +3 -1
  112. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +3 -1
  113. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -1
  114. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +5 -1
  115. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +11 -12
  116. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +9 -10
  117. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +4 -1
  118. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +3 -1
  119. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +6 -1
  120. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +4 -1
  121. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +4 -1
  122. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +2 -1
  123. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +4 -1
  124. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +6 -1
  125. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +4 -1
  126. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +4 -1
  127. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +1 -1
  128. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +3 -1
  129. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +1 -1
  130. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +1 -1
  131. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -1
  132. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +1 -1
  133. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +1 -1
  134. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +1 -1
  135. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +5 -1
  136. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +7 -1
  137. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +7 -1
  138. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +7 -1
  139. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -1
  140. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +7 -1
  141. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +5 -1
  142. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +8 -1
  143. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -1
  144. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +4 -5
  145. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +3 -1
  146. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +3 -5
  147. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +3 -5
  148. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +5 -6
  149. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -1
  150. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +5 -1
  151. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +5 -1
  152. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +6 -1
  153. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +5 -1
  154. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +5 -1
  155. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +6 -1
  156. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +5 -1
  157. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +3 -1
  158. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +3 -1
  159. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +2 -1
  160. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +3 -1
  161. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +3 -1
  162. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +3 -1
  163. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx +3 -1
  164. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +3 -1
  165. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +3 -1
  166. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +4 -1
  167. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  168. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  169. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +3 -1
  170. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +5 -1
  171. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +1 -1
  172. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +1 -1
  173. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +9 -10
  174. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +1 -1
  175. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +1 -1
  176. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +1 -1
  177. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +1 -1
  178. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +3 -1
  179. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +1 -1
  180. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +4 -1
  181. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +1 -1
  182. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +1 -1
  183. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +1 -1
  184. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +1 -1
  185. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
  186. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +1 -1
  187. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +3 -1
  188. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +1 -1
  189. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +1 -1
  190. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +1 -1
  191. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +1 -1
  192. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +1 -1
  193. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +1 -1
  194. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +1 -1
  195. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +3 -1
  196. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +1 -1
  197. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +1 -1
  198. data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +1 -1
  199. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +2 -1
  200. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +6 -1
  201. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +4 -1
  202. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +2 -1
  203. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +2 -1
  204. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +1 -1
  205. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +1 -1
  206. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +2 -1
  207. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +1 -1
  208. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +1 -1
  209. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +1 -1
  210. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +1 -1
  211. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +1 -1
  212. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +1 -1
  213. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +2 -1
  214. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +5 -1
  215. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +2 -1
  216. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +1 -1
  217. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -1
  218. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx +1 -1
  219. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx +1 -1
  220. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx +2 -1
  221. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +2 -1
  222. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +4 -1
  223. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx +2 -1
  224. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx +2 -1
  225. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +2 -1
  226. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +2 -1
  227. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +4 -4
  228. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +5 -6
  229. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +4 -6
  230. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +4 -1
  231. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +4 -6
  232. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +2 -1
  233. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +3 -1
  234. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +4 -1
  235. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +2 -1
  236. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +6 -1
  237. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +5 -1
  238. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +3 -1
  239. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +3 -1
  240. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
  241. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -1
  242. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +3 -1
  243. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
  244. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
  245. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +1 -1
  246. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  247. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +1 -1
  248. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +4 -1
  249. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
  250. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +6 -7
  251. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +4 -5
  252. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +5 -6
  253. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +7 -8
  254. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +5 -6
  255. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +4 -5
  256. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx +1 -1
  257. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx +1 -1
  258. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +3 -1
  259. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx +1 -1
  260. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx +1 -1
  261. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +1 -1
  262. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx +1 -1
  263. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +3 -1
  264. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -1
  265. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +1 -1
  266. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +3 -1
  267. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +1 -1
  268. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +1 -1
  269. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +1 -1
  270. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +1 -1
  271. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +1 -1
  272. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +3 -5
  273. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +1 -1
  274. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +1 -1
  275. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +2 -1
  276. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +1 -1
  277. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +1 -1
  278. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +3 -1
  279. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +4 -1
  280. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +1 -1
  281. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +1 -1
  282. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  283. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +2 -1
  284. data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +2 -1
  285. data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +2 -1
  286. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +2 -1
  287. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +4 -1
  288. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +1 -1
  289. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +1 -1
  290. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +2 -1
  291. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +2 -1
  292. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +1 -2
  293. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +8 -1
  294. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -1
  295. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +1 -2
  296. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +5 -1
  297. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
  298. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +1 -1
  299. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +1 -1
  300. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +2 -1
  301. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +4 -1
  302. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +4 -1
  303. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +7 -1
  304. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +4 -1
  305. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +5 -1
  306. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +5 -1
  307. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -1
  308. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +1 -1
  309. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +3 -1
  310. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +1 -1
  311. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +3 -1
  312. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +1 -1
  313. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +1 -1
  314. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +3 -1
  315. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +3 -1
  316. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +4 -1
  317. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +3 -1
  318. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
  319. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +4 -1
  320. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +3 -1
  321. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +5 -1
  322. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
  323. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
  324. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +1 -1
  325. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +1 -1
  326. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +1 -3
  327. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
  328. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
  329. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  330. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +6 -8
  331. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +1 -1
  332. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +3 -5
  333. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +4 -6
  334. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +4 -6
  335. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +1 -1
  336. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  337. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  338. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +6 -1
  339. data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +1 -1
  340. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +1 -1
  341. data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +1 -1
  342. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +1 -1
  343. data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +1 -1
  344. data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +1 -1
  345. data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +1 -1
  346. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +2 -1
  347. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +2 -1
  348. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +2 -1
  349. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +2 -1
  350. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +2 -1
  351. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +2 -1
  352. data/dist/playbook-doc.js +1 -1
  353. metadata +12 -3
  354. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -1,6 +1,5 @@
1
1
  import React from 'react'
2
- import { SkeletonLoading } from "playbook-ui"
3
-
2
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
3
 
5
4
  const SkeletonLoadingDefault = (props) => (
6
5
  <div>
@@ -1,5 +1,12 @@
1
1
  import React, { useState } from 'react';
2
- import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
2
+
3
+ import Button from '../../pb_button/_button'
4
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
5
+ import Card from '../../pb_card/_card'
6
+ import Filter from '../../pb_filter/_filter'
7
+ import Flex from '../../pb_flex/_flex'
8
+ import Select from '../../pb_select/_select'
9
+ import TextInput from '../../pb_text_input/_text_input'
3
10
 
4
11
  const SortingChangeCallback = (sortOptions) => {
5
12
  alert(JSON.stringify(sortOptions[0]))
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
- import { Card, SkeletonLoading } from "playbook-ui"
3
2
 
3
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
+ import Card from '../../pb_card/_card'
4
5
 
5
6
  const SkeletonLoadingHeightWidth = (props) => (
6
7
  <div>
@@ -1,6 +1,5 @@
1
1
  import React from 'react'
2
- import { SkeletonLoading } from "playbook-ui"
3
-
2
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
3
 
5
4
  const SkeletonLoadingLayout = (props) => (
6
5
  <div>
@@ -1,5 +1,9 @@
1
1
  import React, { useState } from 'react';
2
- import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
2
+
3
+ import Button from '../../pb_button/_button'
4
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
5
+ import Flex from '../../pb_flex/_flex'
6
+ import User from '../../pb_user/_user'
3
7
 
4
8
  const SkeletonLoadingUser = (props) => {
5
9
  const [isLoading, setIsLoading] = useState(true)
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { StatChange } from 'playbook-ui'
2
+ import StatChange from '../../pb_stat_change/_stat_change'
3
3
 
4
4
  const StatChangeDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { StatChange } from 'playbook-ui'
2
+ import StatChange from '../../pb_stat_change/_stat_change'
3
3
 
4
4
  const StatChangeUnit = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { StatChange } from 'playbook-ui'
2
+ import StatChange from '../../pb_stat_change/_stat_change'
3
3
 
4
4
  const StatChangeUnitTwo = (props) => {
5
5
  return (
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Table, Icon } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const TableWithClickableRows = (props) => {
5
6
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Table, Icon, Body, Card } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Icon from '../../pb_icon/_icon'
4
+ import Card from '../../pb_card/_card'
5
+ import Body from '../../pb_body/_body'
3
6
 
4
7
  const TableWithCollapsible = (props) => {
5
8
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Table, Card, Icon, Body } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Icon from '../../pb_icon/_icon'
4
+ import Card from '../../pb_card/_card'
5
+ import Body from '../../pb_body/_body'
3
6
 
4
7
  const TableWithCollapsibleWithCustomClick = (props) => {
5
8
 
@@ -1,5 +1,11 @@
1
1
  import React from 'react'
2
- import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
2
+
3
+ import Table from '../../pb_table/_table'
4
+ import Icon from '../../pb_icon/_icon'
5
+ import Card from '../../pb_card/_card'
6
+ import Body from '../../pb_body/_body'
7
+ import Image from '../../pb_image/_image'
8
+ import Flex from '../../pb_flex/_flex'
3
9
 
4
10
  const TableWithCollapsibleWithCustomContent = (props) => {
5
11
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Table, Background, Icon } from 'playbook-ui'
2
+
3
+ import Table from '../../pb_table/_table'
4
+ import Icon from '../../pb_icon/_icon'
5
+ import Background from '../../pb_background/_background'
3
6
 
4
7
  const TableWithCollapsibleWithNestedRows = (props) => {
5
8
 
@@ -1,5 +1,9 @@
1
1
  import React from 'react'
2
- import {Pill, Background, Table, Icon} from "playbook-ui"
2
+
3
+ import Pill from '../../pb_pill/_pill'
4
+ import Background from '../../pb_background/_background'
5
+ import Table from '../../pb_table/_table'
6
+ import Icon from '../../pb_icon/_icon'
3
7
 
4
8
  const TableWithCollapsibleWithNestedTable = (props) => {
5
9
 
@@ -1,5 +1,9 @@
1
1
  import React, { useState } from 'react'
2
- import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Image from '../../pb_image/_image'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import Checkbox from '../../pb_checkbox/_checkbox'
6
+ import Button from '../../pb_button/_button'
3
7
 
4
8
  const TableWithSelectableRows = (props) => {
5
9
  const [checkboxes, setCheckboxes] = useState([
@@ -1,5 +1,5 @@
1
1
  import React, {useState} from 'react'
2
- import { Textarea } from 'playbook-ui'
2
+ import Textarea from '../../pb_textarea/_textarea'
3
3
 
4
4
  const TextareaError = (props) => {
5
5
  const [value, setValue] = useState('default value text')
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { TimeRangeInline } from 'playbook-ui'
2
+ import TimeRangeInline from '../../pb_time_range_inline/_time_range_inline'
3
3
 
4
4
  const TimeRangeInlineDefault = (props) => (
5
5
  <div>
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { Caption, Timestamp, Title } from 'playbook-ui'
2
+ import Caption from '../../pb_caption/_caption'
3
+ import Timestamp from '../../pb_timestamp/_timestamp'
4
+ import Title from '../../pb_title/_title'
3
5
 
4
6
  const TimestampUnstyled = (props) => {
5
7
  return (
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from 'react'
2
- import { Toggle } from 'playbook-ui'
2
+ import Toggle from '../../pb_toggle/_toggle'
3
3
 
4
4
  const ToggleCustom = () => {
5
5
  const [choice, setChoice] = useState(false)
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from 'react'
2
- import { Caption, Title, Toggle } from 'playbook-ui'
2
+ import Caption from '../../pb_caption/_caption'
3
+ import Title from '../../pb_title/_title'
4
+ import Toggle from '../../pb_toggle/_toggle'
3
5
 
4
6
  const ToggleCustomRadio = () => {
5
7
  const [choice, setChoice] = useState('walk')
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Toggle } from 'playbook-ui'
2
+ import Toggle from '../../pb_toggle/_toggle'
3
3
 
4
4
  const ToggleDefault = () => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Toggle } from 'playbook-ui'
2
+ import Toggle from '../../pb_toggle/_toggle'
3
3
 
4
4
  const ToggleDisabled= () => {
5
5
  return (
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from 'react'
2
- import { Caption, Title, Toggle } from 'playbook-ui'
2
+ import Caption from '../../pb_caption/_caption'
3
+ import Title from '../../pb_title/_title'
4
+ import Toggle from '../../pb_toggle/_toggle'
3
5
 
4
6
  const ToggleName = () => {
5
7
  const [choice, setChoice] = useState(false)
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { Tooltip, Flex, FlexItem } from 'playbook-ui';
2
+ import Tooltip from '../../pb_tooltip/_tooltip'
3
+ import Flex from '../../pb_flex/_flex'
4
+ import FlexItem from '../../pb_flex/_flex_item'
3
5
 
4
6
  const TooltipDefaultReact = (props) => {
5
7
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
2
+ import Button from '../../pb_button/_button'
3
+ import Tooltip from '../../pb_tooltip/_tooltip'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
3
6
 
4
7
  const TooltipDelay = (props) => {
5
8
 
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { Tooltip, Button, Flex } from 'playbook-ui'
2
+ import Button from '../../pb_button/_button'
3
+ import Tooltip from '../../pb_tooltip/_tooltip'
4
+ import Flex from '../../pb_flex/_flex'
3
5
 
4
6
  const TooltipIcon = (props) => {
5
7
  return (
@@ -0,0 +1,22 @@
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,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
2
+ import Button from '../../pb_button/_button'
3
+ import Tooltip from '../../pb_tooltip/_tooltip'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
3
6
 
4
7
  const TooltipInteraction = (props) => {
5
8
 
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
2
+ import Tooltip from '../../pb_tooltip/_tooltip'
3
+ import Flex from '../../pb_flex/_flex'
4
+ import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
3
5
 
4
6
  const TooltipMargin = (props) => {
5
7
  return (
@@ -1,5 +1,9 @@
1
1
  import React, { useState } from 'react'
2
- import { Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
2
+ import Button from '../../pb_button/_button'
3
+ import Body from '../../pb_body/_body'
4
+ import Tooltip from '../../pb_tooltip/_tooltip'
5
+ import Flex from '../../pb_flex/_flex'
6
+ import FlexItem from '../../pb_flex/_flex_item'
3
7
 
4
8
  const TooltipShowTooltipReact = (props) => {
5
9
  const [showTooltip, setShowTooltip] = useState(true);
@@ -0,0 +1,22 @@
1
+ <%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
2
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
3
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
4
+ I'm 150px high and 100px wide!
5
+ <% end %>
6
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
7
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
8
+ I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
9
+ <% end %>
10
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
11
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
12
+ I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
13
+ <% end %>
14
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
15
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
16
+ I have a min_width of 300px!
17
+ <% end %>
18
+ <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
19
+ <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px", html_options: { tab_index: 5, style: { color: "blue" }}, } do %>
20
+ I have a min_height of 300px!
21
+ <% end %>
22
+ <% end %>
@@ -4,6 +4,8 @@ examples:
4
4
  - tooltip_default: Default
5
5
  - tooltip_interaction: Content Interaction
6
6
  - tooltip_selectors: Using Common Selectors
7
+ - tooltip_sizing: Tooltip Sizing
8
+ - tooltip_icon_rails: Tooltip with Icon
7
9
  - tooltip_with_icon_circle: Icon Circle Tooltip
8
10
  - tooltip_delay_rails: Delay
9
11
  - tooltip_show_tooltip: Show Tooltip
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
3
 
4
4
  /**
5
5
  *
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
3
 
4
4
  const options = [
5
5
  { label: 'Jardim', value: 'Portuguese' },
@@ -2,9 +2,7 @@
2
2
 
3
3
  import React, { useState } from 'react'
4
4
 
5
- import {
6
- Button,
7
- } from 'playbook-ui'
5
+ import Button from '../../pb_button/_button'
8
6
 
9
7
  import Typeahead from '../_typeahead'
10
8
 
@@ -0,0 +1,66 @@
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
@@ -0,0 +1 @@
1
+ You can pass `react-hook-form` props to the Typeahead kit.
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
3
 
4
4
  const names = [
5
5
  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -4,14 +4,12 @@
4
4
  import React, { useState } from 'react'
5
5
  import { components } from 'react-select'
6
6
 
7
- import {
8
- Avatar,
9
- Body,
10
- Flex,
11
- FlexItem,
12
- Title,
13
- Typeahead,
14
- } from 'playbook-ui'
7
+ import Avatar from '../../pb_avatar/_avatar'
8
+ import Body from '../../pb_body/_body'
9
+ import Flex from '../../pb_flex/_flex'
10
+ import FlexItem from '../../pb_flex/_flex_item'
11
+ import Title from '../../pb_title/_title'
12
+ import Typeahead from '../../pb_typeahead/_typeahead'
15
13
 
16
14
  const USERS = [
17
15
  {
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
3
 
4
4
  const options = [
5
5
  { label: 'Windows', value: '#FFA500' },
@@ -1,10 +1,8 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
- import {
4
- Caption,
5
- Typeahead,
6
- User,
7
- } from 'playbook-ui'
3
+ import Caption from '../../pb_caption/_caption'
4
+ import Typeahead from '../../pb_typeahead/_typeahead'
5
+ import User from '../../pb_user/_user'
8
6
 
9
7
  /**
10
8
  *
@@ -1,10 +1,8 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
- import {
4
- Caption,
5
- Typeahead,
6
- User,
7
- } from 'playbook-ui'
3
+ import Caption from '../../pb_caption/_caption'
4
+ import Typeahead from '../../pb_typeahead/_typeahead'
5
+ import User from '../../pb_user/_user'
8
6
 
9
7
  /**
10
8
  *
@@ -49,7 +47,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
49
47
  * @summary - for doc example purposes only
50
48
  */
51
49
  const handleOnMultiValueClick = (value) => {
52
- alert(`You removed the user: "${value.label}"`)
50
+ alert(`You added the user: "${value.label}"`)
53
51
  }
54
52
 
55
53
  return (
@@ -1,10 +1,8 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
- import {
4
- Caption,
5
- Typeahead,
6
- User,
7
- } from 'playbook-ui'
3
+ import Caption from '../../pb_caption/_caption'
4
+ import Typeahead from '../../pb_typeahead/_typeahead'
5
+ import User from '../../pb_user/_user'
8
6
 
9
7
  /**
10
8
  *
@@ -56,7 +54,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
56
54
  * @summary - for doc example purposes only
57
55
  */
58
56
  const handleOnMultiValueClick = (value) => {
59
- alert(`You removed the user: "${value.label}"`)
57
+ alert(`You added the user: "${value.label}"`)
60
58
  }
61
59
 
62
60
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
3
 
4
4
  const options = [
5
5
  { label: 'Windows', value: '#FFA500' },
@@ -17,6 +17,7 @@ examples:
17
17
 
18
18
  react:
19
19
  - typeahead_default: Default
20
+ - typeahead_react_hook: React Hook
20
21
  - typeahead_with_highlight: With Highlight
21
22
  - typeahead_with_pills: With Pills
22
23
  - typeahead_with_pills_async: With Pills (Async Data)
@@ -13,3 +13,4 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
13
13
  export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
14
14
  export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
15
15
  export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
16
+ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
@@ -1,5 +1,10 @@
1
1
  import React from "react"
2
- import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
2
+
3
+ import Caption from '../../pb_caption/_caption'
4
+ import Contact from '../../pb_contact/_contact'
5
+ import Flex from '../../pb_flex/_flex'
6
+ import Icon from '../../pb_icon/_icon'
7
+ import User from '../../pb_user/_user'
3
8
 
4
9
  const MentorSubtitle = (
5
10
  <Flex>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { User } from 'playbook-ui'
2
+ import User from '../../pb_user/_user'
3
3
 
4
4
  const UserDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { User } from 'playbook-ui'
2
+ import User from '../../pb_user/_user'
3
3
 
4
4
  const UserLightWeight = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { User } from 'playbook-ui'
2
+ import User from '../../pb_user/_user'
3
3
 
4
4
  const UserDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from "react"
2
- import { User } from "playbook-ui"
2
+ import User from '../../pb_user/_user'
3
3
 
4
4
  const UserSubtitle = (props) => {
5
5
  return (