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
@@ -0,0 +1,50 @@
1
+ import React from 'react'
2
+ import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
3
+
4
+ const names = [
5
+ { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
6
+ { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
7
+ { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
8
+ { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
9
+ { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
10
+ ]
11
+
12
+ const FormPillWrapped = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ htmlOptions={{ style: { maxWidth: "240px" } }}
17
+ isMulti
18
+ label="Wrapped Within Typeahead"
19
+ options={names}
20
+ wrapped
21
+ {...props}
22
+ />
23
+ <Caption text="Form Pill Wrapped Text"/>
24
+ <Card maxWidth="xs">
25
+ <FormPill
26
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
27
+ name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
28
+ onClick={() => alert('Click!')}
29
+ tabIndex={0}
30
+ wrapped
31
+ />
32
+ <FormPill
33
+ icon="badge-check"
34
+ onClick={() => {alert('Click!')}}
35
+ tabIndex={0}
36
+ text="icon and a very long tag to show wrapped text"
37
+ wrapped
38
+ />
39
+ <FormPill
40
+ onClick={() => {alert('Click!')}}
41
+ tabIndex={0}
42
+ text="form pill with a very long tag to show wrapped text"
43
+ wrapped
44
+ />
45
+ </Card>
46
+ </>
47
+ )
48
+ }
49
+
50
+ export default FormPillWrapped
@@ -0,0 +1,3 @@
1
+ For Form Pills with longer text, the `wrapped` prop can be used to wrap the label within each Form Pill.
2
+
3
+ **Note**: Avoid using the `wrapped` and `small` props together, as their styles conflict and may cause functionality issues.
@@ -4,6 +4,7 @@ examples:
4
4
  - form_pill_user: Form Pill User
5
5
  - form_pill_size: Form Pill Size
6
6
  - form_pill_truncated_text: Truncated Text
7
+ - form_pill_wrapped: Wrapped Text
7
8
  - form_pill_tag: Form Pill Tag
8
9
  - form_pill_example: Example
9
10
  - form_pill_icon: Form Pill Icon
@@ -13,6 +14,7 @@ examples:
13
14
  - form_pill_user: Form Pill User
14
15
  - form_pill_size: Form Pill Size
15
16
  - form_pill_truncated_text: Truncated Text
17
+ - form_pill_wrapped: Wrapped Text
16
18
  - form_pill_tag: Form Pill Tag
17
19
  - form_pill_example: Example
18
20
  - form_pill_icon: Form Pill Icon
@@ -5,3 +5,4 @@ export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
6
  export { default as FormPillColors } from './_form_pill_colors.jsx'
7
7
  export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
8
+ export { default as FormPillWrapped } from './_form_pill_wrapped.jsx'
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { GanttChart } from "playbook-ui";
2
+ import GanttChart from '../../pb_gantt_chart/_gantt_chart'
3
3
 
4
4
  const mockOptions = {
5
5
  title: {
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data = [
5
5
  { name: 'Name', value: 67 },
@@ -1,14 +1,13 @@
1
1
  import React from "react";
2
- import {
3
- Title,
4
- Card,
5
- Gauge,
6
- Flex,
7
- FlexItem,
8
- SectionSeparator,
9
- Body,
10
- Caption,
11
- } from "playbook-ui";
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import FlexItem from '../../pb_flex/_flex_item'
5
+ import Gauge from '../../pb_gauge/_gauge'
6
+ import Card from '../../pb_card/_card'
7
+ import Caption from '../../pb_caption/_caption'
8
+ import Body from '../../pb_body/_body'
9
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
10
+ import Title from '../../pb_title/_title'
12
11
 
13
12
  const data = [{ name: "Name", value: 10 }];
14
13
 
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data = [
5
5
  { name: 'Name', value: 45 },
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data = [
5
5
  { name: 'Participants', value: 84 },
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data = [
5
5
  { name: 'Capacity', value: 75 },
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const GaugeHeight = (props) => (
5
5
  <div>
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from 'react'
2
- import { Button, Gauge } from 'playbook-ui'
2
+
3
+ import Button from '../../pb_button/_button'
4
+ import Gauge from '../../pb_gauge/_gauge'
3
5
 
4
6
  const GaugeLiveData = (props) => {
5
7
  const [value, setValue] = useState(50)
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data = [{
5
5
  name: 'Rating', value: 4.5,
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Flex, FlexItem, Gauge } from 'playbook-ui'
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import FlexItem from '../../pb_flex/_flex_item'
5
+ import Gauge from '../../pb_gauge/_gauge'
3
6
 
4
7
  const GaugeSizing = (props) => (
5
8
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data = [
5
5
  { name: 'Score', value: 780 },
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Gauge } from 'playbook-ui'
2
+ import Gauge from '../../pb_gauge/_gauge'
3
3
 
4
4
  const data1 = [
5
5
  { name: 'Data Used', value: 32 },
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Hashtag } from 'playbook-ui'
2
+ import Hashtag from '../../pb_hashtag/_hashtag'
3
3
 
4
4
  const HashtagDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Hashtag } from 'playbook-ui'
2
+ import Hashtag from '../../pb_hashtag/_hashtag'
3
3
 
4
4
  const HashtagLink = (props) => {
5
5
  return (
@@ -1,5 +1,11 @@
1
- <%= pb_rails("flex", props: {orientation: "column"}) do %>
2
- <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
3
- <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
1
+ <%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
2
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
3
+ <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
4
4
  <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
5
- <% end %>
5
+ <% end %>
6
+
7
+ <%= pb_rails("flex", props: {}) do %>
8
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
9
+ <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
10
+ <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
11
+ <% end %>
@@ -1,32 +1,57 @@
1
1
  import React from "react"
2
2
  import Icon from "../_icon"
3
+ import Flex from "../../pb_flex/_flex"
3
4
 
4
5
  const IconDefault = (props) => {
5
6
  return (
6
- <div style={{ display: "flex", flexDirection: "column"}}>
7
- <Icon
8
- color="primary"
9
- fixedWidth
10
- icon="user"
11
- paddingBottom="sm"
12
- size="2x"
13
- {...props}
14
- />
15
- <Icon
16
- color="data_4"
17
- fixedWidth
18
- icon="recycle"
19
- paddingBottom="sm"
20
- size="2x"
21
- {...props}
22
- />
23
- <Icon
24
- color="product_5_background"
25
- fixedWidth
26
- icon="product-roofing"
27
- size="2x"
28
- {...props}
29
- />
7
+ <div>
8
+ <Flex marginBottom="sm">
9
+ <Icon
10
+ color="primary"
11
+ fixedWidth
12
+ icon="user"
13
+ size="2x"
14
+ {...props}
15
+ />
16
+ <Icon
17
+ color="data_4"
18
+ fixedWidth
19
+ icon="recycle"
20
+ size="2x"
21
+ {...props}
22
+ />
23
+ <Icon
24
+ color="product_5_background"
25
+ fixedWidth
26
+ icon="product-roofing"
27
+ size="2x"
28
+ {...props}
29
+ />
30
+ </Flex>
31
+
32
+ <Flex>
33
+ <Icon
34
+ color="light"
35
+ fixedWidth
36
+ icon="user"
37
+ size="2x"
38
+ {...props}
39
+ />
40
+ <Icon
41
+ color="lighter"
42
+ fixedWidth
43
+ icon="recycle"
44
+ size="2x"
45
+ {...props}
46
+ />
47
+ <Icon
48
+ color="link"
49
+ fixedWidth
50
+ icon="product-roofing"
51
+ size="2x"
52
+ {...props}
53
+ />
54
+ </Flex>
30
55
  </div>
31
56
  )
32
57
  }
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Icon } from 'playbook-ui'
2
+ import Icon from '../../pb_icon/_icon'
3
3
 
4
4
  const config = {
5
5
  icon: (
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import IconButton from '../../pb_icon_button/_icon_button'
3
+
4
+ const IconButtonClick = (props) => (
5
+ <div>
6
+ <IconButton
7
+ {...props}
8
+ onClick={() => alert('Click!')}
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default IconButtonClick
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { IconButton } from 'playbook-ui'
2
+ import IconButton from '../../pb_icon_button/_icon_button'
3
3
 
4
4
  const IconButtonDefault = (props) => (
5
5
  <div>
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { IconButton, Flex } from 'playbook-ui'
2
+
3
+ import IconButton from '../../pb_icon_button/_icon_button'
4
+ import Flex from '../../pb_flex/_flex'
3
5
 
4
6
  const IconButtonSizes = (props) => (
5
7
  <div>
@@ -7,3 +7,4 @@ examples:
7
7
  react:
8
8
  - icon_button_default: Default
9
9
  - icon_button_sizes: Sizes
10
+ - icon_button_click: Click Handler
@@ -1,2 +1,3 @@
1
1
  export { default as IconButtonDefault } from './_icon_button_default.jsx'
2
2
  export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
3
+ export { default as IconButtonClick } from './_icon_button_click.jsx'
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { IconCircle } from 'playbook-ui'
2
+ import IconCircle from '../../pb_icon_circle/_icon_circle'
3
3
 
4
4
  const IconCircleSizes = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { IconStatValue } from 'playbook-ui'
2
+ import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
3
3
 
4
4
  const IconStatValueColor = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { IconStatValue } from 'playbook-ui'
2
+ import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
3
3
 
4
4
  const IconStatValueDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { IconStatValue } from 'playbook-ui'
2
+ import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
3
3
 
4
4
  const IconStatValueSizes = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { IconStatValue } from 'playbook-ui'
2
+ import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
3
3
 
4
4
  const IconStatValueVertical = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { LabelValue } from 'playbook-ui'
2
+ import LabelValue from '../../pb_label_value/_label_value'
3
3
 
4
4
  const LabelValueDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { LabelValue } from 'playbook-ui'
2
+ import LabelValue from '../../pb_label_value/_label_value'
3
3
 
4
4
  const LabelValueDetails = (props) => {
5
5
  return (
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { Flex, LabelValue, Title } from 'playbook-ui'
2
+ import Flex from '../../pb_flex/_flex'
3
+ import LabelValue from '../../pb_label_value/_label_value'
4
+ import Title from '../../pb_title/_title'
3
5
 
4
6
  const LabelValueDetailsExamples = (props) => {
5
7
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Legend } from 'playbook-ui'
2
+ import Legend from '../../pb_legend/_legend'
3
3
 
4
4
  const LegendColors = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Legend } from 'playbook-ui'
2
+ import Legend from '../../pb_legend/_legend'
3
3
 
4
4
  const LegendCustomColors = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Legend } from 'playbook-ui'
2
+ import Legend from '../../pb_legend/_legend'
3
3
 
4
4
  const LegendPrefix = (props) => (
5
5
  <div>
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
- import { Flex, Image } from 'playbook-ui'
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Image from '../../pb_image/_image'
3
4
  import Lightbox from '../_lightbox.tsx'
4
5
 
5
6
  const LightboxCompoundComponent = (props) => {
@@ -1,5 +1,10 @@
1
1
  import React, { useState } from 'react'
2
- import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import Image from '../../pb_image/_image'
5
+ import Button from '../../pb_button/_button'
6
+ import Body from '../../pb_body/_body'
7
+ import FlexItem from '../../pb_flex/_flex_item'
3
8
  import Lightbox from '../_lightbox.tsx'
4
9
 
5
10
  const LightboxCurrentPhoto = (props) => {
@@ -1,5 +1,8 @@
1
1
  import React, { useState } from "react";
2
- import { Flex, Image, Title, Pill } from "playbook-ui";
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Image from '../../pb_image/_image'
4
+ import Title from '../../pb_title/_title'
5
+ import Pill from '../../pb_pill/_pill'
3
6
  import Lightbox from "../_lightbox.tsx";
4
7
 
5
8
  const LightboxCustomHeader = (props) => {
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
- import { Flex, Image } from 'playbook-ui'
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Image from '../../pb_image/_image'
3
4
  import Lightbox from '../_lightbox.tsx'
4
5
 
5
6
  const LightboxDefault = (props) => {
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
- import { Flex, Image } from 'playbook-ui'
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Image from '../../pb_image/_image'
3
4
  import Lightbox from '../_lightbox.tsx'
4
5
 
5
6
  const LightboxMultiple = (props) => {
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { LineGraph } from 'playbook-ui'
2
+ import LineGraph from '../../pb_line_graph/_line_graph'
3
3
 
4
4
  const data = [{
5
5
  name: 'Number of Installations',
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { LineGraph } from 'playbook-ui'
2
+ import LineGraph from '../../pb_line_graph/_line_graph'
3
3
 
4
4
  const data = [{
5
5
  name: 'Number of Installations',
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { LineGraph, Title } from 'playbook-ui'
2
+ import LineGraph from '../../pb_line_graph/_line_graph'
3
+ import Title from '../../pb_title/_title'
3
4
 
4
5
  const data = [{
5
6
  name: 'Installation',
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkColor = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkDisabled = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkIcon = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkTag = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkTarget = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkUnderline = (props) => (
5
5
  <div>
@@ -1,5 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map, mapTheme } from 'playbook-ui'
2
+ import Map from '../../pb_map/_map'
3
+ import mapTheme from '../../pb_map/pbMapTheme'
3
4
  import maplibregl from 'maplibre-gl'
4
5
 
5
6
  const MapDefault = (props) => {
@@ -1,5 +1,9 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
2
+
3
+ import Map from '../../pb_map/_map'
4
+ import mapTheme from '../../pb_map/pbMapTheme'
5
+ import MapCustomButton from '../../pb_map/_map_custom_button'
6
+
3
7
  import maplibregl from 'maplibre-gl'
4
8
 
5
9
  const MapWithCustomButton = (props) => {
@@ -1,5 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map, mapTheme } from 'playbook-ui'
2
+ import Map from '../../pb_map/_map'
3
+ import mapTheme from '../../pb_map/pbMapTheme'
3
4
  import maplibregl from 'maplibre-gl'
4
5
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
5
6
 
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Message } from 'playbook-ui'
2
+ import Message from '../../pb_message/_message'
3
3
 
4
4
  const MessageTimestamp = (props) => {
5
5
  return (