playbook_ui 13.21.0 → 13.22.0.pre.alpha.playbookgemspecrailsversion2608

Sign up to get free protection for your applications and to get access to all the features.
Files changed (228) 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 +23 -37
  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 +84 -80
  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 +67 -61
  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.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +0 -7
  45. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +2 -1
  46. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -1
  47. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -1
  48. data/app/pb_kits/playbook/pb_button/button.rb +2 -3
  49. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -1
  50. data/app/pb_kits/playbook/pb_caption/caption.html.erb +2 -1
  51. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -1
  52. data/app/pb_kits/playbook/pb_card/card_body.html.erb +2 -1
  53. data/app/pb_kits/playbook/pb_card/card_header.html.erb +2 -1
  54. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +3 -1
  55. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +2 -1
  56. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +2 -1
  57. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +2 -1
  58. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -1
  59. data/app/pb_kits/playbook/pb_contact/contact.html.erb +2 -1
  60. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -1
  61. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +2 -1
  62. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -1
  63. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
  64. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -0
  65. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +4 -2
  66. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  67. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -1
  68. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +9 -7
  69. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
  70. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
  71. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +7 -0
  72. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +41 -0
  73. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
  74. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
  75. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -2
  76. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  77. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -2
  78. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +2 -1
  79. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +2 -1
  80. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -1
  81. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +2 -1
  82. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +3 -2
  83. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +2 -1
  84. data/app/pb_kits/playbook/pb_detail/detail.html.erb +2 -1
  85. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +2 -1
  86. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +3 -2
  87. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +3 -2
  88. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +5 -4
  89. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
  90. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -1
  91. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -1
  92. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +8 -3
  93. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  94. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  95. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  96. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  97. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +4 -3
  98. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  99. data/app/pb_kits/playbook/pb_flex/flex.html.erb +2 -1
  100. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -1
  101. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +34 -0
  102. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
  103. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
  104. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +2 -1
  105. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +2 -2
  106. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +2 -1
  107. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +2 -1
  108. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +2 -1
  109. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  110. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -1
  111. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -3
  112. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +14 -0
  113. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  114. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
  115. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
  116. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -1
  117. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  118. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -0
  119. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +2 -1
  120. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -2
  121. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +2 -1
  122. data/app/pb_kits/playbook/pb_image/image.html.erb +2 -1
  123. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +2 -1
  124. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +3 -2
  125. data/app/pb_kits/playbook/pb_layout/body.html.erb +2 -1
  126. data/app/pb_kits/playbook/pb_layout/footer.html.erb +2 -1
  127. data/app/pb_kits/playbook/pb_layout/header.html.erb +2 -1
  128. data/app/pb_kits/playbook/pb_layout/item.html.erb +2 -1
  129. data/app/pb_kits/playbook/pb_layout/layout.html.erb +2 -1
  130. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +2 -1
  131. data/app/pb_kits/playbook/pb_legend/legend.html.erb +2 -1
  132. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -1
  133. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -1
  134. data/app/pb_kits/playbook/pb_list/list.rb +0 -2
  135. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -1
  136. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  137. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +3 -2
  138. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
  139. 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
  140. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
  141. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
  142. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  143. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +2 -1
  144. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -1
  145. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +2 -1
  146. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -2
  147. data/app/pb_kits/playbook/pb_nav/nav.html.erb +2 -1
  148. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +1 -10
  149. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  150. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +7 -13
  151. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
  152. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
  153. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -1
  154. data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
  155. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
  156. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +2 -1
  157. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  158. data/app/pb_kits/playbook/pb_person/person.html.erb +2 -1
  159. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +2 -1
  160. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
  161. data/app/pb_kits/playbook/pb_pill/pill.html.erb +2 -1
  162. data/app/pb_kits/playbook/pb_popover/popover.html.erb +2 -1
  163. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -1
  164. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -1
  165. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +2 -1
  166. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -1
  167. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -1
  168. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +2 -1
  169. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -1
  170. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +2 -1
  171. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -1
  172. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +2 -1
  173. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +2 -1
  174. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -1
  175. data/app/pb_kits/playbook/pb_source/source.html.erb +2 -1
  176. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -1
  177. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +2 -1
  178. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +2 -1
  179. data/app/pb_kits/playbook/pb_table/table.html.erb +4 -2
  180. data/app/pb_kits/playbook/pb_table/table_body.html.erb +5 -3
  181. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +5 -3
  182. data/app/pb_kits/playbook/pb_table/table_head.html.erb +5 -3
  183. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -3
  184. data/app/pb_kits/playbook/pb_table/table_row.html.erb +5 -3
  185. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  186. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
  187. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +2 -1
  188. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -1
  189. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +1 -1
  190. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +2 -1
  191. data/app/pb_kits/playbook/pb_time/time.html.erb +2 -1
  192. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +3 -2
  193. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -1
  194. data/app/pb_kits/playbook/pb_timeline/item.html.erb +2 -1
  195. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +2 -1
  196. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +2 -1
  197. data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
  198. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +2 -1
  199. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +2 -1
  200. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +39 -6
  201. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +17 -12
  202. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
  203. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
  204. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
  205. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  206. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +2 -1
  207. data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -1
  208. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +7 -0
  209. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -1
  210. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  211. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  212. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +2 -1
  213. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +2 -1
  214. data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
  215. data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
  216. data/dist/menu.yml +4 -0
  217. data/dist/playbook-rails.js +7 -7
  218. data/lib/playbook/bottom.rb +6 -3
  219. data/lib/playbook/kit_base.rb +18 -0
  220. data/lib/playbook/left.rb +6 -3
  221. data/lib/playbook/pb_doc_helper.rb +1 -1
  222. data/lib/playbook/position_props_css.rb +17 -0
  223. data/lib/playbook/props/percentage.rb +2 -2
  224. data/lib/playbook/right.rb +6 -3
  225. data/lib/playbook/top.rb +6 -3
  226. data/lib/playbook/version.rb +2 -2
  227. metadata +29 -42
  228. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
