playbook_ui 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +14 -10
  4. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +9 -5
  5. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +6 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +6 -2
  7. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +6 -1
  8. data/app/pb_kits/playbook/pb_background/background.html.erb +11 -2
  9. data/app/pb_kits/playbook/pb_badge/badge.html.erb +6 -1
  10. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_body/body.html.erb +6 -1
  13. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +6 -1
  14. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +7 -2
  15. data/app/pb_kits/playbook/pb_button/button.html.erb +3 -2
  16. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +7 -2
  17. data/app/pb_kits/playbook/pb_caption/caption.html.erb +6 -1
  18. data/app/pb_kits/playbook/pb_card/card.html.erb +7 -1
  19. data/app/pb_kits/playbook/pb_card/card_body.html.erb +6 -1
  20. data/app/pb_kits/playbook/pb_card/card_header.html.erb +6 -1
  21. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +0 -49
  22. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +0 -3
  23. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +6 -1
  24. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -2
  25. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +0 -14
  26. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
  27. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  28. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +6 -1
  29. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +6 -1
  30. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +6 -1
  31. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +7 -1
  32. data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -1
  33. data/app/pb_kits/playbook/pb_currency/currency.html.erb +6 -1
  34. data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -5
  35. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +6 -1
  36. data/app/pb_kits/playbook/pb_date/date.html.erb +6 -1
  37. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +6 -2
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +1 -3
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +1 -3
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  41. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +5 -1
  42. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +5 -1
  43. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +0 -4
  44. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +5 -1
  45. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +6 -1
  46. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +7 -1
  47. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +5 -1
  48. data/app/pb_kits/playbook/pb_detail/detail.html.erb +6 -1
  49. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -4
  50. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +6 -1
  51. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +7 -2
  52. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +5 -1
  53. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +6 -2
  54. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +35 -101
  55. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +26 -93
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +22 -4
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -6
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +9 -6
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
  60. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -16
  61. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -7
  62. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +10 -200
  63. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  64. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +9 -14
  65. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +8 -22
  66. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +29 -56
  67. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +68 -130
  68. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +7 -9
  69. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +6 -1
  70. data/app/pb_kits/playbook/pb_filter/filter.html.erb +5 -1
  71. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +6 -1
  72. data/app/pb_kits/playbook/pb_flex/flex.html.erb +5 -1
  73. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -2
  74. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +6 -1
  75. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  76. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +6 -1
  77. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +5 -1
  78. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +5 -1
  79. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +7 -2
  80. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +6 -1
  81. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +6 -1
  82. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +6 -1
  83. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +6 -1
  84. data/app/pb_kits/playbook/pb_layout/body.html.erb +5 -1
  85. data/app/pb_kits/playbook/pb_layout/footer.html.erb +5 -1
  86. data/app/pb_kits/playbook/pb_layout/header.html.erb +5 -1
  87. data/app/pb_kits/playbook/pb_layout/item.html.erb +5 -1
  88. data/app/pb_kits/playbook/pb_layout/layout.html.erb +5 -1
  89. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +5 -1
  90. data/app/pb_kits/playbook/pb_list/item.html.erb +8 -2
  91. data/app/pb_kits/playbook/pb_list/list.html.erb +8 -2
  92. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +6 -1
  93. data/app/pb_kits/playbook/pb_message/message.html.erb +6 -1
  94. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +6 -1
  95. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +6 -1
  96. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +6 -1
  97. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -1
  98. data/app/pb_kits/playbook/pb_nav/item.html.erb +14 -3
  99. data/app/pb_kits/playbook/pb_nav/nav.html.erb +6 -1
  100. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +6 -2
  101. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +6 -1
  102. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  103. data/app/pb_kits/playbook/pb_person/person.html.erb +12 -7
  104. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +6 -1
  105. data/app/pb_kits/playbook/pb_pill/pill.html.erb +6 -1
  106. data/app/pb_kits/playbook/pb_popover/popover.html.erb +6 -1
  107. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +6 -2
  108. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +0 -2
  109. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +0 -1
  110. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +6 -3
  111. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  112. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +5 -1
  113. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +5 -1
  114. data/app/pb_kits/playbook/pb_radio/_radio.scss +0 -35
  115. data/app/pb_kits/playbook/pb_radio/_radio.tsx +0 -3
  116. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +1 -4
  117. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -4
  118. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -2
  119. data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -2
  120. data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
  121. data/app/pb_kits/playbook/pb_radio/radio.html.erb +8 -2
  122. data/app/pb_kits/playbook/pb_radio/radio.rb +0 -5
  123. data/app/pb_kits/playbook/pb_radio/radio.test.js +0 -17
  124. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +2 -6
  125. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +1 -11
  126. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +6 -1
  127. data/app/pb_kits/playbook/pb_select/select.html.erb +5 -1
  128. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +5 -1
  129. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +4 -1
  130. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +5 -1
  131. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +6 -1
  132. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +6 -1
  133. data/app/pb_kits/playbook/pb_source/source.html.erb +5 -1
  134. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +5 -1
  135. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +5 -1
  136. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +5 -1
  137. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  138. data/app/pb_kits/playbook/pb_table/table_body.html.erb +16 -6
  139. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +16 -6
  140. data/app/pb_kits/playbook/pb_table/table_head.html.erb +16 -6
  141. data/app/pb_kits/playbook/pb_table/table_header.html.erb +13 -4
  142. data/app/pb_kits/playbook/pb_table/table_row.html.erb +16 -6
  143. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +5 -1
  144. data/app/pb_kits/playbook/pb_time/time.html.erb +5 -1
  145. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +5 -1
  146. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +5 -1
  147. data/app/pb_kits/playbook/pb_timeline/item.html.erb +7 -3
  148. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +5 -1
  149. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +6 -1
  150. data/app/pb_kits/playbook/pb_title/title.html.erb +6 -1
  151. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +6 -1
  152. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +5 -1
  153. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +6 -1
  154. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +5 -1
  155. data/app/pb_kits/playbook/pb_user/user.html.erb +6 -1
  156. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +6 -1
  157. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +6 -1
  158. data/app/pb_kits/playbook/playbook-rails.js +0 -3
  159. data/dist/playbook-rails.js +5 -5
  160. data/lib/playbook/kit_base.rb +1 -1
  161. data/lib/playbook/version.rb +1 -1
  162. metadata +2 -50
  163. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +0 -23
  164. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +0 -29
  165. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +0 -43
  166. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +0 -12
  167. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +0 -31
  168. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +0 -14
  169. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +0 -9
  170. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
  171. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +0 -1
  172. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +0 -17
  173. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +0 -42
  174. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +0 -7
  175. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +0 -84
  176. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +0 -1
  177. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +0 -101
  178. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  179. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +0 -60
  180. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +0 -5
  181. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +0 -45
  182. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +0 -1
  183. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +0 -17
  184. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +0 -48
  185. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +0 -1
  186. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +0 -47
  187. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +0 -1
  188. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +0 -59
  189. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -72
  190. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +0 -10
  191. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +0 -39
  192. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +0 -1
  193. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +0 -21
  194. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -20
  195. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +0 -15
  196. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +0 -19
  197. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +0 -22
  198. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +0 -22
  199. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +0 -38
  200. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +0 -30
  201. data/app/pb_kits/playbook/pb_dropdown/index.js +0 -154
  202. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +0 -77
  203. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +0 -18
  204. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +0 -41
  205. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +0 -2
  206. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +0 -3
  207. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +0 -16
  208. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +0 -1
  209. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +0 -26
  210. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +0 -31
