@hero-design/rn 8.12.1 → 8.12.3

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 (41) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +102 -46
  3. package/lib/index.js +101 -45
  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/Tabs/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
  21. package/src/components/Tabs/__tests__/index.spec.tsx +5 -5
  22. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +12 -9
  23. package/src/components/Typography/Text/StyledText.tsx +1 -0
  24. package/src/components/Typography/Text/__tests__/StyledText.spec.tsx +1 -0
  25. package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap +23 -0
  26. package/src/components/Typography/Text/index.tsx +1 -0
  27. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +19 -0
  28. package/src/theme/components/button.ts +16 -2
  29. package/src/theme/components/fab.ts +2 -0
  30. package/src/theme/components/typography.ts +2 -0
  31. package/src/theme/global/borders.ts +2 -0
  32. package/src/theme/global/colors/__tests__/__snapshots__/eBens.spec.ts.snap +4 -4
  33. package/types/components/Button/Button.d.ts +1 -1
  34. package/types/components/Button/StyledButton.d.ts +4 -3
  35. package/types/components/FAB/ActionGroup/StyledActionItem.d.ts +3 -3
  36. package/types/components/Typography/Text/StyledText.d.ts +1 -1
  37. package/types/components/Typography/Text/index.d.ts +1 -1
  38. package/types/theme/components/button.d.ts +14 -0
  39. package/types/theme/components/fab.d.ts +2 -0
  40. package/types/theme/components/typography.d.ts +2 -0
  41. package/types/theme/global/borders.d.ts +1 -0
package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap CHANGED
@@ -3,7 +3,6 @@
3
3
  exports[`StyledButtonContainer has filled-danger style 1`] = `
4
4
  <View
5
5
  accessible={true}
6
- collapsable={false}
7
6
  focusable={false}
8
7
  onClick={[Function]}
9
8
  onResponderGrant={[Function]}
@@ -13,16 +12,18 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
13
12
  onResponderTerminationRequest={[Function]}
14
13
  onStartShouldSetResponder={[Function]}
15
14
  style={
16
- Object {
17
- "alignItems": "center",
18
- "alignSelf": "stretch",
19
- "backgroundColor": "#de350b",
20
- "borderRadius": 32,
21
- "flexDirection": "row",
22
- "justifyContent": "center",
23
- "opacity": 1,
24
- "padding": 16,
25
- }
15
+ Array [
16
+ Object {
17
+ "alignItems": "center",
18
+ "alignSelf": "stretch",
19
+ "backgroundColor": "#de350b",
20
+ "borderRadius": 32,
21
+ "flexDirection": "row",
22
+ "justifyContent": "center",
23
+ "padding": 16,
24
+ },
25
+ undefined,
26
+ ]
26
27
  }
27
28
  >
28
29
  <Text>
@@ -34,7 +35,6 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
34
35
  exports[`StyledButtonContainer has filled-primary style 1`] = `
35
36
  <View
36
37
  accessible={true}
37
- collapsable={false}
38
38
  focusable={false}
39
39
  onClick={[Function]}
40
40
  onResponderGrant={[Function]}
@@ -44,16 +44,18 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
44
44
  onResponderTerminationRequest={[Function]}
45
45
  onStartShouldSetResponder={[Function]}
46
46
  style={
47
- Object {
48
- "alignItems": "center",
49
- "alignSelf": "stretch",
50
- "backgroundColor": "#401960",
51
- "borderRadius": 32,
52
- "flexDirection": "row",
53
- "justifyContent": "center",
54
- "opacity": 1,
55
- "padding": 16,
56
- }
47
+ Array [
48
+ Object {
49
+ "alignItems": "center",
50
+ "alignSelf": "stretch",
51
+ "backgroundColor": "#401960",
52
+ "borderRadius": 32,
53
+ "flexDirection": "row",
54
+ "justifyContent": "center",
55
+ "padding": 16,
56
+ },
57
+ undefined,
58
+ ]
57
59
  }
58
60
  >
59
61
  <Text>
