playbook_ui_docs 14.3.1.pre.alpha.dhhuynh2patch13743 → 14.3.2.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3791
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_radio/docs/_radio_custom_children.html.erb +48 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
- 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 +15 -3
- data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +0 -56
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4af3f5b1ca1beb30822546e6117393c42137bcfe190f1f57d04857b2095308ca
|
4
|
+
data.tar.gz: 1a0c368e6788e4de4844d684ae7f66bcb6457745ba3c21b4839327ac91631b3a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8223750ee576c2249a07db1f3fd5d331e6430836af6a1b1245c40f5f4e3998c90cb81b9854ff304f67dcb219ccbadaa76dd8b061c077650278dd87d6d3d8e14d
|
7
|
+
data.tar.gz: b0382adca1837663488627100f1a9e04ad57e36bc732c87123866126e14226dd604880c2c588400f6c2b87b331a53d1cb3d6774e13f7fc38e1b566d21fca974b
|
@@ -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: "Primary",
|
5
|
+
tabindex: 0,
|
6
|
+
}) %>
|
7
|
+
<%= pb_rails("form_pill", props: {
|
8
|
+
color: "neutral",
|
9
|
+
text: "Neutral",
|
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="Primary"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
<FormPill
|
22
|
+
color="neutral"
|
23
|
+
onClick={() => {
|
24
|
+
alert('Click!')
|
25
|
+
}}
|
26
|
+
tabIndex={0}
|
27
|
+
text="Neutral"
|
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. Primary 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
|
+
pill_color: "neutral"
|
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
|
+
id='multiselect-color'
|
77
|
+
onSelect={(selectedNodes) =>
|
78
|
+
console.log(
|
79
|
+
"Selected Items",
|
80
|
+
selectedNodes
|
81
|
+
)
|
82
|
+
}
|
83
|
+
pillColor="neutral"
|
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 `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://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 `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://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: With Pills (Custom 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: With Pills (Custom 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'
|
@@ -0,0 +1,48 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: "Orange", value: "Orange" },
|
4
|
+
{ label: "Red", value: "Red" },
|
5
|
+
{ label: "Green", value: "Green" },
|
6
|
+
{ label: "Blue", value: "Blue" },
|
7
|
+
]
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("radio", props: {
|
11
|
+
custom_children: true,
|
12
|
+
label: "Select",
|
13
|
+
name: "Group1",
|
14
|
+
value: "Select",
|
15
|
+
}) do %>
|
16
|
+
<%= pb_rails("select", props: {
|
17
|
+
min_width: "xs",
|
18
|
+
options: options,
|
19
|
+
}) %>
|
20
|
+
<% end %>
|
21
|
+
|
22
|
+
<%= pb_rails("radio", props: {
|
23
|
+
custom_children: true,
|
24
|
+
label: "Typeahead",
|
25
|
+
name: "Group1",
|
26
|
+
value: "Typeahead",
|
27
|
+
}) do %>
|
28
|
+
<%= pb_rails("typeahead", props: {
|
29
|
+
id: "typeahead-radio",
|
30
|
+
is_multi: false,
|
31
|
+
min_width: "xs",
|
32
|
+
options: options,
|
33
|
+
placeholder: "Select...",
|
34
|
+
})
|
35
|
+
%>
|
36
|
+
<% end %>
|
37
|
+
|
38
|
+
<%= pb_rails("radio", props: {
|
39
|
+
custom_children: true,
|
40
|
+
label: "Typography",
|
41
|
+
name: "Group1",
|
42
|
+
value: "Typography",
|
43
|
+
}) do %>
|
44
|
+
<%= pb_rails("title", props: {
|
45
|
+
text: "Custom Typography",
|
46
|
+
})
|
47
|
+
%>
|
48
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Use the `custom_children` prop to enable the use of kits instead of text labels.
|
@@ -7,6 +7,7 @@ examples:
|
|
7
7
|
- radio_options: With Options
|
8
8
|
- radio_alignment: Alignment
|
9
9
|
- radio_disabled: Disabled
|
10
|
+
- radio_custom_children: Custom Children
|
10
11
|
|
11
12
|
react:
|
12
13
|
- radio_default: Default
|
@@ -14,7 +15,6 @@ examples:
|
|
14
15
|
- radio_error: With Error
|
15
16
|
- radio_alignment: Alignment
|
16
17
|
- radio_disabled: Disabled
|
17
|
-
- radio_children: Children
|
18
18
|
|
19
19
|
swift:
|
20
20
|
- radio_default_swift: Default
|
@@ -3,4 +3,3 @@ export { default as RadioCustom } from './_radio_custom.jsx'
|
|
3
3
|
export { default as RadioError } from './_radio_error.jsx'
|
4
4
|
export { default as RadioAlignment } from './_radio_alignment.jsx'
|
5
5
|
export { default as RadioDisabled } from './_radio_disabled.jsx'
|
6
|
-
export { default as RadioChildren } from './_radio_children.jsx'
|
@@ -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", pill_color: "neutral", 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 %>
|