data/lib/playbook/kit_base.rb CHANGED
@@ -81,7 +81,7 @@ module Playbook
81
81
  end
82
82
 
83
83
  # rubocop:disable Style/OptionalBooleanParameter
84
- def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
84
+ def pb_content_tag(name, content_or_options_with_block = nil, options = {}, escape = true, &block)
85
85
  combined_options = options
86
86
  .merge(combined_html_options)
87
87
  .merge(default_options.merge(content_or_options_with_block))
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.25.0"
5
- VERSION = "13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812"
5
+ VERSION = "13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812
4
+ version: 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-05-03 00:00:00.000000000 Z
12
+ date: 2024-04-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -602,8 +602,6 @@ files:
602
602
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb
603
603
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
604
604
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default_swift.md
605
- - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb
606
- - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx
607
605
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
608
606
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
609
607
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md
@@ -722,15 +720,12 @@ files:
722
720
  - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
723
721
  - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
724
722
  - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
725
- - app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md
726
723
  - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
727
724
  - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
728
725
  - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
729
726
  - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
730
- - app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md
731
727
  - app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb
732
728
  - app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx
733
- - app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md
734
729
  - app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb
735
730
  - app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx
736
731
  - app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md
@@ -890,8 +885,6 @@ files:
890
885
  - app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js
891
886
  - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
892
887
  - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