@@ -1,7 +1,6 @@
1
1
  @import "../../pb_textarea/textarea_mixin";
2
2
 
3
3
  [class^=pb_date_picker_kit] {
4
- margin-bottom: $space_sm;
5
4
 
6
5
  .pb_date_picker_kit_label {
7
6
  margin-bottom: $space_xs;
@@ -65,4 +64,4 @@
65
64
  }
66
65
  }
67
66
  }
68
- }
67
+ }
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <div class="pb_date_range_inline_wrapper">
6
7
  <% if object.icon == true %>
7
8
  <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
 
6
7
  <%= pb_rails("flex", props: {vertical: "center"}) do %>
7
8
  <%= pb_rails("flex/flex_item") do %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
 
6
7
  <% if object.bold == false %>
7
8
 
@@ -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
 
7
8
  <%= pb_rails("flex", props: {
8
9
  orientation: "row",
@@ -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: {classname: "flex-container", vertical: "stretch"}) do %>
8
9
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
@@ -14,4 +15,4 @@
14
15
  <% end %>
15
16
  <% end %>
16
17
 
17
- <% end %>
18
+ <% end %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
6
7
  <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
7
8
  <% 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
  <%= object.content %>
7
8
  <% end %>
@@ -3,7 +3,8 @@
3
3
  aria: object.aria,
4
4
  data: object.data,
5
5
  id: object.id,
6
- class: object.classname) do %>
6
+ class: object.classname,
7
+ **combined_html_options) do %>
7
8
  <% if object.status === "" && object.title %>
8
9
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
9
10
  <% 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 || object.text %>
7
- <% end %>
8
+ <% end %>
@@ -1,14 +1,15 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- aria: object.aria) do %>
4
+ aria: object.aria,
5
+ **combined_html_options) do %>
5
6
  <% if object.confirm_button && object.cancel_button %>
6
7
  <div class="dialog-pseudo-footer"></div>
7
8
  <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
8
9
  <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
9
10
  <%= object.confirm_button %>
10
11
  <% end %>
11
- <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
12
+ <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
12
13
  <%= object.cancel_button %>
13
14
  <% end %>
14
15
  <% end %>
@@ -2,13 +2,14 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.sticky_header,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
7
8
  <%= content.presence || object.title %>
8
-
9
- <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
9
+
10
+ <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
10
11
  <%= pb_rails("icon", props:{icon: "times"}) %>
11
12
  </button>
12
13
  <% end %>
