playbook_ui 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201 → 13.31.0.pre.alpha.PLAY10863202

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -108
  3. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -11
  4. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +1 -5
  6. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  7. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  8. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  9. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  10. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
  14. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  15. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
  17. data/app/pb_kits/playbook/pb_textarea/index.tsx +3 -3
  18. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  19. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  20. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  21. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_title/_title.tsx +2 -1
  23. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  24. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +3 -3
  26. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +3 -4
  27. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
  28. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +5 -4
  29. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +12 -4
  30. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +11 -7
  31. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +8 -3
  32. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +6 -1
  33. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +26 -21
  34. data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +21 -6
  35. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +13 -6
  36. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +7 -3
  37. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +2 -0
  38. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +7 -1
  39. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
  40. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_typeahead/index.ts +33 -33
  42. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  43. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  44. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
  45. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  46. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
  47. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -2
  48. data/dist/playbook-rails.js +2 -2
  49. data/lib/playbook/version.rb +1 -1
  50. metadata +1 -2
  51. data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +0 -53
data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx CHANGED
@@ -1,356 +1,357 @@
1
1
  import * as React from "react"
2
2
 
3
- const MillionDollar = () => (
3
+ const MillionDollar = (): React.ReactElement => (
4
4
  <svg
5
- viewBox="0 0 242.9 242.9"
6
- xmlSpace="preserve"
7
- xmlns="http://www.w3.org/2000/svg"
5
+ viewBox="0 0 242.9 242.9"
6
+ xmlSpace="preserve"
7
+ xmlns="http://www.w3.org/2000/svg"
8
8
  >
9
- <circle cx={121.5}
10
- cy={121.5}
11
- r={121.5}
9
+ <circle
10
+ cx={121.5}
11
+ cy={121.5}
12
+ r={121.5}
12
13
  />
13
14
  <linearGradient
14
- gradientUnits="userSpaceOnUse"
15
- id="a"
16
- x1={42.483}
17
- x2={200.309}
18
- y1={35.645}
19
- y2={35.645}
15
+ gradientUnits="userSpaceOnUse"
16
+ id="a"
17
+ x1={42.483}
18
+ x2={200.309}
19
+ y1={35.645}
20
+ y2={35.645}
20
21
  >
21
22
  <stop
22
- offset={0}
23
- style={{
24
- stopColor: "#e6b711",
25
- }}
23
+ offset={0}
24
+ style={{
25
+ stopColor: "#e6b711",
26
+ }}
26
27
  />
27
28
  <stop
28
- offset={0.128}
29
- style={{
30
- stopColor: "#eac23c",
31
- }}
29
+ offset={0.128}
30
+ style={{
31
+ stopColor: "#eac23c",
32
+ }}
32
33
  />
33
34
  <stop
34
- offset={0.278}
35
- style={{
36
- stopColor: "#ec6",
37
- }}
35
+ offset={0.278}
36
+ style={{
37
+ stopColor: "#ec6",
38
+ }}
38
39
  />
39
40
  <stop
40
- offset={0.413}
41
- style={{
42
- stopColor: "#f1d485",
43
- }}
41
+ offset={0.413}
42
+ style={{
43
+ stopColor: "#f1d485",
44
+ }}
44
45
  />
45
46
  <stop
46
- offset={0.527}
47
- style={{
48
- stopColor: "#f2d998",
49
- }}
47
+ offset={0.527}
48
+ style={{
49
+ stopColor: "#f2d998",
50
+ }}
50
51
  />
51
52
  <stop
52
- offset={0.607}
53
- style={{
54
- stopColor: "#f3db9f",
55
- }}
53
+ offset={0.607}
54
+ style={{
55
+ stopColor: "#f3db9f",
56
+ }}
56
57
  />
57
58
  <stop
58
- offset={1}
59
- style={{
60
- stopColor: "#e6b711",
61
- }}
59
+ offset={1}
60
+ style={{
61
+ stopColor: "#e6b711",
62
+ }}
62
63
  />
63
64
  </linearGradient>
64
65
  <path
65
- d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
66
- style={{
67
- fill: "url(#a)",
68
- }}
66
+ d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
67
+ style={{
68
+ fill: "url(#a)",
69
+ }}
69
70
  />
70
71
  <linearGradient
71
- gradientUnits="userSpaceOnUse"
72
- id="b"
73
- x1={17.407}
74
- x2={44.897}
75
- y1={132.179}
76
- y2={132.179}
72
+ gradientUnits="userSpaceOnUse"
73
+ id="b"
74
+ x1={17.407}
75
+ x2={44.897}
76
+ y1={132.179}
77
+ y2={132.179}
77
78
  >
78
79
  <stop
79
- offset={0}
80
- style={{
81
- stopColor: "#e6b711",
82
- }}
80
+ offset={0}
81
+ style={{
82
+ stopColor: "#e6b711",
83
+ }}
83
84
  />
84
85
  <stop
85
- offset={0.128}
86
- style={{
87
- stopColor: "#eac23c",
88
- }}
86
+ offset={0.128}
87
+ style={{
88
+ stopColor: "#eac23c",
89
+ }}
89
90
  />
90
91
  <stop
91
- offset={0.278}
92
- style={{
93
- stopColor: "#ec6",
94
- }}
92
+ offset={0.278}
93
+ style={{
94
+ stopColor: "#ec6",
95
+ }}
95
96
  />
96
97
  <stop
97
- offset={0.413}
98
- style={{
99
- stopColor: "#f1d485",
100
- }}
98
+ offset={0.413}
99
+ style={{
100
+ stopColor: "#f1d485",
101
+ }}
101
102
  />
102
103
  <stop
103
- offset={0.527}
104
- style={{
105
- stopColor: "#f2d998",
106
- }}
104
+ offset={0.527}
105
+ style={{
106
+ stopColor: "#f2d998",
107
+ }}
107
108
  />
108
109
  <stop
109
- offset={0.607}
110
- style={{
111
- stopColor: "#f3db9f",
112
- }}
110
+ offset={0.607}
111
+ style={{
112
+ stopColor: "#f3db9f",
113
+ }}
113
114
  />
114
115
  <stop
115
- offset={1}
116
- style={{
117
- stopColor: "#e6b711",
118
- }}
116
+ offset={1}
117
+ style={{
118
+ stopColor: "#e6b711",
119
+ }}
119
120
  />
120
121
  </linearGradient>
121
122
  <path
122
- d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
123
- style={{
124
- fill: "url(#b)",
125
- }}
123
+ d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
124
+ style={{
125
+ fill: "url(#b)",
126
+ }}
126
127
  />
127
128
  <linearGradient
128
- gradientUnits="userSpaceOnUse"
129
- id="c"
130
- x1={52.914}
131
- x2={189.715}
132
- y1={212.573}
133
- y2={212.573}
129
+ gradientUnits="userSpaceOnUse"
130
+ id="c"
131
+ x1={52.914}
132
+ x2={189.715}
133
+ y1={212.573}
134
+ y2={212.573}
134
135
  >
135
136
  <stop
136
- offset={0}
137
- style={{
138
- stopColor: "#e6b711",
139
- }}
137
+ offset={0}
138
+ style={{
139
+ stopColor: "#e6b711",
140
+ }}
140
141
  />
141
142
  <stop
142
- offset={0.128}
143
- style={{
144
- stopColor: "#eac23c",
145
- }}
143
+ offset={0.128}
144
+ style={{
145
+ stopColor: "#eac23c",
146
+ }}
146
147
  />
147
148
  <stop
148
- offset={0.278}
149
- style={{
150
- stopColor: "#ec6",
151
- }}
149
+ offset={0.278}
150
+ style={{
151
+ stopColor: "#ec6",
152
+ }}
152
153
  />
153
154
  <stop
154
- offset={0.413}
155
- style={{
156
- stopColor: "#f1d485",
157
- }}
155
+ offset={0.413}
156
+ style={{
157
+ stopColor: "#f1d485",
158
+ }}
158
159
  />
159
160
  <stop
160
- offset={0.527}
161
- style={{
162
- stopColor: "#f2d998",
163
- }}
161
+ offset={0.527}
162
+ style={{
163
+ stopColor: "#f2d998",
164
+ }}
164
165
  />
165
166
  <stop
166
- offset={0.607}
167
- style={{
168
- stopColor: "#f3db9f",
169
- }}
167
+ offset={0.607}
168
+ style={{
169
+ stopColor: "#f3db9f",
170
+ }}
170
171
  />
171
172
  <stop
172
- offset={1}
173
- style={{
174
- stopColor: "#e6b711",
175
- }}
173
+ offset={1}
174
+ style={{
175
+ stopColor: "#e6b711",
176
+ }}
176
177
  />
177
178
  </linearGradient>
178
179
  <path
179
- d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
180
- style={{
181
- fill: "url(#c)",
182
- }}
180
+ d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
181
+ style={{
182
+ fill: "url(#c)",
183
+ }}
183
184
  />
184
185
  <linearGradient
185
- gradientUnits="userSpaceOnUse"
186
- id="d"
187
- x1={31.123}
188
- x2={207.766}
189
- y1={136.159}
190
- y2={136.159}
186
+ gradientUnits="userSpaceOnUse"
187
+ id="d"
188
+ x1={31.123}
189
+ x2={207.766}
190
+ y1={136.159}
191
+ y2={136.159}
191
192
  >
192
193
  <stop
193
- offset={0}
194
- style={{
195
- stopColor: "#e6b711",
196
- }}
194
+ offset={0}
195
+ style={{
196
+ stopColor: "#e6b711",
197
+ }}
197
198
  />
198
199
  <stop
199
- offset={0.128}
200
- style={{
201
- stopColor: "#eac23c",
202
- }}
200
+ offset={0.128}
201
+ style={{
202
+ stopColor: "#eac23c",
203
+ }}
203
204
  />
204
205
  <stop
205
- offset={0.278}
206
- style={{
207
- stopColor: "#ec6",
208
- }}
206
+ offset={0.278}
207
+ style={{
208
+ stopColor: "#ec6",
209
+ }}
209
210
  />
210
211
  <stop
211
- offset={0.413}
212
- style={{
213
- stopColor: "#f1d485",
214
- }}
212
+ offset={0.413}
213
+ style={{
214
+ stopColor: "#f1d485",
215
+ }}
215
216
  />
216
217
  <stop
217
- offset={0.527}
218
- style={{
219
- stopColor: "#f2d998",
220
- }}
218
+ offset={0.527}
219
+ style={{
220
+ stopColor: "#f2d998",
221
+ }}
221
222
  />
222
223
  <stop
223
- offset={0.607}
224
- style={{
225
- stopColor: "#f3db9f",
226
- }}
224
+ offset={0.607}
225
+ style={{
226
+ stopColor: "#f3db9f",
227
+ }}
227
228
  />
228
229
  <stop
229
- offset={1}
230
- style={{
231
- stopColor: "#e6b711",
232
- }}
230
+ offset={1}
231
+ style={{
232
+ stopColor: "#e6b711",
233
+ }}
233
234
  />
234
235
  </linearGradient>
235
236
  <path
236
- d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
237
- style={{
238
- fill: "url(#d)",
239
- }}
237
+ d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
238
+ style={{
239
+ fill: "url(#d)",
240
+ }}
240
241
  />
241
242
  <linearGradient
242
- gradientUnits="userSpaceOnUse"
243
- id="e"
244
- x1={30.453}
245
- x2={213.794}
246
- y1={63.629}
247
- y2={63.629}
243
+ gradientUnits="userSpaceOnUse"
244
+ id="e"
245
+ x1={30.453}
246
+ x2={213.794}
247
+ y1={63.629}
248
+ y2={63.629}
248
249
  >
249
250
  <stop
250
- offset={0}
251
- style={{
252
- stopColor: "#e6b711",
253
- }}
251
+ offset={0}
252
+ style={{
253
+ stopColor: "#e6b711",
254
+ }}
254
255
  />
255
256
  <stop
256
- offset={0.128}
257
- style={{
258
- stopColor: "#eac23c",
259
- }}
257
+ offset={0.128}
258
+ style={{
259
+ stopColor: "#eac23c",
260
+ }}
260
261
  />
261
262
  <stop
262
- offset={0.278}
263
- style={{
264
- stopColor: "#ec6",
265
- }}
263
+ offset={0.278}
264
+ style={{
265
+ stopColor: "#ec6",
266
+ }}
266
267
  />
267
268
  <stop
268
- offset={0.413}
269
- style={{
270
- stopColor: "#f1d485",
271
- }}
269
+ offset={0.413}
270
+ style={{
271
+ stopColor: "#f1d485",
272
+ }}
272
273
  />
273
274
  <stop
274
- offset={0.527}
275
- style={{
276
- stopColor: "#f2d998",
277
- }}
275
+ offset={0.527}
276
+ style={{
277
+ stopColor: "#f2d998",
278
+ }}
278
279
  />
279
280
  <stop
280
- offset={0.607}
281
- style={{
282
- stopColor: "#f3db9f",
283
- }}
281
+ offset={0.607}
282
+ style={{
283
+ stopColor: "#f3db9f",
284
+ }}
284
285
  />
285
286
  <stop
286
- offset={1}
287
- style={{
288
- stopColor: "#e6b711",
289
- }}
287
+ offset={1}
288
+ style={{
289
+ stopColor: "#e6b711",
290
+ }}
290
291
  />
291
292
  </linearGradient>
292
293
  <path
293
- d="M30.5 60.6h183.3v6.1H30.5z"
294
- style={{
295
- fill: "url(#e)",
296
- }}
294
+ d="M30.5 60.6h183.3v6.1H30.5z"
295
+ style={{
296
+ fill: "url(#e)",
297
+ }}
297
298
  />
298
299
  <linearGradient
299
- gradientUnits="userSpaceOnUse"
300
- id="f"
301
- x1={196.676}
302
- x2={225.538}
303
- y1={132.923}
304
- y2={132.923}
300
+ gradientUnits="userSpaceOnUse"
301
+ id="f"
302
+ x1={196.676}
303
+ x2={225.538}
304
+ y1={132.923}
305
+ y2={132.923}
305
306
  >
306
307
  <stop
307
- offset={0}
308
- style={{
309
- stopColor: "#e6b711",
310
- }}
308
+ offset={0}
309
+ style={{
310
+ stopColor: "#e6b711",
311
+ }}
311
312
  />
312
313
  <stop
313
- offset={0.128}
314
- style={{
315
- stopColor: "#eac23c",
316
- }}
314
+ offset={0.128}
315
+ style={{
316
+ stopColor: "#eac23c",
317
+ }}
317
318
  />
318
319
  <stop
319
- offset={0.278}
320
- style={{
321
- stopColor: "#ec6",
322
- }}
320
+ offset={0.278}
321
+ style={{
322
+ stopColor: "#ec6",
323
+ }}
323
324
  />
324
325
  <stop
325
- offset={0.413}
326
- style={{
327
- stopColor: "#f1d485",
328
- }}
326
+ offset={0.413}
327
+ style={{
328
+ stopColor: "#f1d485",
329
+ }}
329
330
  />
330
331
  <stop
331
- offset={0.527}
332
- style={{
333
- stopColor: "#f2d998",
334
- }}
332
+ offset={0.527}
333
+ style={{
334
+ stopColor: "#f2d998",
335
+ }}
335
336
  />
336
337
  <stop
337
- offset={0.607}
338
- style={{
339
- stopColor: "#f3db9f",
340
- }}
338
+ offset={0.607}
339
+ style={{
340
+ stopColor: "#f3db9f",
341
+ }}
341
342
  />
342
343
  <stop
343
- offset={1}
344
- style={{
345
- stopColor: "#e6b711",
346
- }}
344
+ offset={1}
345
+ style={{
346
+ stopColor: "#e6b711",
347
+ }}
347
348
  />
348
349
  </linearGradient>
349
350
  <path
350
- d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
351
- style={{
352
- fill: "url(#f)",
353
- }}
351
+ d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
352
+ style={{
353
+ fill: "url(#f)",
354
+ }}
354
355
  />
355
356
  </svg>
356
357
  )
data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react"
2
2
 
3
- const Veteran = () => (
3
+ const Veteran = (): React.ReactElement => (
4
4
  <svg
5
5
  viewBox="0 0 200 250"
6
6
  xmlSpace="preserve"