playbook_ui_docs 14.14.0.pre.rc.5 → 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_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 +63 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -0,0 +1 @@
|
|
1
|
+
The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.
|
@@ -16,4 +16,6 @@ examples:
|
|
16
16
|
- phone_number_input_initial_country: Initial Country
|
17
17
|
- phone_number_input_only_countries: Limited Countries
|
18
18
|
- phone_number_input_validation: Form Validation
|
19
|
-
- phone_number_input_format: Format as You Type
|
19
|
+
- phone_number_input_format: Format as You Type
|
20
|
+
- phone_number_input_hidden_inputs: Hidden Inputs
|
21
|
+
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import { useForm } from "react-hook-form"
|
3
|
+
import { Radio, Flex, Body } from "playbook-ui"
|
4
|
+
|
5
|
+
const RadioReactHook = () => {
|
6
|
+
const { register, watch } = useForm({
|
7
|
+
defaultValues: {
|
8
|
+
size: "Small",
|
9
|
+
},
|
10
|
+
})
|
11
|
+
|
12
|
+
const selectedSize = watch("size", "Small")
|
13
|
+
|
14
|
+
return (
|
15
|
+
<Flex orientation="row">
|
16
|
+
<Flex
|
17
|
+
align="start"
|
18
|
+
orientation="column"
|
19
|
+
paddingRight="lg"
|
20
|
+
>
|
21
|
+
<Radio
|
22
|
+
alignment="left"
|
23
|
+
label="Small"
|
24
|
+
marginBottom='sm'
|
25
|
+
name="size"
|
26
|
+
value="Small"
|
27
|
+
{...register("size")}
|
28
|
+
/>
|
29
|
+
<br />
|
30
|
+
<Radio
|
31
|
+
alignment="left"
|
32
|
+
label="Medium"
|
33
|
+
marginBottom='sm'
|
34
|
+
name="size"
|
35
|
+
value="Medium"
|
36
|
+
{...register("size")}
|
37
|
+
/>
|
38
|
+
<br />
|
39
|
+
<Radio
|
40
|
+
alignment="left"
|
41
|
+
label="Large"
|
42
|
+
marginBottom='sm'
|
43
|
+
name="size"
|
44
|
+
value="Large"
|
45
|
+
{...register("size")}
|
46
|
+
/>
|
47
|
+
</Flex>
|
48
|
+
<Flex
|
49
|
+
align="start"
|
50
|
+
orientation="column"
|
51
|
+
>
|
52
|
+
<Body
|
53
|
+
text={`Selected Size: ${selectedSize}`}
|
54
|
+
/>
|
55
|
+
</Flex>
|
56
|
+
</Flex>
|
57
|
+
)
|
58
|
+
}
|
59
|
+
|
60
|
+
export default RadioReactHook
|
@@ -0,0 +1 @@
|
|
1
|
+
You can pass react hook props to the radio kit.
|
@@ -16,6 +16,7 @@ examples:
|
|
16
16
|
- radio_alignment: Alignment
|
17
17
|
- radio_disabled: Disabled
|
18
18
|
- radio_custom_children: Custom Children
|
19
|
+
- radio_react_hook: React Hook Form
|
19
20
|
|
20
21
|
swift:
|
21
22
|
- radio_default_swift: Default
|
@@ -26,4 +27,4 @@ examples:
|
|
26
27
|
- radio_spacing_swift: Spacing
|
27
28
|
- radio_padding_swift: Padding
|
28
29
|
- radio_subtitle_swift: Subtitle
|
29
|
-
- radio_props_swift: ""
|
30
|
+
- radio_props_swift: ""
|
@@ -4,3 +4,4 @@ export { default as RadioError } from './_radio_error.jsx'
|
|
4
4
|
export { default as RadioAlignment } from './_radio_alignment.jsx'
|
5
5
|
export { default as RadioDisabled } from './_radio_disabled.jsx'
|
6
6
|
export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
|
7
|
+
export { default as RadioReactHook } from './_radio_react_hook.jsx'
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import React, { useState } from "react"
|
2
|
+
import { useForm } from "react-hook-form"
|
3
|
+
import { Button, Body, Select } from "playbook-ui"
|
4
|
+
|
5
|
+
const SelectReactHook = (props) => {
|
6
|
+
const { register, handleSubmit, formState: { errors } } = useForm({
|
7
|
+
defaultValues: {
|
8
|
+
food: '',
|
9
|
+
},
|
10
|
+
})
|
11
|
+
|
12
|
+
const [submittedData, setSubmittedData] = useState({
|
13
|
+
food: '',
|
14
|
+
})
|
15
|
+
|
16
|
+
const onSubmit = (data) => {
|
17
|
+
setSubmittedData(data)
|
18
|
+
}
|
19
|
+
|
20
|
+
const options = [
|
21
|
+
{
|
22
|
+
value: 1,
|
23
|
+
text: 'Burgers',
|
24
|
+
},
|
25
|
+
{
|
26
|
+
value: 2,
|
27
|
+
text: 'Pizza',
|
28
|
+
},
|
29
|
+
{
|
30
|
+
value: 3,
|
31
|
+
text: 'Tacos',
|
32
|
+
},
|
33
|
+
]
|
34
|
+
|
35
|
+
return (
|
36
|
+
<>
|
37
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
38
|
+
<Select
|
39
|
+
{...props}
|
40
|
+
{...register("food", { required: true })}
|
41
|
+
error={errors.food ? "Please select a food." : null}
|
42
|
+
label="Favorite Food"
|
43
|
+
options={options}
|
44
|
+
/>
|
45
|
+
<br />
|
46
|
+
<Button htmlType="submit"
|
47
|
+
marginTop="sm"
|
48
|
+
text="Submit"
|
49
|
+
/>
|
50
|
+
</form>
|
51
|
+
<Body padding="xs"
|
52
|
+
text={`Food: ${submittedData.food}`}
|
53
|
+
/>
|
54
|
+
</>
|
55
|
+
)
|
56
|
+
}
|
57
|
+
|
58
|
+
export default SelectReactHook
|
@@ -0,0 +1 @@
|
|
1
|
+
You can pass react-hook-form props to a select kit. You can use `register` which will make the value available for both the form validation and submission.
|
@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
|
|
10
10
|
export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
|
11
11
|
export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
|
12
12
|
export { default as SelectMultiple } from './_select_multiple.jsx'
|
13
|
+
export { default as SelectReactHook } from './_select_react_hook.jsx'
|
@@ -1,10 +1,9 @@
|
|
1
1
|
<%= pb_rails("title", props: {
|
2
|
+
margin_bottom: "md"
|
2
3
|
}) do %>
|
3
4
|
Default Title
|
4
5
|
<% end %>
|
5
6
|
|
6
|
-
<br/>
|
7
|
-
|
8
7
|
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
|
9
8
|
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
|
10
9
|
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
|
2
|
+
<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
|
3
|
+
<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
|
4
|
+
<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
|
5
|
+
<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
|
6
|
+
<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
|
7
|
+
<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Title from '../_title'
|
4
|
+
|
5
|
+
const TitleDisplaySize = (props) => {
|
6
|
+
return (
|
7
|
+
<div>
|
8
|
+
<Title
|
9
|
+
displaySize="xs"
|
10
|
+
tag="h1"
|
11
|
+
text="Display Size xs"
|
12
|
+
{...props}
|
13
|
+
/>
|
14
|
+
<Title
|
15
|
+
displaySize="sm"
|
16
|
+
tag="h1"
|
17
|
+
text="Display Size sm"
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
<Title
|
21
|
+
displaySize="md"
|
22
|
+
tag="h1"
|
23
|
+
text="Display Size md"
|
24
|
+
{...props}
|
25
|
+
/>
|
26
|
+
<Title
|
27
|
+
displaySize="lg"
|
28
|
+
tag="h1"
|
29
|
+
text="Display Size lg"
|
30
|
+
{...props}
|
31
|
+
/>
|
32
|
+
<Title
|
33
|
+
displaySize="xl"
|
34
|
+
tag="h1"
|
35
|
+
text="Display Size xl"
|
36
|
+
{...props}
|
37
|
+
/>
|
38
|
+
<Title
|
39
|
+
displaySize="xxl"
|
40
|
+
tag="h1"
|
41
|
+
text="Display Size xxl"
|
42
|
+
{...props}
|
43
|
+
/>
|
44
|
+
<Title
|
45
|
+
size="display"
|
46
|
+
tag="h1"
|
47
|
+
text="This is a size of display"
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
</div>
|
51
|
+
)
|
52
|
+
}
|
53
|
+
|
54
|
+
export default TitleDisplaySize
|
@@ -0,0 +1 @@
|
|
1
|
+
Responsive sizes for large screens and tablets, perfect for digital signage.
|
@@ -5,6 +5,7 @@ examples:
|
|
5
5
|
- title_colors: Colors
|
6
6
|
- title_responsive: Responsive
|
7
7
|
- title_truncate: Truncate
|
8
|
+
- title_display_size: Display Size
|
8
9
|
|
9
10
|
react:
|
10
11
|
- title_default: Default UI
|
@@ -12,3 +13,4 @@ examples:
|
|
12
13
|
- title_colors: Colors
|
13
14
|
- title_responsive: Responsive
|
14
15
|
- title_truncate: Truncate
|
16
|
+
- title_display_size: Display Size
|
@@ -3,3 +3,4 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
|
|
3
3
|
export { default as TitleColors } from './_title_colors.jsx'
|
4
4
|
export { default as TitleResponsive } from './_title_responsive.jsx'
|
5
5
|
export { default as TitleTruncate } from './_title_truncate.jsx'
|
6
|
+
export { default as TitleDisplaySize } from './_title_display_size.jsx'
|
@@ -0,0 +1,39 @@
|
|
1
|
+
<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
|
2
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
3
|
+
<%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
|
4
|
+
<% end %>
|
5
|
+
|
6
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
7
|
+
<%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
11
|
+
<%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<%= pb_rails("tooltip", props: {
|
15
|
+
trigger_element_selector: ".tooltip-delay",
|
16
|
+
tooltip_id: "delay-tooltip",
|
17
|
+
position: 'top',
|
18
|
+
delay_open: 1000,
|
19
|
+
delay_close: 1000
|
20
|
+
}) do %>
|
21
|
+
1s open/close delay
|
22
|
+
<% end %>
|
23
|
+
<%= pb_rails("tooltip", props: {
|
24
|
+
trigger_element_selector: ".tooltip-open-delay",
|
25
|
+
tooltip_id: "open-tooltip",
|
26
|
+
position: 'top',
|
27
|
+
delay_open: 1000
|
28
|
+
}) do %>
|
29
|
+
1s open delay
|
30
|
+
<% end %>
|
31
|
+
<%= pb_rails("tooltip", props: {
|
32
|
+
trigger_element_selector: ".tooltip-close-delay",
|
33
|
+
tooltip_id: "close-tooltip",
|
34
|
+
position: 'top',
|
35
|
+
delay_close: 1000
|
36
|
+
}) do %>
|
37
|
+
1s close delay
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
|
2
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
|
3
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
|
4
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
5
|
+
Send Email
|
6
|
+
<% end %>
|
7
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
|
8
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
|
9
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
10
|
+
Send Email
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
|
13
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
|
14
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
15
|
+
Send Email
|
16
|
+
<% end %>
|
17
|
+
<%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
|
18
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
|
19
|
+
<%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
|
20
|
+
Send Email
|
21
|
+
<% end %>
|
22
|
+
<% end %>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
3
|
+
<%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
|
4
|
+
|
5
|
+
<%= pb_rails("tooltip", props: {
|
6
|
+
trigger_element_selector: "#tooltip-interaction",
|
7
|
+
tooltip_id: "tooltip-with-interaction",
|
8
|
+
position: 'top',
|
9
|
+
interaction: true
|
10
|
+
}) do %>
|
11
|
+
You can copy me
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
14
|
+
|
15
|
+
<%= pb_rails("flex/flex_item") do %>
|
16
|
+
<%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
|
17
|
+
|
18
|
+
<%= pb_rails("tooltip", props: {
|
19
|
+
trigger_element_selector: "#tooltip-no-interaction",
|
20
|
+
tooltip_id: "tooltip-without-interaction",
|
21
|
+
position: 'top',
|
22
|
+
}) do %>
|
23
|
+
I'm just a regular tooltip
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
|
3
|
+
|
4
|
+
const TooltipSizing = (props) => {
|
5
|
+
|
6
|
+
return (
|
7
|
+
<Flex
|
8
|
+
flexDirection='row'
|
9
|
+
gap='md'
|
10
|
+
wrap
|
11
|
+
>
|
12
|
+
<FlexItem>
|
13
|
+
<Tooltip
|
14
|
+
height='150px'
|
15
|
+
placement='top'
|
16
|
+
text="I'm 150px high and 100px wide!"
|
17
|
+
width='100px'
|
18
|
+
{...props}
|
19
|
+
>
|
20
|
+
<Button text="Height and Width"/>
|
21
|
+
</Tooltip>
|
22
|
+
</FlexItem>
|
23
|
+
<FlexItem>
|
24
|
+
<Tooltip
|
25
|
+
maxHeight='100px'
|
26
|
+
placement='top'
|
27
|
+
text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
|
28
|
+
width='250px'
|
29
|
+
{...props}
|
30
|
+
>
|
31
|
+
<Button text="maxHeight"/>
|
32
|
+
</Tooltip>
|
33
|
+
</FlexItem>
|
34
|
+
<FlexItem>
|
35
|
+
<Tooltip
|
36
|
+
maxWidth='150px'
|
37
|
+
placement='top'
|
38
|
+
text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
|
39
|
+
{...props}
|
40
|
+
>
|
41
|
+
<Button text="maxWidth"/>
|
42
|
+
</Tooltip>
|
43
|
+
</FlexItem>
|
44
|
+
<FlexItem>
|
45
|
+
<Tooltip
|
46
|
+
minWidth='300px'
|
47
|
+
placement='top'
|
48
|
+
text="I have a minWidth of 300px!"
|
49
|
+
{...props}
|
50
|
+
>
|
51
|
+
<Button text="minWidth"/>
|
52
|
+
</Tooltip>
|
53
|
+
</FlexItem>
|
54
|
+
<FlexItem>
|
55
|
+
<Tooltip
|
56
|
+
maxWidth='150px'
|
57
|
+
minHeight='300px'
|
58
|
+
placement='top'
|
59
|
+
text="I have a minHeight of 300px!"
|
60
|
+
{...props}
|
61
|
+
>
|
62
|
+
<Button text="minHeight"/>
|
63
|
+
</Tooltip>
|
64
|
+
</FlexItem>
|
65
|
+
</Flex>
|
66
|
+
)
|
67
|
+
}
|
68
|
+
|
69
|
+
export default TooltipSizing
|
@@ -2,15 +2,18 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- tooltip_default: Default
|
5
|
+
- tooltip_interaction: Content Interaction
|
5
6
|
- tooltip_selectors: Using Common Selectors
|
7
|
+
- tooltip_icon_rails: Tooltip with Icon
|
6
8
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
9
|
+
- tooltip_delay_rails: Delay
|
7
10
|
- tooltip_show_tooltip: Show Tooltip
|
8
11
|
|
9
12
|
react:
|
10
13
|
- tooltip_default_react: Default
|
11
14
|
- tooltip_interaction: Content Interaction
|
12
15
|
- tooltip_margin: Margin
|
16
|
+
- tooltip_sizing: Tooltip Sizing
|
13
17
|
- tooltip_icon: Tooltip with Icon
|
14
18
|
- tooltip_delay: Delay
|
15
19
|
- tooltip_show_tooltip_react: Show Tooltip
|
16
|
-
|
@@ -1,6 +1,7 @@
|
|
1
1
|
export { default as TooltipDefaultReact } from './_tooltip_default_react'
|
2
2
|
export { default as TooltipInteraction } from './_tooltip_interaction'
|
3
3
|
export { default as TooltipMargin } from './_tooltip_margin'
|
4
|
+
export { default as TooltipSizing } from './_tooltip_sizing'
|
4
5
|
export { default as TooltipIcon } from './_tooltip_icon'
|
5
6
|
export { default as TooltipDelay } from './_tooltip_delay'
|
6
7
|
export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'
|
@@ -0,0 +1,45 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
id:"color_context_2",
|
3
|
+
label: "Choose a Color",
|
4
|
+
name: "color_name",
|
5
|
+
options: [
|
6
|
+
{ value: "red", value_text: "Red" },
|
7
|
+
{ value: "blue", value_text: "Blue" },
|
8
|
+
{ value: "green", value_text: "Green" }
|
9
|
+
],
|
10
|
+
}) %>
|
11
|
+
|
12
|
+
<%= pb_rails("typeahead", props: {
|
13
|
+
label: "Pick a Shade",
|
14
|
+
is_multi: false,
|
15
|
+
search_context_selector: "color_context_2",
|
16
|
+
options_by_context: {
|
17
|
+
"red": [
|
18
|
+
{ label: "Scarlet", value: "scarlet" },
|
19
|
+
{ label: "Mahogany", value: "mahogany" },
|
20
|
+
{ label: "Crimson", value: "crimson" }
|
21
|
+
],
|
22
|
+
"blue": [
|
23
|
+
{ label: "Sky Blue", value: "sky" },
|
24
|
+
{ label: "Cerulean", value: "cerulean" },
|
25
|
+
{ label: "Navy", value: "navy" }
|
26
|
+
],
|
27
|
+
"green": [
|
28
|
+
{ label: "Emerald", value: "emerald" },
|
29
|
+
{ label: "Mint", value: "mint" },
|
30
|
+
{ label: "Olive", value: "olive" }
|
31
|
+
]
|
32
|
+
},
|
33
|
+
id: "typeahead-dynamic-options",
|
34
|
+
}) %>
|
35
|
+
|
36
|
+
|
37
|
+
<%= javascript_tag defer: "defer" do %>
|
38
|
+
document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
|
39
|
+
console.log('Single Option selected')
|
40
|
+
console.dir(event.detail)
|
41
|
+
})
|
42
|
+
document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
|
43
|
+
console.log('All options cleared')
|
44
|
+
})
|
45
|
+
<% end %>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
|
2
|
+
- The typeahead must have a unique `id`
|
3
|
+
- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
|
4
|
+
- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
|
5
|
+
- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
id:"color_context",
|
3
|
+
label: "Choose a Color",
|
4
|
+
name: "color_name_2",
|
5
|
+
options: [
|
6
|
+
{ value: "red", value_text: "Red" },
|
7
|
+
{ value: "blue", value_text: "Blue" },
|
8
|
+
{ value: "green", value_text: "Green" }
|
9
|
+
],
|
10
|
+
}) %>
|
11
|
+
|
12
|
+
<%= pb_rails("typeahead", props: {
|
13
|
+
label: "Pick a Shade",
|
14
|
+
search_context_selector: "color_context",
|
15
|
+
options_by_context: {
|
16
|
+
"red": [
|
17
|
+
{ label: "Scarlet", value: "scarlet" },
|
18
|
+
{ label: "Mahogany", value: "mahogany" },
|
19
|
+
{ label: "Crimson", value: "crimson" }
|
20
|
+
],
|
21
|
+
"blue": [
|
22
|
+
{ label: "Sky Blue", value: "sky" },
|
23
|
+
{ label: "Cerulean", value: "cerulean" },
|
24
|
+
{ label: "Navy", value: "navy" }
|
25
|
+
],
|
26
|
+
"green": [
|
27
|
+
{ label: "Emerald", value: "emerald" },
|
28
|
+
{ label: "Mint", value: "mint" },
|
29
|
+
{ label: "Olive", value: "olive" }
|
30
|
+
]
|
31
|
+
},
|
32
|
+
search_term_minimum_length: 0,
|
33
|
+
}) %>
|
@@ -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.
|