13
14
  <%= pb_rails("section_separator") %>
14
- <% end %>
15
+ <% end %>
@@ -1,6 +1,7 @@
1
1
  <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
2
2
 
3
3
  <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
4
+ <form>
4
5
  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
5
6
  <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
6
7
  <% end %>
@@ -12,4 +13,5 @@
12
13
 
13
14
  <% end %>
14
15
  <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
16
+ </form>
15
17
  <% end %>
@@ -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
  <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
7
8
  <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
8
9
  <%= pb_rails("text_input", props: {
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= object.wrapper do %>
6
7
  <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
7
8
  <% if (object.template != "sort_only") %>
@@ -36,6 +36,8 @@ $confirmation_toast_colors: (
36
36
  z-index: $z_9;
37
37
  display: flex;
38
38
  justify-content: space-around;
39
+ max-width: max-content;
40
+ width: 90%;
39
41
 
40
42
  &.top {
41
43
  top: $space_md;
@@ -82,9 +84,12 @@ $confirmation_toast_colors: (
82
84
 
83
85
  &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
84
86
  color: $white;
85
- margin: 0 $space_md 0 $space_md;
86
- max-width: 100%;
87
- white-space: break-spaces;
87
+ overflow: hidden;
88
+ display: -webkit-box;
89
+ -webkit-line-clamp: 3;
90
+ -webkit-box-orient: vertical;
91
+ white-space: normal;
92
+ text-align: left;
88
93
  }
89
94
  }
90
95
  }
@@ -98,6 +98,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
98
98
  (text && (
99
99
  <Title
100
100
  className="pb_fixed_confirmation_toast_text"
101
+ flex="1"
101
102
  size={4}
102
103
  text={text}
103
104
  />
@@ -1,5 +1,55 @@
1
+ <%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
2
+
1
3
  <%= pb_rails("fixed_confirmation_toast", props: {
4
+ classname: "multitoast-to-hide",
5
+ closeable: true,
6
+ id: "toast-short",
2
7
  multi_line: true,
3
- text: "Scan to Assign Selected Items. Click here to generate report",
8
+ text: "Multi-line is used when the given text will not fit on one line.",
4
9
  status: "tip",
10
+ vertical: "top",
11
+ horizontal: "center"
5
12
  }) %>
13
+
14
+ <%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
15
+
16
+ <%= pb_rails("fixed_confirmation_toast", props: {
17
+ classname: "multitoast-to-hide",
18
+ closeable: true,
19
+ id: "toast-long",
20
+ multi_line: true,
21
+ text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
22
+ status: "tip",
23
+ vertical: "top",
24
+ horizontal: "center"
25
+ }) %>
26
+
27
+
28
+ <script type="text/javascript">
29
+ const multitoasts = document.querySelectorAll(".multitoast-to-hide")
30
+ const multibuttons = document.querySelectorAll("button[data-multitoast]")
31
+
32
+ const hideMultiToasts = () => {
33
+ multitoasts.forEach((toast) => {
34
+ toast.style.display = "none"
35
+ })
36
+ }
37
+
38
+ multibuttons.forEach((button) => {
39
+ button.onclick = () => {
40
+ hideMultiToasts()
41
+ let toast = document.querySelector(button.getAttribute("data-multitoast"))
42
+
43
+ if (toast) {
44
+ toast.style.display = "flex"
45
+ }
46
+ }
47
+ })
48
+ </script>
49
+
50
+ <!-- hiding toast on page load -->
51
+ <style>
52
+ #toast-long, #toast-short {
53
+ display: none;
54
+ }
55
+ </style>
@@ -1,18 +1,69 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
 
3
+ import Button from '../../pb_button/_button'
3
4
  import FixedConfirmationToast from '../_fixed_confirmation_toast'
4
5
 
5
6
  const FixedConfirmationToastMultiLine = (props) => {
6
- return (
7
- <div>
8
- <FixedConfirmationToast
9
- multiLine
10
- status="tip"
11
- text="Scan to Assign Selected Items. Click here to generate report"
12
- {...props}
13
- />
14
- </div>
15
- )
7
+
8
+ const [openShort, setOpenShort] = useState(false)
9
+ const [openLong, setOpenLong] = useState(false)
10
+
11
+ const handleClickShort = () => {
12
+ setOpenShort(true)
13
+ }
14
+ const handleClickLong= () => {
15
+ setOpenLong(true)
16
+ }
17
+
18
+ const handleCloseShort = () => {
19
+ setOpenShort(false)
20
+ }
21
+
22
+ const handleCloseLong= () => {
23
+ setOpenLong(false)
24
+ }
25
+
26
+ return (
27
+ <>
28
+ <Button
29
+ onClick={handleClickShort}
30
+ text="Short Multiline"
31
+ variant="secondary"
32
+ {...props}
33
+ />
34
+ {' '}
35
+ <Button
36
+ onClick={handleClickLong}
37
+ text="Long Multiline"
38
+ variant="secondary"
39
+ {...props}
40
+ />
41
+
42
+ <FixedConfirmationToast
43
+ closeable
44
+ horizontal='center'
45
+ multiLine
46
+ onClose={handleCloseShort}
47
+ open={openShort}
48
+ status='tip'
49
+ text='Multi-line is used when the given text will not fit on one line.'
50
+ vertical='top'
51
+ {...props}
52
+ />
53
+
54
+ <FixedConfirmationToast
55
+ closeable
56
+ horizontal='center'
57
+ multiLine
58
+ onClose={handleCloseLong}
59
+ open={openLong}
60
+ status='tip'
61
+ text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
62
+ vertical='top'
63
+ {...props}
64
+ />
65
+ </>
66
+ )
16
67
  }
17
68
 
18
69
  export default FixedConfirmationToastMultiLine
@@ -75,8 +75,6 @@
75
75
  })
76
76
  }
