playbook_ui_docs 14.6.0.pre.rc.25 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4296
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 +22 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +25 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -1
- data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +30 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +40 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +5 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +25 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +35 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +45 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +5 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +15 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +16 -0
- data/app/pb_kits/playbook/pb_link/docs/index.js +5 -0
- data/dist/playbook-doc.js +1 -1
- metadata +14 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 87c3d7169a7c4cf6e6b1e9203fce5ab752490b9a1bab6121b1b403588225d90f
|
|
4
|
+
data.tar.gz: c3ea63edafb3de4c566e90fbbd93d58eefcba1f4e67bfd3b04d7a69871a4a130
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 27791a0cf5c845c980a5fd90c2305fe6913661280778b5cdf974ab0933de4d1d1d30cf07f8bac9e7d4fdcdef4c65c40039de4cea5fa822103ab206b7d6d28a7b
|
|
7
|
+
data.tar.gz: d92d59e521d15f105edaa7cfffc04b96e30e81550cc7faab5a2953ff297444c70d6e4fae6e6276db9a7b8e5b836edce67977d799d1c6dcb20c55ce625aa66180
|
|
@@ -13,7 +13,28 @@
|
|
|
13
13
|
id: "typeahead-form-pill",
|
|
14
14
|
is_multi: true,
|
|
15
15
|
options: names,
|
|
16
|
-
label: "
|
|
16
|
+
label: "Truncation Within Typeahead",
|
|
17
17
|
pills: true,
|
|
18
18
|
truncate: 1,
|
|
19
19
|
}) %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
|
|
22
|
+
<%= pb_rails("card", props: { max_width: "xs" }) do %>
|
|
23
|
+
<%= pb_rails("form_pill", props: {
|
|
24
|
+
name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
|
|
25
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
|
26
|
+
tabindex: 0,
|
|
27
|
+
truncate: 1,
|
|
28
|
+
}) %>
|
|
29
|
+
<%= pb_rails("form_pill", props: {
|
|
30
|
+
icon: "badge-check",
|
|
31
|
+
text: "icon and a very long tag to show truncation",
|
|
32
|
+
tabindex: 0,
|
|
33
|
+
truncate: 1,
|
|
34
|
+
}) %>
|
|
35
|
+
<%= pb_rails("form_pill", props: {
|
|
36
|
+
text: "form pill with a very long tag to show truncation",
|
|
37
|
+
tabindex: 0,
|
|
38
|
+
truncate: 1,
|
|
39
|
+
}) %>
|
|
40
|
+
<% end %>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import Typeahead from '
|
|
2
|
+
import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
|
|
3
3
|
|
|
4
4
|
const names = [
|
|
5
5
|
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
|
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
|
|
|
15
15
|
<Typeahead
|
|
16
16
|
htmlOptions={{ style: { maxWidth: "240px" }}}
|
|
17
17
|
isMulti
|
|
18
|
-
label="
|
|
18
|
+
label="Truncation Within Typeahead"
|
|
19
19
|
options={names}
|
|
20
20
|
truncate={1}
|
|
21
21
|
{...props}
|
|
22
22
|
/>
|
|
23
|
+
<Caption text="Form Pill Truncation"/>
|
|
24
|
+
<Card maxWidth="xs">
|
|
25
|
+
<FormPill
|
|
26
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
|
27
|
+
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
|
|
28
|
+
onClick={() => alert('Click!')}
|
|
29
|
+
tabIndex={0}
|
|
30
|
+
truncate={1}
|
|
31
|
+
/>
|
|
32
|
+
<FormPill
|
|
33
|
+
icon="badge-check"
|
|
34
|
+
onClick={() => {alert('Click!')}}
|
|
35
|
+
tabIndex={0}
|
|
36
|
+
text="icon and a very long tag to show truncation"
|
|
37
|
+
truncate={1}
|
|
38
|
+
/>
|
|
39
|
+
<FormPill
|
|
40
|
+
onClick={() => {alert('Click!')}}
|
|
41
|
+
tabIndex={0}
|
|
42
|
+
text="form pill with a very long tag to show truncation"
|
|
43
|
+
truncate={1}
|
|
44
|
+
/>
|
|
45
|
+
</Card>
|
|
23
46
|
</>
|
|
24
47
|
)
|
|
25
48
|
}
|
|
@@ -1 +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.
|
|
1
|
+
For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<%= pb_rails("link", props: {
|
|
3
|
+
text: "link example",
|
|
4
|
+
href: "https://www.google.com/search?q=playbook+design+system",
|
|
5
|
+
}) %>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<div>
|
|
9
|
+
<%= pb_rails("link", props: {
|
|
10
|
+
text: "link example",
|
|
11
|
+
href: "https://www.youtube.com/@PowerHRG",
|
|
12
|
+
color: "body",
|
|
13
|
+
}) %>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div>
|
|
17
|
+
<%= pb_rails("link", props: {
|
|
18
|
+
text: "link example",
|
|
19
|
+
href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
|
|
20
|
+
color: "muted",
|
|
21
|
+
}) %>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div>
|
|
25
|
+
<%= pb_rails("link", props: {
|
|
26
|
+
text: "link example",
|
|
27
|
+
href: "https://rubygems.org/gems/playbook_ui/",
|
|
28
|
+
color: "destructive",
|
|
29
|
+
}) %>
|
|
30
|
+
</div>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Link } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const LinkColor = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<div>
|
|
7
|
+
<Link
|
|
8
|
+
href="https://www.google.com/search?q=playbook+design+system"
|
|
9
|
+
text="link example"
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
<div>
|
|
14
|
+
<Link
|
|
15
|
+
color="body"
|
|
16
|
+
href="https://www.youtube.com/@PowerHRG"
|
|
17
|
+
text="link example"
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
</div>
|
|
21
|
+
<div>
|
|
22
|
+
<Link
|
|
23
|
+
color="muted"
|
|
24
|
+
href="https://github.com/powerhome/.github/blob/main/profile/README.md"
|
|
25
|
+
text="link example"
|
|
26
|
+
{...props}
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
<div>
|
|
30
|
+
<Link
|
|
31
|
+
color="destructive"
|
|
32
|
+
href="https://rubygems.org/gems/playbook_ui/"
|
|
33
|
+
text="link example"
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
)
|
|
39
|
+
|
|
40
|
+
export default LinkColor
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<%= pb_rails("link", props: {
|
|
3
|
+
text: "link example",
|
|
4
|
+
href: "#icon",
|
|
5
|
+
icon: "arrow-up-right-from-square",
|
|
6
|
+
}) %>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div>
|
|
10
|
+
<%= pb_rails("link", props: {
|
|
11
|
+
text: "link example",
|
|
12
|
+
href: "#icon2",
|
|
13
|
+
icon_right: "chevron-right",
|
|
14
|
+
}) %>
|
|
15
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Link } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const LinkIcon = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<div>
|
|
7
|
+
<Link
|
|
8
|
+
href="#icon"
|
|
9
|
+
icon="arrow-up-right-from-square"
|
|
10
|
+
text="link example"
|
|
11
|
+
{...props}
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<div>
|
|
15
|
+
<Link
|
|
16
|
+
href="#icon2"
|
|
17
|
+
iconRight="chevron-right"
|
|
18
|
+
text="link example"
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
)
|
|
24
|
+
|
|
25
|
+
export default LinkIcon
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<%= pb_rails("link", props: {
|
|
2
|
+
text: "h1 link example",
|
|
3
|
+
href: "#tag",
|
|
4
|
+
icon: "arrow-up-right-from-square",
|
|
5
|
+
tag: "h1",
|
|
6
|
+
}) %>
|
|
7
|
+
|
|
8
|
+
<%= pb_rails("link", props: {
|
|
9
|
+
text: "h3 link example",
|
|
10
|
+
href: "#tag2",
|
|
11
|
+
tag: "h3",
|
|
12
|
+
underline: true,
|
|
13
|
+
}) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("link", props: {
|
|
16
|
+
color: "destructive",
|
|
17
|
+
text: "h6 link example",
|
|
18
|
+
href: "#tag3",
|
|
19
|
+
tag: "h6",
|
|
20
|
+
}) %>
|
|
21
|
+
|
|
22
|
+
<%= pb_rails("link", props: {
|
|
23
|
+
text: "p link example",
|
|
24
|
+
href: "#tag4",
|
|
25
|
+
icon_right: "chevron-right",
|
|
26
|
+
tag: "p",
|
|
27
|
+
}) %>
|
|
28
|
+
|
|
29
|
+
<div>
|
|
30
|
+
This is a <%= pb_rails("link", props: {
|
|
31
|
+
text: "span link example",
|
|
32
|
+
href: "#tag5",
|
|
33
|
+
tag: "span",
|
|
34
|
+
}) %>
|
|
35
|
+
</div>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Link } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const LinkTag = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<Link
|
|
7
|
+
href="#tag"
|
|
8
|
+
icon="arrow-up-right-from-square"
|
|
9
|
+
tag="h1"
|
|
10
|
+
text="h1 link example"
|
|
11
|
+
{...props}
|
|
12
|
+
/>
|
|
13
|
+
<Link
|
|
14
|
+
href="#tag2"
|
|
15
|
+
tag="h3"
|
|
16
|
+
text="h3 link example"
|
|
17
|
+
underline
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
<Link
|
|
21
|
+
color="destructive"
|
|
22
|
+
href="#tag3"
|
|
23
|
+
tag="h6"
|
|
24
|
+
text="h6 link example"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
<Link
|
|
28
|
+
href="#tag4"
|
|
29
|
+
iconRight="chevron-right"
|
|
30
|
+
tag="p"
|
|
31
|
+
text="p link example"
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
<div>
|
|
35
|
+
This is a <Link
|
|
36
|
+
href="#tag5"
|
|
37
|
+
tag="span"
|
|
38
|
+
text="span link example"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
)
|
|
44
|
+
|
|
45
|
+
export default LinkTag
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
examples:
|
|
2
|
+
|
|
3
|
+
rails:
|
|
4
|
+
- link_color: Color
|
|
5
|
+
- link_underline: Underline
|
|
6
|
+
- link_icon: Icon
|
|
7
|
+
- link_disabled: Disabled
|
|
8
|
+
- link_tag: Tag
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
react:
|
|
12
|
+
- link_color: Color
|
|
13
|
+
- link_underline: Underline
|
|
14
|
+
- link_icon: Icon
|
|
15
|
+
- link_disabled: Disabled
|
|
16
|
+
- link_tag: Tag
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as LinkColor } from './_link_color.jsx'
|
|
2
|
+
export { default as LinkUnderline } from './_link_underline.jsx'
|
|
3
|
+
export { default as LinkIcon } from './_link_icon.jsx'
|
|
4
|
+
export { default as LinkDisabled } from './_link_disabled.jsx'
|
|
5
|
+
export { default as LinkTag } from './_link_tag.jsx'
|