playbook_ui 13.21.0.pre.alpha.pbntr220improveexpansionspeed2451 → 13.22.0.pre.alpha.PLAY1297updatetextstyles2636

Sign up to get free protection for your applications and to get access to all the features.
Files changed (229) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +23 -17
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/README.md +2 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +15 -11
  9. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
  10. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -9
  13. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +83 -78
  14. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +14 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +19 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +12 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +2 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json +278 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +9 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +30 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +20 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +21 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +37 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +32 -0
  39. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +2 -1
  40. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +2 -1
  41. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -1
  42. data/app/pb_kits/playbook/pb_badge/badge.html.erb +2 -1
  43. data/app/pb_kits/playbook/pb_body/_body.scss +3 -3
  44. data/app/pb_kits/playbook/pb_body/body.html.erb +2 -1
  45. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +0 -7
  46. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +2 -1
  47. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -1
  48. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -1
  49. data/app/pb_kits/playbook/pb_button/button.rb +2 -3
  50. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -1
  51. data/app/pb_kits/playbook/pb_caption/caption.html.erb +2 -1
  52. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -1
  53. data/app/pb_kits/playbook/pb_card/card_body.html.erb +2 -1
  54. data/app/pb_kits/playbook/pb_card/card_header.html.erb +2 -1
  55. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +3 -1
  56. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +2 -1
  57. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +2 -1
  58. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +2 -1
  59. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -1
  60. data/app/pb_kits/playbook/pb_contact/contact.html.erb +2 -1
  61. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -1
  62. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +2 -1
  63. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -1
  64. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
  65. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -0
  66. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +4 -2
  67. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  68. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -1
  69. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +9 -7
  70. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
  71. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
  72. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +7 -0
  73. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +41 -0
  74. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
  75. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
  76. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -2
  77. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -2
  79. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +2 -1
  80. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +2 -1
  81. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -1
  82. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +2 -1
  83. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +3 -2
  84. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +2 -1
  85. data/app/pb_kits/playbook/pb_detail/detail.html.erb +2 -1
  86. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +2 -1
  87. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +3 -2
  88. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +3 -2
  89. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +5 -4
  90. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
  91. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -1
  92. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -1
  93. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +8 -3
  94. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  95. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  96. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  97. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  98. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +4 -3
  99. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  100. data/app/pb_kits/playbook/pb_flex/flex.html.erb +2 -1
  101. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -1
  102. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +34 -0
  103. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
  104. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
  105. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +2 -1
  106. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +2 -2
  107. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +2 -1
  108. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +2 -1
  109. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +2 -1
  110. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  111. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -1
  112. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -3
  113. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +14 -0
  114. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  115. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
  116. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
  117. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -1
  118. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  119. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -0
  120. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +2 -1
  121. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -2
  122. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +2 -1
  123. data/app/pb_kits/playbook/pb_image/image.html.erb +2 -1
  124. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +2 -1
  125. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +3 -2
  126. data/app/pb_kits/playbook/pb_layout/body.html.erb +2 -1
  127. data/app/pb_kits/playbook/pb_layout/footer.html.erb +2 -1
  128. data/app/pb_kits/playbook/pb_layout/header.html.erb +2 -1
  129. data/app/pb_kits/playbook/pb_layout/item.html.erb +2 -1
  130. data/app/pb_kits/playbook/pb_layout/layout.html.erb +2 -1
  131. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +2 -1
  132. data/app/pb_kits/playbook/pb_legend/legend.html.erb +2 -1
  133. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -1
  134. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -1
  135. data/app/pb_kits/playbook/pb_list/list.rb +0 -2
  136. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -1
  137. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  138. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +3 -2
  139. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
  140. data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx} +2 -2
  141. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
  142. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
  143. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  144. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +2 -1
  145. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -1
  146. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +2 -1
  147. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -2
  148. data/app/pb_kits/playbook/pb_nav/nav.html.erb +2 -1
  149. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +1 -10
  150. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  151. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +7 -13
  152. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
  153. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
  154. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -1
  155. data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
  156. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
  157. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +2 -1
  158. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  159. data/app/pb_kits/playbook/pb_person/person.html.erb +2 -1
  160. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +2 -1
  161. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
  162. data/app/pb_kits/playbook/pb_pill/pill.html.erb +2 -1
  163. data/app/pb_kits/playbook/pb_popover/popover.html.erb +2 -1
  164. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -1
  165. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -1
  166. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +2 -1
  167. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -1
  168. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -1
  169. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +2 -1
  170. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -1
  171. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +2 -1
  172. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -1
  173. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +2 -1
  174. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +2 -1
  175. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -1
  176. data/app/pb_kits/playbook/pb_source/source.html.erb +2 -1
  177. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -1
  178. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +2 -1
  179. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +2 -1
  180. data/app/pb_kits/playbook/pb_table/table.html.erb +4 -2
  181. data/app/pb_kits/playbook/pb_table/table_body.html.erb +5 -3
  182. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +5 -3
  183. data/app/pb_kits/playbook/pb_table/table_head.html.erb +5 -3
  184. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -3
  185. data/app/pb_kits/playbook/pb_table/table_row.html.erb +5 -3
  186. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  187. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
  188. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +2 -1
  189. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -1
  190. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +1 -1
  191. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +2 -1
  192. data/app/pb_kits/playbook/pb_time/time.html.erb +2 -1
  193. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +3 -2
  194. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -1
  195. data/app/pb_kits/playbook/pb_timeline/item.html.erb +2 -1
  196. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +2 -1
  197. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +2 -1
  198. data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
  199. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +2 -1
  200. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +2 -1
  201. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +39 -6
  202. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +17 -12
  203. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
  204. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
  205. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
  206. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  207. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +2 -1
  208. data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -1
  209. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +7 -0
  210. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -1
  211. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  212. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  213. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +2 -1
  214. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +2 -1
  215. data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
  216. data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
  217. data/dist/menu.yml +4 -0
  218. data/dist/playbook-rails.js +7 -7
  219. data/lib/playbook/bottom.rb +6 -3
  220. data/lib/playbook/kit_base.rb +18 -0
  221. data/lib/playbook/left.rb +6 -3
  222. data/lib/playbook/pb_doc_helper.rb +1 -1
  223. data/lib/playbook/position_props_css.rb +17 -0
  224. data/lib/playbook/props/percentage.rb +2 -2
  225. data/lib/playbook/right.rb +6 -3
  226. data/lib/playbook/top.rb +6 -3
  227. data/lib/playbook/version.rb +2 -2
  228. metadata +28 -41
  229. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
