playbook_ui_docs 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380
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_form_pill/docs/_form_pill_truncated_text.html.erb +24 -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_rails.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +68 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +2 -0
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +7 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4fa90c698cd24c29959cf0f38b1e9e4151129d5377098f12d40f675656b295c6
|
4
|
+
data.tar.gz: 8c1ddadce4e3f95a44224eec0736a6f09bbce1a24d1d729888ec27f137d47e1e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bf91282d845229239f7675c4f4976627086a9b708a6bafebaa78c6db39a5f8cc620fd5e14a995ba6f5bf1a01d50fc87f86f9cd6a4f1a31a91cd68a436862299a
|
7
|
+
data.tar.gz: e1bf87c40f11c7dbb3a7fa0c06150212e862b7357598d7a0eef1191f6806e0efbc1023f1f3a54dadb41e6daec2f87e8417b096952623f59b539519fc3e7ab2d9
|
@@ -13,7 +13,30 @@
|
|
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
|
+
id: "truncation-1"
|
29
|
+
}) %>
|
30
|
+
<%= pb_rails("form_pill", props: {
|
31
|
+
icon: "badge-check",
|
32
|
+
text: "icon and a very long tag to show truncation",
|
33
|
+
tabindex: 0,
|
34
|
+
truncate: 1,
|
35
|
+
id: "truncation-2"
|
36
|
+
}) %>
|
37
|
+
<%= pb_rails("form_pill", props: {
|
38
|
+
text: "form pill long tag no tooltip show truncation",
|
39
|
+
tabindex: 0,
|
40
|
+
truncate: 1,
|
41
|
+
}) %>
|
42
|
+
<% 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
|
}
|
@@ -0,0 +1,3 @@
|
|
1
|
+
For Form 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.
|
2
|
+
|
3
|
+
__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
|
@@ -0,0 +1 @@
|
|
1
|
+
For Form 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,43 @@
|
|
1
|
+
<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
|
2
|
+
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
|
3
|
+
|
4
|
+
<% item.label do %>
|
5
|
+
<%= pb_rails("timeline/label") do %>
|
6
|
+
<%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% item.step do %>
|
11
|
+
<%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<% item.detail do %>
|
15
|
+
<%= pb_rails("title_detail", props: {
|
16
|
+
title: "Jackson Heights",
|
17
|
+
detail: "37-27 74th Street"
|
18
|
+
}) %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
<%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
|
22
|
+
|
23
|
+
<% item.step do %>
|
24
|
+
<%= pb_rails("timeline/step") do %>
|
25
|
+
<%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
|
26
|
+
<% end %>
|
27
|
+
<% end %>
|
28
|
+
|
29
|
+
<% item.detail do %>
|
30
|
+
<%= pb_rails("title_detail", props: {
|
31
|
+
title: "Greenpoint",
|
32
|
+
detail: "81 Gate St Brooklyn"
|
33
|
+
}) %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
36
|
+
|
37
|
+
<%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
|
38
|
+
<%= pb_rails("title_detail", props: {
|
39
|
+
title: "Society Hill",
|
40
|
+
detail: "72 E St Astoria"
|
41
|
+
}) %>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Timeline from '../_timeline'
|
4
|
+
import Title from '../../pb_title/_title'
|
5
|
+
import Pill from '../../pb_pill/_pill'
|
6
|
+
|
7
|
+
import TitleDetail from '../../pb_title_detail/_title_detail'
|
8
|
+
|
9
|
+
const TimelineWithChildren = (props) => (
|
10
|
+
<div>
|
11
|
+
<Timeline orientation="horizontal"
|
12
|
+
showDate
|
13
|
+
{...props}
|
14
|
+
>
|
15
|
+
<Timeline.Item lineStyle="solid"
|
16
|
+
{...props}
|
17
|
+
>
|
18
|
+
<Timeline.Label>
|
19
|
+
<Title size={2}
|
20
|
+
text='Any Kit Here'
|
21
|
+
/>
|
22
|
+
</Timeline.Label>
|
23
|
+
<Timeline.Step icon="user"
|
24
|
+
iconColor="royal"
|
25
|
+
/>
|
26
|
+
<Timeline.Detail>
|
27
|
+
<TitleDetail detail="37-27 74th Street"
|
28
|
+
title="Jackson Heights"
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
</Timeline.Detail>
|
32
|
+
</Timeline.Item>
|
33
|
+
|
34
|
+
<Timeline.Item lineStyle="dotted"
|
35
|
+
{...props}
|
36
|
+
>
|
37
|
+
<Timeline.Step>
|
38
|
+
<Pill text="Any Kit"
|
39
|
+
variant="success"
|
40
|
+
/>
|
41
|
+
</Timeline.Step>
|
42
|
+
<Timeline.Detail>
|
43
|
+
<TitleDetail detail="81 Gate St Brooklyn"
|
44
|
+
title="Greenpoint"
|
45
|
+
{...props}
|
46
|
+
/>
|
47
|
+
</Timeline.Detail>
|
48
|
+
</Timeline.Item>
|
49
|
+
|
50
|
+
<Timeline.Item lineStyle="solid"
|
51
|
+
{...props}
|
52
|
+
>
|
53
|
+
<Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
|
54
|
+
<Timeline.Step icon="map-marker-alt"
|
55
|
+
iconColor="purple"
|
56
|
+
/>
|
57
|
+
<Timeline.Detail>
|
58
|
+
<TitleDetail detail="72 E St Astoria"
|
59
|
+
title="Society Hill"
|
60
|
+
{...props}
|
61
|
+
/>
|
62
|
+
</Timeline.Detail>
|
63
|
+
</Timeline.Item>
|
64
|
+
</Timeline>
|
65
|
+
</div>
|
66
|
+
)
|
67
|
+
|
68
|
+
export default TimelineWithChildren
|
@@ -4,10 +4,11 @@ examples:
|
|
4
4
|
- timeline_default: Default
|
5
5
|
- timeline_vertical: Vertical
|
6
6
|
- timeline_with_date: With Date
|
7
|
+
- timeline_with_children: With Children
|
7
8
|
|
8
9
|
|
9
10
|
react:
|
10
11
|
- timeline_default: Default
|
11
12
|
- timeline_vertical: Vertical
|
12
13
|
- timeline_with_date: With Date
|
13
|
-
|
14
|
+
- timeline_with_children: With Children
|
@@ -1,3 +1,4 @@
|
|
1
1
|
export { default as TimelineDefault } from './_timeline_default.jsx'
|
2
2
|
export { default as TimelineVertical } from './_timeline_vertical.jsx'
|
3
3
|
export { default as TimelineWithDate } from './_timeline_with_date.jsx'
|
4
|
+
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|