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 { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorAttributes = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorDefault = (props) => {
5
5
  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorFocus = (props) => (
5
5
  <>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorInline = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { useEditor, EditorContent } from "@tiptap/react"
4
4
  import StarterKit from "@tiptap/starter-kit"
5
5
  import Link from '@tiptap/extension-link'
@@ -1,9 +1,7 @@
1
1
  import React, { useState } from 'react'
2
- import {
3
- Button,
4
- Card,
5
- RichTextEditor,
6
- } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import Button from '../../pb_button/_button'
4
+ import Card from '../../pb_card/_card'
7
5
 
8
6
  const RichTextEditorPreview = (props) => {
9
7
  const [showPreview, setShowPreview] = useState(false)
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorSimple = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorSticky = (props) => (
5
5
  <div>
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
- import { RichTextEditor, Select } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import Select from '../../pb_select/_select'
3
4
  import { changelog, release } from './templates.js'
4
5
 
5
6
  const RichTextEditorTemplates = (props) => {
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { RichTextEditor } from 'playbook-ui'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
 
4
4
  const RichTextEditorToolbarBottom = (props) => (
5
5
  <div>
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { useEditor, EditorContent } from "@tiptap/react";
3
3
 
4
- import { RichTextEditor } from "playbook-ui";
4
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
5
5
 
6
6
  import Document from "@tiptap/extension-document";
7
7
  import Paragraph from "@tiptap/extension-paragraph";
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { SectionSeparator, Card, Caption } from 'playbook-ui'
2
+ import Card from '../../pb_card/_card'
3
+ import Caption from '../../pb_caption/_caption'
4
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
3
5
 
4
6
  const children = (
5
7
  <Card
@@ -1,5 +1,8 @@
1
1
  import React from "react"
2
- import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
2
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
3
+ import Flex from '../../pb_flex/_flex'
4
+ import Detail from '../../pb_detail/_detail'
5
+ import Icon from '../../pb_icon/_icon'
3
6
 
4
7
  const children = (
5
8
  <Flex padding="xs">
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { SectionSeparator } from 'playbook-ui'
2
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
3
3
 
4
4
  const SectionSeparatorDashed = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { SectionSeparator } from 'playbook-ui'
2
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
3
3
 
4
4
  const SectionSeparatorLine = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { SectionSeparator } from 'playbook-ui'
2
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
3
3
 
4
4
  const SectionSeparatorText = (props) => {
5
5
  return (
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Body, Select } from 'playbook-ui'
2
+ import Body from '../../pb_body/_body'
3
+ import Select from '../../pb_select/_select'
3
4
 
4
5
  const SelectError = (props) => {
5
6
  const options = [
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Body, Select } from 'playbook-ui'
2
+ import Body from '../../pb_body/_body'
3
+ import Select from '../../pb_select/_select'
3
4
 
4
5
  const SelectInline = (props) => {
5
6
  const options = [
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Body, Select } from 'playbook-ui'
2
+ import Body from '../../pb_body/_body'
3
+ import Select from '../../pb_select/_select'
3
4
 
4
5
  const SelectInlineCompact = (props) => {
5
6
  const options = [
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Body, Select } from 'playbook-ui'
2
+ import Body from '../../pb_body/_body'
3
+ import Select from '../../pb_select/_select'
3
4
 
4
5
  const SelectInlineShowArrow = (props) => {
5
6
  const options = [
@@ -0,0 +1,58 @@
1
+ import React, { useState } from "react"
2
+ import { useForm } from "react-hook-form"
3
+ import { Button, Body, Select } from "playbook-ui"
4
+
5
+ const SelectReactHook = (props) => {
6
+ const { register, handleSubmit, formState: { errors } } = useForm({
7
+ defaultValues: {
8
+ food: '',
9
+ },
10
+ })
11
+
12
+ const [submittedData, setSubmittedData] = useState({
13
+ food: '',
14
+ })
15
+
16
+ const onSubmit = (data) => {
17
+ setSubmittedData(data)
18
+ }
19
+
20
+ const options = [
21
+ {
22
+ value: 1,
23
+ text: 'Burgers',
24
+ },
25
+ {
26
+ value: 2,
27
+ text: 'Pizza',
28
+ },
29
+ {
30
+ value: 3,
31
+ text: 'Tacos',
32
+ },
33
+ ]
34
+
35
+ return (
36
+ <>
37
+ <form onSubmit={handleSubmit(onSubmit)}>
38
+ <Select
39
+ {...props}
40
+ {...register("food", { required: true })}
41
+ error={errors.food ? "Please select a food." : null}
42
+ label="Favorite Food"
43
+ options={options}
44
+ />
45
+ <br />
46
+ <Button htmlType="submit"
47
+ marginTop="sm"
48
+ text="Submit"
49
+ />
50
+ </form>
51
+ <Body padding="xs"
52
+ text={`Food: ${submittedData.food}`}
53
+ />
54
+ </>
55
+ )
56
+ }
57
+
58
+ export default SelectReactHook
@@ -0,0 +1 @@
1
+ You can pass react-hook-form props to a select kit. You can use `register` which will make the value available for both the form validation and submission.
@@ -30,6 +30,7 @@ examples:
30
30
  - select_inline_show_arrow: Select Inline (Always Show Arrow)
31
31
  - select_inline_compact: Select Inline Compact
32
32
  - select_multiple: Select Multiple
33
+ - select_react_hook: React Hook
33
34
 
34
35
  swift:
35
36
  - select_default_swift: Default
@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
10
10
  export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
11
11
  export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
12
12
  export { default as SelectMultiple } from './_select_multiple.jsx'
13
+ export { default as SelectReactHook } from './_select_react_hook.jsx'
@@ -1,5 +1,8 @@
1
1
  import React, { useState } from 'react'
2
- import { Body, SelectableCard, Title } from 'playbook-ui'
2
+
3
+ import Body from '../../pb_body/_body'
4
+ import SelectableCard from '../../pb_selectable_card/_selectable_card'
5
+ import Title from '../../pb_title/_title'
3
6
 
4
7
  const SelectableCardError = (props) => {
5
8
  const [football, setFootball] = useState(false)
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { SelectableList } from 'playbook-ui'
2
+ import SelectableList from '../../pb_selectable_list/_selectable_list'
3
3
 
4
4
  const SelectableListDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { SelectableList } from 'playbook-ui'
2
+ import SelectableList from '../../pb_selectable_list/_selectable_list'
3
3
 
4
4
  const SelectableListDefault = (props) => {
5
5
  return (
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
- import { Flex, SkeletonLoading } from "playbook-ui"
3
2
 
3
+ import Flex from '../../pb_flex/_flex'
4
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
5
 
5
6
  const SkeletonLoadingBorderRadius = (props) => (
6
7
  <Flex justify="evenly">
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
- import { Card, SkeletonLoading } from "playbook-ui"
3
2
 
3
+ import Card from '../../pb_card/_card'
4
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
5
 
5
6
  const SkeletonLoadingColor = (props) => (
6
7
  <div>
@@ -1,6 +1,5 @@
1
1
  import React from 'react'
2
- import { SkeletonLoading } from "playbook-ui"
3
-
2
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
3
 
5
4
  const SkeletonLoadingDefault = (props) => (
6
5
  <div>
@@ -1,5 +1,12 @@
1
1
  import React, { useState } from 'react';
2
- import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
2
+
3
+ import Button from '../../pb_button/_button'
4
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
5
+ import Card from '../../pb_card/_card'
6
+ import Filter from '../../pb_filter/_filter'
7
+ import Flex from '../../pb_flex/_flex'
8
+ import Select from '../../pb_select/_select'
9
+ import TextInput from '../../pb_text_input/_text_input'
3
10
 
4
11
  const SortingChangeCallback = (sortOptions) => {
5
12
  alert(JSON.stringify(sortOptions[0]))
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
- import { Card, SkeletonLoading } from "playbook-ui"
3
2
 
3
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
+ import Card from '../../pb_card/_card'
4
5
 
5
6
  const SkeletonLoadingHeightWidth = (props) => (
6
7
  <div>
@@ -1,6 +1,5 @@
1
1
  import React from 'react'
2
- import { SkeletonLoading } from "playbook-ui"
3
-
2
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
4
3
 
5
4
  const SkeletonLoadingLayout = (props) => (
6
5
  <div>
@@ -1,5 +1,9 @@
1
1
  import React, { useState } from 'react';
2
- import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
2
+
3
+ import Button from '../../pb_button/_button'
4
+ import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
5
+ import Flex from '../../pb_flex/_flex'
6
+ import User from '../../pb_user/_user'
3
7
 
4
8
  const SkeletonLoadingUser = (props) => {
5
9
  const [isLoading, setIsLoading] = useState(true)
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { StatChange } from 'playbook-ui'
2
+ import StatChange from '../../pb_stat_change/_stat_change'
3
3
 
4
4
  const StatChangeDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { StatChange } from 'playbook-ui'
2
+ import StatChange from '../../pb_stat_change/_stat_change'
3
3
 
4
4
  const StatChangeUnit = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { StatChange } from 'playbook-ui'
2
+ import StatChange from '../../pb_stat_change/_stat_change'
3
3
 
4
4
  const StatChangeUnitTwo = (props) => {
5
5
  return (
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Table, Icon } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const TableWithClickableRows = (props) => {
5
6
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Table, Icon, Body, Card } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Icon from '../../pb_icon/_icon'
4
+ import Card from '../../pb_card/_card'
5
+ import Body from '../../pb_body/_body'
3
6
 
4
7
  const TableWithCollapsible = (props) => {
5
8
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Table, Card, Icon, Body } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Icon from '../../pb_icon/_icon'
4
+ import Card from '../../pb_card/_card'
5
+ import Body from '../../pb_body/_body'
3
6
 
4
7
  const TableWithCollapsibleWithCustomClick = (props) => {
5
8
 
@@ -1,5 +1,11 @@
1
1
  import React from 'react'
2
- import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
2
+
3
+ import Table from '../../pb_table/_table'
4
+ import Icon from '../../pb_icon/_icon'
5
+ import Card from '../../pb_card/_card'
6
+ import Body from '../../pb_body/_body'
7
+ import Image from '../../pb_image/_image'
8
+ import Flex from '../../pb_flex/_flex'
3
9
 
4
10
  const TableWithCollapsibleWithCustomContent = (props) => {
5
11
 
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Table, Background, Icon } from 'playbook-ui'
2
+
3
+ import Table from '../../pb_table/_table'
4
+ import Icon from '../../pb_icon/_icon'
5
+ import Background from '../../pb_background/_background'
3
6
 
4
7
  const TableWithCollapsibleWithNestedRows = (props) => {
5
8
 
@@ -1,5 +1,9 @@
1
1
  import React from 'react'
2
- import {Pill, Background, Table, Icon} from "playbook-ui"
2
+
3
+ import Pill from '../../pb_pill/_pill'
4
+ import Background from '../../pb_background/_background'
5
+ import Table from '../../pb_table/_table'
6
+ import Icon from '../../pb_icon/_icon'
3
7
 
4
8
  const TableWithCollapsibleWithNestedTable = (props) => {
5
9
 
@@ -1,5 +1,9 @@
1
1
  import React, { useState } from 'react'
2
- import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Image from '../../pb_image/_image'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import Checkbox from '../../pb_checkbox/_checkbox'
6
+ import Button from '../../pb_button/_button'
3
7
 
4
8
  const TableWithSelectableRows = (props) => {
5
9
  const [checkboxes, setCheckboxes] = useState([
@@ -1,5 +1,5 @@
1
1
  import React, {useState} from 'react'
2
- import { Textarea } from 'playbook-ui'
2
+ import Textarea from '../../pb_textarea/_textarea'
3
3
 
4
4
  const TextareaError = (props) => {
5
5
  const [value, setValue] = useState('default value text')
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { TimeRangeInline } from 'playbook-ui'
2
+ import TimeRangeInline from '../../pb_time_range_inline/_time_range_inline'
3
3
 
4
4
  const TimeRangeInlineDefault = (props) => (
5
5
  <div>
@@ -1,5 +1,7 @@
1
1
  import React from 'react'
2
- import { Caption, Timestamp, Title } from 'playbook-ui'
2
+ import Caption from '../../pb_caption/_caption'
3
+ import Timestamp from '../../pb_timestamp/_timestamp'
4
+ import Title from '../../pb_title/_title'
3
5
 
4
6
  const TimestampUnstyled = (props) => {
5
7
  return (
@@ -1,10 +1,9 @@
1
1
  <%= pb_rails("title", props: {
2
+ margin_bottom: "md"
2
3
  }) do %>
3
4
  Default Title
4
5
  <% end %>
5
6
 
6
- <br/>
7
-
8
7
  <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
9
8
  <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
10
9
  <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
6
6
  return (
7
7
  <div>
8
8
  <Title
9
+ marginBottom='md'
9
10
  text="Default Title"
10
11
  {...props}
11
12
  />
12
- <br />
13
13
  <Title
14
14
  size={1}
15
15
  tag="h1"
@@ -0,0 +1,7 @@
1
+ <%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
2
+ <%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
3
+ <%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
4
+ <%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
5
+ <%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
6
+ <%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
7
+ <%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>
@@ -0,0 +1,54 @@
1
+ import React from 'react'
2
+
3
+ import Title from '../_title'
4
+
5
+ const TitleDisplaySize = (props) => {
6
+ return (
7
+ <div>
8
+ <Title
9
+ displaySize="xs"
10
+ tag="h1"
11
+ text="Display Size xs"
12
+ {...props}
13
+ />
14
+ <Title
15
+ displaySize="sm"
16
+ tag="h1"
17
+ text="Display Size sm"
18
+ {...props}
19
+ />
20
+ <Title
21
+ displaySize="md"
22
+ tag="h1"
23
+ text="Display Size md"
24
+ {...props}
25
+ />
26
+ <Title
27
+ displaySize="lg"
28
+ tag="h1"
29
+ text="Display Size lg"
30
+ {...props}
31
+ />
32
+ <Title
33
+ displaySize="xl"
34
+ tag="h1"
35
+ text="Display Size xl"
36
+ {...props}
37
+ />
38
+ <Title
39
+ displaySize="xxl"
40
+ tag="h1"
41
+ text="Display Size xxl"
42
+ {...props}
43
+ />
44
+ <Title
45
+ size="display"
46
+ tag="h1"
47
+ text="This is a size of display"
48
+ {...props}
49
+ />
50
+ </div>
51
+ )
52
+ }
53
+
54
+ export default TitleDisplaySize
@@ -0,0 +1 @@
1
+ Responsive sizes for large screens and tablets, perfect for digital signage.
@@ -5,6 +5,7 @@ examples:
5
5
  - title_colors: Colors
6
6
  - title_responsive: Responsive
7
7
  - title_truncate: Truncate
8
+ - title_display_size: Display Size
8
9
 
9
10
  react:
10
11
  - title_default: Default UI
@@ -12,3 +13,4 @@ examples:
12
13
  - title_colors: Colors
13
14
  - title_responsive: Responsive
14
15
  - title_truncate: Truncate
16
+ - title_display_size: Display Size
@@ -3,3 +3,4 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
3
3
  export { default as TitleColors } from './_title_colors.jsx'
4
4
  export { default as TitleResponsive } from './_title_responsive.jsx'
5
5
  export { default as TitleTruncate } from './_title_truncate.jsx'
6
+ export { default as TitleDisplaySize } from './_title_display_size.jsx'
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from 'react'
2
- import { Toggle } from 'playbook-ui'
2
+ import Toggle from '../../pb_toggle/_toggle'
3
3
 
4
4
  const ToggleCustom = () => {
5
5
  const [choice, setChoice] = useState(false)
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from 'react'
2
- import { Caption, Title, Toggle } from 'playbook-ui'
2
+ import Caption from '../../pb_caption/_caption'
3
+ import Title from '../../pb_title/_title'
4
+ import Toggle from '../../pb_toggle/_toggle'
3
5
 
4
6
  const ToggleCustomRadio = () => {
5
7
  const [choice, setChoice] = useState('walk')