@@ -0,0 +1,21 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbAdvancedTable
5
+ class TableHeader < Playbook::KitBase
6
+ prop :column_definitions, type: Playbook::Props::Array,
7
+ default: []
8
+ prop :enable_toggle_expansion, type: Playbook::Props::Enum,
9
+ values: %w[all header none],
10
+ default: "header"
11
+
12
+ def classname
13
+ generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
14
+ end
15
+
16
+ def th_classname
17
+ generate_classname("table-header-cells", separator: " ")
18
+ end
19
+ end
20
+ end
21
+ end
@@ -0,0 +1,37 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <% object.column_definitions.each_with_index do |column, index| %>
7
+ <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
8
+ <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
9
+ <div style="padding-left: <%= depth * 1.25 %>em">
10
+ <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
11
+ <% if index.zero? && object.row[:children].present? %>
12
+ <button class="gray-icon expand-toggle-icon">
13
+ <%= pb_rails("icon", props: { icon: "circle-play", cursor: "pointer" }) %>
14
+ </button>
15
+ <% end %>
16
+ <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
17
+ <% if index.zero? %>
18
+ <% if object.depth.zero? %>
19
+ <%= object.row[column[:accessor].to_sym] %>
20
+ <% else %>
21
+ <% object.depth_accessors.each_with_index do |item, accessor_index| %>
22
+ <% if object.depth - 1 == accessor_index %>
23
+ <% key = item.to_sym %>
24
+ <%= object.row[key] %>
25
+ <% end %>
26
+ <% end %>
27
+ <% end %>
28
+ <% else %>
29
+ <%= object.row[column[:accessor].to_sym] %>
30
+ <% end %>
31
+ <% end %>
32
+ <% end %>
33
+ </div>
34
+ <% end %>
35
+ <% end %>
36
+ <% end %>
37
+ <% end %>
@@ -0,0 +1,32 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbAdvancedTable
5
+ class TableRow < Playbook::KitBase
6
+ prop :column_definitions, type: Playbook::Props::Array,
7
+ default: []
8
+ prop :row
9
+ prop :depth
10
+
11
+ def classname
12
+ generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
13
+ end
14
+
15
+ def td_classname
16
+ generate_classname("id-cell", "chrome-styles", separator: " ")
17
+ end
18
+
19
+ def depth_accessors
20
+ column_definitions.flat_map do |column|
21
+ column[:cellAccessors] if column.key?(:cellAccessors)
22
+ end.compact
23
+ end
24
+
25
+ private
26
+
27
+ def subrow_depth_classname
28
+ depth.positive? ? "depth-sub-row-#{depth}" : ""
29
+ end
30
+ end
31
+ end
32
+ end
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data.merge(initials: object.initials),
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
7
8
  <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
