playbook_ui_docs 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454 → 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 14d083c9c6fd4c5929ba49590b4c1e62f2a3839d434f618e017a953efc5c859e
4
- data.tar.gz: 4259298458e01f8cf3e2bc7d382acb6e1bb953a30ead1e493f64ec290b487b72
3
+ metadata.gz: 522d02705acb4ebd3b222e1f0e2315d81408d4adb1ff25da367c0a4a33368ddf
4
+ data.tar.gz: 6ed807cad993b1056fd25bde5de22e95af834db643321252825b56644329ce7b
5
5
  SHA512:
6
- metadata.gz: c9659f70947a8541ae8c2d7d0640186948582eddb18a7881042a9f5c2ad854aa0b964f0c3bcbc47199c0a7894e9e61e578ee458bdebe47f63f5e47b70e85bb3a
7
- data.tar.gz: f404e5e2129e6de4fdc4759fc15d3d9ea298a721779a84aa2e405130f00a67337060e7a4b44f8fc26620a138deb21bec039e2e07a398512074f33c56dc45501b
6
+ metadata.gz: a82029285ba6a0182f21347283ffaac3297b1cda01928f41f86c8060f1918b3672da5176056e88bfe0bd63baca21d276409205beac16c66e5bf5777698d0a153
7
+ data.tar.gz: c23c79c87d162b2cbee00a090d1604878ed25ccb0d062d03f1bdabf235ddeae54c953a301070a69532ab52c8e77ebe348d7b480d3e8d17e614dd77cca8966895
@@ -1 +1 @@
1
- Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
1
+ Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
@@ -0,0 +1,42 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ allow_input: true,
3
+ default_date: "This month",
4
+ end_date_id: "quick-pick-end-date",
5
+ end_date_name: "quick-pick-end-date",
6
+ mode: "range",
7
+ picker_id: "quick-pick-default-date",
8
+ placeholder: "mm/dd/yyyy to mm/dd/yyyy",
9
+ selection_type: "quickpick",
10
+ start_date_id: "quick-pick-start-date",
11
+ start_date_name: "quick-pick-start-date"
12
+ }) %>
13
+
14
+ <%= pb_rails("date_picker", props: {
15
+ allow_input: true,
16
+ custom_quick_pick_dates: {
17
+ dates: [
18
+ {
19
+ label: "Last 15 months",
20
+ value: {
21
+ timePeriod: "months",
22
+ amount: 15,
23
+ },
24
+ },
25
+ {
26
+ label: "First Week of June 2022",
27
+ value: ["06/01/2022", "06/07/2022"],
28
+ },
29
+ ],
30
+ },
31
+ default_date: "First Week of June 2022",
32
+ end_date_id: "quick-pick-end-date",
33
+ end_date_name: "quick-pick-end-date",
34
+ label: "Custom Date Picker",
35
+ mode: "range",
36
+ picker_id: "custom-quick-pick-default-date",
37
+ placeholder: "mm/dd/yyyy to mm/dd/yyyy",
38
+ selection_type: "quickpick",
39
+ start_date_id: "quick-pick-start-date",
40
+ start_date_name: "quick-pick-start-date"
41
+ }) %>
42
+
@@ -0,0 +1,44 @@
1
+ import React from "react"
2
+ import DatePicker from "../_date_picker"
3
+
4
+ const DatePickerQuickPickDefaultDate = (props) => (
5
+ <>
6
+ <DatePicker
7
+ allowInput
8
+ defaultDate="This month"
9
+ mode="range"
10
+ pickerId="quick-pick-default-date"
11
+ placeholder="mm/dd/yyyy to mm/dd/yyyy"
12
+ selectionType="quickpick"
13
+ {...props}
14
+ />
15
+
16
+ <DatePicker
17
+ allowInput
18
+ customQuickPickDates={{
19
+ dates: [
20
+ {
21
+ label: "Last 15 months",
22
+ value: {
23
+ timePeriod: "months",
24
+ amount: 15,
25
+ },
26
+ },
27
+ {
28
+ label: "First Week of June 2022",
29
+ value: ["06/01/2022", "06/07/2022"],
30
+ },
31
+ ],
32
+ }}
33
+ defaultDate="First Week of June 2022"
34
+ label="Custom Date Picker"
35
+ mode="range"
36
+ pickerId="custom-quick-pick-default-date"
37
+ placeholder="mm/dd/yyyy to mm/dd/yyyy"
38
+ selectionType="quickpick"
39
+ {...props}
40
+ />
41
+ </>
42
+ )
43
+
44
+ export default DatePickerQuickPickDefaultDate
@@ -0,0 +1 @@
1
+ To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.
@@ -12,6 +12,7 @@ examples:
12
12
  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
