playbook_ui_docs 14.1.0.pre.alpha.PA1477timestampkit3601 → 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608
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_colors.html.erb +117 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +227 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.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/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +2 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +31 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +26 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +13 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 03003e7a5730643b9389fcb6a713c2904707265b33e7dc2ec70ee8f6c4cf92da
|
|
4
|
+
data.tar.gz: 3f626f86fbacd8850ad2bece6ced718bb80a7eed53bed0633acd7dde78ef0abf
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b500436c1333f7f4b944b55d522beb6ceb19b87bfa985281aad0ede5dc0678851663536164c727833e29c6fad129229d1f8af103fffba6e470440b1a42f40122
|
|
7
|
+
data.tar.gz: 2df17ac6cbd8c42efd4b62fd789b2935d3fb06178e06e0c8ae0e65a10419648bc455ecc2d2bfe7e5b68cf021695b8f5f8ff65fa484d2b4914eb176c3a1bd1931
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("form_pill", props: {
|
|
4
|
+
text: "Neutral",
|
|
5
|
+
tabindex: 0,
|
|
6
|
+
}) %>
|
|
7
|
+
<%= pb_rails("form_pill", props: {
|
|
8
|
+
color: "primary",
|
|
9
|
+
text: "Primary",
|
|
10
|
+
tabindex: 0,
|
|
11
|
+
}) %>
|
|
12
|
+
<%= pb_rails("form_pill", props: {
|
|
13
|
+
color: "success",
|
|
14
|
+
text: "Success",
|
|
15
|
+
tabindex: 0,
|
|
16
|
+
}) %>
|
|
17
|
+
<%= pb_rails("form_pill", props: {
|
|
18
|
+
color: "warning",
|
|
19
|
+
text: "Warning",
|
|
20
|
+
tabindex: 0,
|
|
21
|
+
}) %>
|
|
22
|
+
<%= pb_rails("form_pill", props: {
|
|
23
|
+
color: "error",
|
|
24
|
+
text: "Error",
|
|
25
|
+
tabindex: 0,
|
|
26
|
+
}) %>
|
|
27
|
+
<%= pb_rails("form_pill", props: {
|
|
28
|
+
color: "info",
|
|
29
|
+
text: "Info",
|
|
30
|
+
tabindex: 0,
|
|
31
|
+
}) %>
|
|
32
|
+
|
|
33
|
+
<%= pb_rails("title", props: { text: "Data Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
|
|
34
|
+
|
|
35
|
+
<%= pb_rails("form_pill", props: {
|
|
36
|
+
color: "data_1",
|
|
37
|
+
text: "Data 1",
|
|
38
|
+
tabindex: 0,
|
|
39
|
+
}) %>
|
|
40
|
+
<%= pb_rails("form_pill", props: {
|
|
41
|
+
color: "data_2",
|
|
42
|
+
text: "Data 2",
|
|
43
|
+
tabindex: 0,
|
|
44
|
+
}) %>
|
|
45
|
+
<%= pb_rails("form_pill", props: {
|
|
46
|
+
color: "data_3",
|
|
47
|
+
text: "Data 3",
|
|
48
|
+
tabindex: 0,
|
|
49
|
+
}) %>
|
|
50
|
+
<%= pb_rails("form_pill", props: {
|
|
51
|
+
color: "data_4",
|
|
52
|
+
text: "Data 4",
|
|
53
|
+
tabindex: 0,
|
|
54
|
+
}) %>
|
|
55
|
+
<%= pb_rails("form_pill", props: {
|
|
56
|
+
color: "data_5",
|
|
57
|
+
text: "Data 5",
|
|
58
|
+
tabindex: 0,
|
|
59
|
+
}) %>
|
|
60
|
+
<%= pb_rails("form_pill", props: {
|
|
61
|
+
color: "data_6",
|
|
62
|
+
text: "Data 6",
|
|
63
|
+
tabindex: 0,
|
|
64
|
+
}) %>
|
|
65
|
+
<%= pb_rails("form_pill", props: {
|
|
66
|
+
color: "data_7",
|
|
67
|
+
text: "Data 7",
|
|
68
|
+
tabindex: 0,
|
|
69
|
+
}) %>
|
|
70
|
+
<%= pb_rails("form_pill", props: {
|
|
71
|
+
color: "data_8",
|
|
72
|
+
text: "Data 8",
|
|
73
|
+
tabindex: 0,
|
|
74
|
+
}) %>
|
|
75
|
+
|
|
76
|
+
<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
|
|
77
|
+
|
|
78
|
+
<%= pb_rails("form_pill", props: {
|
|
79
|
+
color: "windows",
|
|
80
|
+
text: "Windows",
|
|
81
|
+
tabindex: 0,
|
|
82
|
+
}) %>
|
|
83
|
+
<%= pb_rails("form_pill", props: {
|
|
84
|
+
color: "siding",
|
|
85
|
+
text: "Siding",
|
|
86
|
+
tabindex: 0,
|
|
87
|
+
}) %>
|
|
88
|
+
<%= pb_rails("form_pill", props: {
|
|
89
|
+
color: "roofing",
|
|
90
|
+
text: "Roofing",
|
|
91
|
+
tabindex: 0,
|
|
92
|
+
}) %>
|
|
93
|
+
<%= pb_rails("form_pill", props: {
|
|
94
|
+
color: "doors",
|
|
95
|
+
text: "Doors",
|
|
96
|
+
tabindex: 0,
|
|
97
|
+
}) %>
|
|
98
|
+
<%= pb_rails("form_pill", props: {
|
|
99
|
+
color: "gutters",
|
|
100
|
+
text: "Gutters",
|
|
101
|
+
tabindex: 0,
|
|
102
|
+
}) %>
|
|
103
|
+
<%= pb_rails("form_pill", props: {
|
|
104
|
+
color: "solar",
|
|
105
|
+
text: "Solar",
|
|
106
|
+
tabindex: 0,
|
|
107
|
+
}) %>
|
|
108
|
+
<%= pb_rails("form_pill", props: {
|
|
109
|
+
color: "insulation",
|
|
110
|
+
text: "Insulation",
|
|
111
|
+
tabindex: 0,
|
|
112
|
+
}) %>
|
|
113
|
+
<%= pb_rails("form_pill", props: {
|
|
114
|
+
color: "accessories",
|
|
115
|
+
text: "Accessories",
|
|
116
|
+
tabindex: 0,
|
|
117
|
+
}) %>
|
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { FormPill, Title } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const FormPillColors = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<div>
|
|
7
|
+
<Title
|
|
8
|
+
marginBottom="sm"
|
|
9
|
+
size={4}
|
|
10
|
+
text="Status Colors"
|
|
11
|
+
{...props}
|
|
12
|
+
/>
|
|
13
|
+
<FormPill
|
|
14
|
+
onClick={() => {
|
|
15
|
+
alert('Click!')
|
|
16
|
+
}}
|
|
17
|
+
tabIndex={0}
|
|
18
|
+
text="Neutral"
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
<FormPill
|
|
22
|
+
color="primary"
|
|
23
|
+
onClick={() => {
|
|
24
|
+
alert('Click!')
|
|
25
|
+
}}
|
|
26
|
+
tabIndex={0}
|
|
27
|
+
text="Primary"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
<FormPill
|
|
31
|
+
color="success"
|
|
32
|
+
onClick={() => {
|
|
33
|
+
alert('Click!')
|
|
34
|
+
}}
|
|
35
|
+
tabIndex={0}
|
|
36
|
+
text="Success"
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
<FormPill
|
|
40
|
+
color="warning"
|
|
41
|
+
onClick={() => {
|
|
42
|
+
alert('Click!')
|
|
43
|
+
}}
|
|
44
|
+
tabIndex={0}
|
|
45
|
+
text="Warning"
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
<FormPill
|
|
49
|
+
color="error"
|
|
50
|
+
onClick={() => {
|
|
51
|
+
alert('Click!')
|
|
52
|
+
}}
|
|
53
|
+
tabIndex={0}
|
|
54
|
+
text="Error"
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
<FormPill
|
|
58
|
+
color="info"
|
|
59
|
+
onClick={() => {
|
|
60
|
+
alert('Click!')
|
|
61
|
+
}}
|
|
62
|
+
tabIndex={0}
|
|
63
|
+
text="Info"
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
<Title
|
|
67
|
+
marginBottom="sm"
|
|
68
|
+
marginTop="md"
|
|
69
|
+
size={4}
|
|
70
|
+
text="Data Colors"
|
|
71
|
+
{...props}
|
|
72
|
+
/>
|
|
73
|
+
<FormPill
|
|
74
|
+
color="data_1"
|
|
75
|
+
onClick={() => {
|
|
76
|
+
alert('Click!')
|
|
77
|
+
}}
|
|
78
|
+
tabIndex={0}
|
|
79
|
+
text="Data 1"
|
|
80
|
+
{...props}
|
|
81
|
+
/>
|
|
82
|
+
<FormPill
|
|
83
|
+
color="data_2"
|
|
84
|
+
onClick={() => {
|
|
85
|
+
alert('Click!')
|
|
86
|
+
}}
|
|
87
|
+
tabIndex={0}
|
|
88
|
+
text="Data 2"
|
|
89
|
+
{...props}
|
|
90
|
+
/>
|
|
91
|
+
<FormPill
|
|
92
|
+
color="data_3"
|
|
93
|
+
onClick={() => {
|
|
94
|
+
alert('Click!')
|
|
95
|
+
}}
|
|
96
|
+
tabIndex={0}
|
|
97
|
+
text="Data 3"
|
|
98
|
+
{...props}
|
|
99
|
+
/>
|
|
100
|
+
<FormPill
|
|
101
|
+
color="data_4"
|
|
102
|
+
onClick={() => {
|
|
103
|
+
alert('Click!')
|
|
104
|
+
}}
|
|
105
|
+
tabIndex={0}
|
|
106
|
+
text="Data 4"
|
|
107
|
+
{...props}
|
|
108
|
+
/>
|
|
109
|
+
<FormPill
|
|
110
|
+
color="data_5"
|
|
111
|
+
onClick={() => {
|
|
112
|
+
alert('Click!')
|
|
113
|
+
}}
|
|
114
|
+
tabIndex={0}
|
|
115
|
+
text="Data 5"
|
|
116
|
+
{...props}
|
|
117
|
+
/>
|
|
118
|
+
<FormPill
|
|
119
|
+
color="data_6"
|
|
120
|
+
onClick={() => {
|
|
121
|
+
alert('Click!')
|
|
122
|
+
}}
|
|
123
|
+
tabIndex={0}
|
|
124
|
+
text="Data 6"
|
|
125
|
+
{...props}
|
|
126
|
+
/>
|
|
127
|
+
<FormPill
|
|
128
|
+
color="data_7"
|
|
129
|
+
onClick={() => {
|
|
130
|
+
alert('Click!')
|
|
131
|
+
}}
|
|
132
|
+
tabIndex={0}
|
|
133
|
+
text="Data 7"
|
|
134
|
+
{...props}
|
|
135
|
+
/>
|
|
136
|
+
<FormPill
|
|
137
|
+
color="data_8"
|
|
138
|
+
onClick={() => {
|
|
139
|
+
alert('Click!')
|
|
140
|
+
}}
|
|
141
|
+
tabIndex={0}
|
|
142
|
+
text="Data 8"
|
|
143
|
+
{...props}
|
|
144
|
+
/>
|
|
145
|
+
<Title
|
|
146
|
+
marginBottom="sm"
|
|
147
|
+
marginTop="md"
|
|
148
|
+
size={4}
|
|
149
|
+
text="Product Colors"
|
|
150
|
+
{...props}
|
|
151
|
+
/>
|
|
152
|
+
<FormPill
|
|
153
|
+
color="windows"
|
|
154
|
+
onClick={() => {
|
|
155
|
+
alert('Click!')
|
|
156
|
+
}}
|
|
157
|
+
tabIndex={0}
|
|
158
|
+
text="Windows"
|
|
159
|
+
{...props}
|
|
160
|
+
/>
|
|
161
|
+
<FormPill
|
|
162
|
+
color="siding"
|
|
163
|
+
onClick={() => {
|
|
164
|
+
alert('Click!')
|
|
165
|
+
}}
|
|
166
|
+
tabIndex={0}
|
|
167
|
+
text="Siding"
|
|
168
|
+
{...props}
|
|
169
|
+
/>
|
|
170
|
+
<FormPill
|
|
171
|
+
color="roofing"
|
|
172
|
+
onClick={() => {
|
|
173
|
+
alert('Click!')
|
|
174
|
+
}}
|
|
175
|
+
tabIndex={0}
|
|
176
|
+
text="Roofing"
|
|
177
|
+
{...props}
|
|
178
|
+
/>
|
|
179
|
+
<FormPill
|
|
180
|
+
color="doors"
|
|
181
|
+
onClick={() => {
|
|
182
|
+
alert('Click!')
|
|
183
|
+
}}
|
|
184
|
+
tabIndex={0}
|
|
185
|
+
text="Doors"
|
|
186
|
+
{...props}
|
|
187
|
+
/>
|
|
188
|
+
<FormPill
|
|
189
|
+
color="gutters"
|
|
190
|
+
onClick={() => {
|
|
191
|
+
alert('Click!')
|
|
192
|
+
}}
|
|
193
|
+
tabIndex={0}
|
|
194
|
+
text="Gutters"
|
|
195
|
+
{...props}
|
|
196
|
+
/>
|
|
197
|
+
<FormPill
|
|
198
|
+
color="solar"
|
|
199
|
+
onClick={() => {
|
|
200
|
+
alert('Click!')
|
|
201
|
+
}}
|
|
202
|
+
tabIndex={0}
|
|
203
|
+
text="Solar"
|
|
204
|
+
{...props}
|
|
205
|
+
/>
|
|
206
|
+
<FormPill
|
|
207
|
+
color="insulation"
|
|
208
|
+
onClick={() => {
|
|
209
|
+
alert('Click!')
|
|
210
|
+
}}
|
|
211
|
+
tabIndex={0}
|
|
212
|
+
text="Insulation"
|
|
213
|
+
{...props}
|
|
214
|
+
/>
|
|
215
|
+
<FormPill
|
|
216
|
+
color="accessories"
|
|
217
|
+
onClick={() => {
|
|
218
|
+
alert('Click!')
|
|
219
|
+
}}
|
|
220
|
+
tabIndex={0}
|
|
221
|
+
text="Accessories"
|
|
222
|
+
{...props}
|
|
223
|
+
/>
|
|
224
|
+
</div>
|
|
225
|
+
)
|
|
226
|
+
}
|
|
227
|
+
export default FormPillColors
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Neutral is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop.
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- form_pill_tag: Form Pill Tag
|
|
7
7
|
- form_pill_example: Example
|
|
8
8
|
- form_pill_icon: Form Pill Icon
|
|
9
|
+
- form_pill_colors: Form Pill Colors
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- form_pill_user: Form Pill User
|
|
@@ -13,3 +14,4 @@ examples:
|
|
|
13
14
|
- form_pill_tag: Form Pill Tag
|
|
14
15
|
- form_pill_example: Example
|
|
15
16
|
- form_pill_icon: Form Pill Icon
|
|
17
|
+
- form_pill_colors: Form Pill Colors
|
|
@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
|
|
|
3
3
|
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
|
+
export { default as FormPillColors } from './_form_pill_colors.jsx'
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "100",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "101",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "102",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "103",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "104",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "105",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "106",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "107",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "108",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "109",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "110",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-default-rails",
|
|
69
|
+
name: "my_array",
|
|
70
|
+
tree_data: treeData,
|
|
71
|
+
color: "primary"
|
|
72
|
+
}) %>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent1",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Business Affairs",
|
|
24
|
+
value: "Business Affairs",
|
|
25
|
+
id: "business1",
|
|
26
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "Initiatives",
|
|
30
|
+
id: "initiative1",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "Learning & Development",
|
|
35
|
+
id: "development1",
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "People Experience",
|
|
42
|
+
id: "experience1",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "Contact Center",
|
|
49
|
+
id: "contact1",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "Appointment Management",
|
|
54
|
+
id: "appointment1",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "Customer Service",
|
|
59
|
+
id: "customer1",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "Energy",
|
|
64
|
+
id: "energy1",
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectColor = (props) => {
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<MultiLevelSelect
|
|
76
|
+
color="primary"
|
|
77
|
+
id='multiselect-color'
|
|
78
|
+
onSelect={(selectedNodes) =>
|
|
79
|
+
console.log(
|
|
80
|
+
"Selected Items",
|
|
81
|
+
selectedNodes
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
treeData={treeData}
|
|
85
|
+
{...props}
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
)
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export default MultiLevelSelectColor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- multi_level_select_return_all_selected: Return All Selected
|
|
7
7
|
- multi_level_select_selected_ids: Selected Ids
|
|
8
8
|
- multi_level_select_with_form: With Form
|
|
9
|
+
- multi_level_select_color: Color
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- multi_level_select_default: Default
|
|
@@ -13,3 +14,4 @@ examples:
|
|
|
13
14
|
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
14
15
|
- multi_level_select_return_all_selected: Return All Selected
|
|
15
16
|
- multi_level_select_selected_ids_react: Selected Ids
|
|
17
|
+
- multi_level_select_color: Color
|
|
@@ -3,3 +3,4 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
|
|
|
3
3
|
export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
|
|
4
4
|
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
5
5
|
export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
|
|
6
|
+
export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<br>
|
|
9
9
|
|
|
10
10
|
<%= pb_rails("timestamp", props: {
|
|
11
|
-
timestamp: DateTime.now
|
|
11
|
+
timestamp: DateTime.now,
|
|
12
12
|
variant: "elapsed",
|
|
13
13
|
show_user: false
|
|
14
14
|
}) %>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<br>
|
|
17
17
|
|
|
18
18
|
<%= pb_rails("timestamp", props: {
|
|
19
|
-
timestamp: DateTime.now
|
|
19
|
+
timestamp: DateTime.now,
|
|
20
20
|
variant: "elapsed",
|
|
21
21
|
show_user: false,
|
|
22
22
|
hide_updated: true
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Windows', value: '#FFA500' },
|
|
4
|
+
{ label: 'Siding', value: '#FF0000' },
|
|
5
|
+
{ label: 'Doors', value: '#00FF00' },
|
|
6
|
+
{ label: 'Roofs', value: '#0000FF' },
|
|
7
|
+
]
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", color: "primary", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
|
|
13
|
+
|
|
14
|
+
<!-- This section is an example of the available JavaScript event hooks -->
|
|
15
|
+
<%= javascript_tag defer: "defer" do %>
|
|
16
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
|
|
17
|
+
console.log('Option selected')
|
|
18
|
+
console.dir(event.detail)
|
|
19
|
+
})
|
|
20
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
|
|
21
|
+
console.log('Option removed')
|
|
22
|
+
console.dir(event.detail)
|
|
23
|
+
})
|
|
24
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
|
|
25
|
+
console.log('All options cleared')
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
document.querySelector('#clear-pills').addEventListener('click', function() {
|
|
29
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
|
|
30
|
+
})
|
|
31
|
+
<% end %>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Typeahead } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{ label: 'Windows', value: '#FFA500' },
|
|
6
|
+
{ label: 'Siding', value: '#FF0000' },
|
|
7
|
+
{ label: 'Doors', value: '#00FF00' },
|
|
8
|
+
{ label: 'Roofs', value: '#0000FF' },
|
|
9
|
+
]
|
|
10
|
+
|
|
11
|
+
const TypeaheadWithPills = (props) => {
|
|
12
|
+
return (
|
|
13
|
+
<>
|
|
14
|
+
<Typeahead
|
|
15
|
+
color="primary"
|
|
16
|
+
isMulti
|
|
17
|
+
label="Colors"
|
|
18
|
+
options={options}
|
|
19
|
+
placeholder=""
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
</>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default TypeaheadWithPills
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
|
|
@@ -9,6 +9,7 @@ examples:
|
|
|
9
9
|
- typeahead_inline: Inline
|
|
10
10
|
- typeahead_multi_kit: Multi Kit Options
|
|
11
11
|
- typeahead_error_state: Error State
|
|
12
|
+
- typeahead_with_pills_color: With Pills (Custom Color)
|
|
12
13
|
|
|
13
14
|
react:
|
|
14
15
|
- typeahead_default: Default
|
|
@@ -23,3 +24,4 @@ examples:
|
|
|
23
24
|
- typeahead_async_createable: Createable (+ Async Data)
|
|
24
25
|
- typeahead_error_state: Error State
|
|
25
26
|
- typeahead_custom_menu_list: Custom MenuList
|
|
27
|
+
- typeahead_with_pills_color: With Pills (Custom Color)
|
|
@@ -10,3 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
|
|
|
10
10
|
export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
|
|
11
11
|
export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
|
|
12
12
|
export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
|
|
13
|
+
export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
|