@@ -65,7 +67,6 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
65
67
  exports[`StyledButtonContainer has filled-secondary style 1`] = `
66
68
  <View
67
69
  accessible={true}
68
- collapsable={false}
69
70
  focusable={false}
70
71
  onClick={[Function]}
71
72
  onResponderGrant={[Function]}
@@ -75,16 +76,18 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
75
76
  onResponderTerminationRequest={[Function]}
76
77
  onStartShouldSetResponder={[Function]}
77
78
  style={
78
- Object {
79
- "alignItems": "center",
80
- "alignSelf": "stretch",
81
- "backgroundColor": "#795e90",
82
- "borderRadius": 32,
83
- "flexDirection": "row",
84
- "justifyContent": "center",
85
- "opacity": 1,
86
- "padding": 16,
87
- }
79
+ Array [
80
+ Object {
81
+ "alignItems": "center",
82
+ "alignSelf": "stretch",
83
+ "backgroundColor": "#795e90",
84
+ "borderRadius": 32,
85
+ "flexDirection": "row",
86
+ "justifyContent": "center",
87
+ "padding": 16,
88
+ },
89
+ undefined,
90
+ ]
88
91
  }
89
92
  >
90
93
  <Text>
@@ -96,7 +99,6 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
96
99
  exports[`StyledButtonContainer has outlined-danger style 1`] = `
97
100
  <View
98
101
  accessible={true}
99
- collapsable={false}
100
102
  focusable={false}
101
103
  onClick={[Function]}
102
104
  onResponderGrant={[Function]}
@@ -106,18 +108,20 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
106
108
  onResponderTerminationRequest={[Function]}
107
109
  onStartShouldSetResponder={[Function]}
108
110
  style={
109
- Object {
110
- "alignItems": "center",
111
- "alignSelf": "stretch",
112
- "backgroundColor": "transparent",
113
- "borderColor": "#de350b",
114
- "borderRadius": 32,
115
- "borderWidth": 2,
116
- "flexDirection": "row",
117
- "justifyContent": "center",
118
- "opacity": 1,
119
- "padding": 14,
120
- }
111
+ Array [
112
+ Object {
113
+ "alignItems": "center",
114
+ "alignSelf": "stretch",
115
+ "backgroundColor": "transparent",
116
+ "borderColor": "#de350b",
117
+ "borderRadius": 32,
118
+ "borderWidth": 2,
119
+ "flexDirection": "row",
120
+ "justifyContent": "center",
121
+ "padding": 14,
122
+ },
123
+ undefined,
124
+ ]
121
125
  }
122
126
  >
123
127
  <Text>
@@ -129,7 +133,6 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
129
133
  exports[`StyledButtonContainer has outlined-primary style 1`] = `
130
134
  <View
131
135
  accessible={true}
132
- collapsable={false}
133
136
  focusable={false}
134
137
  onClick={[Function]}
135
138
  onResponderGrant={[Function]}
@@ -139,18 +142,20 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
139
142
  onResponderTerminationRequest={[Function]}
140
143
  onStartShouldSetResponder={[Function]}
141
144
  style={
142
- Object {
143
- "alignItems": "center",
144
- "alignSelf": "stretch",
145
- "backgroundColor": "transparent",
146
- "borderColor": "#401960",
147
- "borderRadius": 32,
148
- "borderWidth": 2,
149
- "flexDirection": "row",
150
- "justifyContent": "center",
151
- "opacity": 1,
152
- "padding": 14,
153
- }
145
+ Array [
146
+ Object {
147
+ "alignItems": "center",
148
+ "alignSelf": "stretch",
149
+ "backgroundColor": "transparent",
150
+ "borderColor": "#401960",
151
+ "borderRadius": 32,
152
+ "borderWidth": 2,
153
+ "flexDirection": "row",
154
+ "justifyContent": "center",
155
+ "padding": 14,
156
+ },
157
+ undefined,
158
+ ]
154
159
  }
155
160
  >
156
161
  <Text>
@@ -162,7 +167,6 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
162
167
  exports[`StyledButtonContainer has outlined-secondary style 1`] = `
163
168
  <View
164
169
  accessible={true}
165
- collapsable={false}
166
170
  focusable={false}
