playbook_ui 7.13.0.pre.alpha1 → 7.16.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (262) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  3. data/app/pb_kits/playbook/_playbook.scss +8 -8
  4. data/app/pb_kits/playbook/data/menu.yml +0 -1
  5. data/app/pb_kits/playbook/index.js +2 -2
  6. data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb +4 -6
  7. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +6 -2
  8. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  9. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb +5 -0
  10. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +41 -0
  11. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md +2 -0
  12. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -2
  15. data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
  16. data/app/pb_kits/playbook/pb_card/_card.jsx +3 -1
  17. data/app/pb_kits/playbook/pb_card/_card.scss +2 -2
  18. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +6 -0
  19. data/app/pb_kits/playbook/pb_card/card.rb +9 -1
  20. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb +53 -0
  21. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx +71 -0
  22. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.md +1 -0
  23. data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -0
  24. data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
  25. data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +1 -0
  27. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +0 -4
  28. data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +0 -1
  29. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +0 -7
  30. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +0 -2
  31. data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +2 -2
  32. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +2 -2
  33. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +0 -4
  34. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +0 -1
  35. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +0 -2
  36. data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js +0 -1
  37. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +9 -4
  38. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +12 -7
  39. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +4 -1
  40. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb +4 -0
  41. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx +18 -0
  42. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -0
  43. data/app/pb_kits/playbook/pb_distribution_bar/docs/example.yml +2 -0
  44. data/app/pb_kits/playbook/pb_distribution_bar/docs/index.js +1 -0
  45. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +12 -1
  46. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +5 -1
  47. data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +61 -0
  48. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +41 -0
  49. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +84 -37
  50. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.md +1 -0
  51. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  52. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  53. data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +18 -7
  54. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +5 -1
  55. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -5
  56. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +0 -2
  57. data/app/pb_kits/playbook/pb_flex/_flex.jsx +25 -9
  58. data/app/pb_kits/playbook/pb_flex/_flex.scss +40 -7
  59. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +8 -2
  60. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +19 -0
  61. data/app/pb_kits/playbook/pb_flex/docs/_description.md +6 -0
  62. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb +101 -0
  63. data/app/pb_kits/playbook/pb_flex/docs/{_flex_horizontal.jsx → _flex_align.jsx} +71 -77
  64. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +7 -0
  65. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +15 -15
  66. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +17 -15
  67. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +3 -1
  68. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +33 -0
  69. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +75 -0
  70. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +9 -0
  71. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +8 -8
  72. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +5 -1
  73. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +49 -0
  74. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +11 -0
  75. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +113 -0
  76. data/app/pb_kits/playbook/pb_flex/docs/{_flex_horizontal.html.erb → _flex_justify.html.erb} +19 -21
  77. data/app/pb_kits/playbook/pb_flex/docs/{_flex_vertical.jsx → _flex_justify.jsx} +41 -99
  78. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +7 -0
  79. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +9 -9
  80. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +2 -2
  81. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md +5 -0
  82. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +23 -8
  83. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +4 -4
  84. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +7 -0
  85. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
  86. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md +5 -0
  87. data/app/pb_kits/playbook/pb_flex/docs/example.yml +9 -4
  88. data/app/pb_kits/playbook/pb_flex/docs/index.js +4 -2
  89. data/app/pb_kits/playbook/pb_flex/flex.rb +79 -12
  90. data/app/pb_kits/playbook/pb_flex/flex_item.rb +25 -1
  91. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +7 -1
  92. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -0
  93. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +4 -4
  94. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +12 -1
  95. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md +2 -1
  96. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +4 -5
  97. data/app/pb_kits/playbook/pb_icon/docs/example.yml +1 -2
  98. data/app/pb_kits/playbook/pb_icon/docs/index.js +0 -1
  99. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +0 -7
  100. data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +0 -3
  101. data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +0 -5
  102. data/app/pb_kits/playbook/pb_icon_value/docs/index.js +0 -2
  103. data/app/pb_kits/playbook/pb_image/_image.html.erb +3 -1
  104. data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
  105. data/app/pb_kits/playbook/pb_image/_image.scss +1 -0
  106. data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb +75 -0
  107. data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx +55 -0
  108. data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
  109. data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
  110. data/app/pb_kits/playbook/pb_image/image.rb +2 -0
  111. data/app/pb_kits/playbook/{pb_collapsible/child_kits/_collapsible_content.html.erb → pb_layout/_item.html.erb} +1 -2
  112. data/app/pb_kits/playbook/pb_layout/_layout.jsx +19 -1
  113. data/app/pb_kits/playbook/pb_layout/_layout.scss +42 -10
  114. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb +4 -4
  115. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md +1 -0
  116. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx +1 -1
  117. data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.html.erb +48 -0
  118. data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.jsx +61 -0
  119. data/app/pb_kits/playbook/pb_layout/docs/example.yml +2 -3
  120. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -1
  121. data/app/pb_kits/playbook/pb_layout/item.rb +25 -0
  122. data/app/pb_kits/playbook/pb_layout/layout.rb +15 -15
  123. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +1 -1
  124. data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -13
  125. data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -5
  126. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
  127. data/app/pb_kits/playbook/pb_select/_select.scss +6 -4
  128. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +54 -11
  129. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +62 -8
  130. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +67 -9
  131. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx +41 -44
  132. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -2
  133. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx +53 -62
  134. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.html.erb +36 -0
  135. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +58 -0
  136. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx +43 -53
  137. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.html.erb +105 -0
  138. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx +158 -0
  139. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md +1 -0
  140. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb +2 -2
  141. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx +46 -53
  142. data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +4 -0
  143. data/app/pb_kits/playbook/pb_selectable_card/docs/index.js +2 -0
  144. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +38 -2
  145. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +8 -8
  146. data/app/pb_kits/playbook/pb_table/_table.jsx +8 -0
  147. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +0 -1
  148. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb +56 -4
  149. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +64 -3
  150. data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +2 -0
  151. data/app/pb_kits/playbook/pb_table/styles/_all.scss +3 -0
  152. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +135 -0
  153. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +135 -0
  154. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +135 -0
  155. data/app/pb_kits/playbook/pb_table/table.rb +8 -1
  156. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +10 -2
  157. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb +2 -2
  158. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx +9 -1
  159. data/app/pb_kits/playbook/pb_textarea/index.js +17 -0
  160. data/app/pb_kits/playbook/pb_textarea/textarea.rb +3 -4
  161. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +6 -4
  162. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +92 -16
  163. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +12 -1
  164. data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -1
  165. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +26 -18
  166. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +21 -1
  167. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +40 -8
  168. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +12 -4
  169. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +26 -18
  170. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +0 -21
  171. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +6 -28
  172. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +8 -0
  173. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +4 -0
  174. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +83 -1
  175. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +1 -1
  176. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +6 -1
  177. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +38 -2
  178. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +1 -0
  179. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +2 -4
  180. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +8 -3
  181. data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_with_context_dark.html.erb → _typeahead_with_context.html.erb} +10 -2
  182. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +1 -1
  183. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +13 -1
  184. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +111 -0
  185. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.md +1 -0
  186. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +1 -1
  187. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -0
  188. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -2
  189. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  190. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -1
  191. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +0 -1
  192. data/app/pb_kits/playbook/tokens/_border_radius.scss +21 -7
  193. data/app/pb_kits/playbook/utilities/_max_width.scss +15 -0
  194. data/app/pb_kits/playbook/utilities/_spacing.scss +20 -20
  195. data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
  196. data/app/pb_kits/playbook/vendor.js +3 -3
  197. data/lib/playbook.rb +1 -0
  198. data/lib/playbook/markdown/template_handler.rb +45 -0
  199. data/lib/playbook/props.rb +23 -1
  200. data/lib/playbook/version.rb +1 -1
  201. metadata +54 -72
  202. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +0 -3
  203. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +0 -12
  204. data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +0 -9
  205. data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +0 -77
  206. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -15
  207. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx +0 -40
  208. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx +0 -59
  209. data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb +0 -16
  210. data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +0 -15
  211. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +0 -21
  212. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +0 -21
  213. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +0 -10
  214. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +0 -19
  215. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -8
  216. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +0 -1
  217. data/app/pb_kits/playbook/pb_collapsible/index.js +0 -79
  218. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +0 -1
  219. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +0 -15
  220. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb +0 -5
  221. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +0 -26
  222. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb +0 -1
  223. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +0 -14
  224. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb +0 -5
  225. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +0 -28
  226. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +0 -21
  227. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +0 -43
  228. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +0 -5
  229. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +0 -17
  230. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +0 -68
  231. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +0 -3
  232. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +0 -18
  233. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +0 -42
  234. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +0 -66
  235. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +0 -4
  236. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +0 -17
  237. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +0 -29
  238. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +0 -38
  239. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +0 -23
  240. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +0 -37
  241. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +0 -21
  242. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +0 -35
  243. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +0 -32
  244. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +0 -97
  245. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +0 -43
  246. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +0 -105
  247. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +0 -25
  248. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +0 -51
  249. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +0 -13
  250. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +0 -54
  251. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +0 -25
  252. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +0 -57
  253. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +0 -14
  254. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +0 -54
  255. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +0 -54
  256. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +0 -73
  257. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +0 -177
  258. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +0 -209
  259. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +0 -123
  260. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +0 -146
  261. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +0 -21
  262. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +0 -36
