playbook_ui 13.24.0 β†’ 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

Sign up to get free protection for your applications and to get access to all the features.
Files changed (245) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/index.js +2 -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/table_body.html.erb +5 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +2 -6
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -6
  8. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -6
  9. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -6
  10. data/app/pb_kits/playbook/pb_background/_background.tsx +7 -5
  11. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
  12. data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -6
  13. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +41 -6
  14. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +4 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -0
  25. data/app/pb_kits/playbook/pb_body/_body.scss +3 -3
  26. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
  28. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
  29. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -7
  30. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  31. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
  32. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -7
  33. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
  34. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
  35. data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -6
  36. data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -6
  37. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
  38. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
  39. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
  40. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
  41. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
  42. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  43. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  44. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  45. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  46. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -6
  47. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -6
  48. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -6
  49. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -7
  50. data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -6
  51. data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -6
  52. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  53. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  54. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  55. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  56. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -6
  57. data/app/pb_kits/playbook/pb_date/date.html.erb +1 -6
  58. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -6
  59. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  60. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  61. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  62. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -5
  63. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -5
  64. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  65. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  66. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  67. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -5
  68. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -6
  69. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -7
  70. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -5
  71. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
  72. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  73. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
  74. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
  75. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
  76. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -6
  77. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
  78. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +164 -0
  79. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +253 -0
  80. data/app/pb_kits/playbook/pb_dropdown/context/index.tsx +5 -0
  81. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  82. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +32 -0
  83. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  84. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  85. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  86. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  87. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
  88. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  89. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
  90. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  91. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  92. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
  93. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  94. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  95. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +63 -0
  96. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  97. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  103. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  105. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  106. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  107. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  108. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +23 -0
  109. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +11 -0
  110. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +21 -0
  111. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +20 -0
  112. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +207 -0
  113. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +15 -0
  114. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
  115. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +22 -0
  116. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
  117. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +38 -0
  118. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
  119. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +17 -0
  120. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +61 -0
  121. data/app/pb_kits/playbook/pb_dropdown/index.js +154 -0
  122. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
  123. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
  124. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +109 -0
  125. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +118 -0
  126. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +190 -0
  127. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
  128. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
  129. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +61 -0
  130. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -6
  131. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -5
  132. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -6
  133. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
  134. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -6
  135. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -6
  136. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  137. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
  138. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
  139. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
  140. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -1
  141. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  142. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -7
  143. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  144. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +3 -3
  145. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -6
  146. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -6
  147. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -6
  148. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -6
  149. data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -5
  150. data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -5
  151. data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -5
  152. data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -5
  153. data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -5
  154. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -5
  155. data/app/pb_kits/playbook/pb_list/_list_item.tsx +2 -2
  156. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -8
  157. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -8
  158. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -6
  159. data/app/pb_kits/playbook/pb_message/message.html.erb +1 -6
  160. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -6
  161. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  162. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -6
  163. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -6
  164. data/app/pb_kits/playbook/pb_nav/item.html.erb +3 -14
  165. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -6
  166. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -6
  167. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -6
  168. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  169. data/app/pb_kits/playbook/pb_person/person.html.erb +7 -12
  170. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -6
  171. data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -6
  172. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  173. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -6
  174. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  175. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  176. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  177. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  178. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  179. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +3 -6
  180. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  181. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  182. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
  183. data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
  184. data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
  185. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  186. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  187. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  188. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  189. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  190. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  191. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  192. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -8
  193. data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
  194. data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
  195. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  196. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  197. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -6
  198. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -5
  199. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -5
  200. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -4
  201. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -5
  202. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -6
  203. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -6
  204. data/app/pb_kits/playbook/pb_source/source.html.erb +1 -5
  205. data/app/pb_kits/playbook/pb_source/source.test.js +2 -2
  206. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -5
  207. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -5
  208. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -5
  209. data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
  210. data/app/pb_kits/playbook/pb_table/table_body.html.erb +6 -16
  211. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +6 -16
  212. data/app/pb_kits/playbook/pb_table/table_head.html.erb +6 -16
  213. data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -13
  214. data/app/pb_kits/playbook/pb_table/table_row.html.erb +6 -16
  215. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
  216. data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
  217. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -5
  218. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -5
  219. data/app/pb_kits/playbook/pb_timeline/item.html.erb +3 -7
  220. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -5
  221. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -6
  222. data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
  223. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -6
  224. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -5
  225. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
  226. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -5
  227. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +27 -19
  228. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +4 -2
  229. data/app/pb_kits/playbook/pb_typeahead/components/index.tsx +19 -0
  230. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
  231. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
  232. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  233. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  234. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  235. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  236. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -6
  237. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  238. data/app/pb_kits/playbook/playbook-rails.js +3 -0
  239. data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
  240. data/dist/menu.yml +5 -1
  241. data/dist/playbook-rails.js +6 -6
  242. data/lib/playbook/kit_base.rb +21 -1
  243. data/lib/playbook/version.rb +2 -2
  244. metadata +80 -6
  245. /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md β†’ _dialog_props_swift.md} +0 -0
