playbook_ui_docs 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

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 (439) 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.html.erb +39 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +3 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb +33 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +1 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +6 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -1
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  35. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +1 -1
  36. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +2 -2
  42. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +6 -2
  44. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +1 -1
  46. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +2 -2
  47. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +2 -2
  48. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +3 -1
  52. data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +2 -1
  57. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +2 -1
  59. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +1 -1
  60. data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -1
  62. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +1 -1
  63. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +1 -1
  65. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +1 -1
  67. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +1 -1
  68. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +3 -1
  69. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +2 -1
  70. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +1 -1
  71. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +1 -1
  72. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +1 -1
  73. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  74. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +1 -1
  75. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +2 -1
  76. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +4 -1
  77. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  78. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +1 -1
  79. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +1 -1
  80. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +7 -1
  81. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +7 -1
  82. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  83. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -1
  84. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx +1 -1
  85. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +1 -1
  86. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +4 -1
  87. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +1 -1
  88. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +1 -1
  89. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +3 -1
  90. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +5 -1
  91. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +1 -1
  92. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +3 -1
  93. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -1
  94. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +4 -1
  95. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +4 -1
  96. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +2 -1
  97. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +3 -1
  98. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
  99. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +3 -1
  100. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
  101. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +3 -1
  102. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  103. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +1 -1
  104. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -1
  105. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +1 -1
  106. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +1 -1
  107. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +1 -1
  108. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +1 -1
  109. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +7 -8
  110. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +3 -1
  111. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -9
  112. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -9
  113. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +2 -1
  114. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -1
  115. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +3 -1
  116. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx +2 -1
  117. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +3 -1
  118. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +3 -1
  119. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -1
  120. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +6 -1
  121. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +184 -0
  122. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +5 -0
  123. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +97 -0
  124. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -0
  125. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +11 -12
  126. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +9 -10
  127. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +4 -1
  128. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +3 -1
  129. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +6 -1
  130. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +4 -1
  131. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +7 -4
  132. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +3 -0
  133. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +21 -37
  134. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +4 -1
  135. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +12 -7
  136. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +5 -1
  137. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +4 -1
  138. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +2 -0
  139. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +1 -1
  140. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +3 -1
  141. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +1 -1
  142. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +1 -1
  143. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -1
  144. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +1 -1
  145. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +1 -1
  146. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +1 -1
  147. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +5 -1
  148. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +7 -1
  149. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +7 -1
  150. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +7 -1
  151. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -1
  152. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +7 -1
  153. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +5 -1
  154. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +8 -1
  155. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -1
  156. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +38 -0
  157. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +17 -0
  158. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +21 -0
  159. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +35 -0
  160. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg +21 -0
  161. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx +118 -0
  162. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +8 -0
  163. data/app/pb_kits/playbook/pb_empty_state/docs/index.js +4 -0
  164. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +4 -5
  165. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +3 -1
  166. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +3 -5
  167. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +3 -5
  168. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +5 -6
  169. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -1
  170. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +5 -1
  171. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +5 -1
  172. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +6 -1
  173. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +5 -1
  174. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +5 -1
  175. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +6 -1
  176. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +5 -1
  177. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +3 -1
  178. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +3 -1
  179. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +2 -1
  180. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +3 -1
  181. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +3 -1
  182. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +3 -1
  183. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx +3 -1
  184. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +3 -1
  185. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +3 -1
  186. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +4 -1
  187. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +68 -1
  188. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +69 -2
  189. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +3 -1
  190. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +5 -1
  191. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb +40 -0
  192. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +50 -0
  193. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md +3 -0
  194. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  195. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  196. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +1 -1
  197. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +1 -1
  198. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +9 -10
  199. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +1 -1
  200. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +1 -1
  201. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +1 -1
  202. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +1 -1
  203. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +3 -1
  204. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +1 -1
  205. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +4 -1
  206. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +1 -1
  207. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +1 -1
  208. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +1 -1
  209. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +1 -1
  210. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +10 -4
  211. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +49 -24
  212. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
  213. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx +13 -0
  214. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +1 -1
  215. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +3 -1
  216. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -0
  217. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +1 -0
  218. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +1 -1
  219. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +1 -1
  220. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +1 -1
  221. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +1 -1
  222. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +1 -1
  223. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +1 -1
  224. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +1 -1
  225. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +3 -1
  226. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +1 -1
  227. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +1 -1
  228. data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +1 -1
  229. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +2 -1
  230. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +6 -1
  231. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +4 -1
  232. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +2 -1
  233. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +2 -1
  234. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +1 -1
  235. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +1 -1
  236. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +2 -1
  237. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +1 -1
  238. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +1 -1
  239. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +1 -1
  240. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +1 -1
  241. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +1 -1
  242. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +1 -1
  243. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +2 -1
  244. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +5 -1
  245. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +2 -1
  246. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +1 -1
  247. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +72 -0
  248. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +91 -0
  249. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +76 -0
  250. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +94 -0
  251. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md +1 -0
  252. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +75 -0
  253. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +93 -0
  254. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md +3 -0
  255. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +75 -0
  256. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +93 -0
  257. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.md +3 -0
  258. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +74 -0
  259. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +92 -0
  260. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md +3 -0
  261. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +72 -0
  262. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +97 -0
  263. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +71 -0
  264. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +91 -0
  265. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
  266. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
  267. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +15 -1
  268. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +8 -0
  269. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx +1 -1
  270. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx +1 -1
  271. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx +2 -1
  272. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +2 -1
  273. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +4 -1
  274. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx +2 -1
  275. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx +2 -1
  276. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +2 -1
  277. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +2 -1
  278. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +4 -4
  279. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +5 -6
  280. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +4 -6
  281. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +4 -1
  282. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +4 -6
  283. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +2 -1
  284. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +3 -1
  285. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +4 -1
  286. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +2 -1
  287. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +6 -1
  288. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +5 -1
  289. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +3 -1
  290. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +3 -1
  291. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
  292. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -1
  293. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +3 -1
  294. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
  295. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
  296. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +1 -1
  297. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  298. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +1 -1
  299. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +4 -1
  300. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
  301. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +6 -7
  302. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +4 -5
  303. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +5 -6
  304. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +7 -8
  305. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +5 -6
  306. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +4 -5
  307. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx +1 -1
  308. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx +1 -1
  309. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +3 -1
  310. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx +1 -1
  311. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx +1 -1
  312. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +1 -1
  313. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx +1 -1
  314. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +3 -1
  315. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -1
  316. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
  317. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  318. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  319. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  320. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +1 -1
  321. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +3 -1
  322. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +1 -1
  323. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +1 -1
  324. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +1 -1
  325. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +1 -1
  326. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +1 -1
  327. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +3 -5
  328. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +1 -1
  329. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +1 -1
  330. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +2 -1
  331. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +1 -1
  332. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +1 -1
  333. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +3 -1
  334. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +4 -1
  335. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +1 -1
  336. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +1 -1
  337. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  338. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +2 -1
  339. data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +2 -1
  340. data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +2 -1
  341. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +2 -1
  342. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
  343. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
  344. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  345. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  346. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +4 -1
  347. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +1 -1
  348. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +1 -1
  349. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +2 -1
  350. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +2 -1
  351. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +1 -2
  352. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +8 -1
  353. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -1
  354. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +1 -2
  355. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +5 -1
  356. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
  357. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +1 -1
  358. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +1 -1
  359. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +2 -1
  360. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +4 -1
  361. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +4 -1
  362. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +7 -1
  363. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +4 -1
  364. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +5 -1
  365. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx +50 -0
  366. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md +1 -0
  367. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx +59 -0
  368. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -0
  369. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +5 -1
  370. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  371. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  372. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -1
  373. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +1 -1
  374. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +3 -1
  375. data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
  376. data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
  377. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
  378. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
  379. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
  380. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  381. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  382. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +1 -1
  383. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +3 -1
  384. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +1 -1
  385. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +1 -1
  386. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +3 -1
  387. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +3 -1
  388. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +4 -1
  389. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +3 -1
  390. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
  391. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +4 -1
  392. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +3 -1
  393. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +5 -1
  394. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
  395. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
  396. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
  397. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -1
  398. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  399. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +1 -1
  400. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +1 -1
  401. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +1 -3
  402. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb +19 -0
  403. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx +23 -0
  404. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
  405. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
  406. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  407. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +6 -8
  408. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +1 -1
  409. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +3 -5
  410. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +4 -6
  411. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +4 -6
  412. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +1 -1
  413. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  414. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -0
  415. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +6 -1
  416. data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +1 -1
  417. data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb +22 -0
  418. data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +40 -0
  419. data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md +5 -0
  420. data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md +5 -0
  421. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +1 -1
  422. data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +1 -1
  423. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +1 -1
  424. data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +1 -1
  425. data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +1 -1
  426. data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +1 -1
  427. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  428. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  429. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +2 -1
  430. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +2 -1
  431. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +2 -1
  432. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +2 -1
  433. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +2 -1
  434. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +2 -1
  435. data/dist/playbook-doc.js +1 -1
  436. metadata +75 -5
  437. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
  438. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.md → _advanced_table_selectable_rows_no_subrows_react.md} +0 -0
  439. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.md → _advanced_table_selectable_rows_react.md} +0 -0
