playbook_ui 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608 → 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +23 -245
  3. data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +5 -5
  4. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +2 -2
  8. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +1 -5
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +0 -4
  12. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +49 -13
  13. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +0 -12
  14. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +23 -23
  15. data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +19 -27
  16. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +21 -11
  17. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +2 -18
  18. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +0 -4
  19. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +18 -26
  20. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  21. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -4
  23. data/app/pb_kits/playbook/tokens/_colors.scss +0 -2
  24. data/dist/chunks/{_typeahead-BbHBDL7C.js → _typeahead-Cq7RLPBA.js} +2 -2
  25. data/dist/chunks/{_weekday_stacked-DEfI42pf.js → _weekday_stacked-Cykj5kLZ.js} +1 -1
  26. data/dist/chunks/{lib-u02fp5X7.js → lib-DErGXNy3.js} +1 -1
  27. data/dist/chunks/{pb_form_validation-iGj5wwU2.js → pb_form_validation-BC6kh7Hu.js} +1 -1
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/playbook-doc.js +1 -1
  30. data/dist/playbook-rails-react-bindings.js +1 -1
  31. data/dist/playbook-rails.js +1 -1
  32. data/dist/playbook.css +1 -1
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +6 -17
  35. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +0 -117
  36. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +0 -227
  37. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +0 -1
  38. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +0 -72
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +0 -91
  40. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +0 -1
  42. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +0 -31
  43. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +0 -26
  44. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +0 -1
  45. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +0 -1
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.1.0"
5
- VERSION = "14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608"
5
+ VERSION = "14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608
4
+ version: 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-08-28 00:00:00.000000000 Z
12
+ date: 2024-08-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1331,9 +1331,6 @@ files:
1331
1331
  - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
1332
1332
  - app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx
1333
1333
  - app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
1334
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb
1335
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx
1336
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md
1337
1334
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
1338
1335
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx
1339
1336
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md
@@ -1772,10 +1769,6 @@ files:
1772
1769
  - app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
1773
1770
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
1774
1771
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
1775
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb
1776
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx
1777
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md
1778
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md
1779
1772
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
1780
1773
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
1781
1774
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
@@ -2863,10 +2856,6 @@ files:
2863
2856
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
2864
2857
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
2865
2858
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
2866
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb
2867
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx
2868
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md
2869
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md
2870
2859
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb
2871
2860
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
2872
2861
  - app/pb_kits/playbook/pb_typeahead/docs/example.yml
@@ -3033,11 +3022,11 @@ files:
3033
3022
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3034
3023
  - app/pb_kits/playbook/utilities/text.ts
3035
3024
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3036
- - dist/chunks/_typeahead-BbHBDL7C.js
3037
- - dist/chunks/_weekday_stacked-DEfI42pf.js
3025
+ - dist/chunks/_typeahead-Cq7RLPBA.js
3026
+ - dist/chunks/_weekday_stacked-Cykj5kLZ.js
3038
3027
  - dist/chunks/lazysizes-B7xYodB-.js
3039
- - dist/chunks/lib-u02fp5X7.js
3040
- - dist/chunks/pb_form_validation-iGj5wwU2.js
3028
+ - dist/chunks/lib-DErGXNy3.js
3029
+ - dist/chunks/pb_form_validation-BC6kh7Hu.js
3041
3030
  - dist/chunks/vendor.js
3042
3031
  - dist/menu.yml
3043
3032
  - dist/playbook-doc.js
@@ -1,117 +0,0 @@
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
- }) %>
@@ -1,227 +0,0 @@
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
@@ -1 +0,0 @@
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.
@@ -1,72 +0,0 @@
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
- }) %>
@@ -1,91 +0,0 @@
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;
@@ -1 +0,0 @@
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.
@@ -1 +0,0 @@
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.
@@ -1,31 +0,0 @@
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 %>
@@ -1,26 +0,0 @@
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
@@ -1 +0,0 @@
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.
@@ -1 +0,0 @@
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.