893
- - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md
894
- - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md
895
888
  - app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
896
889
  - app/pb_kits/playbook/pb_date_range_stacked/docs/index.js
897
890
  - app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss
@@ -1037,54 +1030,18 @@ files:
1037
1030
  - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
1038
1031
  - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
1039
1032
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
1040
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
1041
1033
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
1042
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
1043
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
1044
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
1045
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
1046
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
1047
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
1048
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
1049
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
1050
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
1051
1034
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
1052
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
1053
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
1054
1035
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
1055
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
1056
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
1057
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
1058
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
1059
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
1060
1036
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
1061
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
1062
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
1063
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
1064
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
1065
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
1066
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
1067
1037
  - app/pb_kits/playbook/pb_dropdown/docs/example.yml
1068
1038
  - app/pb_kits/playbook/pb_dropdown/docs/index.js
1069
- - app/pb_kits/playbook/pb_dropdown/dropdown.html.erb
1070
- - app/pb_kits/playbook/pb_dropdown/dropdown.rb
1071
1039
  - app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
1072
- - app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb
1073
- - app/pb_kits/playbook/pb_dropdown/dropdown_container.rb
1074
- - app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb
1075
- - app/pb_kits/playbook/pb_dropdown/dropdown_option.rb
1076
- - app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb
1077
- - app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb
1078
1040
  - app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx
1079
1041
  - app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx
1080
- - app/pb_kits/playbook/pb_dropdown/index.js
1081
- - app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js
1082
- - app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss
1083
1042
  - app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx
1084
1043
  - app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
1085
1044
  - app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
1086
- - app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx
1087
- - app/pb_kits/playbook/pb_dropdown/utilities/index.ts
1088
1045
  - app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx
1089
1046
  - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
1090
1047
  - app/pb_kits/playbook/pb_enhanced_element/index.ts
@@ -1958,9 +1915,6 @@ files:
1958
1915
  - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx
1959
1916
  - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.html.erb
1960
1917
  - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx
1961
- - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb
1962
- - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx
1963
- - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md
1964
1918
  - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.html.erb
1965
1919
  - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx
1966
1920
  - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb
@@ -2008,8 +1962,6 @@ files:
2008
1962
  - app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb
2009
1963
  - app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx
2010
1964
  - app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md
2011
- - app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb
2012
- - app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx
2013
1965
  - app/pb_kits/playbook/pb_radio/docs/_radio_error.html.erb
2014
1966
  - app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx
2015
1967
  - app/pb_kits/playbook/pb_radio/docs/_radio_error.md
