@hero-design/rn 8.12.1 → 8.12.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 (30) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +79 -25
  3. package/lib/index.js +78 -24
  4. package/package.json +5 -5
  5. package/src/components/Button/Button.tsx +42 -2
  6. package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx +1 -1
  7. package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap +1 -1
  8. package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap +3 -3
  9. package/src/components/Button/StyledButton.tsx +21 -14
  10. package/src/components/Button/__tests__/Button.spec.tsx +46 -1
  11. package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap +1564 -0
  12. package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap +126 -110
  13. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +24 -22
  14. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +12 -9
  15. package/src/components/FAB/ActionGroup/ActionItem.tsx +17 -6
  16. package/src/components/FAB/ActionGroup/StyledActionItem.tsx +15 -17
  17. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +170 -160
  18. package/src/components/FAB/FAB.tsx +3 -1
  19. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +36 -27
  20. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +12 -9
  21. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +17 -0
  22. package/src/theme/components/button.ts +16 -2
  23. package/src/theme/components/fab.ts +2 -0
  24. package/src/theme/global/borders.ts +2 -0
  25. package/types/components/Button/Button.d.ts +1 -1
  26. package/types/components/Button/StyledButton.d.ts +4 -3
  27. package/types/components/FAB/ActionGroup/StyledActionItem.d.ts +3 -3
  28. package/types/theme/components/button.d.ts +14 -0
  29. package/types/theme/components/fab.d.ts +2 -0
  30. package/types/theme/global/borders.d.ts +1 -0
package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -87,7 +87,6 @@ exports[`ActionGroup has active false 1`] = `
87
87
  <View>
88
88
  <View
89
89
  accessible={true}
90
- collapsable={false}
91
90
  focusable={false}
92
91
  onClick={[Function]}
93
92
  onResponderGrant={[Function]}
@@ -97,21 +96,23 @@ exports[`ActionGroup has active false 1`] = `
97
96
  onResponderTerminationRequest={[Function]}
98
97
  onStartShouldSetResponder={[Function]}
99
98
  style={
100
- Object {
101
- "alignItems": "center",
102
- "alignSelf": "flex-end",
103
- "backgroundColor": "#401960",
104
- "borderRadius": 999,
105
- "flexDirection": "row",
106
- "margin": 8,
107
- "marginRight": 24,
108
- "opacity": 1,
109
- "overflow": "hidden",
110
- "paddingBottom": 8,
111
- "paddingLeft": 16,
112
- "paddingRight": 16,
113
- "paddingTop": 8,
114
- }
99
+ Array [
100
+ Object {
101
+ "alignItems": "center",
102
+ "alignSelf": "flex-end",
103
+ "backgroundColor": "#401960",
104
+ "borderRadius": 999,
105
+ "flexDirection": "row",
106
+ "margin": 8,
107
+ "marginRight": 24,
108
+ "overflow": "hidden",
109
+ "paddingBottom": 8,
110
+ "paddingLeft": 16,
111
+ "paddingRight": 16,
112
+ "paddingTop": 8,
113
+ },
114
+ undefined,
115
+ ]
115
116
  }
116
117
  testID="speaker-action-item"
117
118
  >
@@ -166,7 +167,6 @@ exports[`ActionGroup has active false 1`] = `
166
167
  </View>
167
168
  <View
168
169
  accessible={true}
169
- collapsable={false}
170
170
  focusable={false}
171
171
  onClick={[Function]}
172
172
  onResponderGrant={[Function]}
@@ -176,21 +176,23 @@ exports[`ActionGroup has active false 1`] = `
176
176
  onResponderTerminationRequest={[Function]}
177
177
  onStartShouldSetResponder={[Function]}