8
9
  <% end %>
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <% if object.tooltip_text.present? %>
7
8
  <%= pb_rails("tooltip", props: {
8
9
  trigger_element_id: object.tooltip_id,
@@ -7,7 +7,8 @@
7
7
  style: "background-image: url('#{object.image_url}');
8
8
  background-repeat: #{object.background_repeat};
9
9
  background-size: #{object.background_size};
10
- background-position: #{object.background_position};"
10
+ background-position: #{object.background_position};",
11
+ **combined_html_options
11
12
  ) do %>
12
13
  <%= content.presence %>
13
14
  <% end %>
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <span><%= object.text %></span>
7
8
  <% end %>
@@ -19,7 +19,7 @@
19
19
  }
20
20
  }
21
21
  b, strong {
22
- @include pb_title_4
22
+ font-weight: $bold;
23
23
  }
24
24
 
25
25
  a {
@@ -29,8 +29,8 @@
29
29
  }
30
30
  }
31
31
 
32
- em {
33
- font-weight: $bold;
32
+ em, i {
33
+ font-style: italic;
34
34
  }
35
35
 
36
36
  small {
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= object.content %>
7
8
  <% end %>
@@ -1,4 +1,3 @@
1
- @import "../tokens/border_radius";
2
1
  @import "../tokens/colors";
3
2
  @import "../tokens/opacity";
4
3
  @import "../tokens/spacing";
@@ -10,11 +9,7 @@
10
9
  display: inline-flex;
11
10
  align-items: center;
12
11
  justify-content: center;
13
- border-radius: $border_rad_light;
14
12
  padding: 0 $space_xs/2;
15
- border-width: 1px;
16
- border-style: solid;
17
- border-color: $card_light;
18
13
 
19
14
  svg {
20
15
  margin-right: 8px;
@@ -44,8 +39,6 @@
44
39
  }
45
40
 
46
41
  &.dark {
47
- border-width: 0;
48
-
49
42
  @each $color_name, $color_value in $status_colors {
50
43
  &[class*=_#{$color_name}] {
51
44
  background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do%>
5
+ aria: object.aria,
6
+ **combined_html_options) do%>
6
7
  <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
7
8
  <%= content.presence %>
8
9
  <% end %>
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -1,5 +1,6 @@
1
1
  <%= content_tag(object.tag,
2
- object.tag == "button" ? object.options : object.link_options) do %>
2
+ object.tag == "button" ? object.options : object.link_options,
3
+ **combined_html_options) do %>
3
4
  <% if object.variant === "reaction" %>
4
5
  <% if icon && object.valid_emoji(object.icon) %>
5
6
  <%= pb_rails("flex", props:{ align: "center" }) do %>
@@ -34,10 +34,8 @@ module Playbook
34
34
  default: "far"
35
35
 
36
36
  def options
37
- {
38
- aria: aria,
37
+ options = {
39
38
  class: classname,
40
- data: data,
41
39
  disabled: disabled,
42
40
  id: id,
43
41
  role: "button",
@@ -46,6 +44,7 @@ module Playbook
46
44
  value: value,
47
45
  form: form,
48
46
  }.compact
47
+ combined_html_options.merge!(options) if combined_html_options.present?
49
48
  end
50
49
 
51
50
  def target_attribute
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence || object.text %>
7
8
  <% end %>
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence || object.text %>
7
8
  <% end %>
@@ -3,7 +3,8 @@
3
3
  data: object.data,
4
4
  class: object.classname,
5
5
  aria: object.aria,
6
- dark: object.dark) do %>
6
+ dark: object.dark,
7
+ **combined_html_options) do %>
7
8
  <%= content.presence %>
8
9
  <% end %>
9
10
 
@@ -2,6 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -2,6 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -1,7 +1,9 @@
1
1
  <%= content_tag(:label, aria: object.aria,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options
6
+ ) do %>
5
7
  <%= content.presence || object.input %>
6
8
  <% if object.indeterminate %>
7
9
  <span class="pb_checkbox_indeterminate">
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
7
8
  <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
8
9
  <% end %>
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -2,6 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
 
7
8
  <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
8
9
  <%= pb_rails("flex/flex_item") do %>
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("body", props: {
7
8
  tag: "span",
8
9
  classname: "pb_contact_kit",
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("caption", props: object.caption_props) %>
7
8
 
8
9
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <% if object.stat_label.present? %>
7
8
  <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
8
9
  <% end %>
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
 
7
8
  <% if object.unstyled %>
8
9
  <!-- icon -->
@@ -10,7 +10,6 @@
10
10
 
11
11
  [class^=pb_date_picker_kit] {
12
12
  .input_wrapper {
13
- margin-bottom: $space_sm;
14
13
  position: relative;
15
14
 
16
15
  .flatpickr-wrapper {
@@ -76,4 +75,4 @@
76
75
  &:after {
77
76
  content: none;
78
77
  }
79
- }
78
+ }
@@ -135,6 +135,9 @@ useEffect(() => {
135
135
  }, scrollContainer)
136
136
  })
137
137
  const filteredProps = {...props}
138
+ if (filteredProps.marginBottom === undefined) {
139
+ filteredProps.marginBottom = "sm"
140
+ }
138
141
  delete filteredProps?.position
139
142
 
140
143
  const classes = classnames(
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  class: object.classname + object.error_class,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <div class="input_wrapper">
7
8
  <% if content.present? %>
8
9
  <%= content %>
@@ -16,6 +17,7 @@
16
17
  error: object.error,
17
18
  id: object.picker_id,
18
19
  label: object.hide_label ? nil : object.label,
20
+ margin_bottom: "none",
19
21
  name: object.name,
20
22
  placeholder: object.placeholder,
21
23
  required: object.required,
@@ -80,4 +82,4 @@
80
82
  }
81
83
  })
82
84
  <% end %>
83
- <% end %>
85
+ <% end %>
@@ -75,7 +75,8 @@ module Playbook
75
75
  default: [1900, 2100]
76
76
 
77
77
  def classname
78
- generate_classname("pb_date_picker_kit")
78
+ default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
79
+ generate_classname("pb_date_picker_kit") + default_margin_bottom
79
80
  end
80
81
 
81
82
  def date_picker_config
@@ -37,7 +37,7 @@ describe('DatePicker Kit', () => {
37
37
  )
38
38
 
39
39
  const kit = screen.getByTestId(testId)
40
- expect(kit).toHaveClass('pb_date_picker_kit')
40
+ expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
41
41
  })