data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb DELETED
@@ -1,23 +0,0 @@
1
- <%= pb_rails("flex", props: {orientation: "column"}) do %>
2
- <%= pb_rails("flex/flex_item") do %>
3
- <%= pb_rails("checkbox" , props: {
4
- input_options: { tabindex: 0 },
5
- margin_bottom: "xs",
6
- text: "Disabled unchecked",
7
- value: "checkbox-value",
8
- disabled: true,
9
- name: "checkbox-name"
10
- }) %>
11
- <% end %>
12
- <%= pb_rails("flex/flex_item") do %>
13
- <%= pb_rails("checkbox" , props: {
14
- input_options: { tabindex: 0 },
15
- text: "Disabled checked",
16
- value: "checkbox-value",
17
- disabled: true,
18
- checked: true,
19
- name: "checkbox-name"
20
- }) %>
21
- <% end %>
22
- <% end %>
23
-
data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx DELETED
@@ -1,29 +0,0 @@
1
- import React from 'react'
2
-
3
- import Checkbox from '../_checkbox'
4
-
5
- const CheckboxDisabled = (props) => {
6
- return (
7
- <div style={{ display: "flex", flexDirection: "column" }}>
8
- <Checkbox
9
- disabled
10
- marginBottom="xs"
11
- name="default name"
12
- tabIndex={0}
13
- text="Disabled unchecked"
14
- value="default value"
15
- {...props}
16
- />
17
- <Checkbox
18
- checked
19
- disabled
20
- name="checkbox-name"
21
- text="Disabled checked"
22
- value="check-box value"
23
- {...props}
24
- />
25
- </div>
26
- )
27
- }
28
-
29
- export default CheckboxDisabled
data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md DELETED
@@ -1,43 +0,0 @@
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
- ```
data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md DELETED
@@ -1,12 +0,0 @@
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` |
data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md DELETED
@@ -1,31 +0,0 @@
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
- ```
data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md DELETED
@@ -1,14 +0,0 @@
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
- ```
data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md DELETED
@@ -1,9 +0,0 @@
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)` |
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb DELETED
@@ -1,10 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
- ]
7
-
8
- %>
9
-
10
- <%= pb_rails("dropdown", props: {options: options}) %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md DELETED
@@ -1 +0,0 @@
1
- The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb DELETED
@@ -1,17 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
- ]
7
-
8
- %>
9
-
10
- <%= pb_rails("dropdown", props: {options: options}) do %>
11
- <%= pb_rails("dropdown/dropdown_trigger") %>
12
- <%= pb_rails("dropdown/dropdown_container") do %>
13
- <% options.each do |option| %>
14
- <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
15
- <% end %>
16
- <% end %>
17
- <% end %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx DELETED
@@ -1,42 +0,0 @@
1
- import React from 'react'
2
- import { Dropdown } from '../..'
3
-
4
- const DropdownSubcomponentStructure = (props) => {
5
-
6
-
7
- const options = [
8
- {
9
- label: "United States",
10
- value: "United States",
11
- },
12
- {
13
- label: "Canada",
14
- value: "Canada",
15
- },
16
- {
17
- label: "Pakistan",
18
- value: "Pakistan",
19
- }
20
- ];
21
-
22
-
23
- return (
24
- <div>
25
- <Dropdown
26
- options={options}
27
- {...props}
28
- >
29
- <Dropdown.Trigger/>
30
- <Dropdown.Container>
31
- {options.map((option) => (
32
- <Dropdown.Option key={option.id}
33
- option={option}
34
- />
35
- ))}
36
- </Dropdown.Container>
37
- </Dropdown>
38
- </div>
39
- )
40
- }
41
-
42
- export default DropdownSubcomponentStructure
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md DELETED
@@ -1,7 +0,0 @@
1
- The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
2
-
3
- `Dropdown. Trigger` / `dropdown/dropdown_trigger`
4
- `Dropdown.Container`/ `dropdown/dropdown_container`
5
- `Dropdown.Option` / `dropdown/dropdown_option`
6
-
7
- See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx DELETED
@@ -1,84 +0,0 @@
1
- import React from 'react'
2
- import { Dropdown, User, Badge, FlexItem } from '../..'
3
-
4
- const DropdownWithAutocomplete = (props) => {
5
-
6
- const options = [
7
- {
8
- label: "Jasper Furniss",
9
- value: "Jasper Furniss",
10
- territory: "PHL",
11
- title: "Senior UX Engineer",
12
- id: "jasper-furniss",
13
- status: "Offline"
14
- },
15
- {
16
- label: "Ramon Ruiz",
17
- value: "Ramon Ruiz",
18
- territory: "PHL",
19
- title: "Senior UX Designer",
20
- id: "ramon-ruiz",
21
- status: "Away"
22
- },
23
- {
24
- label: "Jason Cypret",
25
- value: "Jason Cypret",
26
- territory: "PHL",
27
- title: "VP of User Experience",
28
- id: "jason-cypret",
29
- status: "Online"
30
- },
31
- {
32
- label: "Courtney Long",
33
- value: "Courtney Long",
34
- territory: "PHL",
35
- title: "UX Design Mentor",
36
- id: "courtney-long",
37
- status: "Online"
38
- }
39
- ];
40
-
41
-
42
- return (
43
- <div>
44
- <Dropdown autocomplete
45
- options={options}
46
- {...props}
47
- >
48
- {options.map((option) => (
49
- <Dropdown.Option key={option.id}
50
- option={option}
51
- >
52
- <>
53
- <FlexItem>
54
- <User
55
- align="left"
56
- avatar
57
- name={option.label}
58
- orientation="horizontal"
59
- territory={option.territory}
60
- title={option.title}
61
- />
62
- </FlexItem>
63
- <FlexItem>
64
- <Badge
65
- rounded
66
- text={option.status}
67
- variant={`${
68
- option.status === "Offline"
69
- ? "neutral"
70
- : option.status === "Online"
71
- ? "success"
72
- : "warning"
73
- }`}
74
- />
75
- </FlexItem>
76
- </>
77
- </Dropdown.Option>
78
- ))}
79
- </Dropdown>
80
- </div>
81
- )
82
- }
83
-
84
- export default DropdownWithAutocomplete
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md DELETED
@@ -1 +0,0 @@
1
- The `autocomplete` prop can be used to add autocomplete or typeahead functionality to the Dropdown's default Trigger. This prop is set to 'false' by default.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx DELETED
@@ -1,101 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
3
-
4
- const DropdownWithAutocompleteAndCustomDisplay = (props) => {
5
- const [selectedOption, setSelectedOption] = useState();
6
-
7
- const options = [
8
- {
9
- label: "Jasper Furniss",
10
- value: "Jasper Furniss",
11
- territory: "PHL",
12
- title: "Senior UX Engineer",
13
- id: "jasper-furniss",
14
- status: "Offline"
15
- },
16
- {
17
- label: "Ramon Ruiz",
18
- value: "Ramon Ruiz",
19
- territory: "PHL",
20
- title: "Senior UX Designer",
21
- id: "ramon-ruiz",
22
- status: "Away"
23
- },
24
- {
25
- label: "Jason Cypret",
26
- value: "Jason Cypret",
27
- territory: "PHL",
28
- title: "VP of User Experience",
29
- id: "jason-cypret",
30
- status: "Online"
31
- },
32
- {
33
- label: "Courtney Long",
34
- value: "Courtney Long",
35
- territory: "PHL",
36
- title: "UX Design Mentor",
37
- id: "courtney-long",
38
- status: "Online"
39
- }
40
- ];
41
-
42
- const CustomDisplay = () => {
43
- return (
44
- <>
45
- {
46
- selectedOption && (
47
- <Avatar
48
- name={selectedOption.label}
49
- size="xs"
50
- />
51
- )
52
- }
53
- </>
54
- )
55
- };
56
-
57
- return (
58
- <div>
59
- <Dropdown autocomplete
60
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
61
- options={options}
62
- {...props}
63
- >
64
- <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
65
- {options.map((option) => (
66
- <Dropdown.Option key={option.id}
67
- option={option}
68
- >
69
- <>
70
- <FlexItem>
71
- <User
72
- align="left"
73
- avatar
74
- name={option.label}
75
- orientation="horizontal"
76
- territory={option.territory}
77
- title={option.title}
78
- />
79
- </FlexItem>
80
- <FlexItem>
81
- <Badge
82
- rounded
83
- text={option.status}
84
- variant={`${
85
- option.status === "Offline"
86
- ? "neutral"
87
- : option.status === "Online"
88
- ? "success"
89
- : "warning"
90
- }`}
91
- />
92
- </FlexItem>
93
- </>
94
- </Dropdown.Option>
95
- ))}
96
- </Dropdown>
97
- </div>
98
- )
99
- }
100
-
101
- export default DropdownWithAutocompleteAndCustomDisplay
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md DELETED
@@ -1 +0,0 @@
1
- `autocomplete` prop can also be used in conjunction with the `customDisplay` prop.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb DELETED
@@ -1,60 +0,0 @@
1
- <%
2
- options = [
3
- {
4
- label: "Jasper Furniss",
5
- value: "Jasper Furniss",
6
- territory: "PHL",
7
- title: "Senior UX Engineer",
8
- id: "jasper-furniss",
9
- status: "Offline"
10
- },
11
- {
12
- label: "Ramon Ruiz",
13
- value: "Ramon Ruiz",
14
- territory: "PHL",
15
- title: "Senior UX Designer",
16
- id: "ramon-ruiz",
17
- status: "Away"
18
- },
19
- {
20
- label: "Jason Cypret",
21
- value: "Jason Cypret",
22
- territory: "PHL",
23
- title: "VP of User Experience",
24
- id: "jason-cypret",
25
- status: "Online"
26
- },
27
- {
28
- label: "Courtney Long",
29
- value: "Courtney Long",
30
- territory: "PHL",
31
- title: "UX Design Mentor",
32
- id: "courtney-long",
33
- status: "Online"
34
- }
35
- ]
36
-
37
- %>
38
-
39
- <%
40
- custom_display = capture do
41
- pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
42
- end
43
- %>
44
-
45
-
46
- <%= pb_rails("dropdown", props: {options: options}) do %>
47
- <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
48
- <%= pb_rails("dropdown/dropdown_container") do %>
49
- <% options.each do |option| %>
50
- <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
51
- <%= pb_rails("flex/flex_item") do %>
52
- <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
53
- <% end %>
54
- <%= pb_rails("flex/flex_item") do %>
55
- <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
56
- <% end %>
57
- <% end %>
58
- <% end %>
59
- <% end %>
60
- <% end %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md DELETED
@@ -1,5 +0,0 @@
1
- The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
2
-
3
- The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
4
-
5
- The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.