178
178
  style={
179
- Object {
180
- "alignItems": "center",
181
- "alignSelf": "flex-end",
182
- "backgroundColor": "#401960",
183
- "borderRadius": 999,
184
- "flexDirection": "row",
185
- "margin": 8,
186
- "marginRight": 24,
187
- "opacity": 1,
188
- "overflow": "hidden",
189
- "paddingBottom": 8,
190
- "paddingLeft": 16,
191
- "paddingRight": 16,
192
- "paddingTop": 8,
193
- }
179
+ Array [
180
+ Object {
181
+ "alignItems": "center",
182
+ "alignSelf": "flex-end",
183
+ "backgroundColor": "#401960",
184
+ "borderRadius": 999,
185
+ "flexDirection": "row",
186
+ "margin": 8,
187
+ "marginRight": 24,
188
+ "overflow": "hidden",
189
+ "paddingBottom": 8,
190
+ "paddingLeft": 16,
191
+ "paddingRight": 16,
192
+ "paddingTop": 8,
193
+ },
194
+ undefined,
195
+ ]
194
196
  }
195
197
  testID="target-action-item"
196
198
  >
@@ -245,7 +247,6 @@ exports[`ActionGroup has active false 1`] = `
245
247
  </View>
246
248
  <View
247
249
  accessible={true}
248
- collapsable={false}
249
250
  focusable={false}
250
251
  onClick={[Function]}
251
252
  onResponderGrant={[Function]}
@@ -255,21 +256,23 @@ exports[`ActionGroup has active false 1`] = `
255
256
  onResponderTerminationRequest={[Function]}
256
257
  onStartShouldSetResponder={[Function]}
257
258
  style={
258
- Object {
259
- "alignItems": "center",
260
- "alignSelf": "flex-end",
261
- "backgroundColor": "#401960",
262
- "borderRadius": 999,
263
- "flexDirection": "row",
264
- "margin": 8,
265
- "marginRight": 24,
266
- "opacity": 1,
267
- "overflow": "hidden",
268
- "paddingBottom": 8,
269
- "paddingLeft": 16,
270
- "paddingRight": 16,
271
- "paddingTop": 8,
272
- }
259
+ Array [
260
+ Object {
261
+ "alignItems": "center",
262
+ "alignSelf": "flex-end",
263
+ "backgroundColor": "#401960",
264
+ "borderRadius": 999,
265
+ "flexDirection": "row",
266
+ "margin": 8,
267
+ "marginRight": 24,
268
+ "overflow": "hidden",
269
+ "paddingBottom": 8,
270
+ "paddingLeft": 16,
271
+ "paddingRight": 16,
272
+ "paddingTop": 8,
273
+ },
274
+ undefined,
275
+ ]
273
276
  }
274
277
  testID="plane-action-item"
275
278
  >
@@ -324,7 +327,6 @@ exports[`ActionGroup has active false 1`] = `
324
327
  </View>
325
328
  <View
326
329
  accessible={true}
327
- collapsable={false}
328
330
  focusable={false}
329
331
  onClick={[Function]}
330
332
  onResponderGrant={[Function]}
@@ -334,21 +336,23 @@ exports[`ActionGroup has active false 1`] = `
334
336
  onResponderTerminationRequest={[Function]}
335
337
  onStartShouldSetResponder={[Function]}
336
338
  style={
337
- Object {
338
- "alignItems": "center",
339
- "alignSelf": "flex-end",
340
- "backgroundColor": "#401960",
341
- "borderRadius": 999,
342
- "flexDirection": "row",
343
- "margin": 8,
344
- "marginRight": 24,
345
- "opacity": 1,
346
- "overflow": "hidden",
347
- "paddingBottom": 8,
348
- "paddingLeft": 16,
349
- "paddingRight": 16,
350
- "paddingTop": 8,
351
- }
339
+ Array [
340
+ Object {
341
+ "alignItems": "center",
342
+ "alignSelf": "flex-end",
343
+ "backgroundColor": "#401960",
344
+ "borderRadius": 999,
345
+ "flexDirection": "row",
346
+ "margin": 8,
347
+ "marginRight": 24,
348
+ "overflow": "hidden",
349
+ "paddingBottom": 8,
350
+ "paddingLeft": 16,
351
+ "paddingRight": 16,
352
+ "paddingTop": 8,
353
+ },
354
+ undefined,
355
+ ]
352
356
  }