167
171
  onClick={[Function]}
168
172
  onResponderGrant={[Function]}
@@ -172,18 +176,20 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
172
176
  onResponderTerminationRequest={[Function]}
173
177
  onStartShouldSetResponder={[Function]}
174
178
  style={
175
- Object {
176
- "alignItems": "center",
177
- "alignSelf": "stretch",
178
- "backgroundColor": "transparent",
179
- "borderColor": "#795e90",
180
- "borderRadius": 32,
181
- "borderWidth": 2,
182
- "flexDirection": "row",
183
- "justifyContent": "center",
184
- "opacity": 1,
185
- "padding": 14,
186
- }
179
+ Array [
180
+ Object {
181
+ "alignItems": "center",
182
+ "alignSelf": "stretch",
183
+ "backgroundColor": "transparent",
184
+ "borderColor": "#795e90",
185
+ "borderRadius": 32,
186
+ "borderWidth": 2,
187
+ "flexDirection": "row",
188
+ "justifyContent": "center",
189
+ "padding": 14,
190
+ },
191
+ undefined,
192
+ ]
187
193
  }
188
194
  >
189
195
  <Text>
@@ -195,7 +201,6 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
195
201
  exports[`StyledButtonContainer has text-danger style 1`] = `
196
202
  <View
197
203
  accessible={true}
198
- collapsable={false}
199
204
  focusable={false}
200
205
  onClick={[Function]}
201
206
  onResponderGrant={[Function]}
@@ -205,14 +210,18 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
205
210
  onResponderTerminationRequest={[Function]}
206
211
  onStartShouldSetResponder={[Function]}
207
212
  style={
208
- Object {
209
- "alignItems": "center",
210
- "borderWidth": 0,
211
- "flexDirection": "row",
212
- "justifyContent": "center",
213
- "opacity": 1,
214
- "padding": 16,
215
- }
213
+ Array [
214
+ Object {
215
+ "alignItems": "center",
216
+ "backgroundColor": "transparent",
217
+ "borderRadius": 4,
218
+ "borderWidth": 0,
219
+ "flexDirection": "row",
220
+ "justifyContent": "center",
221
+ "padding": 12,
222
+ },
223
+ undefined,
224
+ ]
216
225
  }
217
226
  >
218
227
  <Text>
@@ -224,7 +233,6 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
224
233
  exports[`StyledButtonContainer has text-primary style 1`] = `
225
234
  <View
226
235
  accessible={true}
227
- collapsable={false}
228
236
  focusable={false}
229
237
  onClick={[Function]}
230
238
  onResponderGrant={[Function]}
@@ -234,14 +242,18 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
234
242
  onResponderTerminationRequest={[Function]}
235
243
  onStartShouldSetResponder={[Function]}
236
244
  style={
237
- Object {
238
- "alignItems": "center",
239
- "borderWidth": 0,
240
- "flexDirection": "row",
241
- "justifyContent": "center",
242
- "opacity": 1,
243
- "padding": 16,
244
- }
245
+ Array [
246
+ Object {
247
+ "alignItems": "center",
248
+ "backgroundColor": "transparent",
249
+ "borderRadius": 4,
250
+ "borderWidth": 0,
251
+ "flexDirection": "row",
252
+ "justifyContent": "center",
253
+ "padding": 12,
254
+ },
255
+ undefined,
256
+ ]
245
257
  }
246
258
  >
247
259
  <Text>