42
42
 
43
43
  test('shows DatePicker date format m/d/Y', async () => {
@@ -1,4 +1,5 @@
1
1
  import flatpickr from 'flatpickr'
2
+ import { Instance } from "flatpickr/dist/types/instance"
2
3
  import { BaseOptions } from 'flatpickr/dist/types/options'
3
4
  import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
4
5
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
@@ -165,9 +166,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
165
166
  }
166
167
 
167
168
  // two way binding
168
- const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
169
- const yearChangeHook = () => {
170
- initialDropdown.value = initialPicker.currentYear
169
+ const yearChangeHook = (fp: Instance) => {
170
+ const yearInput = document.querySelector(`#year-${fp.input.id}`) as HTMLInputElement
171
+ yearInput.value = fp.currentYear?.toString()
171
172
  }
172
173
 
173
174
  // ===========================================================
@@ -199,11 +200,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
199
200
  if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
200
201
  onClose(selectedDates, dateStr)
201
202
  }],
202
- onChange: [(selectedDates, dateStr) => {
203
+ onChange: [(selectedDates, dateStr, fp) => {
204
+ yearChangeHook(fp)
203
205
  onChange(dateStr, selectedDates)
204
206
  }],
205
- onYearChange: [() => {
206
- yearChangeHook()
207
+ onYearChange: [(_selectedDates, _dateStr, fp) => {
208
+ yearChangeHook(fp)
207
209
  }],
208
210
  plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
209
211
  position,
@@ -248,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
248
250
  /* Reset date picker to default value on form.reset() */
249
251
  if (defaultDate){
250
252
  picker.setDate(defaultDate)
251
- yearChangeHook()
253
+ yearChangeHook(picker)
252
254
  }
253
255
  }, 0)
254
256
  })
@@ -10,13 +10,6 @@
10
10
  picker_id: "date-picker-default-date2"
11
11
  }) %>
12
12
 
