playbook_ui_docs 14.7.0.pre.rc.19 → 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696
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_card/docs/_card_light.md +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +84 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb +42 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +26 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +7 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +63 -12
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +87 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +47 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +59 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +94 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +180 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +2 -0
- data/dist/playbook-doc.js +1 -1
- metadata +15 -2
|
@@ -62,6 +62,65 @@ const TimelineWithChildren = (props) => (
|
|
|
62
62
|
</Timeline.Detail>
|
|
63
63
|
</Timeline.Item>
|
|
64
64
|
</Timeline>
|
|
65
|
+
|
|
66
|
+
<br />
|
|
67
|
+
<br />
|
|
68
|
+
<br />
|
|
69
|
+
|
|
70
|
+
<Timeline orientation="vertical"
|
|
71
|
+
showDate
|
|
72
|
+
{...props}
|
|
73
|
+
>
|
|
74
|
+
<Timeline.Item lineStyle="solid"
|
|
75
|
+
{...props}
|
|
76
|
+
>
|
|
77
|
+
<Timeline.Label>
|
|
78
|
+
<Title size={4}
|
|
79
|
+
text='Any Kit'
|
|
80
|
+
/>
|
|
81
|
+
</Timeline.Label>
|
|
82
|
+
<Timeline.Step icon="user"
|
|
83
|
+
iconColor="royal"
|
|
84
|
+
/>
|
|
85
|
+
<Timeline.Detail>
|
|
86
|
+
<TitleDetail detail="37-27 74th Street"
|
|
87
|
+
title="Jackson Heights"
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
</Timeline.Detail>
|
|
91
|
+
</Timeline.Item>
|
|
92
|
+
|
|
93
|
+
<Timeline.Item lineStyle="dotted"
|
|
94
|
+
{...props}
|
|
95
|
+
>
|
|
96
|
+
<Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
|
|
97
|
+
<Timeline.Step icon="map-marker-alt"
|
|
98
|
+
iconColor="purple"
|
|
99
|
+
/>
|
|
100
|
+
<Timeline.Detail>
|
|
101
|
+
<TitleDetail detail="72 E St Astoria"
|
|
102
|
+
title="Society Hill"
|
|
103
|
+
{...props}
|
|
104
|
+
/>
|
|
105
|
+
</Timeline.Detail>
|
|
106
|
+
</Timeline.Item>
|
|
107
|
+
|
|
108
|
+
<Timeline.Item lineStyle="solid"
|
|
109
|
+
{...props}
|
|
110
|
+
>
|
|
111
|
+
<Timeline.Step>
|
|
112
|
+
<Pill text="3"
|
|
113
|
+
variant="success"
|
|
114
|
+
/>
|
|
115
|
+
</Timeline.Step>
|
|
116
|
+
<Timeline.Detail>
|
|
117
|
+
<TitleDetail detail="81 Gate St Brooklyn"
|
|
118
|
+
title="Greenpoint"
|
|
119
|
+
{...props}
|
|
120
|
+
/>
|
|
121
|
+
</Timeline.Detail>
|
|
122
|
+
</Timeline.Item>
|
|
123
|
+
</Timeline>
|
|
65
124
|
</div>
|
|
66
125
|
)
|
|
67
126
|
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "evenly" }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
|
|
4
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
5
|
+
<%= pb_rails("body", props: {
|
|
6
|
+
text: "Conversation started",
|
|
7
|
+
color: "light"
|
|
8
|
+
}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
11
|
+
<%= pb_rails("body", props: {
|
|
12
|
+
text: "Trip #12422",
|
|
13
|
+
color: "light"
|
|
14
|
+
}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
17
|
+
<%= pb_rails("body", props: {
|
|
18
|
+
text: "Refund issue #12422",
|
|
19
|
+
color: "light"
|
|
20
|
+
}) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
26
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
|
|
27
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
28
|
+
<%= pb_rails("body", props: {
|
|
29
|
+
text: "Conversation started",
|
|
30
|
+
color: "light"
|
|
31
|
+
}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
34
|
+
<%= pb_rails("body", props: {
|
|
35
|
+
text: "Trip #12422",
|
|
36
|
+
color: "light"
|
|
37
|
+
}) %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
40
|
+
<%= pb_rails("body", props: {
|
|
41
|
+
text: "Refund issue #12422",
|
|
42
|
+
color: "light"
|
|
43
|
+
}) %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
|
|
48
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
49
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
|
|
50
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
51
|
+
<%= pb_rails("body", props: {
|
|
52
|
+
text: "Conversation started",
|
|
53
|
+
color: "light"
|
|
54
|
+
}) %>
|
|
55
|
+
<% end %>
|
|
56
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
57
|
+
<%= pb_rails("body", props: {
|
|
58
|
+
text: "Trip #12422",
|
|
59
|
+
color: "light"
|
|
60
|
+
}) %>
|
|
61
|
+
<% end %>
|
|
62
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
63
|
+
<%= pb_rails("body", props: {
|
|
64
|
+
text: "Refund issue #12422",
|
|
65
|
+
color: "light"
|
|
66
|
+
}) %>
|
|
67
|
+
<% end %>
|
|
68
|
+
<% end %>
|
|
69
|
+
<% end %>
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
72
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
|
|
73
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
74
|
+
<%= pb_rails("body", props: {
|
|
75
|
+
text: "Conversation started",
|
|
76
|
+
color: "light"
|
|
77
|
+
}) %>
|
|
78
|
+
<% end %>
|
|
79
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
80
|
+
<%= pb_rails("body", props: {
|
|
81
|
+
text: "Trip #12422",
|
|
82
|
+
color: "light"
|
|
83
|
+
}) %>
|
|
84
|
+
<% end %>
|
|
85
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
86
|
+
<%= pb_rails("body", props: {
|
|
87
|
+
text: "Refund issue #12422",
|
|
88
|
+
color: "light"
|
|
89
|
+
}) %>
|
|
90
|
+
<% end %>
|
|
91
|
+
<% end %>
|
|
92
|
+
<% end %>
|
|
93
|
+
<% end %>
|
|
94
|
+
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Timeline from '../_timeline'
|
|
4
|
+
import Flex from "../../pb_flex/_flex"
|
|
5
|
+
import FlexItem from "../../pb_flex/_flex_item"
|
|
6
|
+
import Body from '../../pb_body/_body'
|
|
7
|
+
|
|
8
|
+
const TimelineWithGap = (props) => (
|
|
9
|
+
<div>
|
|
10
|
+
<Flex justify="evenly">
|
|
11
|
+
<FlexItem>
|
|
12
|
+
<Timeline
|
|
13
|
+
gap="xs"
|
|
14
|
+
orientation="vertical"
|
|
15
|
+
>
|
|
16
|
+
<Timeline.Item
|
|
17
|
+
icon="user"
|
|
18
|
+
iconColor="royal"
|
|
19
|
+
{...props}
|
|
20
|
+
>
|
|
21
|
+
<Body
|
|
22
|
+
color="light"
|
|
23
|
+
text="Conversation started"
|
|
24
|
+
{...props}
|
|
25
|
+
/>
|
|
26
|
+
</Timeline.Item>
|
|
27
|
+
<Timeline.Item
|
|
28
|
+
icon="check"
|
|
29
|
+
iconColor="teal"
|
|
30
|
+
lineStyle="dotted"
|
|
31
|
+
{...props}
|
|
32
|
+
>
|
|
33
|
+
<Body
|
|
34
|
+
color="light"
|
|
35
|
+
text="Trip #12422"
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
</Timeline.Item>
|
|
39
|
+
<Timeline.Item
|
|
40
|
+
icon="credit-card"
|
|
41
|
+
iconColor="red"
|
|
42
|
+
{...props}
|
|
43
|
+
>
|
|
44
|
+
<Body
|
|
45
|
+
color="light"
|
|
46
|
+
text="Refund issue #12422"
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
</Timeline.Item>
|
|
50
|
+
</Timeline>
|
|
51
|
+
</FlexItem>
|
|
52
|
+
<FlexItem>
|
|
53
|
+
<Timeline
|
|
54
|
+
gap="sm"
|
|
55
|
+
orientation="vertical"
|
|
56
|
+
>
|
|
57
|
+
<Timeline.Item
|
|
58
|
+
icon="user"
|
|
59
|
+
iconColor="royal"
|
|
60
|
+
{...props}
|
|
61
|
+
>
|
|
62
|
+
<Body
|
|
63
|
+
color="light"
|
|
64
|
+
text="Conversation started"
|
|
65
|
+
{...props}
|
|
66
|
+
/>
|
|
67
|
+
</Timeline.Item>
|
|
68
|
+
<Timeline.Item
|
|
69
|
+
icon="check"
|
|
70
|
+
iconColor="teal"
|
|
71
|
+
lineStyle="dotted"
|
|
72
|
+
{...props}
|
|
73
|
+
>
|
|
74
|
+
<Body
|
|
75
|
+
color="light"
|
|
76
|
+
text="Trip #12422"
|
|
77
|
+
{...props}
|
|
78
|
+
/>
|
|
79
|
+
</Timeline.Item>
|
|
80
|
+
<Timeline.Item
|
|
81
|
+
icon="credit-card"
|
|
82
|
+
iconColor="red"
|
|
83
|
+
{...props}
|
|
84
|
+
>
|
|
85
|
+
<Body
|
|
86
|
+
color="light"
|
|
87
|
+
text="Refund issue #12422"
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
</Timeline.Item>
|
|
91
|
+
</Timeline>
|
|
92
|
+
</FlexItem>
|
|
93
|
+
<FlexItem>
|
|
94
|
+
<Timeline
|
|
95
|
+
gap="md"
|
|
96
|
+
orientation="vertical"
|
|
97
|
+
>
|
|
98
|
+
<Timeline.Item
|
|
99
|
+
icon="user"
|
|
100
|
+
iconColor="royal"
|
|
101
|
+
{...props}
|
|
102
|
+
>
|
|
103
|
+
<Body
|
|
104
|
+
color="light"
|
|
105
|
+
text="Conversation started"
|
|
106
|
+
{...props}
|
|
107
|
+
/>
|
|
108
|
+
</Timeline.Item>
|
|
109
|
+
<Timeline.Item
|
|
110
|
+
icon="check"
|
|
111
|
+
iconColor="teal"
|
|
112
|
+
lineStyle="dotted"
|
|
113
|
+
{...props}
|
|
114
|
+
>
|
|
115
|
+
<Body
|
|
116
|
+
color="light"
|
|
117
|
+
text="Trip #12422"
|
|
118
|
+
{...props}
|
|
119
|
+
/>
|
|
120
|
+
</Timeline.Item>
|
|
121
|
+
<Timeline.Item
|
|
122
|
+
icon="credit-card"
|
|
123
|
+
iconColor="red"
|
|
124
|
+
lineStyle="dotted"
|
|
125
|
+
{...props}
|
|
126
|
+
>
|
|
127
|
+
<Body
|
|
128
|
+
color="light"
|
|
129
|
+
text="Refund issue #12422"
|
|
130
|
+
{...props}
|
|
131
|
+
/>
|
|
132
|
+
</Timeline.Item>
|
|
133
|
+
</Timeline>
|
|
134
|
+
</FlexItem>
|
|
135
|
+
<FlexItem>
|
|
136
|
+
<Timeline
|
|
137
|
+
gap="lg"
|
|
138
|
+
orientation="vertical"
|
|
139
|
+
>
|
|
140
|
+
<Timeline.Item
|
|
141
|
+
icon="user"
|
|
142
|
+
iconColor="royal"
|
|
143
|
+
{...props}
|
|
144
|
+
>
|
|
145
|
+
<Body
|
|
146
|
+
color="light"
|
|
147
|
+
text="Conversation started"
|
|
148
|
+
{...props}
|
|
149
|
+
/>
|
|
150
|
+
</Timeline.Item>
|
|
151
|
+
<Timeline.Item
|
|
152
|
+
icon="check"
|
|
153
|
+
iconColor="teal"
|
|
154
|
+
lineStyle="dotted"
|
|
155
|
+
{...props}
|
|
156
|
+
>
|
|
157
|
+
<Body
|
|
158
|
+
color="light"
|
|
159
|
+
text="Trip #12422"
|
|
160
|
+
{...props}
|
|
161
|
+
/>
|
|
162
|
+
</Timeline.Item>
|
|
163
|
+
<Timeline.Item
|
|
164
|
+
icon="credit-card"
|
|
165
|
+
iconColor="red"
|
|
166
|
+
{...props}
|
|
167
|
+
>
|
|
168
|
+
<Body
|
|
169
|
+
color="light"
|
|
170
|
+
text="Refund issue #12422"
|
|
171
|
+
{...props}
|
|
172
|
+
/>
|
|
173
|
+
</Timeline.Item>
|
|
174
|
+
</Timeline>
|
|
175
|
+
</FlexItem>
|
|
176
|
+
</Flex>
|
|
177
|
+
</div>
|
|
178
|
+
)
|
|
179
|
+
|
|
180
|
+
export default TimelineWithGap
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- timeline_default: Default
|
|
5
5
|
- timeline_vertical: Vertical
|
|
6
6
|
- timeline_with_date: With Date
|
|
7
7
|
- timeline_with_children: With Children
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- timeline_with_gap: With Gap
|
|
9
|
+
|
|
10
|
+
|
|
10
11
|
react:
|
|
11
12
|
- timeline_default: Default
|
|
12
13
|
- timeline_vertical: Vertical
|
|
13
14
|
- timeline_with_date: With Date
|
|
14
15
|
- timeline_with_children: With Children
|
|
16
|
+
- timeline_with_gap: With Gap
|
|
@@ -2,3 +2,5 @@ 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
4
|
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|
|
5
|
+
export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
|
|
6
|
+
|