@@ -253,7 +265,6 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
253
265
  exports[`StyledButtonContainer has text-secondary style 1`] = `
254
266
  <View
255
267
  accessible={true}
256
- collapsable={false}
257
268
  focusable={false}
258
269
  onClick={[Function]}
259
270
  onResponderGrant={[Function]}
@@ -263,14 +274,18 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
263
274
  onResponderTerminationRequest={[Function]}
264
275
  onStartShouldSetResponder={[Function]}
265
276
  style={
266
- Object {
267
- "alignItems": "center",
268
- "borderWidth": 0,
269
- "flexDirection": "row",
270
- "justifyContent": "center",
271
- "opacity": 1,
272
- "padding": 16,
273
- }
277
+ Array [
278
+ Object {
279
+ "alignItems": "center",
280
+ "backgroundColor": "transparent",
281
+ "borderRadius": 4,
282
+ "borderWidth": 0,
283
+ "flexDirection": "row",
284
+ "justifyContent": "center",
285
+ "padding": 12,
286
+ },
287
+ undefined,
288
+ ]
274
289
  }
275
290
  >
276
291
  <Text>
@@ -287,7 +302,6 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
287
302
  }
288
303
  }
289
304
  accessible={true}
290
- collapsable={false}
291
305
  focusable={false}
292
306
  onClick={[Function]}
293
307
  onResponderGrant={[Function]}
@@ -297,16 +311,18 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
297
311
  onResponderTerminationRequest={[Function]}
298
312
  onStartShouldSetResponder={[Function]}
299
313
  style={
300
- Object {
301
- "alignItems": "center",
302
- "alignSelf": "stretch",
303
- "backgroundColor": "#bfc1c5",
304
- "borderRadius": 32,
305
- "flexDirection": "row",
306
- "justifyContent": "center",
307
- "opacity": 1,
308
- "padding": 16,
309
- }
314
+ Array [
315
+ Object {
316
+ "alignItems": "center",
317
+ "alignSelf": "stretch",
318
+ "backgroundColor": "#bfc1c5",
319
+ "borderRadius": 32,
320
+ "flexDirection": "row",
321
+ "justifyContent": "center",
322
+ "padding": 16,
323
+ },
324
+ undefined,
325
+ ]
310
326
  }
311
327
  >
312
328
  <Text>
package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -607,7 +607,6 @@ exports[`Carousel renders basic carousel 1`] = `
607
607
  }
608
608
  }
609
609
  accessible={true}
610
- collapsable={false}
611
610
  focusable={true}
612
611
  onClick={[Function]}
613
612
  onResponderGrant={[Function]}
@@ -617,16 +616,18 @@ exports[`Carousel renders basic carousel 1`] = `
617
616
  onResponderTerminationRequest={[Function]}
618
617
  onStartShouldSetResponder={[Function]}
619
618
  style={
620
- Object {
621
- "alignItems": "center",
622
- "alignSelf": "stretch",
623
- "backgroundColor": "#401960",
624
- "borderRadius": 32,
625
- "flexDirection": "row",
626
- "justifyContent": "center",
627
- "opacity": 1,
628
- "padding": 16,
629
- }
619
+ Array [
620
+ Object {
621
+ "alignItems": "center",
622
+ "alignSelf": "stretch",
623
+ "backgroundColor": "#401960",
624
+ "borderRadius": 32,
625
+ "flexDirection": "row",
626
+ "justifyContent": "center",
627
+ "padding": 16,
628
+ },
629
+ undefined,
630
+ ]
630
631
  }
631
632
  >
632
633
  <Text
@@ -1349,7 +1350,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1349
1350
  }
1350
1351
  }
1351
1352
  accessible={true}
1352
- collapsable={false}
1353
1353
  focusable={true}
1354
1354
  onClick={[Function]}
1355
1355
  onResponderGrant={[Function]}
@@ -1359,16 +1359,18 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1359
1359
  onResponderTerminationRequest={[Function]}
1360
1360
  onStartShouldSetResponder={[Function]}
1361
1361
  style={
1362
- Object {
1363
- "alignItems": "center",
1364
- "alignSelf": "stretch",
1365
- "backgroundColor": "#401960",
1366
- "borderRadius": 32,
1367
- "flexDirection": "row",
1368
- "justifyContent": "center",
1369
- "opacity": 1,
1370
- "padding": 16,
1371
- }
1362
+ Array [
1363
+ Object {
1364
+ "alignItems": "center",
1365
+ "alignSelf": "stretch",
1366
+ "backgroundColor": "#401960",
1367
+ "borderRadius": 32,
1368
+ "flexDirection": "row",
1369
+ "justifyContent": "center",
1370
+ "padding": 16,
1371
+ },
1372
+ undefined,
1373
+ ]
1372
1374
  }
1373
1375
  >
1374
1376
  <Text
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -488,7 +488,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
488
488
  }
489
489
  }
490
490
  accessible={true}
491
- collapsable={false}
492
491
  focusable={true}
493
492
  onClick={[Function]}
494
493
  onResponderGrant={[Function]}
@@ -498,14 +497,18 @@ exports[`DatePickerIOS renders correctly 1`] = `
498
497
  onResponderTerminationRequest={[Function]}
