@hero-design/rn 8.27.0 → 8.27.2

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.
Files changed (44) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  3. package/es/index.js +319 -311
  4. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  5. package/lib/index.js +319 -311
  6. package/package.json +5 -5
  7. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +6 -6
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +2 -2
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +2 -2
  10. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +2 -2
  11. package/src/components/FAB/ActionGroup/StyledActionGroup.tsx +3 -17
  12. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +1065 -557
  13. package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx +15 -9
  14. package/src/components/FAB/ActionGroup/index.tsx +35 -97
  15. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  16. package/src/components/Icon/IconList.ts +1 -0
  17. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +10 -10
  18. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +10 -10
  19. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +10 -10
  20. package/src/components/TextInput/index.tsx +1 -1
  21. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +2 -2
  22. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +2 -2
  23. package/src/components/Toolbar/StyledToolbar.tsx +23 -2
  24. package/src/components/Toolbar/ToolbarGroup.tsx +3 -4
  25. package/src/components/Toolbar/ToolbarItem.tsx +75 -19
  26. package/src/components/Toolbar/__tests__/ToolbarItem.spec.tsx +39 -22
  27. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap +318 -186
  28. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap +280 -135
  29. package/src/components/Typography/Text/StyledText.tsx +2 -1
  30. package/src/components/Typography/Text/index.tsx +2 -1
  31. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +11 -2
  32. package/src/theme/components/fab.ts +0 -1
  33. package/src/theme/components/toolbar.ts +14 -2
  34. package/src/theme/components/typography.ts +1 -0
  35. package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts +1 -7
  36. package/types/components/Icon/IconList.d.ts +1 -1
  37. package/types/components/Icon/index.d.ts +1 -1
  38. package/types/components/Icon/utils.d.ts +1 -1
  39. package/types/components/Toolbar/StyledToolbar.d.ts +11 -1
  40. package/types/components/Typography/Text/StyledText.d.ts +1 -1
  41. package/types/components/Typography/Text/index.d.ts +1 -1
  42. package/types/theme/components/fab.d.ts +0 -1
  43. package/types/theme/components/toolbar.d.ts +9 -0
  44. package/types/theme/components/typography.d.ts +1 -0
package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap CHANGED
@@ -34,50 +34,72 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
34
34
  style={
35
35
  Object {
36
36
  "alignItems": "center",
37
- "maxWidth": "50%",
37
+ "flexDirection": "row",
38
+ "height": 64,
38
39
  "opacity": 1,
39
- "paddingHorizontal": 12,
40
+ "paddingHorizontal": 8,
40
41
  "paddingVertical": 8,
41
42
  }
42
43
  }
43
44
  >
44
- <HeroIcon
45
- name="home"
46
- style={
47
- Array [
48
- Object {
49
- "color": "#401960",
50
- "fontSize": 24,
51
- },
52
- undefined,
53
- ]
54
- }
55
- testID="toolbar-item-icon-home"
56
- themeIntent="primary"
57
- themeSize="medium"
58
- />
59
- <Text
60
- allowFontScaling={false}
61
- numberOfLines={1}
45
+ <View
62
46
  style={
63
47
  Array [
64
48
  Object {
65
- "color": "#401960",
66
- "fontFamily": "BeVietnamPro-SemiBold",
67
- "fontSize": 12,
68
- "letterSpacing": 0.36,
69
- "lineHeight": 20,
49
+ "alignItems": "center",
50
+ "backgroundColor": "#ece8ef",
51
+ "borderRadius": 24,
52
+ "flexDirection": "row",
53
+ "justifyContent": "center",
54
+ "padding": 12,
70
55
  },
71
56
  undefined,
72
57
  ]
73
58
  }
74
- themeFontSize="small"
75
- themeFontWeight="semi-bold"
76
- themeIntent="primary"
77
- themeTypeface="neutral"
78
59
  >
