playbook_ui 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12820

Sign up to get free protection for your applications and to get access to all the features.
Files changed (242) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +14 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +10 -14
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/index.js +78 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -9
  11. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +4 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +2 -6
  13. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +5 -8
  14. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +44 -0
  15. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +86 -21
  16. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +26 -3
  17. data/app/pb_kits/playbook/pb_avatar/avatar.rb +41 -0
  18. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
  19. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
  20. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
  21. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
  22. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  23. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
  24. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  25. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -6
  26. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
  27. data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -6
  28. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -1
  29. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  30. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
  31. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
  32. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -7
  33. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  34. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  35. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
  36. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -7
  37. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
  38. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
  39. data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -6
  40. data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -6
  41. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
  42. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
  43. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
  44. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
  45. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
  46. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  47. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  48. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  49. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  50. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -6
  51. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -6
  52. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -6
  53. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -7
  54. data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -6
  55. data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -6
  56. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  57. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  58. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  59. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  60. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -6
  61. data/app/pb_kits/playbook/pb_date/date.html.erb +1 -6
  62. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -6
  63. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  64. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  65. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  66. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -5
  67. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -5
  68. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  69. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  70. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  71. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -5
  72. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -6
  73. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -7
  74. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -5
  75. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
  76. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  77. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
  78. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
  79. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
  80. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -6
  81. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +101 -35
  82. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +93 -26
  83. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  84. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +4 -22
  85. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  86. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  87. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  88. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  89. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
  90. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  91. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
  92. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  93. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  94. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -4
  95. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  96. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  97. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +6 -9
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  103. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  105. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  106. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  107. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  108. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  109. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  110. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +16 -2
  111. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -0
  112. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +20 -0
  113. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +19 -0
  114. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
  115. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +15 -0
  116. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
  117. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +22 -0
  118. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
  119. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +38 -0
  120. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
  121. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  122. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +14 -9
  123. data/app/pb_kits/playbook/pb_dropdown/index.js +152 -0
  124. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
  125. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
  126. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +22 -8
  127. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +56 -29
  128. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +130 -68
  129. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
  130. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
  131. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
  132. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -6
  133. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -5
  134. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -6
  135. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
  136. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -6
  137. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -6
  138. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  139. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
  140. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
  141. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
  142. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -7
  143. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -6
  144. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -6
  145. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -6
  146. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -6
  147. data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -5
  148. data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -5
  149. data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -5
  150. data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -5
  151. data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -5
  152. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -5
  153. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -8
  154. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -8
  155. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  156. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  157. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  158. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  159. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  160. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  161. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  162. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -7
  163. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -0
  164. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +14 -0
  165. data/app/pb_kits/playbook/pb_message/message.html.erb +1 -6
  166. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -6
  167. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  168. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -6
  169. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -6
  170. data/app/pb_kits/playbook/pb_nav/item.html.erb +3 -14
  171. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -6
  172. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -6
  173. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -6
  174. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  175. data/app/pb_kits/playbook/pb_person/person.html.erb +7 -12
  176. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -6
  177. data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -6
  178. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  179. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -6
  180. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  181. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  182. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  183. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  184. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  185. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +3 -6
  186. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  187. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  188. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
  189. data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
  190. data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
  191. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  192. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  193. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  194. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  195. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  196. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  197. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  198. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -8
  199. data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
  200. data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
  201. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  202. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  203. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -6
  204. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -5
  205. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -5
  206. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -4
  207. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -5
  208. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -6
  209. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -6
  210. data/app/pb_kits/playbook/pb_source/source.html.erb +1 -5
  211. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -5
  212. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -5
  213. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -5
  214. data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
  215. data/app/pb_kits/playbook/pb_table/table_body.html.erb +6 -16
  216. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +6 -16
  217. data/app/pb_kits/playbook/pb_table/table_head.html.erb +6 -16
  218. data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -13
  219. data/app/pb_kits/playbook/pb_table/table_row.html.erb +6 -16
  220. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
  221. data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
  222. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -5
  223. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -5
  224. data/app/pb_kits/playbook/pb_timeline/item.html.erb +3 -7
  225. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -5
  226. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -6
  227. data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
  228. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -6
  229. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -5
  230. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
  231. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
  232. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -5
  233. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  234. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  235. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -6
  236. data/app/pb_kits/playbook/playbook-rails.js +6 -0
  237. data/dist/menu.yml +1 -1
  238. data/dist/playbook-rails.js +6 -6
  239. data/lib/playbook/kit_base.rb +1 -1
  240. data/lib/playbook/version.rb +2 -2
  241. metadata +65 -8
  242. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -6,6 +6,7 @@ examples:
6
6
  - checkbox_error: Default w/ Error
7
7
  - checkbox_options: Checkbox w/ Options
8
8
  - checkbox_indeterminate: Indeterminate Checkbox
9
+ - checkbox_disabled: Disabled Checkbox
9
10
 
10
11
  react:
11
12
  - checkbox_default: Default
@@ -13,6 +14,7 @@ examples:
13
14
  - checkbox_custom: Custom Checkbox
14
15
  - checkbox_error: Default w/ Error
15
16
  - checkbox_indeterminate: Indeterminate Checkbox
17
+ - checkbox_disabled: Disabled Checkbox
16
18
 
17
19
  swift:
18
20
  - checkbox_default_swift: Default
@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
3
3
  export { default as CheckboxError } from './_checkbox_error.jsx'
4
4
  export { default as CheckboxChecked } from './_checkbox_checked.jsx'
5
5
  export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
6
+ export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= 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 %>
8
3
  <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
9
4
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,10 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
-
1
+ <%= pb_content_tag do %>
8
2
  <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
9
3
  <%= pb_rails("flex/flex_item") do %>
10
4
  <%= content.presence %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= pb_rails("body", props: {
8
3
  tag: "span",
9
4
  classname: "pb_contact_kit",
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= pb_rails("caption", props: object.caption_props) %>
8
3
 
9
4
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
@@ -0,0 +1,43 @@
1
+ [!Currency-Alignment](https://github.com/powerhome/playbook-swift/assets/112719604/d74a9c5a-c606-4cd0-bf70-20e9297ec246)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ HStack {
6
+ PBCurrency(
7
+ amount: "2,000",
8
+ decimalAmount: ".50",
9
+ label: "left",
10
+ size: .title4,
11
+ symbol: "en_US",
12
+ isEmphasized: true,
13
+ alignment: .leading
14
+ )
15
+ }
16
+ .frame(maxWidth: .infinity, alignment: .leading)
17
+ HStack {
18
+ PBCurrency(
19
+ amount: "342",
20
+ decimalAmount: ".00",
21
+ label: "center",
22
+ size: .title4,
23
+ symbol: "en_EU",
24
+ isEmphasized: true,
25
+ alignment: .center
26
+ )
27
+ }
28
+ .frame(maxWidth: .infinity, alignment: .center)
29
+ HStack {
30
+ PBCurrency(
31
+ amount: "45",
32
+ label: "right",
33
+ size: .title4,
34
+ symbol: "en_US",
35
+ unit: "/mo",
36
+ isEmphasized: true,
37
+ hasUnit: true,
38
+ alignment: .trailing
39
+ )
40
+ }
41
+ .frame(maxWidth: .infinity, alignment: .trailing)
42
+ }
43
+ ```
@@ -0,0 +1,12 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **amount** | `String` | Allows user to enter a currency amount | | |
5
+ | **decimalAmount** | `String` | Allows user to enter a decimal amount | | |
6
+ | **label** | `String` | Allows user to a descriptive label value | | |
7
+ | **size** | `PBFont` | Allows user to choose the size of the amount that is being displayed | `.title4` | `title4` `title3` `title4` |
8
+ | **symbol** | `String` | A string value used to produce the desired currency symbol | | |
9
+ | **unit** | `String` | Allows user to add a unit of measure instead of a decimal amount | | |
10
+ | **alignment** | `Alignment` | Sets alignment of content | `.leading` | `leading` `center` `trailing` |
11
+ | **isEmphasized** | `Bool` | Determines whether or not the currency that is being displayed is emphasized | `false` | `true` `false` |
12
+ | **hasUnit** | `Bool` | Determines whether or not the currency has a decimal value or a unit of measure | `false` | `true` `false` |
@@ -0,0 +1,31 @@
1
+ ![Currency-Default](https://github.com/powerhome/playbook-swift/assets/54749071/bf3810f9-6dd2-4bdd-b32a-14109f3a0b9a)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBCurrency(
6
+ amount: "2,000",
7
+ decimalAmount: ".50",
8
+ label: "small",
9
+ size: .title4,
10
+ symbol: "en_US",
11
+ isEmphasized: true
12
+ )
13
+ PBCurrency(
14
+ amount: "342",
15
+ decimalAmount: ".00",
16
+ label: "medium",
17
+ size: .title3,
18
+ symbol: "en_EU",
19
+ isEmphasized: true
20
+ )
21
+ PBCurrency(
22
+ amount: "45",
23
+ label: "large",
24
+ size: .title1,
25
+ symbol: "en_US",
26
+ unit: "/mo",
27
+ isEmphasized: true,
28
+ hasUnit: true
29
+ )
30
+ }
31
+ ```
@@ -17,3 +17,8 @@ examples:
17
17
  - currency_abbreviated: Abbreviate Larger Amounts
18
18
  - currency_matching_decimals: Matching Decimals
19
19
  - currency_unstyled: Unstyled
20
+
21
+ swift:
22
+ - currency_size_swift: Size
23
+ - currency_alignment_swift: Alignment
24
+ - currency_props_swift: ""
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% if object.stat_label.present? %>
8
3
  <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
9
4
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
 
8
3
  <% if object.unstyled %>
9
4
  <!-- icon -->
@@ -1,9 +1,5 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname + object.error_class,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:div,
2
+ class: object.classname + object.error_class) do %>
7
3
  <div class="input_wrapper">