353
357
  testID="health-bag-action-item"
354
358
  >
@@ -403,7 +407,6 @@ exports[`ActionGroup has active false 1`] = `
403
407
  </View>
404
408
  <View
405
409
  accessible={true}
406
- collapsable={false}
407
410
  focusable={false}
408
411
  onClick={[Function]}
409
412
  onResponderGrant={[Function]}
@@ -413,21 +416,23 @@ exports[`ActionGroup has active false 1`] = `
413
416
  onResponderTerminationRequest={[Function]}
414
417
  onStartShouldSetResponder={[Function]}
415
418
  style={
416
- Object {
417
- "alignItems": "center",
418
- "alignSelf": "flex-end",
419
- "backgroundColor": "#401960",
420
- "borderRadius": 999,
421
- "flexDirection": "row",
422
- "margin": 8,
423
- "marginRight": 24,
424
- "opacity": 1,
425
- "overflow": "hidden",
426
- "paddingBottom": 8,
427
- "paddingLeft": 16,
428
- "paddingRight": 16,
429
- "paddingTop": 8,
430
- }
419
+ Array [
420
+ Object {
421
+ "alignItems": "center",
422
+ "alignSelf": "flex-end",
423
+ "backgroundColor": "#401960",
424
+ "borderRadius": 999,
425
+ "flexDirection": "row",
426
+ "margin": 8,
427
+ "marginRight": 24,
428
+ "overflow": "hidden",
429
+ "paddingBottom": 8,
430
+ "paddingLeft": 16,
431
+ "paddingRight": 16,
432
+ "paddingTop": 8,
433
+ },
434
+ undefined,
435
+ ]
431
436
  }
432
437
  testID="clock-action-item"
433
438
  >
@@ -649,7 +654,6 @@ exports[`ActionGroup has active true 1`] = `
649
654
  <View>
650
655
  <View
651
656
  accessible={true}
652
- collapsable={false}
653
657
  focusable={false}
654
658
  onClick={[Function]}
655
659
  onResponderGrant={[Function]}
@@ -659,21 +663,23 @@ exports[`ActionGroup has active true 1`] = `
659
663
  onResponderTerminationRequest={[Function]}
660
664
  onStartShouldSetResponder={[Function]}
661
665
  style={
662
- Object {
663
- "alignItems": "center",
664
- "alignSelf": "flex-end",
665
- "backgroundColor": "#401960",
666
- "borderRadius": 999,
667
- "flexDirection": "row",
668
- "margin": 8,
669
- "marginRight": 24,
670
- "opacity": 1,
671
- "overflow": "hidden",
672
- "paddingBottom": 8,
673
- "paddingLeft": 16,
674
- "paddingRight": 16,
675
- "paddingTop": 8,
676
- }
666
+ Array [
667
+ Object {
668
+ "alignItems": "center",
669
+ "alignSelf": "flex-end",
670
+ "backgroundColor": "#401960",
671
+ "borderRadius": 999,
672
+ "flexDirection": "row",
673
+ "margin": 8,
674
+ "marginRight": 24,
675
+ "overflow": "hidden",
676
+ "paddingBottom": 8,
677
+ "paddingLeft": 16,
678
+ "paddingRight": 16,
679
+ "paddingTop": 8,
680
+ },
681
+ undefined,
682
+ ]
677
683
  }
678
684
  testID="speaker-action-item"
679
685
  >
@@ -728,7 +734,6 @@ exports[`ActionGroup has active true 1`] = `
728
734
  </View>
729
735
  <View
730
736
  accessible={true}
731
- collapsable={false}
732
737
  focusable={false}
733
738
  onClick={[Function]}
734
739
  onResponderGrant={[Function]}
@@ -738,21 +743,23 @@ exports[`ActionGroup has active true 1`] = `
738
743
  onResponderTerminationRequest={[Function]}
