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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +50 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +102 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +3 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +20 -37
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +6 -6
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +4 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb +40 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +50 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +68 -14
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
- 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
|
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
|
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'
|