77
77
 
78
- hideToasts()
79
-
80
78
  buttons.forEach((button) => {
81
79
  button.onclick = () => {
82
80
  hideToasts()
@@ -88,3 +86,10 @@
88
86
  }
89
87
  })
90
88
  </script>
89
+
90
+ <!-- hiding toast on page load -->
91
+ <style>
92
+ #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
93
+ display: none;
94
+ }
95
+ </style>
@@ -2,14 +2,15 @@
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("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
7
8
 
8
9
  <% if content %>
9
10
  <%= content %>
10
11
  <% elsif object.show_text? %>
11
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
12
+ <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
12
13
  <% end %>
13
14
 
14
- <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
15
+ <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
15
16
  <% end %>
@@ -46,7 +46,3 @@
46
46
  <%= pb_rails("flex/flex_item") do %>4<% end %>
47
47
  <% end %>
48
48
  </div>
49
-
50
-
51
-
52
- </div>
@@ -1,6 +1,7 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= content.presence %>
6
7
  <% end %>
@@ -2,6 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- style: object.style_value) do %>
5
+ style: object.style_value,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -57,6 +57,36 @@
57
57
  margin-bottom: 16px;
58
58
  }
59
59
 
60
+ & > [class^=pb_phone_number_input]:not(:last-child) {
61
+ .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
62
+ border-bottom-right-radius: 0;
63
+ border-top-right-radius: 0;
64
+ border-right-width: 0;
65
+ }
66
+ }
67
+
68
+ & > [class^=pb_phone_number_input]:not(:first-child) {
69
+ .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
70
+ border-bottom-left-radius: 0;
71
+ border-top-left-radius: 0;
72
+ }
73
+ }
74
+
75
+ & > div:not(:first-child) > [class^=pb_phone_number_input] {
76
+ .text_input {
77
+ border-bottom-left-radius: 0;
78
+ border-top-left-radius: 0;
79
+ }
80
+ }
81
+
82
+ & > div:not(:last-child) > [class^=pb_phone_number_input] {
83
+ .text_input {
84
+ border-bottom-right-radius: 0;
85
+ border-top-right-radius: 0;
86
+ border-right: none;
87
+ }
88
+ }
89
+
60
90
  &[class*=rails] > [class^=pb_date_picker_kit] {
61
91
  margin-bottom: 0px;
62
92
  }
@@ -82,6 +112,10 @@
82
112
  border-bottom-right-radius: 0;
83
113
  border-top-right-radius: 0;
84
114
  border-right-width: 0;
115
+ &:focus {
116
+ outline: $primary solid 1px;
117
+ outline-offset: -1px;
118
+ }
85
119
  }
