playbook_ui_docs 14.15.0.pre.rc.3 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

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 (436) 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_infinite_scroll.jsx +50 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +102 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +2 -2
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +3 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  31. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +1 -1
  36. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +2 -2
  38. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +6 -2
  40. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +1 -1
  42. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +2 -2
  43. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +2 -2
  44. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
  46. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +3 -1
  48. data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +2 -1
  53. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +2 -1
  55. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +1 -1
  60. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +1 -1
  62. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +1 -1
  63. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +3 -1
  65. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +2 -1
  66. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +1 -1
  67. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +1 -1
  68. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +1 -1
  69. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  70. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +1 -1
  71. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +2 -1
  72. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +4 -1
  73. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  74. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +1 -1
  75. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +1 -1
  76. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +7 -1
  77. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +7 -1
  78. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  79. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -1
  80. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx +1 -1
  81. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +4 -1
  83. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +1 -1
  84. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +1 -1
  85. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +3 -1
  86. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +5 -1
  87. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +1 -1
  88. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +3 -1
  89. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -1
  90. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +4 -1
  91. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +4 -1
  92. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +2 -1
  93. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +3 -1
  94. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
  95. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +3 -1
  96. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
  97. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +3 -1
  98. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  99. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +1 -1
  100. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -1
  101. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +1 -1
  102. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +1 -1
  103. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +1 -1
  104. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +1 -1
  105. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +7 -8
  106. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +3 -1
  107. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -9
  108. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -9
  109. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +2 -1
  110. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -1
  111. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +3 -1
  112. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx +2 -1
  113. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +3 -1
  114. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +3 -1
  115. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -1
  116. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +6 -1
  117. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +184 -0
  118. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +5 -0
  119. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +97 -0
  120. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -0
  121. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +11 -12
  122. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +9 -10
  123. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +4 -1
  124. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +3 -1
  125. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +6 -1
  126. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +4 -1
  127. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +7 -4
  128. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +3 -0
  129. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +21 -37
  130. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +4 -1
  131. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +12 -7
  132. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +5 -1
  133. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +4 -1
  134. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +2 -0
  135. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +1 -1
  136. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +3 -1
  137. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +1 -1
  138. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +1 -1
  139. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -1
  140. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +1 -1
  141. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +1 -1
  142. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +1 -1
  143. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +5 -1
  144. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +7 -1
  145. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +7 -1
  146. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +7 -1
  147. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -1
  148. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +7 -1
  149. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +5 -1
  150. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +8 -1
  151. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -1
  152. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +38 -0
  153. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +17 -0
  154. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +21 -0
  155. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +35 -0
  156. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg +21 -0
  157. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx +118 -0
  158. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +8 -0
  159. data/app/pb_kits/playbook/pb_empty_state/docs/index.js +4 -0
  160. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +4 -5
  161. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +3 -1
  162. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +3 -5
  163. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +3 -5
  164. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +5 -6
  165. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -1
  166. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +5 -1
  167. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +5 -1
  168. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +6 -1
  169. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +5 -1
  170. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +5 -1
  171. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +6 -1
  172. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +5 -1
  173. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +3 -1
  174. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +3 -1
  175. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +2 -1
  176. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +3 -1
  177. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +3 -1
  178. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +3 -1
  179. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx +3 -1
  180. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +3 -1
  181. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +3 -1
  182. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +4 -1
  183. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +68 -1
  184. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +69 -2
  185. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +3 -1
  186. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +5 -1
  187. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb +40 -0
  188. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +50 -0
  189. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md +3 -0
  190. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  191. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  192. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +1 -1
  193. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +1 -1
  194. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +9 -10
  195. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +1 -1
  196. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +1 -1
  197. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +1 -1
  198. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +1 -1
  199. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +3 -1
  200. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +1 -1
  201. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +4 -1
  202. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +1 -1
  203. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +1 -1
  204. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +1 -1
  205. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +1 -1
  206. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +10 -4
  207. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +49 -24
  208. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
  209. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx +13 -0
  210. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +1 -1
  211. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +3 -1
  212. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -0
  213. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +1 -0
  214. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +1 -1
  215. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +1 -1
  216. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +1 -1
  217. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +1 -1
  218. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +1 -1
  219. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +1 -1
  220. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +1 -1
  221. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +3 -1
  222. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +1 -1
  223. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +1 -1
  224. data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +1 -1
  225. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +2 -1
  226. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +6 -1
  227. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +4 -1
  228. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +2 -1
  229. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +2 -1
  230. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +1 -1
  231. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +1 -1
  232. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +2 -1
  233. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +1 -1
  234. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +1 -1
  235. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +1 -1
  236. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +1 -1
  237. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +1 -1
  238. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +1 -1
  239. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +2 -1
  240. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +5 -1
  241. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +2 -1
  242. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +1 -1
  243. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +72 -0
  244. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +91 -0
  245. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +76 -0
  246. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +94 -0
  247. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md +1 -0
  248. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +75 -0
  249. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +93 -0
  250. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md +3 -0
  251. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +75 -0
  252. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +93 -0
  253. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.md +3 -0
  254. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +74 -0
  255. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +92 -0
  256. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md +3 -0
  257. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +72 -0
  258. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +97 -0
  259. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +71 -0
  260. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +91 -0
  261. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
  262. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
  263. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +15 -1
  264. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +8 -0
  265. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx +1 -1
  266. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx +1 -1
  267. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx +2 -1
  268. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +2 -1
  269. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +4 -1
  270. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx +2 -1
  271. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx +2 -1
  272. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +2 -1
  273. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +2 -1
  274. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +4 -4
  275. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
  276. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +36 -0
  277. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
  278. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
  279. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +4 -6
  280. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +4 -1
  281. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +4 -6
  282. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +2 -0
  283. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  284. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +2 -1
  285. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +3 -1
  286. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +4 -1
  287. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +2 -1
  288. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +6 -1
  289. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +5 -1
  290. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +3 -1
  291. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +3 -1
  292. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
  293. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -1
  294. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +3 -1
  295. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
  296. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
  297. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +1 -1
  298. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  299. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +1 -1
  300. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +4 -1
  301. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
  302. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +6 -7
  303. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +4 -5
  304. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +5 -6
  305. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +7 -8
  306. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +5 -6
  307. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +4 -5
  308. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx +1 -1
  309. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx +1 -1
  310. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +3 -1
  311. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx +1 -1
  312. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx +1 -1
  313. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +1 -1
  314. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx +1 -1
  315. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +3 -1
  316. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -1
  317. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
  318. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  319. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  320. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  321. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +1 -1
  322. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +3 -1
  323. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +1 -1
  324. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +1 -1
  325. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +1 -1
  326. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +1 -1
  327. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +1 -1
  328. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +3 -5
  329. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +1 -1
  330. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +1 -1
  331. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +2 -1
  332. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +1 -1
  333. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +1 -1
  334. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +3 -1
  335. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +4 -1
  336. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +1 -1
  337. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +1 -1
  338. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  339. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +2 -1
  340. data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +2 -1
  341. data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +2 -1
  342. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +2 -1
  343. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
  344. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
  345. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  346. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  347. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +4 -1
  348. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +1 -1
  349. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +1 -1
  350. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +2 -1
  351. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +2 -1
  352. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +1 -2
  353. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +8 -1
  354. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -1
  355. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +1 -2
  356. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +5 -1
  357. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
  358. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +1 -1
  359. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +1 -1
  360. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +2 -1
  361. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +4 -1
  362. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +4 -1
  363. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +7 -1
  364. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +4 -1
  365. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +5 -1
  366. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +5 -1
  367. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -1
  368. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +1 -1
  369. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +3 -1
  370. data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
  371. data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
  372. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
  373. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
  374. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
  375. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  376. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  377. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +1 -1
  378. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +3 -1
  379. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +1 -1
  380. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +1 -1
  381. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +3 -1
  382. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +3 -1
  383. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +4 -1
  384. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +3 -1
  385. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
  386. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +4 -1
  387. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +3 -1
  388. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +5 -1
  389. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
  390. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
  391. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
  392. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -1
  393. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  394. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +1 -1
  395. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +1 -1
  396. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +1 -3
  397. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb +19 -0
  398. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx +23 -0
  399. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
  400. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
  401. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
  402. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
  403. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
  404. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
  405. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  406. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +6 -8
  407. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +1 -1
  408. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +3 -5
  409. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +4 -6
  410. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +4 -6
  411. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +1 -1
  412. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +5 -0
  413. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -0
  414. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +6 -1
  415. data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +1 -1
  416. data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb +22 -0
  417. data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +40 -0
  418. data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md +5 -0
  419. data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md +5 -0
  420. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +1 -1
  421. data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +1 -1
  422. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +1 -1
  423. data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +1 -1
  424. data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +1 -1
  425. data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +1 -1
  426. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  427. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  428. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +2 -1
  429. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +2 -1
  430. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +2 -1
  431. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +2 -1
  432. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +2 -1
  433. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +2 -1
  434. data/dist/playbook-doc.js +1 -1
  435. metadata +73 -3
  436. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -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" } do %>
