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
@@ -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
  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
7
8
  <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
8
9
  <%= content.presence %>
@@ -2,7 +2,8 @@
2
2
  aria: object.aria_attributes,
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
  <div class="progress_pills_status">
8
9
  <% object.with_status do |status| %>
@@ -3,7 +3,8 @@
3
3
  id: object.id,
4
4
  data: object.data_values,
5
5
  class: object.classname,
6
- style: object.style) do %>
6
+ style: object.style,
7
+ **combined_html_options) do %>
7
8
  <%= content_tag(:div, "",
8
9
  class: "progress_simple_value",
9
10
  style: object.value_style) %>
@@ -1,6 +1,7 @@
1
1
  <%= content_tag(:ul,
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 %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:li,
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="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
6
7
  <div class="circle">
7
8
  <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
@@ -4,7 +4,8 @@
4
4
  class: object.classname,
5
5
  data: object.data,
6
6
  id: object.id,
7
- value: object.value) do %>
7
+ value: object.value,
8
+ **combined_html_options) do %>
8
9
 
9
10
  <% if content.present? %>
10
11
  <%= content %>
@@ -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.orientation === 'horizontal' %>
7
8
  <% if content %>
8
9
  <%= content %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  aria: object.aria,
3
3
  data: object.data,
4
- class: object.classnames) do %>
4
+ class: object.classnames,
5
+ **combined_html_options) do %>
5
6
  <% if object.label %>
6
7
  <label class="pb_select_kit_label" for="<%= object.name %>">
7
8
  <%= pb_rails("caption", props: { text: object.label }) %>
@@ -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.multi %>
7
8
  <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
@@ -1,6 +1,7 @@
1
1
  <%= content_tag(:div,
2
2
  data: object.data,
3
- class: object.classname) do %>
3
+ class: object.classname,
4
+ **combined_html_options) do %>
4
5
 
5
6
  <%= pb_rails("selectable_card", props: {
6
7
  input_id: object.input_id,
@@ -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.inputs == "disabled" %>
7
8
 
@@ -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("list") do %>
7
8
  <% object.items.each do |item| %>
8
9
  <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
@@ -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.variant == "radio"%>
7
8
  <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
8
9
  <% if content.present? %>
@@ -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__source_layout">
6
7
  <% if !object.hide_icon %>
7
8
  <% if object.show_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
  <% if layout_option == "number" %>
6
7
  <% case object.size %>
7
8
  <% when "xs", "sm" %>
@@ -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("body", props: { status: object.status }) do %>
6
7
  <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
7
8
  <%= "#{object.value}%" if object.value %>
@@ -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_stat_value_wrapper">
6
7
  <%= pb_rails "title", props: {
7
8
  classname: "pb_stat_value_kit",
@@ -4,7 +4,8 @@
4
4
  aria: object.aria,
5
5
  class: object.classname,
6
6
  data: object.data,
7
- id: object.id) do %>
7
+ id: object.id,
8
+ **combined_html_options) do %>
8
9
  <%= content.presence %>
9
10
  <% end %>
10
11
  <% else %>
@@ -12,7 +13,8 @@
12
13
  aria: object.aria,
13
14
  class: object.classname,
14
15
  data: object.data,
15
- id: object.id) do %>
16
+ id: object.id,
17
+ **combined_html_options) do %>
16
18
  <%= content.presence %>
17
19
  <% end %>
18
20
  <% end %>
@@ -3,7 +3,8 @@
3
3
  aria: object.aria,
4
4
  class: object.classname,
5
5
  data: object.data,
6
- id: object.id) do %>
6
+ id: object.id,
7
+ **combined_html_options) do %>
7
8
  <%= content.presence %>
8
9
  <% end %>
9
10
  <% else %>
@@ -11,7 +12,8 @@
11
12
  aria: object.aria,
12
13
  class: object.classname,
13
14
  data: object.data,
14
- id: object.id) do %>
15
+ id: object.id,
16
+ **combined_html_options) do %>
15
17
  <%= content.presence %>
16
18
  <% end %>
17
- <% end %>
19
+ <% end %>
@@ -3,7 +3,8 @@
3
3
  aria: object.aria,
4
4
  class: object.classname,
5
5
  data: object.data,
6
- id: object.id) do %>
6
+ id: object.id,
7
+ **combined_html_options) do %>
7
8
  <%= content.presence || object.text %>
8
9
  <% end %>
9
10
  <% else %>
@@ -11,7 +12,8 @@
11
12
  aria: object.aria,
12
13
  class: object.classname,
13
14
  data: object.data,
14
- id: object.id) do %>
15
+ id: object.id,
16
+ **combined_html_options) do %>
15
17
  <%= content.presence || object.text %>
16
18
  <% end %>
17
- <% end %>
19
+ <% end %>
@@ -3,7 +3,8 @@
3
3
  aria: object.aria,
4
4
  class: object.classname,
5
5
  data: object.data,