79
- Discard
80
- </Text>
60
+ <HeroIcon
61
+ name="home"
62
+ style={
63
+ Array [
64
+ Object {
65
+ "color": "#401960",
66
+ "fontSize": 24,
67
+ },
68
+ undefined,
69
+ ]
70
+ }
71
+ testID="toolbar-item-icon-home"
72
+ themeIntent="primary"
73
+ themeSize="medium"
74
+ />
75
+ <Text
76
+ allowFontScaling={false}
77
+ numberOfLines={1}
78
+ style={
79
+ Array [
80
+ Object {
81
+ "color": "#401960",
82
+ "fontFamily": "BeVietnamPro-SemiBold",
83
+ "fontSize": 16,
84
+ "letterSpacing": 0.48,
85
+ "lineHeight": 24,
86
+ },
87
+ Array [
88
+ Object {
89
+ "marginLeft": 8,
90
+ },
91
+ undefined,
92
+ ],
93
+ ]
94
+ }
95
+ themeFontSize="large"
96
+ themeFontWeight="semi-bold"
97
+ themeIntent="primary"
98
+ themeTypeface="neutral"
99
+ >
100
+ Discard
101
+ </Text>
102
+ </View>
81
103
  </View>
82
104
  <View
83
105
  accessibilityState={
@@ -98,50 +120,72 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
98
120
  style={
99
121
  Object {
100
122
  "alignItems": "center",
101
- "maxWidth": "50%",
123
+ "flexDirection": "row",
124
+ "height": 64,
102
125
  "opacity": 1,
103
- "paddingHorizontal": 12,
126
+ "paddingHorizontal": 8,
104
127
  "paddingVertical": 8,
105
128
  }
106
129
  }
107
130
  >
108
- <HeroIcon
109
- name="print"
110
- style={
111
- Array [
112
- Object {
113
- "color": "#401960",
114
- "fontSize": 24,
115
- },
116
- undefined,
117
- ]
118
- }
119
- testID="toolbar-item-icon-print"
120
- themeIntent="primary"
121
- themeSize="medium"
122
- />
123
- <Text
124
- allowFontScaling={false}
125
- numberOfLines={1}
131
+ <View
126
132
  style={
127
133
  Array [
128
134
  Object {
129
- "color": "#401960",
130
- "fontFamily": "BeVietnamPro-SemiBold",
131
- "fontSize": 12,
132
- "letterSpacing": 0.36,
133
- "lineHeight": 20,
135
+ "alignItems": "center",
136
+ "backgroundColor": "#ece8ef",
137
+ "borderRadius": 24,
138
+ "flexDirection": "row",
139
+ "justifyContent": "center",
140
+ "padding": 12,
134
141
  },
135
142
  undefined,
136
143
  ]
137
144
  }
138
- themeFontSize="small"
139
- themeFontWeight="semi-bold"
140
- themeIntent="primary"
141
- themeTypeface="neutral"
142
145
  >
143
- Print
144
- </Text>
146
+ <HeroIcon
147
+ name="print"
148
+ style={
149
+ Array [
150
+ Object {
151
+ "color": "#401960",
152
+ "fontSize": 24,
153
+ },
154
+ undefined,
155
+ ]
156
+ }
157
+ testID="toolbar-item-icon-print"
158
+ themeIntent="primary"
159
+ themeSize="medium"
160
+ />
161
+ <Text
162
+ allowFontScaling={false}
163
+ numberOfLines={1}
164
+ style={
165
+ Array [
166
+ Object {
167
+ "color": "#401960",
168
+ "fontFamily": "BeVietnamPro-SemiBold",
169
+ "fontSize": 16,
170
+ "letterSpacing": 0.48,
171
+ "lineHeight": 24,
172
+ },
173
+ Array [
174
+ Object {
175
+ "marginLeft": 8,
176
+ },
177
+ undefined,
178
+ ],
179
+ ]
180
+ }
181
+ themeFontSize="large"
182
+ themeFontWeight="semi-bold"
183
+ themeIntent="primary"
184
+ themeTypeface="neutral"
185
+ >
186
+ Print
187
+ </Text>
188
+ </View>
145
189
  </View>
146
190
  </View>
147
191
  `;
@@ -180,50 +224,72 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
180
224
  style={
181
225
  Object {
182
226
  "alignItems": "center",
183
- "maxWidth": "50%",
227
+ "flexDirection": "row",
228
+ "height": 64,
184
229
  "opacity": 1,
185
- "paddingHorizontal": 12,
230
+ "paddingHorizontal": 8,
186
231
  "paddingVertical": 8,
187
232
  }
188
233
  }
189
234
  >
190
- <HeroIcon
191
- name="home"
192
- style={
193
- Array [
194
- Object {
195
- "color": "#401960",
196
- "fontSize": 24,
197
- },
198
- undefined,
199
- ]
200
- }
201
- testID="toolbar-item-icon-home"
202
- themeIntent="primary"
203
- themeSize="medium"
204
- />
205
- <Text
206
- allowFontScaling={false}
207
- numberOfLines={1}
235
+ <View
208
236
  style={
209
237
  Array [
210
238
  Object {
211
- "color": "#401960",
212
- "fontFamily": "BeVietnamPro-SemiBold",
213
- "fontSize": 12,
214
- "letterSpacing": 0.36,
215
- "lineHeight": 20,
239
+ "alignItems": "center",
240
+ "backgroundColor": "#ece8ef",
241
+ "borderRadius": 24,
242
+ "flexDirection": "row",
243
+ "justifyContent": "center",
244
+ "padding": 12,
216
245
  },
217
246
  undefined,
218
247
  ]
219
248
  }
220
- themeFontSize="small"
221
- themeFontWeight="semi-bold"
222
- themeIntent="primary"
223
- themeTypeface="neutral"
224
249
  >
225
- Discard
226
- </Text>
250
+ <HeroIcon
251
+ name="home"
252
+ style={
253
+ Array [
254
+ Object {
255
+ "color": "#401960",
256
+ "fontSize": 24,
257
+ },
258
+ undefined,
259
+ ]
260
+ }
261
+ testID="toolbar-item-icon-home"
262
+ themeIntent="primary"
263
+ themeSize="medium"
264
+ />
265
+ <Text
266
+ allowFontScaling={false}
267
+ numberOfLines={1}
268
+ style={
269
+ Array [
270
+ Object {
271
+ "color": "#401960",
272
+ "fontFamily": "BeVietnamPro-SemiBold",
273
+ "fontSize": 16,
274
+ "letterSpacing": 0.48,
275
+ "lineHeight": 24,
276
+ },
277
+ Array [
278
+ Object {
279
+ "marginLeft": 8,
280
+ },
281
+ undefined,
282
+ ],
283
+ ]
284
+ }
285
+ themeFontSize="large"
286
+ themeFontWeight="semi-bold"
287
+ themeIntent="primary"
288
+ themeTypeface="neutral"
289
+ >
290
+ Discard
291
+ </Text>
292
+ </View>
227
293
  </View>
228
294
  <View
229
295
  accessibilityState={
@@ -244,50 +310,72 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
244
310
  style={
245
311
  Object {
246
312
  "alignItems": "center",
247
- "maxWidth": "50%",
313
+ "flexDirection": "row",
314
+ "height": 64,
248
315
  "opacity": 1,
249
- "paddingHorizontal": 12,
316
+ "paddingHorizontal": 8,
250
317
  "paddingVertical": 8,
251
318
  }
252
319
  }
253
320
  >
254
- <HeroIcon
255
- name="print"
256
- style={
257
- Array [
258
- Object {
259
- "color": "#401960",
260
- "fontSize": 24,
261
- },
262
- undefined,
263
- ]
264
- }
265
- testID="toolbar-item-icon-print"
266
- themeIntent="primary"
267
- themeSize="medium"
268
- />
269
- <Text
270
- allowFontScaling={false}
271
- numberOfLines={1}
321
+ <View
272
322
  style={
273
323
  Array [
274
324
  Object {
275
- "color": "#401960",
276
- "fontFamily": "BeVietnamPro-SemiBold",
277
- "fontSize": 12,
278
- "letterSpacing": 0.36,
279
- "lineHeight": 20,
325
+ "alignItems": "center",
326
+ "backgroundColor": "#ece8ef",
327
+ "borderRadius": 24,
328
+ "flexDirection": "row",
329
+ "justifyContent": "center",
330
+ "padding": 12,
280
331
  },
281
332
  undefined,
282
333
  ]
283
334
  }
284
- themeFontSize="small"
285
- themeFontWeight="semi-bold"
286
- themeIntent="primary"
287
- themeTypeface="neutral"
288
335
  >
289
- Print
290
- </Text>
336
+ <HeroIcon
337
+ name="print"
338
+ style={
339
+ Array [
340
+ Object {
341
+ "color": "#401960",
342
+ "fontSize": 24,
343
+ },
344
+ undefined,
345
+ ]
346
+ }
347
+ testID="toolbar-item-icon-print"
348
+ themeIntent="primary"
349
+ themeSize="medium"
350
+ />
351
+ <Text
352
+ allowFontScaling={false}
353
+ numberOfLines={1}
354
+ style={
355
+ Array [
356
+ Object {
357
+ "color": "#401960",
358
+ "fontFamily": "BeVietnamPro-SemiBold",
359
+ "fontSize": 16,
360
+ "letterSpacing": 0.48,
361
+ "lineHeight": 24,
362
+ },
363
+ Array [
364
+ Object {
365
+ "marginLeft": 8,
366
+ },
367
+ undefined,
368
+ ],
369
+ ]
370
+ }
371
+ themeFontSize="large"
372
+ themeFontWeight="semi-bold"
373
+ themeIntent="primary"
374
+ themeTypeface="neutral"
375
+ >
376
+ Print
377
+ </Text>
378
+ </View>
291
379
  </View>
292
380
  </View>
293
381
  `;
@@ -326,50 +414,72 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
326
414
  style={
327
415
  Object {
328
416
  "alignItems": "center",
329
- "maxWidth": "50%",
417
+ "flexDirection": "row",
418
+ "height": 64,
330
419
  "opacity": 1,
331
- "paddingHorizontal": 12,
420
+ "paddingHorizontal": 8,
332
421
  "paddingVertical": 8,
333
422
  }
334
423
  }
335
424
  >
336
- <HeroIcon
337
- name="home"
338
- style={
339
- Array [
340
- Object {
341
- "color": "#401960",
342
- "fontSize": 24,
343
- },
344
- undefined,
345
- ]
346
- }
347
- testID="toolbar-item-icon-home"
348
- themeIntent="primary"
349
- themeSize="medium"
350
- />
351
- <Text
352
- allowFontScaling={false}
353
- numberOfLines={1}
425
+ <View
354
426
  style={
355
427
  Array [
356
428
  Object {
357
- "color": "#401960",
358
- "fontFamily": "BeVietnamPro-SemiBold",
359
- "fontSize": 12,
360
- "letterSpacing": 0.36,
361
- "lineHeight": 20,
429
+ "alignItems": "center",
430
+ "backgroundColor": "#ece8ef",
431
+ "borderRadius": 24,
432
+ "flexDirection": "row",
433
+ "justifyContent": "center",
434
+ "padding": 12,
362
435
  },
363
436
  undefined,
364
437
  ]
365
438
  }
366
- themeFontSize="small"
367
- themeFontWeight="semi-bold"
368
- themeIntent="primary"
369
- themeTypeface="neutral"
370
439
  >
371
- Discard
372
- </Text>
440
+ <HeroIcon
441
+ name="home"
442
+ style={
443
+ Array [
444
+ Object {
445
+ "color": "#401960",
446
+ "fontSize": 24,
447
+ },
448
+ undefined,
449
+ ]
450
+ }
451
+ testID="toolbar-item-icon-home"
452
+ themeIntent="primary"
453
+ themeSize="medium"
454
+ />
455
+ <Text
456
+ allowFontScaling={false}
457
+ numberOfLines={1}
458
+ style={
459
+ Array [
460
+ Object {
461
+ "color": "#401960",
462
+ "fontFamily": "BeVietnamPro-SemiBold",
463
+ "fontSize": 16,
464
+ "letterSpacing": 0.48,
465
+ "lineHeight": 24,
466
+ },
467
+ Array [
468
+ Object {
469
+ "marginLeft": 8,
470
+ },
471
+ undefined,
472
+ ],
473
+ ]
474
+ }
475
+ themeFontSize="large"
476
+ themeFontWeight="semi-bold"
477
+ themeIntent="primary"
478
+ themeTypeface="neutral"
479
+ >
480
+ Discard
481
+ </Text>
482
+ </View>
373
483
  </View>
374
484
  <View
375
485
  accessibilityState={
@@ -390,50 +500,72 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
390
500
  style={
391
501
  Object {
392
502
  "alignItems": "center",
393
- "maxWidth": "50%",
503
+ "flexDirection": "row",
504
+ "height": 64,
394
505
  "opacity": 1,
395
- "paddingHorizontal": 12,
506
+ "paddingHorizontal": 8,
396
507
  "paddingVertical": 8,
397
508
  }
398
509
  }
399
510
  >
400
- <HeroIcon
401
- name="print"
402
- style={
403
- Array [
404
- Object {
405
- "color": "#401960",
406
- "fontSize": 24,
407
- },
408
- undefined,
409
- ]
410
- }
411
- testID="toolbar-item-icon-print"
412
- themeIntent="primary"
413
- themeSize="medium"
414
- />
415
- <Text
416
- allowFontScaling={false}
417
- numberOfLines={1}
511
+ <View
418
512
  style={
419
513
  Array [
420
514
  Object {
421
- "color": "#401960",
422
- "fontFamily": "BeVietnamPro-SemiBold",
423
- "fontSize": 12,
424
- "letterSpacing": 0.36,
425
- "lineHeight": 20,
515
+ "alignItems": "center",
516
+ "backgroundColor": "#ece8ef",
517
+ "borderRadius": 24,
518
+ "flexDirection": "row",
519
+ "justifyContent": "center",
520
+ "padding": 12,
426
521
  },
427
522
  undefined,
428
523
  ]
429
524
  }
430
- themeFontSize="small"
431
- themeFontWeight="semi-bold"
432
- themeIntent="primary"
433
- themeTypeface="neutral"
434
525
  >
435
- Print
436
- </Text>
526
+ <HeroIcon
527
+ name="print"
528
+ style={
529
+ Array [
530
+ Object {
531
+ "color": "#401960",
532
+ "fontSize": 24,
533
+ },
534
+ undefined,
535
+ ]
536
+ }
537
+ testID="toolbar-item-icon-print"
538
+ themeIntent="primary"
539
+ themeSize="medium"
540
+ />
541
+ <Text
542
+ allowFontScaling={false}
543
+ numberOfLines={1}
544
+ style={
545
+ Array [
546
+ Object {
547
+ "color": "#401960",
548
+ "fontFamily": "BeVietnamPro-SemiBold",
549
+ "fontSize": 16,
550
+ "letterSpacing": 0.48,
551
+ "lineHeight": 24,
552
+ },
553
+ Array [
554
+ Object {
555
+ "marginLeft": 8,
556
+ },
557
+ undefined,
558
+ ],
559
+ ]
560
+ }
561
+ themeFontSize="large"
562
+ themeFontWeight="semi-bold"
563
+ themeIntent="primary"
564
+ themeTypeface="neutral"
565
+ >
566
+ Print
567
+ </Text>
568
+ </View>
437
569
  </View>
438
570
  </View>
439
571
  `;