739
744
  onStartShouldSetResponder={[Function]}
740
745
  style={
741
- Object {
742
- "alignItems": "center",
743
- "alignSelf": "flex-end",
744
- "backgroundColor": "#401960",
745
- "borderRadius": 999,
746
- "flexDirection": "row",
747
- "margin": 8,
748
- "marginRight": 24,
749
- "opacity": 1,
750
- "overflow": "hidden",
751
- "paddingBottom": 8,
752
- "paddingLeft": 16,
753
- "paddingRight": 16,
754
- "paddingTop": 8,
755
- }
746
+ Array [
747
+ Object {
748
+ "alignItems": "center",
749
+ "alignSelf": "flex-end",
750
+ "backgroundColor": "#401960",
751
+ "borderRadius": 999,
752
+ "flexDirection": "row",
753
+ "margin": 8,
754
+ "marginRight": 24,
755
+ "overflow": "hidden",
756
+ "paddingBottom": 8,
757
+ "paddingLeft": 16,
758
+ "paddingRight": 16,
759
+ "paddingTop": 8,
760
+ },
761
+ undefined,
762
+ ]
756
763
  }
757
764
  testID="target-action-item"
758
765
  >
@@ -807,7 +814,6 @@ exports[`ActionGroup has active true 1`] = `
807
814
  </View>
808
815
  <View
809
816
  accessible={true}
810
- collapsable={false}
811
817
  focusable={false}
812
818
  onClick={[Function]}
813
819
  onResponderGrant={[Function]}
@@ -817,21 +823,23 @@ exports[`ActionGroup has active true 1`] = `
817
823
  onResponderTerminationRequest={[Function]}
818
824
  onStartShouldSetResponder={[Function]}
819
825
  style={
820
- Object {
821
- "alignItems": "center",
822
- "alignSelf": "flex-end",
823
- "backgroundColor": "#401960",
824
- "borderRadius": 999,
825
- "flexDirection": "row",
826
- "margin": 8,
827
- "marginRight": 24,
828
- "opacity": 1,
829
- "overflow": "hidden",
830
- "paddingBottom": 8,
831
- "paddingLeft": 16,
832
- "paddingRight": 16,
833
- "paddingTop": 8,
834
- }
826
+ Array [
827
+ Object {
828
+ "alignItems": "center",
829
+ "alignSelf": "flex-end",
830
+ "backgroundColor": "#401960",
831
+ "borderRadius": 999,
832
+ "flexDirection": "row",
833
+ "margin": 8,
834
+ "marginRight": 24,
835
+ "overflow": "hidden",
836
+ "paddingBottom": 8,
837
+ "paddingLeft": 16,
838
+ "paddingRight": 16,
839
+ "paddingTop": 8,
840
+ },
841
+ undefined,
842
+ ]
835
843
  }
836
844
  testID="plane-action-item"
837
845
  >
@@ -886,7 +894,6 @@ exports[`ActionGroup has active true 1`] = `
886
894
  </View>
887
895
  <View
888
896
  accessible={true}
889
- collapsable={false}
890
897
  focusable={false}
891
898
  onClick={[Function]}
892
899
  onResponderGrant={[Function]}
@@ -896,21 +903,23 @@ exports[`ActionGroup has active true 1`] = `
896
903
  onResponderTerminationRequest={[Function]}
897
904
  onStartShouldSetResponder={[Function]}
898
905
  style={
899
- Object {
900
- "alignItems": "center",
901
- "alignSelf": "flex-end",
902
- "backgroundColor": "#401960",
903
- "borderRadius": 999,
904
- "flexDirection": "row",
905
- "margin": 8,
906
- "marginRight": 24,
907
- "opacity": 1,
908
- "overflow": "hidden",
909
- "paddingBottom": 8,
910
- "paddingLeft": 16,
911
- "paddingRight": 16,
912
- "paddingTop": 8,
913
- }
906
+ Array [
907
+ Object {
908
+ "alignItems": "center",
909
+ "alignSelf": "flex-end",
910
+ "backgroundColor": "#401960",
911
+ "borderRadius": 999,
912
+ "flexDirection": "row",
913
+ "margin": 8,
914
+ "marginRight": 24,
915
+ "overflow": "hidden",
916
+ "paddingBottom": 8,
917
+ "paddingLeft": 16,
918
+ "paddingRight": 16,
919
+ "paddingTop": 8,
920
+ },
921
+ undefined,
922
+ ]
914
923
  }
