playbook_ui_docs 14.6.0.pre.rc.3 → 14.6.0.pre.rc.4
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: 2c6d787dedb1d835c75e5dcfb25da29edafb43ed8f3aa8edf8bbf64d8809f1a4
|
|
4
|
+
data.tar.gz: c7ff69e39a76d4f1dbc7df80f1e1f40f8b28d1106767ab85b135cdc057ca5b66
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 60fa914448fa775d27aef1c02e5b1957f55b02b8029019cd852f893101a324a19a02e4f648804666c91cc094da9ea262c4407fb6b1b70a7285dbb6b39f3fe455
|
|
7
|
+
data.tar.gz: b03935f961a15773c5fb6af2714eeaddc1e68791095c0590de593872bd4d42efbe9c63dcba85ea2e0abd27c32ce2743b71cf4f559ef29114c2c90a3d1fa6a17b
|
|
@@ -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'
|