8
4
  <% if content.present? %>
9
5
  <%= content %>
@@ -1,3 +1,5 @@
1
1
  Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
2
2
 
3
- The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
3
+ The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
4
+
5
+ NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.
@@ -1,3 +1,5 @@
1
1
  The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
2
2
 
3
- The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
3
+ The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
4
+
5
+ NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.
@@ -1 +1 @@
1
- Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
1
+ Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <div class="pb_date_range_inline_wrapper">
7
3
  <% if object.icon == true %>
8
4
  <%= 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,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
 
7
3
  <%= pb_rails("flex", props: {vertical: "center"}) do %>
8
4
  <%= pb_rails("flex/flex_item") do %>
@@ -0,0 +1,14 @@
1
+ ![Date-Range-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/ccb85e5d-0f6d-4ced-8154-aa9dfa72a131)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBDateRangeStacked(
6
+ startDate: Date().makeDate(year: 2019, month: 6, day: 18),
7
+ endDate: Date().makeDate(year: 2020, month: 3, day: 20),
8
+ startAlignment: .trailing,
9
+ endAlignment: .leading,
10
+ startVariant: .short(showIcon: false),
11
+ endVariant: .short(showIcon: false)
12
+ )
13
+ }
14
+ ```
@@ -0,0 +1,9 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **startDate** | `Date()` | Takes a string value to set the starting date range value | `Date()` | |
5
+ | **endDate** | `Date()` | Takes a string value to set the ending date range value | `Date()` | |
6
+ | **startAlignment** | `Alignment` | Changes the alignment of the starting date | `.leading` | `.leading` `.trailing` |
7
+ | **endAlignment** | `Alignment` | Changes the alignment of the ending date | `.leading` | `.leading` `.trailing` |
8
+ | **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
9
+ | **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
@@ -5,3 +5,7 @@ examples:
5
5
 
6
6
  react:
7
7
  - date_range_stacked_default: Default
8
+
9
+ swift:
10
+ - date_range_stacked_default_swift: Default
11
+ - date_range_stacked_props_swift: ""
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
 
7
3
  <% if object.bold == false %>
8
4
 
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
 
8
3
  <%= pb_rails("flex", props: {
9
4
  orientation: "row",
@@ -1,10 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
-
1
+ <%= pb_content_tag do %>
8
2
  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
9
3
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
10
4
  <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
7
3
  <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
8
4
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= object.content %>
8
3
  <% end %>
@@ -235,11 +235,11 @@
235
235
  height: $space_xl * 2;
236
236
  }
237
237
  .dialog_footer {
238
- position:fixed;
238
+ position: fixed;
239
239
  bottom: 0;
240
240
  background-color: $white;
241
+ max-width: 100%;
241
242
  }
242
-
243
243
  &[class*="_sm"] {
244
244
  width: $medium;
245
245
  .dialog_footer {
@@ -319,6 +319,7 @@
319
319
  position:fixed;
320
320
  bottom: 0;
321
321
  background-color: $white;
322
+ max-width: 100%;
322
323
  }
323
324
  &[class*="_sm"] {
324
325
  width: $medium;
@@ -372,3 +373,4 @@
372
373
  cursor: pointer;
373
374
  }
374
375
  }
376
+
@@ -1,10 +1,5 @@
1
1
  <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
2
- <%= content_tag(:dialog,
3
- aria: object.aria,
4
- data: object.data,
5
- id: object.id,
6
- class: object.classname,
7
- **combined_html_options) do %>
2
+ <%= pb_content_tag(:dialog) do %>
8
3
  <% if object.status === "" && object.title %>
9
4
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
10
5
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
- <%= content.presence || object.text %>
1
+ <%= pb_content_tag do %>
2
+ <%= content.presence || object.text %>
8
3
  <% end %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- aria: object.aria,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <% if object.confirm_button && object.cancel_button %>
7
3
  <div class="dialog-pseudo-footer"></div>
8
4
  <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
@@ -1,9 +1,5 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.sticky_header,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:div,
2
+ class: object.sticky_header) do %>
7
3
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
8
4
  <%= content.presence || object.title %>
9
5
 
@@ -5,46 +5,51 @@
5
5
  @import "../tokens/shadows";
6
6
  @import "../tokens/positioning";
7
7
  @import "../pb_body/body_mixins";
8
+ @import "../pb_textarea/textarea_mixin";
9
+
10
+ @import "./scss_partials/dropdown_animation";
8
11
 
9
12
  .pb_dropdown {
10
13
  .dropdown_wrapper {
11
- position: relative;
12
- .dropdown_trigger_wrapper {
14
+ [class*="dropdown_trigger_wrapper"] {
13
15
  @include pb_body;
14
16
  border: 1px solid $border_light;
15
17
  background-color: $white;
16
- box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
18
+ height: 45px;
17
19
  @media (hover: hover) {
18
20
  &:hover,
19
21
  &:active,
20
22
  &:focus {
21
23
  background-color: $focus_input_light;
22
- }
23
- input {
24
- background-color: $focus_input_light;
24
+ input {
25
+ background-color: $focus_input_light;
26
+ }
25
27
  }
26
28
  }
27
29
 
28
30
  .dropdown_input {
29
31
  @include pb_body;
30
32
  border: unset;
31
- border-radius: $border_rad_heavier;
32
33
  padding: 0;
33
-
34
+ background-color: $white;
34
35
  &:focus-visible {
35
36
  outline: none;
36
37
  }
37
38
  }
38
39
  &:focus {
39
- box-shadow: 0px 0px 0 1px $primary;
40
+ box-shadow: 0px 0px 0 1px $primary !important;
40
41
  outline: unset;
41
42
  transition: box-shadow 0.15s ease-in-out;
42
43
  }
43
- }
44
44
 
45
- .dropdown_trigger_wrapper_focus {
46
- box-shadow: 0px 0px 0 1px $primary;
47
- transition: box-shadow .10s ease-in-out;
45
+ &[class*="_select_only"] {
46
+ box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
47
+ }
48
+
49
+ &[class*="_focus"] {
50
+ box-shadow: 0px 0px 0 1px $primary !important;
51
+ transition: box-shadow 0.1s ease-in-out;
52
+ }
48
53
  }
49
54
 
50
55
  .pb_dropdown_container {
@@ -54,45 +59,106 @@
54
59
  border-radius: $border_rad_heavier;
55
60
  border: 1px solid $border_light;
56
61
  margin-top: $space_xs;
57
- position: absolute;
58
62
  z-index: $z_1;
59
63
  width: 100%;
60
- transition: opacity 0.25s ease-in-out;
61
64
 
62
- .pb_dropdown_option {
63
- :hover {
65
+ [class*="pb_dropdown_option"] {
66
+ cursor: pointer;
67
+ &:hover {
64
68
  background-color: $border_light;
65
69
  }
66
- }
67
-
68
- .dropdown_option_focused {
69
- background-color: $border_light;
70
- }
71
70
 
72
- .dropdown_option {
73
- width: 100%;
74
- }
71
+ &[class*="_focused"] {
72
+ background-color: $border_light;
73
+ }
75
74
 
76
- .dropdown_option_list {
77
- border-bottom: 1px solid $border_light;
78
- }
79
- .dropdown_option_selected {
80
- background-color: $primary;
81
- [class^="pb_body"],
82
- [class^="pb_title_kit"] {
83
- color: $white !important;
75
+ &[class*="_list"] {
76
+ border-bottom: 1px solid $border_light;
84
77
  }
85
- :hover {
86
- background-color: unset;
78
+ &[class*="selected"] {
79
+ background-color: $primary;
80
+ [class^="pb_body"],
81
+ [class^="pb_title_kit"] {
82
+ color: $white !important;
83
+ }
84
+ &:hover {
85
+ background-color: $primary !important;
86
+ }
87
87
  }
88
88
  }
89
+
90
+ .dropdown_option_wrapper {
91
+ width: 100%;
92
+ }
89
93
  }
90
94
  .close {
91
95
  display: none;
96
+ animation-name: fadeOut;
97
+ animation-duration: 150ms;
98
+ animation-timing-function: linear;
99
+ animation-fill-mode: forwards;
92
100
  }
93
101
 
94
102
  .open {
95
103
  display: block;
104
+ animation-name: fadeIn;
105
+ animation-duration: 150ms;
106
+ animation-timing-function: linear;
107
+ animation-fill-mode: forwards;
108
+ }
109
+ }
110
+
111
+ &.dark {
112
+ .dropdown_wrapper {
113
+ [class*="dropdown_trigger_wrapper"] {
114
+ @include pb_body_light_dark;
115
+ background-color: rgba($white, 0.1) !important;
116
+ background: none;
117
+ border-color: rgba($white, 0.15);
118
+ @media (hover: hover) {
119
+ &:hover,
120
+ &:active,
121
+ &:focus {
122
+ background-color: rgba($white, 0.05) !important;
123
+ }
124
+ }
125
+ [class^="pb_body"] {
126
+ color: $white;
127
+ }
128
+ &[class*="_select_only"] {
129
+ box-shadow: inset 0 -11px 20px rgba($white, 0.05);
130
+ }
131
+ .dropdown_input {
132
+ background-color: unset;
133
+ color: $white;
134
+ }
135
+ }
136
+ }
137
+ .pb_dropdown_container {
138
+ background-color: $bg_dark !important;
139
+ border-color: rgba($white, 0.15);
140
+ color: $white;
141
+ [class^="pb_body"],
142
+ [class^="pb_title_kit"] {
143
+ color: $white !important;
144
+ }
145
+
146
+ [class*="pb_dropdown_option"] {
147
+ &:hover {
148
+ background-color: $hover_dark;
149
+ }
150
+
151
+ &[class*="_focused"] {
152
+ background-color: $hover_dark;
153
+ }
154
+
155
+ &[class*="_list"] {
156
+ border-color: rgba($white, 0.15);
157
+ }
158
+ &[class*="selected"] {
159
+ background-color: $primary;
160
+ }
161
+ }
96
162
  }
97
163
  }
98
164
  }