499
498
  onStartShouldSetResponder={[Function]}
500
499
  style={
501
- Object {
502
- "alignItems": "center",
503
- "borderWidth": 0,
504
- "flexDirection": "row",
505
- "justifyContent": "center",
506
- "opacity": 1,
507
- "padding": 16,
508
- }
500
+ Array [
501
+ Object {
502
+ "alignItems": "center",
503
+ "backgroundColor": "transparent",
504
+ "borderRadius": 4,
505
+ "borderWidth": 0,
506
+ "flexDirection": "row",
507
+ "justifyContent": "center",
508
+ "padding": 12,
509
+ },
510
+ undefined,
511
+ ]
509
512
  }
510
513
  >
511
514
  <Text
package/src/components/FAB/ActionGroup/ActionItem.tsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  StyledActionItemText,
8
8
  StyledIcon,
9
9
  } from './StyledActionItem';
10
+ import { useTheme } from '../../../theme';
10
11
 
11
12
  export interface ActionItemProps {
12
13
  testID?: string;
@@ -21,11 +22,21 @@ const ActionItem = ({
21
22
  onPress,
22
23
  style,
23
24
  testID,
24
- }: ActionItemProps) => (
25
- <StyledActionItem style={style} onPress={onPress} testID={testID}>
26
- <StyledIcon icon={icon} />
27
- <StyledActionItemText>{title}</StyledActionItemText>
28
- </StyledActionItem>
29
- );
25
+ }: ActionItemProps) => {
26
+ const theme = useTheme();
27
+ return (
28
+ <StyledActionItem
29
+ underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
30
+ style={style}
31
+ onPress={onPress}
32
+ testID={testID}
33
+ >
34
+ <>
35
+ <StyledIcon icon={icon} />
36
+ <StyledActionItemText>{title}</StyledActionItemText>
37
+ </>
38
+ </StyledActionItem>
39
+ );
40
+ };
30
41
 
31
42
  export default ActionItem;
package/src/components/FAB/ActionGroup/StyledActionItem.tsx CHANGED
@@ -1,26 +1,24 @@
1
- import { TouchableOpacity } from 'react-native';
1
+ import { TouchableHighlight } from 'react-native';
2
2
  import styled from '@emotion/native';
3
3
  import type { TouchableOpacityProps } from 'react-native';
4
4
  import Typography from '../../Typography';
5
5
  import Icon from '../../Icon';
6
6
  import type { IconProps } from '../../Icon';
7
7
 
8
- const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>(
9
- ({ theme }) => ({
10
- paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
11
- paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
12
- paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
13
- paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
14
- margin: theme.__hd__.fab.space.actionItemMargin,
15
- marginRight: theme.__hd__.fab.space.actionItemMarginRight,
16
- backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
17
- borderRadius: theme.__hd__.fab.radii.actionItem,
18
- flexDirection: 'row',
19
- alignItems: 'center',
20
- alignSelf: 'flex-end',
21
- overflow: 'hidden',
22
- })
23
- );
8
+ const StyledActionItem = styled(TouchableHighlight)(({ theme }) => ({
9
+ paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
10
+ paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
11
+ paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
12
+ paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
13
+ margin: theme.__hd__.fab.space.actionItemMargin,
14
+ marginRight: theme.__hd__.fab.space.actionItemMarginRight,
15
+ backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
16
+ borderRadius: theme.__hd__.fab.radii.actionItem,
17
+ flexDirection: 'row',
18
+ alignItems: 'center',
19
+ alignSelf: 'flex-end',
20
+ overflow: 'hidden',
21
+ }));
24
22
 
25
23
  const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>(
26
24
  ({ theme }) => ({