13
- <%= pb_rails("date_picker", props: {
14
- default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
15
- label: "Default Date Range",
16
- mode: "range",
17
- picker_id: "date-picker-default-date3"
18
- }) %>
19
-
20
13
  <%= pb_rails("date_picker", props: {
21
14
  label: "Default Behavior",
22
15
  picker_id: "date-picker-default-date4"
@@ -16,13 +16,6 @@ const DatePickerDefaultDate = (props) => (
16
16
  pickerId="date-picker-default-date2"
17
17
  {...props}
18
18
  />
19
- <DatePicker
20
- defaultDate={[new Date(), new Date().fp_incr(7)]}
21
- label="Default Date Range"
22
- mode="range"
23
- pickerId="date-picker-default-date3"
24
- {...props}
25
- />
26
19
  <DatePicker
27
20
  label="Default Behavior"
28
21
  pickerId="date-picker-default-date4"
@@ -0,0 +1,7 @@
1
+
2
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-none", margin_bottom: "none"}) %>
3
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-xs", margin_bottom: "xs"}) %>
4
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-sm", margin_bottom: "sm"}) %>
5
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-md", margin_bottom: "md"}) %>
6
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-lg", margin_bottom: "lg"}) %>
7
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-xl", margin_bottom: "xl"}) %>
@@ -0,0 +1,41 @@
1
+
2
+ import React from 'react'
3
+
4
+ import DatePicker from '../_date_picker'
5
+
6
+ const DatePickerMarginBottom = (props) => (
7
+ <div>
8
+ <DatePicker
9
+ marginBottom="none"
10
+ pickerId="date-picker-none"
11
+ {...props}
12
+ />
13
+ <DatePicker
14
+ marginBottom="xs"
15
+ pickerId="date-picker-xs"
16
+ {...props}
17
+ />
18
+ <DatePicker
19
+ marginBottom="sm"
20
+ pickerId="date-picker-sm"
21
+ {...props}
22
+ />
23
+ <DatePicker
24
+ marginBottom="md"
25
+ pickerId="date-picker-md"
26
+ {...props}
27
+ />
28
+ <DatePicker
29
+ marginBottom="lg"
30
+ pickerId="date-picker-lg"
31
+ {...props}
32
+ />
33
+ <DatePicker
34
+ marginBottom="xl"
35
+ pickerId="date-picker-xl"
36
+ {...props}
37
+ />
38
+ </div>
39
+ )
40
+
41
+ export default DatePickerMarginBottom
@@ -2,4 +2,11 @@
2
2
  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
3
3
  mode: "range",
4
4
  picker_id: "date-picker-range"
5
+ }) %>
6
+
7
+ <%= pb_rails("date_picker", props: {
8
+ default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
9
+ label: "Default Date Range",
10
+ mode: "range",
11
+ picker_id: "date-picker-default-date3"
5
12
  }) %>
@@ -10,6 +10,13 @@ const DatePickerRange = (props) => (
10
10
  pickerId="date-picker-range"
11
11
  {...props}
12
12
  />
13
+ <DatePicker
14
+ defaultDate={[new Date(), new Date().fp_incr(7)]}
15
+ label="Default Date Range"
16
+ mode="range"
17
+ pickerId="date-picker-default-date3"
18
+ {...props}
19
+ />
13
20
  </div>
14
21
  )
15
22
 
@@ -7,7 +7,7 @@ examples:
7
7
  - date_picker_allow_input: Allow Input
8
8
  - date_picker_input: Input Field
9
9
  - date_picker_label: Label
10
- - date_picker_range: Range
10
+ # - date_picker_range: Range
11
11
  - date_picker_quick_pick_rails: Range (Quick Pick)
12
12
  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
13
13
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -20,6 +20,7 @@ examples:
20
20
  - date_picker_hooks: Hooks
21
21
  - date_picker_year_range: Year Range
22
22
  - date_picker_anti_patterns: Anti-Patterns
23
+ - date_picker_margin_bottom: Margin Bottom
23
24
  - date_picker_inline: Inline
24
25
  - date_picker_month_and_year: Month & Year Only
25
26
  - date_picker_week: Week
@@ -36,7 +37,7 @@ examples:
36
37
  - date_picker_label: Label
37
38
  - date_picker_on_change: onChange
38
39
  - date_picker_on_close: onClose
39
- - date_picker_range: Range
40
+ # - date_picker_range: Range
40
41
  - date_picker_quick_pick_react: Range (Quick Pick)
41
42
  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
42
43
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -48,6 +49,7 @@ examples:
48
49
  - date_picker_flatpickr_methods: Flatpickr Methods
49
50
  - date_picker_hooks: Hooks
50
51
  - date_picker_year_range: Year Range
52
+ - date_picker_margin_bottom: Margin Bottom
51
53
  - date_picker_inline: Inline
52
54
  - date_picker_month_and_year: Month & Year Only
53
55
  - date_picker_week: Week