@@ -0,0 +1 @@
1
+ `border_radius_md` is the card kit default
@@ -0,0 +1 @@
1
+ Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
@@ -9,6 +9,7 @@ examples:
9
9
  - card_content: Content Size
10
10
  - card_separator: Separator Card
11
11
  - card_border_none: No Border
12
+ - card_border_radius: Border Radius
12
13
  react:
13
14
  - card_light: Default
14
15
  - card_highlight: Highlight Cards
@@ -19,3 +20,4 @@ examples:
19
20
  - card_content: Content Size
20
21
  - card_separator: Separator Card
21
22
  - card_border_none: No Border
23
+ - card_border_radius: Border Radius
@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
7
7
  export { default as CardContent } from './_card_content.jsx'
8
8
  export { default as CardSeparator } from './_card_separator.jsx'
9
9
  export { default as CardBorderNone } from './_card_border_none.jsx'
10
+ export { default as CardBorderRadius } from './_card_border_radius.jsx'
@@ -49,6 +49,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
49
49
  <If condition={icon}>
50
50
  <Body
51
51
  color="light"
52
+ key={Math.random()}
52
53
  tag="span"
53
54
  >
54
55
  <Icon
@@ -2,10 +2,6 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_range_stacked_default: Default
5
- - date_range_stacked_dark: Dark
6
-
7
5
 