@@ -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
 
@@ -0,0 +1,50 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../../pb_table/_table'
4
+
5
+ const TableWithHeaderStyleBorderless = (props) => {
6
+ return (
7
+ <>
8
+ <Table
9
+ headerStyle="borderless"
10
+ size="sm"
11
+ {...props}
12
+ >
13
+ <thead>
14
+ <tr>
15
+ <th>{'Column 1'}</th>
16
+ <th>{'Column 2'}</th>
17
+ <th>{'Column 3'}</th>
18
+ <th>{'Column 4'}</th>
19
+ <th>{'Column 5'}</th>
20
+ </tr>
21
+ </thead>
22
+ <tbody>
23
+ <tr>
24
+ <td>{'Value 1'}</td>
25
+ <td>{'Value 2'}</td>
26
+ <td>{'Value 3'}</td>
27
+ <td>{'Value 4'}</td>
28
+ <td>{'Value 5'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>{'Value 1'}</td>
32
+ <td>{'Value 2'}</td>
33
+ <td>{'Value 3'}</td>
34
+ <td>{'Value 4'}</td>
35
+ <td>{'Value 5'}</td>
36
+ </tr>
37
+ <tr>
38
+ <td>{'Value 1'}</td>
39
+ <td>{'Value 2'}</td>
40
+ <td>{'Value 3'}</td>
41
+ <td>{'Value 4'}</td>
42
+ <td>{'Value 5'}</td>
43
+ </tr>
44
+ </tbody>
45
+ </Table>
46
+ </>
47
+ )
48
+ }
49
+
50
+ export default TableWithHeaderStyleBorderless
@@ -0,0 +1 @@
1
+ Customize your header by removing the header borders with the `headerStyle="borderless"` prop.
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+
3
+ import Background from '../../pb_background/_background'
4
+ import Card from '../../pb_card/_card'
5
+ import Table from '../../pb_table/_table'
6
+
7
+ const TableWithHeaderStyleFloating = (props) => {
8
+ return (
9
+ <>
10
+ <Card background="light"
11
+ {...props}
12
+ >
13
+ <Table
14
+ headerStyle="floating"
15
+ size="sm"
16
+ {...props}
17
+ >
18
+ <Table.Head>
19
+ <Background backgroundColor="light"
20
+ tag="tr"
21
+ {...props}
22
+ >
23
+ <Table.Header>{'Column 1'}</Table.Header>
24
+ <Table.Header>{'Column 2'}</Table.Header>
25
+ <Table.Header>{'Column 3'}</Table.Header>
26
+ <Table.Header>{'Column 4'}</Table.Header>
27
+ <Table.Header>{'Column 5'}</Table.Header>
28
+ </Background>
29
+ </Table.Head>
30
+ <Table.Body>
31
+ <Table.Row>
32
+ <Table.Cell>{'Value 1'}</Table.Cell>
33
+ <Table.Cell>{'Value 2'}</Table.Cell>
34
+ <Table.Cell>{'Value 3'}</Table.Cell>
35
+ <Table.Cell>{'Value 4'}</Table.Cell>
36
+ <Table.Cell>{'Value 5'}</Table.Cell>
37
+ </Table.Row>
38
+ <Table.Row>
39
+ <Table.Cell>{'Value 1'}</Table.Cell>
40
+ <Table.Cell>{'Value 2'}</Table.Cell>
41
+ <Table.Cell>{'Value 3'}</Table.Cell>
42
+ <Table.Cell>{'Value 4'}</Table.Cell>
43
+ <Table.Cell>{'Value 5'}</Table.Cell>
44
+ </Table.Row>
45
+ <Table.Row>
46
+ <Table.Cell>{'Value 1'}</Table.Cell>
47
+ <Table.Cell>{'Value 2'}</Table.Cell>
48
+ <Table.Cell>{'Value 3'}</Table.Cell>
49
+ <Table.Cell>{'Value 4'}</Table.Cell>
50
+ <Table.Cell>{'Value 5'}</Table.Cell>
51
+ </Table.Row>
52
+ </Table.Body>
53
+ </Table>
54
+ </Card>
55
+ </>
56
+ )
57
+ }
58
+
59
+ export default TableWithHeaderStyleFloating
@@ -0,0 +1 @@
1
+ Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).
@@ -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([
@@ -75,3 +75,5 @@ examples:
75
75
  - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
76
76
  - table_with_clickable_rows: Table with Clickable Rows
77
77
  - table_with_selectable_rows: Table with Selectable Rows
78
+ - table_with_header_style_borderless: Header Style Borderless
79
+ - table_with_header_style_floating: Header Style Floating
@@ -35,3 +35,5 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
35
35
  export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
36
36
  export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
37
37
  export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
38
+ export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
39
+ export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
@@ -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"}) %>