playbook_ui_docs 14.3.1.pre.alpha.dhhuynh2patch13743 → 14.3.2.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3791

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +117 -0
  3. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +227 -0
  4. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +1 -0
  5. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +72 -0
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +91 -0
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +1 -0
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +1 -0
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  13. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +48 -0
  14. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md +1 -0
  15. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -1
  16. data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
  17. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +31 -0
  18. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +26 -0
  19. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +1 -0
  20. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +1 -0
  21. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  23. data/dist/playbook-doc.js +1 -1
  24. metadata +15 -3
  25. 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: 92f2597f89bc3d3c5e629b358a983bf928ffbd017ce22d8393218ab425eae835
4
- data.tar.gz: b0f247526ee751ba2aa03ad142c3b2efb6cc617472c922acddbf617489c6645b
3
+ metadata.gz: 4af3f5b1ca1beb30822546e6117393c42137bcfe190f1f57d04857b2095308ca
4
+ data.tar.gz: 1a0c368e6788e4de4844d684ae7f66bcb6457745ba3c21b4839327ac91631b3a
5
5
  SHA512:
6
- metadata.gz: bff5dbad8253644e7c4cc977918cfc4885210774c2e6c138ab11f7f281ca5131fc349dfba60ff93effe6e2e56e0b51c36fab2a80a9b8bc250374613f01f65b3f
7
- data.tar.gz: 0ec66c9ff48afaf51710d30ac96cc488964a0b4454ab2b5007ac8846768c8aceaba8eb9d234416d6172441a0887416138a111c8967aec45fe4e88c7a6f58cd34
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 %>