8
6
  react:
9
7
  - date_range_stacked_default: Default
10
- - date_range_stacked_dark: Dark
11
-
@@ -1,2 +1 @@
1
1
  export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'
2
- export { default as DateRangeStackedDark } from './_date_range_stacked_dark.jsx'
@@ -6,9 +6,6 @@ examples:
6
6
  - date_stacked_reverse: Day & Month Reverse
7
7
  - date_stacked_sizes: Sizes
8
8
  - date_stacked_align: Alignment
9
- - date_stacked_dark: Dark
10
-
11
-
12
9
 
13
10
  react:
14
11
  - date_stacked_default: Default
@@ -16,7 +13,3 @@ examples:
16
13
  - date_stacked_reverse: Day & Month Reverse
17
14
  - date_stacked_sizes: Sizes
18
15
  - date_stacked_align: Alignment
19
- - date_stacked_dark: Dark
20
-
21
-
22
-
@@ -3,5 +3,3 @@ export { default as DateStackedNotCurrentYear } from './_date_stacked_not_curren
3
3
  export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
4
4
  export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
5
5
  export { default as DateStackedAlign } from './_date_stacked_align.jsx'
6
- export { default as DateStackedDark } from './_date_stacked_dark.jsx'
7
-
@@ -53,13 +53,13 @@ const DateTime = (props: DateTimeProps) => {
53
53
  vertical="baseline"
54
54
  >
55
55
  <FormattedDate
56
- datetime={datetime}
57
56
  showDayOfWeek={showDayOfWeek}
58
57
  size={size}
59
58
  timeZone={timeZone}
59
+ value={datetime}
60
60
  />
61
61
  <Time
62
- date={new Date()}
62
+ date={datetime}
63
63
  marginLeft="sm"
64
64
  showIcon={showIcon}
65
65
  size={size}
@@ -4,7 +4,7 @@ import DateTime from '../_date_time.jsx'
4
4
  const DateTimeDefault = (props) => (
5
5
  <div>
6
6
  <DateTime
7
- datetime={new Date()}
7
+ datetime={new Date('2020-12-31 14:24:09')}
8
8
  showDayOfWeek
9
9
  showIcon
10
10
  {...props}
@@ -29,7 +29,7 @@ const DateTimeDefault = (props) => (
29
29
  <br />
30
30
 
31
31
  <DateTime
32
- datetime={new Date()}
32
+ datetime={new Date('2020-12-31 14:24:09 -0500')}
33
33
  {...props}
34
34
  />
35
35
  </div>
@@ -2,10 +2,6 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_time_stacked_default: Default
5
- - date_time_stacked_dark: Dark
6
-
7
5
 
8
6
  react:
9
7
  - date_time_stacked_default: Default
10
- - date_time_stacked_dark: Dark
11
-
@@ -1,2 +1 @@
1
1
  export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
2
- export { default as DateTimeStackedDark } from './_date_time_stacked_dark.jsx'
@@ -2,8 +2,6 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_year_stacked_default: Default
5
- - date_year_stacked_dark: Dark
6
5
 
7
6
  react:
8
7
  - date_year_stacked_default: Default
9
- - date_year_stacked_dark: Dark
@@ -1,2 +1 @@
1
1
  export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx'
2
- export { default as DateYearStackedDark } from './_date_year_stacked_dark.jsx'
@@ -6,6 +6,7 @@ import { globalProps } from '../utilities/globalProps.js'
6
6
 
7
7
  type DistributionBarProps = {
8
8
  className?: string,
9
+ colors: array,
9
10
  data?: string,
10
11
  id?: string,
11
12
  size?: "lg" | "sm",
@@ -18,13 +19,13 @@ const normalizeCharacters = (widths) => {
18
19
  })
19
20
  }
20
21
 
21
- const barValues = (normalizedValues) => {
22
+ const barValues = (normalizedValues, colors) => {
22
23
  const arrSum = (value) => value.reduce((a, b) => a + b, 0)
23
24
  const widthSum = arrSum(normalizedValues)
24
25
  return normalizedValues.map((value, i) => {
25
26
  return (
26
27
  <div
27
- className="pb_distribution_width"
28
+ className={classnames('pb_distribution_width', colors[i] ? `color_${colors[i]}` : '')}
28
29
  key={i}
29
30
  style={{ width: `${(value * 100) / widthSum}%` }}
30
31
  />
@@ -33,12 +34,16 @@ const barValues = (normalizedValues) => {
33
34
  }
34
35
 
35
36
  const DistributionBar = (props: DistributionBarProps) => {
36
- const { size = 'lg', widths = [1] } = props
37
+ const {
38
+ size = 'lg',
39
+ widths = [1],
40
+ colors = [],
41
+ } = props
37
42
  const normalizedValues = normalizeCharacters(widths)
38
43
 
39
44
  return (
40
45
  <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}>
41
- {barValues(normalizedValues)}
46
+ {barValues(normalizedValues, colors)}
42
47
  </div>
43
48
  )
44
49
  }
@@ -5,21 +5,26 @@
5
5
  $small_bar: 8px;
6
6
  $large_bar: 36px;
7
7
  display: flex;
8
+ border-radius: $large_bar;
9
+ overflow: auto;
8
10
  .pb_distribution_width {
9
11
  height: 100%;
10
12
  display: inline-block;
11
- @for $i from 1 through length($bar_colors) {
12
- &:nth-child(#{length($bar_colors)}n+#{$i}) {
13
- background-color: nth($bar_colors, $i);
13
+ @each $name, $color in $data_colors {
14
+ &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
15
+ background-color: $color;
16
+ }
17
+ &.color_#{$name} {
18
+ background-color: $color !important;
14
19
  }
15
20
  }
16
21
  &:first-child {
17
- border-top-left-radius: 18px;
18
- border-bottom-left-radius: 18px;
22
+ border-top-left-radius: $large_bar;
23
+ border-bottom-left-radius: $large_bar;
19
24
  }
20
25
  &:last-child {
21
- border-top-right-radius: 18px;
22
- border-bottom-right-radius: 18px;
26
+ border-top-right-radius: $large_bar;
27
+ border-bottom-right-radius: $large_bar;
23
28
  }
24
29
  }
25
30
  &[class*=_sm] {
@@ -11,7 +11,9 @@ module Playbook
11
11
  values: %w[lg sm],
12
12
  default: "lg"
13
13
  prop :widths, type: Playbook::Props::NumberArray,
14
- default: [1]
14
+ default: [1]
15
+ prop :colors, type: Playbook::Props::Array,
16
+ default: []
15
17
 
16
18
  def classname
17
19
  generate_classname("pb_distribution_bar", size)
@@ -27,6 +29,7 @@ module Playbook
27
29
  {
28
30
  size: size,
29
31
  widths: widths,
32
+ colors: colors,
30
33
  }
31
34
  end
32
35
  end
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("distribution_bar", props: {
2
+ widths: [4,5,3],
3
+ colors: ["data_7", "data_1", "data_6"]
4
+ }) %>
@@ -0,0 +1,18 @@
1
+ import React from 'react'
2
+ import DistributionBar from '../_distribution_bar.jsx'
3
+
4
+ const DistributionBarCustomColors = (props) => {
5
+ return (
6
+ <React.Fragment>
7
+ <div>
8
+ <DistributionBar
9
+ colors={['data_7', 'data_1', 'data_6']}
10
+ widths={[4, 5, 3]}
11
+ {...props}
12
+ />
13
+ </div>
14
+ </React.Fragment>
15
+ )
16
+ }
17
+
18
+ export default DistributionBarCustomColors
@@ -0,0 +1 @@
1
+ You can customize the order of the colors you would like to use by using the `colors` prop. Only the data colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
@@ -2,8 +2,10 @@ examples:
2
2
 
3
3
  rails:
4
4
  - distribution_bar_default: Default
5
+ - distribution_bar_custom_colors: Custom Colors
5
6
 
6
7
 
7
8
  react:
8
9
  - distribution_bar_default: Default
10
+ - distribution_bar_custom_colors: Custom Colors
9
11
 
@@ -1 +1,2 @@
1
1
  export { default as DistributionBarDefault } from './_distribution_bar_default.jsx'
2
+ export { default as DistributionBarCustomColors } from './_distribution_bar_custom_colors.jsx'
@@ -2,7 +2,7 @@
2
2
 
3
3
  import React from 'react'
4
4
  import { isEmpty, map, omitBy } from 'lodash'
5
- import { Caption, Title } from '../../'
5
+ import { Body, Caption, Title } from '../../'
6
6
 
7
7
  export type FilterDescription = {
8
8
  [key: string]: ?string | boolean,
@@ -20,6 +20,17 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
20
20
 
21
21
  return (
22
22
  <div className="maskContainer">
23
+ <If condition={isEmpty(filters)}>
24
+ <div className="filters">
25
+ <Body
26
+ color="light"
27
+ paddingLeft="xs"
28
+ size={4}
29
+ tag="h4"
30
+ text="No Filter Selected"
31
+ />
32
+ </div>
33
+ </If>
23
34
  <If condition={!isEmpty(filters)}>
24
35
  <div className="filters">
25
36
  <div className="left_gradient" />
@@ -28,7 +28,11 @@ const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
28
28
  shouldClosePopover={updateHide}
29
29
  show={!hide}
30
30
  >
31
- <div className="pb-form">{children}</div>
31
+ <div className="pb-form">
32
+ {typeof children === 'function'
33
+ ? children({ closePopover: () => (updateHide(true)) })
34
+ : children}
35
+ </div>
32
36
  </PbReactPopover>
33
37
  )
34
38
  }
@@ -0,0 +1,61 @@
1
+ import React from 'react'
2
+ import { Button, Filter, Flex, Select, TextInput } from '../../'
3
+
4
+ const FilterClosePopover = (props) => {
5
+ const options = [
6
+ { value: 'USA' },
7
+ { value: 'Canada' },
8
+ { value: 'Brazil' },
9
+ { value: 'Philippines' },
10
+ { value: 'A Galaxy Far Far Away Like Really Far Away' },
11
+ ]
12
+
13
+ return (
14
+ <Filter
15
+ {...props}
16
+ filters={{
17
+ 'Full Name': 'John Wick',
18
+ 'City': 'San Francisco',
19
+ }}
20
+ results={1}
21
+ sortOptions={{
22
+ popularity: 'Popularity',
23
+ // eslint-disable-next-line
24
+ manager_title: 'Manager\'s Title',
25
+ // eslint-disable-next-line
26
+ manager_name: 'Manager\'s Name',
27
+ }}
28
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
29
+ >
30
+ {({ closePopover }) => (
31
+ <form>
32
+ <TextInput
33
+ label="Full Name"
34
+ placeholder="Enter name"
35
+ />
36
+
37
+ <Select
38
+ blankSelection="Select One..."
39
+ label="Territory"
40
+ name="location"
41
+ options={options}
42
+ />
43
+ <Flex
44
+ spacing="between"
45
+ >
46
+ <Button
47
+ onClick={closePopover}
48
+ text="Apply"
49
+ />
50
+ <Button
51
+ text="Clear"
52
+ variant="secondary"
53
+ />
54
+ </Flex>
55
+ </form>
56
+ )}
57
+ </Filter>
58
+ )
59
+ }
60
+
61
+ export default FilterClosePopover
@@ -38,3 +38,44 @@
38
38
  <% end %>
39
39
  <% end %>
40
40
  <% end %>
41
+
42
+ <br>
43
+ <br>
44
+
45
+ <%=
46
+ pb_rails("filter", props: {
47
+ id: "def2",
48
+
49
+ sort_menu: [
50
+ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
51
+ { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
52
+ { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
53
+ ],
54
+ template: "default",
55
+ results: 0,
56
+ }) do
57
+ %>
58
+ <%
59
+ example_collection = [
60
+ OpenStruct.new(name: "Alabama", value: 1),
61
+ OpenStruct.new(name: "Alaska", value: 2),
62
+ OpenStruct.new(name: "Arizona", value: 3),
63
+ OpenStruct.new(name: "Arkansas", value: 4),
64
+ OpenStruct.new(name: "California", value: 5),
65
+ OpenStruct.new(name: "Colorado", value: 6),
66
+ OpenStruct.new(name: "Connecticut", value: 7),
67
+ OpenStruct.new(name: "Delaware", value: 8),
68
+ OpenStruct.new(name: "Florida", value: 9),
69
+ OpenStruct.new(name: "Georgia", value: 10),
70
+ ]
71
+ %>
72
+ <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
73
+ <%= form.text_field :example_text_field, props: { label: true } %>
74
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
75
+
76
+ <%= form.actions do |action| %>
77
+ <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
78
+ <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
79
+ <% end %>
80
+ <% end %>
81
+ <% end %>
@@ -10,51 +10,98 @@ const FilterDefault = (props) => {
10
10
  { value: 'A Galaxy Far Far Away Like Really Far Away' },
11
11
  ]
12
12
  return (
13
- <Filter
14
- double
15
- filters={{
16
- 'Full Name': 'John Wick',
17
- 'City': 'San Francisco',
18
- }}
19
- results={1}
20
- sortOptions={{
21
- popularity: 'Popularity',
22
- // eslint-disable-next-line
23
- manager_title: 'Manager\'s Title',
24
- // eslint-disable-next-line
25
- manager_name: 'Manager\'s Name',
26
- }}
27
- sortValue={[{ name: 'popularity', dir: 'desc' }]}
28
- {...props}
29
- >
30
- <TextInput
31
- label="Full Name"
32
- placeholder="Enter name"
33
- {...props}
34
- />
35
13
 
36
- <Select
37
- blankSelection="Select One..."
38
- label="Territory"
39
- name="location"
40
- options={options}
14
+ <>
15
+ <Filter
16
+ double
17
+ filters={{
18
+ 'Full Name': 'John Wick',
19
+ 'City': 'San Francisco',
20
+ }}
21
+ results={1}
22
+ sortOptions={{
23
+ popularity: 'Popularity',
24
+ // eslint-disable-next-line
25
+ manager_title: 'Manager\'s Title',
26
+ // eslint-disable-next-line
27
+ manager_name: 'Manager\'s Name',
28
+ }}
29
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
41
30
  {...props}
42
- />
43
- <Flex
44
- spacing="between"
31
+ >
32
+ <TextInput
33
+ label="Full Name"
34
+ placeholder="Enter name"
35
+ {...props}
36
+ />
37
+
38
+ <Select
39
+ blankSelection="Select One..."
40
+ label="Territory"
41
+ name="location"
42
+ options={options}
43
+ {...props}
44
+ />
45
+ <Flex
46
+ spacing="between"
47
+ {...props}
48
+ >
49
+ <Button
50
+ text="Apply"
51
+ {...props}
52
+ />
53
+ <Button
54
+ text="Clear"
55
+ variant="secondary"
56
+ {...props}
57
+ />
58
+ </Flex>
59
+ </Filter>
60
+
61
+ <br />
62
+
63
+ <Filter
64
+ double
65
+ results={1}
66
+ sortOptions={{
67
+ popularity: 'Popularity',
68
+ // eslint-disable-next-line
69
+ manager_title: 'Manager\'s Title',
70
+ // eslint-disable-next-line
71
+ manager_name: 'Manager\'s Name',
72
+ }}
73
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
45
74
  {...props}
46
75
  >
47
- <Button
48
- text="Apply"
76
+ <TextInput
77
+ label="Example Text Field"
78
+ placeholder="Enter Text"
49
79
  {...props}
50
80
  />
51
- <Button
52
- text="Clear"
53
- variant="secondary"
81
+
82
+ <Select
83
+ blankSelection="Select One..."
84
+ label="Example Collection Select"
85
+ name="Collection Select"
86
+ options={options}
54
87
  {...props}
55
88
  />
56
- </Flex>
57
- </Filter>
89
+ <Flex
90
+ spacing="between"
91
+ {...props}
92
+ >
93
+ <Button
94
+ text="Apply"
95
+ {...props}
96
+ />
97
+ <Button
98
+ text="Clear"
99
+ variant="secondary"
100
+ {...props}
101
+ />
102
+ </Flex>
103
+ </Filter>
104
+ </>
58
105
  )
59
106
  }
60
107