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.
Files changed (107) 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_radio/docs/_radio_react_hook.jsx +60 -0
  73. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  74. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  75. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  76. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
  77. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
  78. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  79. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  80. data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
  81. data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
  83. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
  84. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
  85. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  86. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  87. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
  88. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
  89. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
  90. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
  91. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
  92. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
  93. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +4 -1
  94. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  95. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
  96. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
  97. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
  99. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
  103. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  105. data/dist/playbook-doc.js +1 -1
  106. metadata +63 -3
  107. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ hidden_inputs: true,
3
+ id: "hidden_inputs",
4
+ name: "hidden_inputs",
5
+ }) %>
@@ -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.
@@ -30,6 +30,7 @@ examples:
30
30
  - select_inline_show_arrow: Select Inline (Always Show Arrow)
31
31
  - select_inline_compact: Select Inline Compact
32
32
  - select_multiple: Select Multiple
33
+ - select_react_hook: React Hook
33
34
 
34
35
  swift:
35
36
  - select_default_swift: Default
@@ -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 }) %>
@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
6
6
  return (
7
7
  <div>
8
8
  <Title
9
+ marginBottom='md'
9
10
  text="Default Title"
10
11
  {...props}
11
12
  />
12
- <br />
13
13
  <Title
14
14
  size={1}
15
15
  tag="h1"
@@ -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,3 @@
1
+ Waits for the specified time when the event listener runs before triggering the tooltip.
2
+
3
+ The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.
@@ -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
@@ -0,0 +1,3 @@
1
+ You can customize the `height` and `width` of the tooltip's popover.
2
+
3
+ When using `maxHeight`, be sure to set a `width` as well. The text needs to truncate within the `width` prop.
@@ -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.