playbook_ui_docs 14.6.0.pre.rc.3 → 14.6.0.pre.rc.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -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/dist/playbook-doc.js +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a34f2746f2f4a6b128469a00d3493d53dcd2a049b994db829038b4f763c88b63
|
|
4
|
+
data.tar.gz: 11f97cfb89890074afb4d97623f423f8bb90feb935d4948d83344b9826fdef50
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d45f77e2f5c2c46be5d580b5cf05f3c0aebc3898a0151dd811e515734438d648d99576e2c0a34de3980e5d16d659323c9b8b8a3e5d6f8b9a5a6547135114cf95
|
|
7
|
+
data.tar.gz: ccf97485b19b9bb31aaaaaf22719500966a6379a85a1f98651d329ebf2e1c9f81feb9d0cb897b59f44079c1bfea31e61680c23ea0e68b4414043d024cc862003
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<%
|
|
2
|
+
names = [
|
|
3
|
+
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
|
4
|
+
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
|
5
|
+
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
|
6
|
+
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
|
7
|
+
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
|
8
|
+
]
|
|
9
|
+
%>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("typeahead", props: {
|
|
12
|
+
html_options: { style: { maxWidth: "240px" }},
|
|
13
|
+
id: "typeahead-form-pill",
|
|
14
|
+
is_multi: true,
|
|
15
|
+
options: names,
|
|
16
|
+
label: "Names",
|
|
17
|
+
pills: true,
|
|
18
|
+
truncate: 1,
|
|
19
|
+
}) %>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
3
|
+
|
|
4
|
+
const names = [
|
|
5
|
+
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
|
6
|
+
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
|
7
|
+
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
|
8
|
+
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
|
9
|
+
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
|
10
|
+
]
|
|
11
|
+
|
|
12
|
+
const FormPillTruncatedText = (props) => {
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Typeahead
|
|
16
|
+
htmlOptions={{ style: { maxWidth: "240px" }}}
|
|
17
|
+
isMulti
|
|
18
|
+
label="Names"
|
|
19
|
+
options={names}
|
|
20
|
+
truncate={1}
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
</>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export default FormPillTruncatedText
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- form_pill_user: Form Pill User
|
|
5
5
|
- form_pill_size: Form Pill Size
|
|
6
|
+
- form_pill_truncated_text: Truncated Text
|
|
6
7
|
- form_pill_tag: Form Pill Tag
|
|
7
8
|
- form_pill_example: Example
|
|
8
9
|
- form_pill_icon: Form Pill Icon
|
|
@@ -11,6 +12,7 @@ examples:
|
|
|
11
12
|
react:
|
|
12
13
|
- form_pill_user: Form Pill User
|
|
13
14
|
- form_pill_size: Form Pill Size
|
|
15
|
+
- form_pill_truncated_text: Truncated Text
|
|
14
16
|
- form_pill_tag: Form Pill Tag
|
|
15
17
|
- form_pill_example: Example
|
|
16
18
|
- form_pill_icon: Form Pill Icon
|
|
@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
|
|
|
4
4
|
export { default as FormPillExample } from './_form_pill_example.jsx'
|
|
5
5
|
export { default as FormPillIcon } from './_form_pill_icon.jsx'
|
|
6
6
|
export { default as FormPillColors } from './_form_pill_colors.jsx'
|
|
7
|
+
export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
|