20
+ I have a min_height of 300px!
21
+ <% end %>
22
+ <% end %>
@@ -0,0 +1,69 @@
1
+ import React from 'react'
2
+ import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
3
+
4
+ const TooltipSizing = (props) => {
5
+
6
+ return (
7
+ <Flex
8
+ flexDirection='row'
9
+ gap='md'
10
+ wrap
11
+ >
12
+ <FlexItem>
13
+ <Tooltip
14
+ height='150px'
15
+ placement='top'
16
+ text="I'm 150px high and 100px wide!"
17
+ width='100px'
18
+ {...props}
19
+ >
20
+ <Button text="Height and Width"/>
21
+ </Tooltip>
22
+ </FlexItem>
23
+ <FlexItem>
24
+ <Tooltip
25
+ maxHeight='100px'
26
+ placement='top'
27
+ text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
28
+ width='250px'
29
+ {...props}
30
+ >
31
+ <Button text="maxHeight"/>
32
+ </Tooltip>
33
+ </FlexItem>
34
+ <FlexItem>
35
+ <Tooltip
36
+ maxWidth='150px'
37
+ placement='top'
38
+ text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
39
+ {...props}
40
+ >
41
+ <Button text="maxWidth"/>
42
+ </Tooltip>
43
+ </FlexItem>
44
+ <FlexItem>
45
+ <Tooltip
46
+ minWidth='300px'
47
+ placement='top'
48
+ text="I have a minWidth of 300px!"
49
+ {...props}
50
+ >
51
+ <Button text="minWidth"/>
52
+ </Tooltip>
53
+ </FlexItem>
54
+ <FlexItem>
55
+ <Tooltip
56
+ maxWidth='150px'
57
+ minHeight='300px'
58
+ placement='top'
59
+ text="I have a minHeight of 300px!"
60
+ {...props}
61
+ >
62
+ <Button text="minHeight"/>
63
+ </Tooltip>
64
+ </FlexItem>
65
+ </Flex>
66
+ )
67
+ }
68
+
69
+ export default TooltipSizing
@@ -0,0 +1,3 @@
1
+ You can customize the `height` and `width` of the tooltip's popover.
2
+
3
+ When using `maxHeight`, be sure to set a `width` as well. The text needs to truncate within the `width` prop.
@@ -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
@@ -12,7 +14,7 @@ examples:
12
14
  - tooltip_default_react: Default