86
120
  }
87
121
 
@@ -1,6 +1,7 @@
1
1
  <div>
2
+
2
3
  <%= pb_rails("form_group") do %>
3
- <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
4
+ <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
4
5
  <%= pb_rails("select", props: {
5
6
  blank_selection: "Genre",
6
7
  options: [
@@ -16,4 +17,19 @@
16
17
  ]
17
18
  }) %>
18
19
  <% end %>
20
+ <br>
21
+ <br>
22
+ <%= pb_rails("form_group") do %>
23
+ <%= pb_rails("select", props: {
24
+ blank_selection: "Phone",
25
+ options: [
26
+ { value: "Cell" },
27
+ { value: "Work" },
28
+ { value: "Home" },
29
+ ]
30
+ }) %>
31
+ <%= pb_rails("phone_number_input", props: {
32
+ id: "phone"
33
+ }) %>
34
+ <% end %>
19
35
  </div>
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
3
  import FormGroup from '../_form_group'
4
-
4
+ import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
5
5
  import Select from '../../pb_select/_select'
6
6
  import TextInput from '../../pb_text_input/_text_input'
7
7
 
@@ -18,11 +18,16 @@ const FormGroupSelect = (props) => {
18
18
  { value: 'Other' },
19
19
  ]
20
20
 
21
+ const phoneOptions = [
22
+ { value: 'Cell' },
23
+ { value: 'Work' },
24
+ { value: 'Home' },
25
+ ]
26
+
21
27
  return (
22
28
  <div>
23
29
  <FormGroup>
24
30
  <TextInput
25
- label="Artist"
26
31
  placeholder="Enter Artist Name"
27
32
  {...props}
28
33
  />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
32
37
  {...props}
33
38
  />
34
39
  </FormGroup>
40
+ <br />
41
+ <br />
42
+ <FormGroup>
43
+ <Select
44
+ blankSelection="Phone"
45
+ options={phoneOptions}
46
+ />
47
+ <PhoneNumberInput
48
+ id='default'
49
+ />
50
+ </FormGroup>
35
51
  </div>
36
52
  )
37
53
  }
@@ -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 %>
@@ -1,4 +1,4 @@
1
- <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class) do %>
1
+ <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
2
2
  <% if object.name.present? %>
3
3
  <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
4
4
  <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
@@ -9,4 +9,4 @@
9
9
  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
10
10
  <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
11
11
  <% end %>
12
- <% end %>
12
+ <% end %>
@@ -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
  <%= link_to object.url, target: object.link_option do %>
7
8
  <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
8
9
  <% end %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:span,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <mark>
6
7
  <%= content.presence || object.text %>
7
8
  </mark>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
6
7
  <% end %>
7
8
 
@@ -103,6 +103,7 @@ const Icon = (props: IconProps) => {
103
103
  flipMap[flip],
104
104
  (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
105
105
  (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
106
+ iconElement ? 'svg-inline--fa' : '',
106
107
  faClasses,
107
108
  globalProps(props),
108
109
  className
@@ -8,7 +8,8 @@
8
8
  <%= content_tag(:i, nil,
9
9
  id: object.id,
10
10
  data: object.data,
11
- class: object.classname
11
+ class: object.classname,
12
+ **combined_html_options
12
13
  ) %>
13
14
  <%= content_tag(:span, nil,
14
15
  aria: { label: "#{object.icon} icon" }.merge(object.aria),
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- # rubocop:disable Style/StringConcatenation, Style/HashLikeCase
3
+ # rubocop:disable Style/HashLikeCase
4
4
 
5
5
  require "open-uri"
6
6
 
@@ -89,7 +89,7 @@ module Playbook
89
89
  def render_svg
90
90
  doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
91
91
  svg = doc.at_css "svg"
92
- svg["class"] = "pb_custom_icon " + object.custom_icon_classname
92
+ svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
93
93
  svg["id"] = object.id
94
94
  svg["data"] = object.data
95
95
  svg["aria"] = object.aria
@@ -167,4 +167,4 @@ module Playbook
167
167
  end
168
168
  end
169
169
 
170
- # rubocop:enable Style/StringConcatenation, Style/HashLikeCase
170
+ # rubocop:enable Style/HashLikeCase