915
924
  testID="health-bag-action-item"
916
925
  >
@@ -965,7 +974,6 @@ exports[`ActionGroup has active true 1`] = `
965
974
  </View>
966
975
  <View
967
976
  accessible={true}
968
- collapsable={false}
969
977
  focusable={false}
970
978
  onClick={[Function]}
971
979
  onResponderGrant={[Function]}
@@ -975,21 +983,23 @@ exports[`ActionGroup has active true 1`] = `
975
983
  onResponderTerminationRequest={[Function]}
976
984
  onStartShouldSetResponder={[Function]}
977
985
  style={
978
- Object {
979
- "alignItems": "center",
980
- "alignSelf": "flex-end",
981
- "backgroundColor": "#401960",
982
- "borderRadius": 999,
983
- "flexDirection": "row",
984
- "margin": 8,
985
- "marginRight": 24,
986
- "opacity": 1,
987
- "overflow": "hidden",
988
- "paddingBottom": 8,
989
- "paddingLeft": 16,
990
- "paddingRight": 16,
991
- "paddingTop": 8,
992
- }
986
+ Array [
987
+ Object {
988
+ "alignItems": "center",
989
+ "alignSelf": "flex-end",
990
+ "backgroundColor": "#401960",
991
+ "borderRadius": 999,
992
+ "flexDirection": "row",
993
+ "margin": 8,
994
+ "marginRight": 24,
995
+ "overflow": "hidden",
996
+ "paddingBottom": 8,
997
+ "paddingLeft": 16,
998
+ "paddingRight": 16,
999
+ "paddingTop": 8,
1000
+ },
1001
+ undefined,
1002
+ ]
993
1003
  }
994
1004
  testID="clock-action-item"
995
1005
  >
package/src/components/FAB/FAB.tsx CHANGED
@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
3
3
  import { AnimatedFABIcon } from './AnimatedFABIcon';
4
4
  import { StyledFABContainer, StyledFABIcon, StyledFABText } from './StyledFAB';
5
5
  import type { IconName } from '../Icon';
6
+ import { useTheme } from '../../theme';
6
7
 