6
- id: object.id) do %>
6
+ id: object.id,
7
+ **combined_html_options) do %>
7
8
  <%= content.presence %>
8
9
  <% end %>
9
10
  <% else %>
@@ -11,7 +12,8 @@
11
12
  aria: object.aria,
12
13
  class: object.classname,
13
14
  data: object.data,
14
- id: object.id) do %>
15
+ id: object.id,
16
+ **combined_html_options) do %>
15
17
  <%= content.presence %>
16
18
  <% end %>
17
- <% end %>
19
+ <% end %>
@@ -4,7 +4,8 @@
4
4
  aria: object.aria,
5
5
  class: object.classname,
6
6
  data: object.data,
7
- id: "pb-th#{object.id}" ) do %>
7
+ id: "pb-th#{object.id}",
8
+ **combined_html_options) do %>
8
9
  <% unless sorting_style? %>
9
10
  <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
10
11
  <%= content.presence || object.text %>
@@ -51,7 +52,8 @@
51
52
  aria: object.aria,
52
53
  class: object.classname,
53
54
  data: object.data,
54
- id: object.id) do %>
55
+ id: object.id,
56
+ **combined_html_options) do %>
55
57
  <%= content.presence || object.text %>
56
58
  <% end %>
57
- <% end %>
59
+ <% end %>
@@ -3,7 +3,8 @@
3
3
  aria: object.aria,
4
4
  class: object.classname,
5
5
  data: object.data,
6
- id: object.id) do %>
6
+ id: object.id,
7
+ **combined_html_options) do %>
7
8
  <%= content.presence %>
8
9
  <% end %>
9
10
  <% else %>
@@ -11,7 +12,8 @@
11
12
  aria: object.aria,
12
13
  class: object.classname,
13
14
  data: object.data,
14
- id: object.id) do %>
15
+ id: object.id,
16
+ **combined_html_options) do %>
15
17
  <%= content.presence %>
16
18
  <% end %>
17
- <% end %>
19
+ <% end %>
@@ -3,7 +3,6 @@
3
3
  @import "../tokens/colors";
4
4
 
5
5
  [class^="pb_text_input_kit"] {
6
- margin-bottom: $space_sm;
7
6
  .pb_text_input_kit_label {
8
7
  margin-bottom: $space_xs;
9
8
  display: block;
@@ -60,6 +60,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
60
60
  const ariaProps = buildAriaProps(aria)
61
61
  const dataProps = buildDataProps(data)
62
62
  const htmlProps = buildHtmlProps(htmlOptions)
63
+ const filteredProps = {...props}
64
+ if (filteredProps.marginBottom === undefined) {
65
+ filteredProps.marginBottom = "sm"
66
+ }
63
67
 
64
68
  const { alignment, border, icon } = addOn
65
69
  const addOnAlignment = alignment === 'left' ? 'left' : 'right'
@@ -74,7 +78,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
74
78
  'pb_text_input_kit',
75
79
  inline ? 'inline' : "",
76
80
  error ? 'error' : "",
77
- globalProps(props),
81
+ globalProps(filteredProps),
78
82
  className,
79
83
  ])
80
84
  const addOnIcon = (
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
- data: object.data) do %>
4
+ data: object.data,
5
+ **combined_html_options) do %>
5
6
  <% if object.label.present? %>
6
7
  <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
7
8
  <% end %>
@@ -26,7 +26,8 @@ module Playbook
26
26
  nested_kit: Playbook::PbTextInput::AddOn
27
27
 
28
28
  def classname
29
- generate_classname("pb_text_input_kit") + error_class + inline_class
29
+ default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
30
+ generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
30
31
  end
31
32
 
32
33
  def input_tag
@@ -16,7 +16,7 @@ test('returns namespaced class name', () => {
16
16
  )
17
17
 
18
18
  const kit = screen.getByTestId(testId)
19
- expect(kit).toHaveClass(kitClass)
19
+ expect(kit).toHaveClass(`${kitClass} mb_sm`)
20
20
  })
21
21
 
