playbook_ui_docs 14.16.0.pre.rc.0 → 14.16.0.pre.rc.1
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_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -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 +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +5 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5c21b16c2ac14d3a58d6ab03c88578a97f7c167cf78e47740784efe75431315e
|
|
4
|
+
data.tar.gz: 0fc278c3b23ce5a71608747b601ba0b9071940852e247dba082813bfda881086
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 98a54f91fba5dd494508e65d2e642465e0afcbd6ff8c96326b958acf6a585462a4b79412795d5eb627bd4822644be5d03b3657555886ea12a4f218bd3cce0cd5
|
|
7
|
+
data.tar.gz: c5c7ff6ee328411b08da075e8f9ca7937d986ab7eba0278a3cad0c60b75488b1664c12714ee9964820d0f1e70cbc1618f1445640e0931c837cd107fcf5c8a86a
|
|
@@ -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 %>
|
|
@@ -4,6 +4,7 @@ examples:
|
|
|
4
4
|
- tooltip_default: Default
|
|
5
5
|
- tooltip_interaction: Content Interaction
|
|
6
6
|
- tooltip_selectors: Using Common Selectors
|
|
7
|
+
- tooltip_icon_rails: Tooltip with Icon
|
|
7
8
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
|
8
9
|
- tooltip_delay_rails: Delay
|
|
9
10
|
- tooltip_show_tooltip: Show Tooltip
|
|
@@ -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 (
|
|
@@ -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'
|