@@ -0,0 +1,101 @@
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
@@ -0,0 +1 @@
1
+ `autocomplete` prop can also be used in conjunction with the `customDisplay` prop.
@@ -0,0 +1,60 @@
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 %>
@@ -0,0 +1,104 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
3
+
4
+ const DropdownWithCustomDisplay = (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
+
58
+ return (
59
+ <div>
60
+ <Dropdown
61
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
62
+ options={options}
63
+ {...props}
64
+ >
65
+ <Dropdown.Trigger customDisplay={<CustomDisplay/>}
66
+ placeholder="Select a User"
67
+ />
68
+ {options.map((option) => (
69
+ <Dropdown.Option key={option.id}
70
+ option={option}
71
+ >
72
+ <>
73
+ <FlexItem>
74
+ <User
75
+ align="left"
76
+ avatar
77
+ name={option.label}
78
+ orientation="horizontal"
79
+ territory={option.territory}
80
+ title={option.title}
81
+ />
82
+ </FlexItem>
83
+ <FlexItem>
84
+ <Badge dark
85
+ rounded
86
+ text={option.status}
87
+ variant={`${
88
+ option.status === "Offline"
89
+ ? "neutral"
90
+ : option.status === "Online"
91
+ ? "success"
92
+ : "warning"
93
+ }`}
94
+ />
95
+ </FlexItem>
96
+ </>
97
+ </Dropdown.Option>
98
+ ))}
99
+ </Dropdown>
100
+ </div>
101
+ )
102
+ }
103
+
104
+ export default DropdownWithCustomDisplay
@@ -0,0 +1,5 @@
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`.
@@ -0,0 +1,45 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "πŸ‡ΊπŸ‡Έ",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "Canada",
12
+ value: "Canada",
13
+ areaCode: "+1",
14
+ icon: "πŸ‡¨πŸ‡¦",
15
+ id: "ca"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "πŸ‡΅πŸ‡°",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") %>
30
+ <%= pb_rails("dropdown/dropdown_container") do %>
31
+ <% options.each do |option| %>
32
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
33
+ <%= pb_rails("flex/flex_item") do %>
34
+ <%= pb_rails("flex") do %>
35
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
36
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
37
+ <% end %>
38
+ <% end %>
39
+ <%= pb_rails("flex/flex_item") do %>
40
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
41
+ <% end %>
42
+ <% end %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
@@ -0,0 +1,63 @@
1
+ import React from 'react'
2
+ import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
3
+
4
+ const DropdownWithCustomOptions = (props) => {
5
+
6
+ const options = [
7
+ {
8
+ label: "United States",
9
+ value: "United States",
10
+ areaCode: "+1",
11
+ icon: "πŸ‡ΊπŸ‡Έ",
12
+ id: "United-states"
13
+ },
14
+ {
15
+ label: "Canada",
16
+ value: "Canada",
17
+ areaCode: "+1",
18
+ icon: "πŸ‡¨πŸ‡¦",
19
+ id: "canada"
20
+ },
21
+ {
22
+ label: "Pakistan",
23
+ value: "Pakistan",
24
+ areaCode: "+92",
25
+ icon: "πŸ‡΅πŸ‡°",
26
+ id: "pakistan"
27
+ }
28
+ ];
29
+
30
+
31
+ return (
32
+ <div>
33
+ <Dropdown
34
+ options={options}
35
+ {...props}
36
+ >
37
+ {options.map((option) => (
38
+ <Dropdown.Option key={option.id}
39
+ option={option}
40
+ >
41
+ <>
42
+ <FlexItem>
43
+ <Flex>
44
+ <Icon icon={option.icon}
45
+ paddingRight="xs"
46
+ />
47
+ <Body text={option.label} />
48
+ </Flex>
49
+ </FlexItem>
50
+ <FlexItem>
51
+ <Body color="light"
52
+ text={option.areaCode}
53
+ />
54
+ </FlexItem>
55
+ </>
56
+ </Dropdown.Option>
57
+ ))}
58
+ </Dropdown>
59
+ </div>
60
+ )
61
+ }
62
+
63
+ export default DropdownWithCustomOptions
@@ -0,0 +1 @@
1
+ The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default.
@@ -0,0 +1,17 @@
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, padding:"sm"}) %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
@@ -0,0 +1,48 @@
1
+ import React from 'react'
2
+ import { Dropdown } from '../..'
3
+
4
+ const DropdownWithCustomPadding = (props) => {
5
+
6
+ const options = [
7
+ {
8
+ label: "United States",
9
+ value: "United States",
10
+ areaCode: "+1",
11
+ icon: "πŸ‡ΊπŸ‡Έ",
12
+ id: "United-states"
13
+ },
14
+ {
15
+ label: "Canada",
16
+ value: "Canada",
17
+ areaCode: "+1",
18
+ icon: "πŸ‡¨πŸ‡¦",
19
+ id: "canada"
20
+ },
21
+ {
22
+ label: "Pakistan",
23
+ value: "Pakistan",
24
+ areaCode: "+92",
25
+ icon: "πŸ‡΅πŸ‡°",
26
+ id: "pakistan"
27
+ }
28
+ ];
29
+
30
+
31
+ return (
32
+ <div>
33
+ <Dropdown
34
+ options={options}
35
+ {...props}
36
+ >
37
+ {options.map((option) => (
38
+ <Dropdown.Option key={option.id}
39
+ option={option}
40
+ padding="sm"
41
+ />
42
+ ))}
43
+ </Dropdown>
44
+ </div>
45
+ )
46
+ }
47
+
48
+ export default DropdownWithCustomPadding
@@ -0,0 +1 @@
1
+ By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
@@ -0,0 +1,47 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "πŸ‡ΊπŸ‡Έ",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "Canada",
12
+ value: "Canada",
13
+ areaCode: "+1",
14
+ icon: "πŸ‡¨πŸ‡¦",
15
+ id: "ca"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "πŸ‡΅πŸ‡°",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") do %>
30
+ <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
31
+ <% end %>
32
+ <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
33
+ <% options.each do |option| %>
34
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
35
+ <%= pb_rails("flex/flex_item") do %>
36
+ <%= pb_rails("flex") do %>
37
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
38
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
39
+ <% end %>
40
+ <% end %>
41
+ <%= pb_rails("flex/flex_item") do %>
42
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
47
+ <% end %>
@@ -0,0 +1,77 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
3
+
4
+ const DropdownWithCustomTrigger = (props) => {
5
+
6
+ const [selectedOption, setSelectedOption] = useState();
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ areaCode: "+1",
13
+ icon: "πŸ‡ΊπŸ‡Έ",
14
+ id: "United-states"
15
+ },
16
+ {
17
+ label: "Canada",
18
+ value: "Canada",
19
+ areaCode: "+1",
20
+ icon: "πŸ‡¨πŸ‡¦",
21
+ id: "canada"
22
+ },
23
+ {
24
+ label: "Pakistan",
25
+ value: "Pakistan",
26
+ areaCode: "+92",
27
+ icon: "πŸ‡΅πŸ‡°",
28
+ id: "pakistan"
29
+ }
30
+ ];
31
+
32
+
33
+ return (
34
+ <div>
35
+ <Dropdown
36
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
+ options={options}
38
+ {...props}
39
+ >
40
+ <Dropdown.Trigger>
41
+ <div key={selectedOption ? selectedOption.icon : "flag"}>
42
+ <IconCircle
43
+ cursor="pointer"
44
+ icon={selectedOption ? selectedOption.icon : "flag"}
45
+ variant="royal"
46
+ />
47
+ </div>
48
+ </Dropdown.Trigger>
49
+ <Dropdown.Container maxWidth="xs">
50
+ {options.map((option) => (
51
+ <Dropdown.Option key={option.id}
52
+ option={option}
53
+ >
54
+ <>
55
+ <FlexItem>
56
+ <Flex>
57
+ <Icon icon={option.icon}
58
+ paddingRight="xs"
59
+ />
60
+ <Body text={option.label} />
61
+ </Flex>
62
+ </FlexItem>
63
+ <FlexItem>
64
+ <Body color="light"
65
+ text={option.areaCode}
66
+ />
67
+ </FlexItem>
68
+ </>
69
+ </Dropdown.Option>
70
+ ))}
71
+ </Dropdown.Container>
72
+ </Dropdown>
73
+ </div>
74
+ )
75
+ }
76
+
77
+ export default DropdownWithCustomTrigger
@@ -0,0 +1 @@
1
+ The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import { Dropdown, useDropdown, Button } from '../../'
3
+
4
+ const DropdownWithExternalControl = (props) => {
5
+ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
6
+
7
+ const options = [
8
+ {
9
+ label: "United States",
10
+ value: "United States",
11
+ areaCode: "+1",
12
+ icon: "πŸ‡ΊπŸ‡Έ",
13
+ id: "United-states"
14
+ },
15
+ {
16
+ label: "Canada",
17
+ value: "Canada",
18
+ areaCode: "+1",
19
+ icon: "πŸ‡¨πŸ‡¦",
20
+ id: "canada"
21
+ },
22
+ {
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ areaCode: "+92",
26
+ icon: "πŸ‡΅πŸ‡°",
27
+ id: "pakistan"
28
+ }
29
+ ];
30
+
31
+ return (
32
+ <div>
33
+ <Button
34
+ data={{dropdown:'pb-dropdown-trigger'}}
35
+ marginBottom='sm'
36
+ onClick={() => setIsDropdownClosed(!isDropDownClosed)}
37
+ padding="none"
38
+ tabIndex={0}
39
+ variant="link"
40
+ >
41
+ {isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
42
+ </Button>
43
+
44
+ <Dropdown
45
+ isClosed={isDropDownClosed}
46
+ options={options}
47
+ {...props}
48
+ >
49
+ {options.map((option) => (
50
+ <Dropdown.Option key={option.id}
51
+ option={option}
52
+ />
53
+ ))}
54
+ </Dropdown>
55
+ </div>
56
+ )
57
+ }
58
+
59
+ export default DropdownWithExternalControl