playbook_ui_docs 14.14.0.pre.rc.4 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

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 (127) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +50 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +102 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
  14. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
  15. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
  16. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
  17. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
  19. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
  20. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
  21. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
  22. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  23. data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +3 -1
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  28. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
  29. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
  30. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +3 -3
  31. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
  32. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +20 -37
  33. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
  34. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
  35. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +6 -6
  36. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
  37. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +1 -0
  38. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
  39. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
  40. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +6 -0
  41. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
  42. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +4 -3
  43. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb +40 -0
  44. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +50 -0
  45. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md +3 -0
  46. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  47. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  48. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  49. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
  50. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
  51. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  52. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +72 -0
  53. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +91 -0
  54. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
  55. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
  56. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -1
  57. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  58. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
  59. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +37 -0
  60. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
  61. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
  62. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
  63. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
  64. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
  65. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
  66. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  67. data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
  68. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
  69. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
  70. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
  71. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
  72. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
  73. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
  74. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
  75. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
  76. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
  77. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
  78. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
  79. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  80. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  81. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
  82. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  83. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  84. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
  86. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
  87. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  88. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  89. data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
  90. data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
  91. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
  92. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
  93. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
  94. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  95. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  96. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
  97. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
  98. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
  99. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
  100. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
  101. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
  102. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +4 -1
  103. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
  105. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
  106. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
  107. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
  108. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
  109. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
  110. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
  111. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
  112. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  113. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  114. data/dist/playbook-doc.js +1 -1
  115. metadata +68 -14
  116. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  117. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  118. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  119. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  120. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  121. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  122. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  123. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  124. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  125. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  126. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  127. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -0,0 +1,3 @@
1
+ The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
2
+
3
+ - `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with.
@@ -0,0 +1,66 @@
1
+ import React from 'react'
2
+
3
+ import { Typeahead, Title } from 'playbook-ui'
4
+ import { useForm } from 'react-hook-form'
5
+
6
+ const languages = [
7
+ { label: 'JavaScript', value: '1995', category: 'Web Development' },
8
+ { label: 'Python', value: '1991', category: 'General Purpose' },
9
+ { label: 'Java', value: '1995', category: 'Enterprise' },
10
+ { label: 'C++', value: '1985', category: 'Systems Programming' },
11
+ { label: 'Go', value: '2009', category: 'Systems Programming' },
12
+ { label: 'Rust', value: '2010', category: 'Systems Programming' },
13
+ { label: 'Swift', value: '2014', category: 'Mobile Development' },
14
+ { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
15
+ { label: 'Ruby', value: '1995', category: 'General Purpose' },
16
+ { label: 'PHP', value: '1995', category: 'Web Development' },
17
+ ]
18
+
19
+ const colors = [
20
+ { label: 'Orange', value: '#FFA500' },
21
+ { label: 'Red', value: '#FF0000' },
22
+ { label: 'Green', value: '#00FF00' },
23
+ { label: 'Blue', value: '#0000FF' },
24
+ ]
25
+
26
+ const TypeaheadReactHook = (props) => {
27
+ const { register, watch } = useForm()
28
+
29
+ const selectedLanguages = watch('languages')
30
+ const selectedColor = watch('color')
31
+
32
+ return (
33
+ <>
34
+ <Typeahead
35
+ isMulti
36
+ label="Multi Select Languages"
37
+ multiKit="language"
38
+ options={languages}
39
+ {...props}
40
+ {...register('languages')}
41
+ />
42
+ <Title
43
+ size={4}
44
+ text='Selected Languages'
45
+ />
46
+ {selectedLanguages && selectedLanguages.map(language => (
47
+ <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
48
+ ))}
49
+
50
+ <Typeahead
51
+ label="Colors"
52
+ marginTop="lg"
53
+ options={colors}
54
+ {...props}
55
+ {...register('color')}
56
+ />
57
+ <Title
58
+ size={4}
59
+ text='Selected Color'
60
+ />
61
+ <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
62
+ </>
63
+ )
64
+ }
65
+
66
+ export default TypeaheadReactHook
@@ -0,0 +1 @@
1
+ You can pass `react-hook-form` props to the Typeahead kit.
@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
49
49
  * @summary - for doc example purposes only
50
50
  */
51
51
  const handleOnMultiValueClick = (value) => {
52
- alert(`You removed the user: "${value.label}"`)
52
+ alert(`You added the user: "${value.label}"`)
53
53
  }
54
54
 
55
55
  return (
@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
56
56
  * @summary - for doc example purposes only
57
57
  */
58
58
  const handleOnMultiValueClick = (value) => {
59
- alert(`You removed the user: "${value.label}"`)
59
+ alert(`You added the user: "${value.label}"`)
60
60
  }
61
61
 
62
62
  return (
@@ -12,9 +12,12 @@ examples:
12
12
  - typeahead_margin_bottom: Margin Bottom
13
13
  - typeahead_with_pills_color: With Pills (Custom Color)
14
14
  - typeahead_truncated_text: Truncated Text
15
+ - typeahead_dynamic_options: Dynamic Options
16
+ - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
15
17
 
16
18
  react:
17
19
  - typeahead_default: Default
20
+ - typeahead_react_hook: React Hook
18
21
  - typeahead_with_highlight: With Highlight
19
22
  - typeahead_with_pills: With Pills
20
23
  - typeahead_with_pills_async: With Pills (Async Data)
@@ -13,3 +13,4 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
13
13
  export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
14
14
  export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
15
15
  export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
16
+ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'