13
15
  - tooltip_interaction: Content Interaction
14
16
  - tooltip_margin: Margin
17
+ - tooltip_sizing: Tooltip Sizing
15
18
  - tooltip_icon: Tooltip with Icon
16
19
  - tooltip_delay: Delay
17
20
  - tooltip_show_tooltip_react: Show Tooltip
18
-
@@ -1,6 +1,7 @@
1
1
  export { default as TooltipDefaultReact } from './_tooltip_default_react'
2
2
  export { default as TooltipInteraction } from './_tooltip_interaction'
3
3
  export { default as TooltipMargin } from './_tooltip_margin'
4
+ export { default as TooltipSizing } from './_tooltip_sizing'
4
5
  export { default as TooltipIcon } from './_tooltip_icon'
5
6
  export { default as TooltipDelay } from './_tooltip_delay'
6
7
  export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'
@@ -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,19 @@
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-disabled",
12
+ disabled: true,
13
+ placeholder: "All Colors",
14
+ options: options,
15
+ label: "Colors",
16
+ name: :foo,
17
+ is_multi: false
18
+ })
19
+ %>
@@ -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 TypeaheadDisabled = (props) => {
13
+ return (
14
+ <Typeahead
15
+ disabled
16
+ label="Colors"
17
+ options={options}
18
+ {...props}
19
+ />
20
+ )
21
+ }
22
+
23
+ export default TypeaheadDisabled
@@ -0,0 +1,45 @@
1
+ <%= pb_rails("select", props: {
2
+ id:"color_context_2",
3
+ label: "Choose a Color",
4
+ name: "color_name",
5
+ options: [
6
+ { value: "red", value_text: "Red" },
7
+ { value: "blue", value_text: "Blue" },
8
+ { value: "green", value_text: "Green" }
9
+ ],
10
+ }) %>
11
+
12
+ <%= pb_rails("typeahead", props: {
13
+ label: "Pick a Shade",
14
+ is_multi: false,
15
+ search_context_selector: "color_context_2",
16
+ options_by_context: {
17
+ "red": [
18
+ { label: "Scarlet", value: "scarlet" },
19
+ { label: "Mahogany", value: "mahogany" },
20
+ { label: "Crimson", value: "crimson" }
21
+ ],
22
+ "blue": [
23
+ { label: "Sky Blue", value: "sky" },
24
+ { label: "Cerulean", value: "cerulean" },
25
+ { label: "Navy", value: "navy" }
26
+ ],
27
+ "green": [
28
+ { label: "Emerald", value: "emerald" },
29
+ { label: "Mint", value: "mint" },
30
+ { label: "Olive", value: "olive" }
31
+ ]
32
+ },
33
+ id: "typeahead-dynamic-options",
34
+ }) %>
35
+
36
+
37
+ <%= javascript_tag defer: "defer" do %>
38
+ document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
39
+ console.log('Single Option selected')
40
+ console.dir(event.detail)
41
+ })
42
+ document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
43
+ console.log('All options cleared')
44
+ })
45
+ <% end %>
@@ -0,0 +1,5 @@
1
+ You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
2
+ - The typeahead must have a unique `id`
3
+ - Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
4
+ - Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
5
+ - Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.
@@ -0,0 +1,33 @@
1
+ <%= pb_rails("select", props: {
2
+ id:"color_context",
3
+ label: "Choose a Color",
4
+ name: "color_name_2",
5
+ options: [
6
+ { value: "red", value_text: "Red" },
7
+ { value: "blue", value_text: "Blue" },
8
+ { value: "green", value_text: "Green" }
9
+ ],
10
+ }) %>
11
+
12
+ <%= pb_rails("typeahead", props: {
13
+ label: "Pick a Shade",
14
+ search_context_selector: "color_context",
15
+ options_by_context: {
16
+ "red": [
17
+ { label: "Scarlet", value: "scarlet" },
18
+ { label: "Mahogany", value: "mahogany" },
19
+ { label: "Crimson", value: "crimson" }
20
+ ],
21
+ "blue": [
22
+ { label: "Sky Blue", value: "sky" },
23
+ { label: "Cerulean", value: "cerulean" },
24
+ { label: "Navy", value: "navy" }
25
+ ],
26
+ "green": [
27
+ { label: "Emerald", value: "emerald" },
28
+ { label: "Mint", value: "mint" },
29
+ { label: "Olive", value: "olive" }
30
+ ]
31
+ },
32
+ search_term_minimum_length: 0,
33
+ }) %>
@@ -0,0 +1,3 @@
1
+ The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
2
+
3
+ - `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with.
@@ -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' },
@@ -12,9 +12,13 @@ examples:
12
12
  - typeahead_margin_bottom: Margin Bottom
13
13
  - typeahead_with_pills_color: With Pills (Custom Color)
14
14
  - typeahead_truncated_text: Truncated Text
15
+ - typeahead_dynamic_options: Dynamic Options
16
+ - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
17
+ - typeahead_disabled: Disabled
15
18
 
16
19
  react:
17
20
  - typeahead_default: Default
21
+ - typeahead_react_hook: React Hook
18
22
  - typeahead_with_highlight: With Highlight
19
23
  - typeahead_with_pills: With Pills
20
24
  - typeahead_with_pills_async: With Pills (Async Data)
@@ -29,3 +33,4 @@ examples:
29
33
  - typeahead_margin_bottom: Margin Bottom
30
34
  - typeahead_with_pills_color: With Pills (Custom Color)
31
35
  - typeahead_truncated_text: Truncated Text
36
+ - typeahead_disabled: Disabled
@@ -13,3 +13,5 @@ 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'
17
+ export { default as TypeaheadDisabled } from './_typeahead_disabled.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 (