13
13
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
14
14
  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
15
+ - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
15
16
  - date_picker_format: Format
16
17
  - date_picker_disabled: Disabled Dates
17
18
  - date_picker_min_max: Min Max
@@ -42,6 +43,7 @@ examples:
42
43
  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
43
44
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
44
45
  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
46
+ - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
45
47
  - date_picker_format: Format
46
48
  - date_picker_disabled: Disabled Dates
47
49
  - date_picker_min_max: Min Max
@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
25
25
  export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
26
26
  export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
27
27
  export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
28
+ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
@@ -0,0 +1,26 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "1",
4
+ url: "https://unsplash.it/500/400/?image=633",
5
+ },
6
+ {
7
+ id: "2",
8
+ url: "https://unsplash.it/500/400/?image=634",
9
+ },
10
+ {
11
+ id: "3",
12
+ url: "https://unsplash.it/500/400/?image=637",
13
+ },
14
+ ] %>
15
+
16
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
17
+ <%= pb_rails("draggable/draggable_container") do %>
18
+ <%= pb_rails("flex") do %>
19
+ <% initial_items.each do |item| %>
20
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
21
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+ <% end %>
@@ -0,0 +1,7 @@
1
+ The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit.
2
+
3
+ `initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
4
+
5
+ `draggable/draggable_container` = This specifies the container within which items can be dropped.
6
+
7
+ `draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`.
@@ -0,0 +1,38 @@
1
+ <% initial_items = [
2
+ { id: "21", name: "Joe Black" },
3
+ { id: "22", name: "Nancy White" },
4
+ { id: "23", name: "Bill Green" },
5
+ ] %>
6
+
7
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
8
+ <%= pb_rails("draggable/draggable_container") do %>
9
+ <% initial_items.each do |item| %>
10
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
11
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
12
+ <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
13
+ <%= pb_rails("flex", props:{gap: "xs"}) do %>
14
+ <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
15
+ <%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %>
16
+ <% end %>
17
+ <%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %>
18
+ <%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %>
19
+ <%= pb_rails("flex", props:{gap: "xxs"}) do %>
20
+ <%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %>
21
+ <%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %>
22
+ <% end %>
23
+ <%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %>
24
+ <%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %>
25
+ <% end %>
26
+ <% end %>
27
+ <%= pb_rails("flex") do %>
28
+ <%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %>
29
+ <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %>
30
+ <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %>
31
+ <% end %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
35
+ <% end %>
36
+ <% end %>
37
+ <% end %>
38
+ <% end %>
@@ -0,0 +1,19 @@
1
+ <% initial_items = [
2
+ { id: "31", name: "Philadelphia" },
3
+ { id: "32", name: "New Jersey" },
4
+ { id: "33", name: "Maryland" },
5
+ { id: "34", name: "Connecticut" },
6
+
7
+ ] %>
8
+
9
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
10
+ <%= pb_rails("draggable/draggable_container") do %>
11
+ <%= pb_rails("list", props: {ordered: false}) do %>
12
+ <% initial_items.each do |item| %>
13
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
14
+ <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
@@ -8,4 +8,10 @@ examples:
8
8
  - draggable_with_cards: Draggable with Cards
9
9
  - draggable_multiple_containers: Dragging Across Multiple Containers
10
10
 
11
+ rails:
12
+ - draggable_default_rails: Default
13
+ - draggable_with_list_rails: Draggable with List Kit
14
+ - draggable_with_cards_rails: Draggable with Cards
15
+
16
+
11
17
 
@@ -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
+