7
8
  export interface FABProps {
8
9
  /**
@@ -81,12 +82,13 @@ const FAB = ({
81
82
  style,
82
83
  }: FABProps): JSX.Element => {
83
84
  const isIconOnly = !title;
85
+ const theme = useTheme();
84
86
  return (
85
87
  <StyledFABContainer
88
+ underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
86
89
  testID={testID}
87
90
  style={style}
88
91
  onPress={onPress}
89
- activeOpacity={0.6}
90
92
  >
91
93
  {isIconOnly ? (
92
94
  <IconOnlyContent animated={animated} active={active} icon={icon} />
package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -1315,7 +1315,6 @@ Array [
1315
1315
  }
1316
1316
  }
1317
1317
  accessible={true}
1318
- collapsable={false}
1319
1318
  focusable={true}
1320
1319
  onClick={[Function]}
1321
1320
  onResponderGrant={[Function]}
@@ -1325,14 +1324,18 @@ Array [
1325
1324
  onResponderTerminationRequest={[Function]}
1326
1325
  onStartShouldSetResponder={[Function]}
1327
1326
  style={
1328
- Object {
1329
- "alignItems": "center",
1330
- "borderWidth": 0,
1331
- "flexDirection": "row",
1332
- "justifyContent": "center",
1333
- "opacity": 1,
1334
- "padding": 16,
1335
- }
1327
+ Array [
1328
+ Object {
1329
+ "alignItems": "center",
1330
+ "backgroundColor": "transparent",
1331
+ "borderRadius": 4,
1332
+ "borderWidth": 0,
1333
+ "flexDirection": "row",
1334
+ "justifyContent": "center",
1335
+ "padding": 12,
1336
+ },
1337
+ undefined,
1338
+ ]
1336
1339
  }
1337
1340
  >
1338
1341
  <Text
@@ -3101,7 +3104,6 @@ Array [
3101
3104
  }
3102
3105
  }
3103
3106
  accessible={true}
3104
- collapsable={false}
3105
3107
  focusable={true}
3106
3108
  onClick={[Function]}
3107
3109
  onResponderGrant={[Function]}
@@ -3111,14 +3113,18 @@ Array [
3111
3113
  onResponderTerminationRequest={[Function]}
3112
3114
  onStartShouldSetResponder={[Function]}
3113
3115
  style={
3114
- Object {
3115
- "alignItems": "center",
3116
- "borderWidth": 0,
3117
- "flexDirection": "row",
3118
- "justifyContent": "center",
3119
- "opacity": 1,
3120
- "padding": 16,
3121
- }
3116
+ Array [
3117
+ Object {
3118
+ "alignItems": "center",
3119
+ "backgroundColor": "transparent",
3120
+ "borderRadius": 4,
3121
+ "borderWidth": 0,
3122
+ "flexDirection": "row",
3123
+ "justifyContent": "center",
3124
+ "padding": 12,
3125
+ },
3126
+ undefined,
3127
+ ]
3122
3128
  }
3123
3129
  >
3124
3130
  <Text
@@ -4510,7 +4516,6 @@ Array [
4510
4516
  }
4511
4517
  }
4512
4518
  accessible={true}
4513
- collapsable={false}
4514
4519
  focusable={true}
4515
4520
  onClick={[Function]}
4516
4521
  onResponderGrant={[Function]}
@@ -4520,14 +4525,18 @@ Array [
4520
4525
  onResponderTerminationRequest={[Function]}
4521
4526
  onStartShouldSetResponder={[Function]}
4522
4527
  style={
4523
- Object {
4524
- "alignItems": "center",
4525
- "borderWidth": 0,
4526
- "flexDirection": "row",
4527
- "justifyContent": "center",
4528
- "opacity": 1,
4529
- "padding": 16,
4530
- }
4528
+ Array [
4529
+ Object {
4530
+ "alignItems": "center",
4531
+ "backgroundColor": "transparent",
4532
+ "borderRadius": 4,
4533
+ "borderWidth": 0,
4534
+ "flexDirection": "row",
4535
+ "justifyContent": "center",
4536
+ "padding": 12,
4537
+ },
4538
+ undefined,
4539
+ ]
4531
4540
  }
4532
4541
  >
4533
4542
  <Text
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap CHANGED
@@ -716,7 +716,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
716
716
  }
717
717
  }
718
718
  accessible={true}
719
- collapsable={false}
720
719
  focusable={true}
721
720
  onClick={[Function]}
722
721
  onResponderGrant={[Function]}
@@ -726,14 +725,18 @@ exports[`TimePickerIOS renders correctly 1`] = `
726
725
  onResponderTerminationRequest={[Function]}
727
726
  onStartShouldSetResponder={[Function]}
728
727
  style={
729
- Object {
730
- "alignItems": "center",
731
- "borderWidth": 0,
732
- "flexDirection": "row",
733
- "justifyContent": "center",
734
- "opacity": 1,
735
- "padding": 16,
736
- }
728
+ Array [
729
+ Object {
730
+ "alignItems": "center",
731
+ "backgroundColor": "transparent",
732
+ "borderRadius": 4,
733
+ "borderWidth": 0,
734
+ "flexDirection": "row",
735
+ "justifyContent": "center",
736
+ "padding": 12,
737
+ },
738
+ undefined,
739
+ ]
737
740
  }
738
741
  >
739
742
  <Text