22
22
  test('returns additional class name', () => {
@@ -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
  <% if object.label.present? %>
6
7
  <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
7
8
  <% 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
  <%
6
7
  # convert deprecated prop values
7
8
  size = object.size
@@ -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_time_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: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
@@ -13,4 +14,4 @@
13
14
  <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
14
15
  <% end %>
15
16
  </div>
16
- <% end %>
17
+ <% 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
 
6
7
  <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
7
8
  <time>
@@ -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
  <div class="pb_timeline_item_left_block">
7
8
  <% if object.date.present? %>
@@ -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,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
  <% if object.unstyled %>
8
9
  <div><%= object.timestamp_text %></div>
@@ -2,5 +2,6 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %><%= content.presence || object.text %><% end %>
6
-
5
+ class: object.classname,
6
+ **combined_html_options) do %><%= content.presence || object.text %><% end %>
7
+
@@ -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("title", props: {
7
8
  dark: object.dark,
8
9
  size: object.title_size,
@@ -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.title, size: 4 }) %>
6
7
  <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
7
8
  <% end %>
@@ -2,16 +2,16 @@
2
2
 
3
3
  $color_checkbox_success: $data_1;
4
4
  $color_checkbox_default: $border_light;
5
+ $color_disabled: darken($border_light, 20%);
5
6
  $transition: .2s ease-in-out;
6
7
 
7
8
  [class^=pb_toggle_kit] {
8
9
  position: relative;
9
10
  $width: 44px;
10
- $height: $width/2;
11
+ $height: $width / 2;
11
12
  $border_success: 3px solid $color_checkbox_success;
12
13
  $border_default: 3px solid $color_checkbox_default;
13
14
 
14
-
15
15
  .pb_toggle_wrapper {
16
16
  .pb_toggle_control {
17
17
  cursor: pointer;
@@ -23,10 +23,11 @@ $transition: .2s ease-in-out;
23
23
  border: $border_default;
24
24
  position: relative;
25
25
  box-sizing: content-box;
26
+
26
27
  &:after {
27
28
  transition: $transition;
28
29
  content: "";
29
- width: $width/2 - 4px;
30
+ width: $width / 2 - 4px;
30
31
  height: $height - 4px;
31
32
  background-color: $color_checkbox_default;
32
33
  border-radius: 50%;
@@ -34,23 +35,55 @@ $transition: .2s ease-in-out;
34
35
  top: 2px;
35
36
  left: 2px;
36
37
  }
38
+
37
39
  &:hover {
38
40
  border: $border_success;
39
- &:after{
41
+
42
+ &:after {
40
43
  background-color: $color_checkbox_success;
41
44
  }
42
45
  }
43
46
  }
47
+
44
48
  input {
45
49
  display: none;
50
+
51
+ &:disabled + .pb_toggle_control {
52
+ cursor: not-allowed;
53
+ opacity: 0.5;
54
+ border: 3px solid $border_light;
55
+ background-color: $border_light;
56
+
57
+ &:after {
58
+ background-color: darken($neutral, 15%);
59
+ }
60
+ }
61
+ }
62
+
63
+ input:checked {
64
+ display: none;
65
+
46
66
  &:checked + .pb_toggle_control {
47
67
  border: $border_success;
48
68
  background-color: $color_checkbox_success;
49
- &:after{
50
- left: $width/2 + 2px;
69
+
70
+ &:after {
71
+ left: $width / 2 + 2px;
51
72
  background-color: $white;
52
73
  }
53
74
  }
75
+
76
+ &:disabled + .pb_toggle_control {
77
+ cursor: not-allowed;
78
+ opacity: 0.5;
79
+ border: 3px solid $text_lt_light;
80
+ background-color: $text_lt_light;
81
+
82
+ &:after {
83
+ background-color: $neutral;
84
+ }
85
+ }
54
86
  }
55
87
  }
56
88
  }
89
+
@@ -17,6 +17,7 @@ type Props = {
17
17
  children?: React.ReactNode | React.ReactNode[],
18
18
  className?: string,
19
19
  data?: { [key: string]: string },
20
+ disabled?: boolean,
20
21
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
21
22
  id?: string,
22
23
  name?: string,
@@ -31,10 +32,13 @@ const Toggle = ({
31
32
  children,
32
33
  className,
33
34
  data = {},
35
+ disabled = false,
34
36
  id,
35
37
  htmlOptions = {},
36
38
  name,
37
- onChange = () => { },
39
+ onChange = (): void => {
40
+ // Function body here
41
+ },
38
42
  size = 'sm',
39
43
  value,
40
44
  ...props
@@ -53,23 +57,24 @@ const Toggle = ({
53
57
 
54
58
  return (
55
59
  <div
56
- {...ariaProps}
57
- {...dataProps}
58
- {...htmlProps}
59
- className={classnames(css, globalProps(props), className)}
60
- id={id}
60
+ {...ariaProps}
61
+ {...dataProps}
62
+ {...htmlProps}
63
+ className={classnames(css, globalProps(props), className)}
64
+ id={id}
61
65
  >
62
66
  <label className="pb_toggle_wrapper">
63
67
  {children && children}
64
68
 
65
69
  {!children &&
66
70
  <input
67
- {...props}
68
- defaultChecked={checked}
69
- name={name}
70
- onChange={onChange}
71
- type="checkbox"
72
- value={value}
71
+ {...props}
72
+ defaultChecked={checked}
73
+ disabled={disabled}
74
+ name={name}
75
+ onChange={onChange}
76
+ type="checkbox"
77
+ value={value}
73
78
  />
74
79
  }
75
80
  <div className="pb_toggle_control" />
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("toggle", props: {
2
+ checked: true,
3
+ disabled: true
4
+ }) %>
5
+
6
+ <br>
7
+
8
+ <%= pb_rails("toggle", props: {
9
+ checked: false,
10
+ disabled: true
11
+ }) %>