@hero-design/rn 7.22.1 → 7.22.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 (37) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +42 -46
  3. package/lib/index.js +42 -46
  4. package/package.json +4 -4
  5. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +4 -18
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +4 -18
  7. package/src/components/List/StyledBasicListItem.tsx +1 -0
  8. package/src/components/List/__tests__/BasicListItem.spec.tsx +37 -13
  9. package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap +162 -1
  10. package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap +6 -2
  11. package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap +2 -2
  12. package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap +3 -1
  13. package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap +4 -1
  14. package/src/components/RichTextEditor/RichTextEditor.tsx +1 -3
  15. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +8 -36
  16. package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
  17. package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +17 -5
  18. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +56 -98
  19. package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
  20. package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +16 -4
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +52 -94
  22. package/src/components/TextInput/StyledTextInput.tsx +11 -16
  23. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +3 -3
  24. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +18 -36
  25. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +55 -237
  26. package/src/components/TextInput/index.tsx +27 -27
  27. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +4 -18
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +4 -18
  29. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +4 -2
  30. package/src/theme/components/list.ts +5 -2
  31. package/src/theme/global/colors/swag.ts +1 -0
  32. package/src/theme/global/colors/types.ts +1 -0
  33. package/types/components/TextInput/StyledTextInput.d.ts +3 -9
  34. package/types/components/TextInput/index.d.ts +4 -4
  35. package/types/theme/components/list.d.ts +1 -0
  36. package/types/theme/global/colors/types.d.ts +1 -0
  37. package/types/theme/global/index.d.ts +1 -0
package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`BasicListItem renders correctly 1`] = `
3
+ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`] = `
4
4
  <View
5
5
  accessibilityState={
6
6
  Object {
@@ -21,6 +21,7 @@ exports[`BasicListItem renders correctly 1`] = `
21
21
  Object {
22
22
  "alignItems": "center",
23
23
  "backgroundColor": "#ffffff",
24
+ "borderRadius": 4,
24
25
  "flexDirection": "row",
25
26
  "opacity": 1,
26
27
  "padding": 16,
@@ -30,6 +31,31 @@ exports[`BasicListItem renders correctly 1`] = `
30
31
  }
31
32
  testID="basic-list-item"
32
33
  >
34
+ <View
35
+ style={
36
+ Array [
37
+ Object {
38
+ "marginRight": 8,
39
+ },
40
+ undefined,
41
+ ]
42
+ }
43
+ >
44
+ <HeroIcon
45
+ name="circle-question-outlined"
46
+ style={
47
+ Array [
48
+ Object {
49
+ "color": "#001f23",
50
+ "fontSize": 24,
51
+ },
52
+ undefined,
53
+ ]
54
+ }
55
+ themeIntent="text"
56
+ themeSize="medium"
57
+ />
58
+ </View>
33
59
  <View
34
60
  style={
35
61
  Array [
@@ -106,3 +132,138 @@ exports[`BasicListItem renders correctly 1`] = `
106
132
  </View>
107
133
  </View>
108
134
  `;
135
+
136
+ exports[`BasicListItem when suffix and prefix are react element renders correctly 1`] = `
137
+ <View
138
+ accessibilityState={
139
+ Object {
140
+ "disabled": false,
141
+ }
142
+ }
143
+ accessible={true}
144
+ focusable={false}
145
+ onClick={[Function]}
146
+ onResponderGrant={[Function]}
147
+ onResponderMove={[Function]}
148
+ onResponderRelease={[Function]}
149
+ onResponderTerminate={[Function]}
150
+ onResponderTerminationRequest={[Function]}
151
+ onStartShouldSetResponder={[Function]}
152
+ style={
153
+ Array [
154
+ Object {
155
+ "alignItems": "center",
156
+ "backgroundColor": "#ffffff",
157
+ "borderRadius": 4,
158
+ "flexDirection": "row",
159
+ "opacity": 1,
160
+ "padding": 16,
161
+ },
162
+ undefined,
163
+ ]
164
+ }
165
+ testID="basic-list-item"
166
+ >
167
+ <View
168
+ style={
169
+ Array [
170
+ Object {
171
+ "marginRight": 8,
172
+ },
173
+ undefined,
174
+ ]
175
+ }
176
+ >
177
+ <HeroIcon
178
+ name="circle-question-outlined"
179
+ style={
180
+ Array [
181
+ Object {
182
+ "color": "#001f23",
183
+ "fontSize": 24,
184
+ },
185
+ undefined,
186
+ ]
187
+ }
188
+ testID="prefix"
189
+ themeIntent="text"
190
+ themeSize="medium"
191
+ />
192
+ </View>
193
+ <View
194
+ style={
195
+ Array [
196
+ Object {
197
+ "flex": 1,
198
+ },
199
+ undefined,
200
+ ]
201
+ }
202
+ >
203
+ <Text
204
+ style={
205
+ Array [
206
+ Object {
207
+ "color": "#001f23",
208
+ "fontFamily": "BeVietnamPro-Regular",
209
+ "fontSize": 16,
210
+ "letterSpacing": 0.48,
211
+ "lineHeight": 24,
212
+ },
213
+ undefined,
214
+ ]
215
+ }
216
+ themeFontSize="large"
217
+ themeFontWeight="regular"
218
+ themeIntent="body"
219
+ >
220
+ List item
221
+ </Text>
222
+ <Text
223
+ style={
224
+ Array [
225
+ Object {
226
+ "color": "#808f91",
227
+ "fontFamily": "BeVietnamPro-Regular",
228
+ "fontSize": 12,
229
+ "letterSpacing": 0.36,
230
+ "lineHeight": 20,
231
+ },
232
+ undefined,
233
+ ]
234
+ }
235
+ themeFontSize="small"
236
+ themeFontWeight="regular"
237
+ themeIntent="subdued"
238
+ >
239
+ subtitle
240
+ </Text>
241
+ </View>
242
+ <View
243
+ style={
244
+ Array [
245
+ Object {
246
+ "marginLeft": 8,
247
+ },
248
+ undefined,
249
+ ]
250
+ }
251
+ >
252
+ <HeroIcon
253
+ name="checkmark"
254
+ style={
255
+ Array [
256
+ Object {
257
+ "color": "#001f23",
258
+ "fontSize": 24,
259
+ },
260
+ undefined,
261
+ ]
262
+ }
263
+ testID="suffix"
264
+ themeIntent="text"
265
+ themeSize="medium"
266
+ />
267
+ </View>
268
+ </View>
269
+ `;
package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap CHANGED
@@ -16,6 +16,7 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
16
16
  Object {
17
17
  "alignItems": "center",
18
18
  "backgroundColor": "#ffffff",
19
+ "borderRadius": 4,
19
20
  "flexDirection": "row",
20
21
  "opacity": 1,
21
22
  "padding": 16,
@@ -62,6 +63,7 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
62
63
  Object {
63
64
  "alignItems": "center",
64
65
  "backgroundColor": "#ffffff",
66
+ "borderRadius": 4,
65
67
  "flexDirection": "row",
66
68
  "opacity": 0.38,
67
69
  "padding": 16,
@@ -107,7 +109,8 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
107
109
  Array [
108
110
  Object {
109
111
  "alignItems": "center",
110
- "backgroundColor": "#f3e6f6",
112
+ "backgroundColor": "#ECE8EF",
113
+ "borderRadius": 4,
111
114
  "flexDirection": "row",
112
115
  "opacity": 1,
113
116
  "padding": 16,
@@ -153,7 +156,8 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
153
156
  Array [
154
157
  Object {
155
158
  "alignItems": "center",
156
- "backgroundColor": "#f3e6f6",
159
+ "backgroundColor": "#ECE8EF",
160
+ "borderRadius": 4,
157
161
  "flexDirection": "row",
158
162
  "opacity": 0.38,
159
163
  "padding": 16,
package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap CHANGED
@@ -198,7 +198,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
198
198
  Array [
199
199
  Object {
200
200
  "alignItems": "center",
201
- "backgroundColor": "#f3e6f6",
201
+ "backgroundColor": "#ECE8EF",
202
202
  "borderRadius": 8,
203
203
  "elevation": 10,
204
204
  "flexDirection": "row",
@@ -251,7 +251,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
251
251
  style={
252
252
  Array [
253
253
  Object {
254
- "backgroundColor": "#f3e6f6",
254
+ "backgroundColor": "#ECE8EF",
255
255
  "flexDirection": "row",
256
256
  "padding": 16,
257
257
  },
package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap CHANGED
@@ -20,7 +20,8 @@ exports[`rendering renders correctly when checked 1`] = `
20
20
  Array [
21
21
  Object {
22
22
  "alignItems": "center",
23
- "backgroundColor": "#f3e6f6",
23
+ "backgroundColor": "#ECE8EF",
24
+ "borderRadius": 4,
24
25
  "flexDirection": "row",
25
26
  "opacity": 1,
26
27
  "padding": 16,
@@ -125,6 +126,7 @@ exports[`rendering renders correctly when not checked 1`] = `
125
126
  Object {
126
127
  "alignItems": "center",
127
128
  "backgroundColor": "#ffffff",
129
+ "borderRadius": 4,
128
130
  "flexDirection": "row",
129
131
  "opacity": 1,
130
132
  "padding": 16,
package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap CHANGED
@@ -22,6 +22,7 @@ exports[`rendering renders correctly 1`] = `
22
22
  Object {
23
23
  "alignItems": "center",
24
24
  "backgroundColor": "#ffffff",
25
+ "borderRadius": 4,
25
26
  "flexDirection": "row",
26
27
  "opacity": 1,
27
28
  "padding": 16,
@@ -118,6 +119,7 @@ exports[`rendering renders correctly 1`] = `
118
119
  Object {
119
120
  "alignItems": "center",
120
121
  "backgroundColor": "#ffffff",
122
+ "borderRadius": 4,
121
123
  "flexDirection": "row",
122
124
  "opacity": 1,
123
125
  "padding": 16,
@@ -213,7 +215,8 @@ exports[`rendering renders correctly 1`] = `
213
215
  Array [
214
216
  Object {
215
217
  "alignItems": "center",
216
- "backgroundColor": "#f3e6f6",
218
+ "backgroundColor": "#ECE8EF",
219
+ "borderRadius": 4,
217
220
  "flexDirection": "row",
218
221
  "opacity": 1,
219
222
  "padding": 16,
package/src/components/RichTextEditor/RichTextEditor.tsx CHANGED
@@ -20,7 +20,6 @@ import Icon from '../Icon';
20
20
  import {
21
21
  StyledAsteriskLabel,
22
22
  StyledAsteriskLabelInsideTextInput,
23
- StyledBorderBackDrop,
24
23
  StyledContainer,
25
24
  StyledError,
26
25
  StyledErrorAndHelpTextContainer,
@@ -310,9 +309,8 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
310
309
  );
311
310
 
312
311
  return (
313
- <StyledContainer testID={testID}>
312
+ <StyledContainer testID={testID} themeVariant={variant}>
314
313
  <StyledTextInputContainer>
315
- <StyledBorderBackDrop themeVariant={variant} />
316
314
  {(isFocused || (label && !isEmptyValue)) && (
317
315
  <StyledLabelContainer pointerEvents="none">
318
316
  {required && (
package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap CHANGED
@@ -5,12 +5,16 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
5
5
  style={
6
6
  Array [
7
7
  Object {
8
+ "borderColor": "#de350b",
9
+ "borderRadius": 8,
10
+ "borderWidth": 1,
8
11
  "marginVertical": 8,
9
12
  "width": "100%",
10
13
  },
11
14
  undefined,
12
15
  ]
13
16
  }
17
+ themeVariant="error"
14
18
  >
15
19
  <View
16
20
  style={
@@ -24,24 +28,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
24
28
  ]
25
29
  }
26
30
  >
27
- <View
28
- style={
29
- Array [
30
- Object {
31
- "borderColor": "#de350b",
32
- "borderRadius": 8,
33
- "borderWidth": 1,
34
- "bottom": 0,
35
- "left": 0,
36
- "position": "absolute",
37
- "right": 0,
38
- "top": 0,
39
- },
40
- undefined,
41
- ]
42
- }
43
- themeVariant="error"
44
- />
45
31
  <View
46
32
  style={
47
33
  Array [
@@ -265,12 +251,16 @@ exports[`RichTextEditor should render correctly 1`] = `
265
251
  style={
266
252
  Array [
267
253
  Object {
254
+ "borderColor": "#de350b",
255
+ "borderRadius": 8,
256
+ "borderWidth": 1,
268
257
  "marginVertical": 8,
269
258
  "width": "100%",
270
259
  },
271
260
  undefined,
272
261
  ]
273
262
  }
263
+ themeVariant="error"
274
264
  >
275
265
  <View
276
266
  style={
@@ -284,24 +274,6 @@ exports[`RichTextEditor should render correctly 1`] = `
284
274
  ]
285
275
  }
286
276
  >
287
- <View
288
- style={
289
- Array [
290
- Object {
291
- "borderColor": "#de350b",
292
- "borderRadius": 8,
293
- "borderWidth": 1,
294
- "bottom": 0,
295
- "left": 0,
296
- "position": "absolute",
297
- "right": 0,
298
- "top": 0,
299
- },
300
- undefined,
301
- ]
302
- }
303
- themeVariant="error"
304
- />
305
277
  <View
306
278
  style={
307
279
  Array [
package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap CHANGED
@@ -20,7 +20,8 @@ exports[`Option renders correctly 1`] = `
20
20
  Array [
21
21
  Object {
22
22
  "alignItems": "center",
23
- "backgroundColor": "#f3e6f6",
23
+ "backgroundColor": "#ECE8EF",
24
+ "borderRadius": 4,
24
25
  "flexDirection": "row",
25
26
  "opacity": 1,
26
27
  "padding": 16,
package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap CHANGED
@@ -198,7 +198,8 @@ exports[`OptionList render isLoading correctly 1`] = `
198
198
  Array [
199
199
  Object {
200
200
  "alignItems": "center",
201
- "backgroundColor": "#f3e6f6",
201
+ "backgroundColor": "#ECE8EF",
202
+ "borderRadius": 4,
202
203
  "flexDirection": "row",
203
204
  "opacity": 1,
204
205
  "padding": 16,
@@ -448,6 +449,7 @@ exports[`OptionList render isLoading correctly 1`] = `
448
449
  Object {
449
450
  "alignItems": "center",
450
451
  "backgroundColor": "#ffffff",
452
+ "borderRadius": 4,
451
453
  "flexDirection": "row",
452
454
  "opacity": 1,
453
455
  "padding": 16,
@@ -565,6 +567,7 @@ exports[`OptionList render isLoading correctly 1`] = `
565
567
  Object {
566
568
  "alignItems": "center",
567
569
  "backgroundColor": "#ffffff",
570
+ "borderRadius": 4,
568
571
  "flexDirection": "row",
569
572
  "opacity": 1,
570
573
  "padding": 16,
@@ -997,7 +1000,8 @@ exports[`OptionList renders correctly 1`] = `
997
1000
  Array [
998
1001
  Object {
999
1002
  "alignItems": "center",
1000
- "backgroundColor": "#f3e6f6",
1003
+ "backgroundColor": "#ECE8EF",
1004
+ "borderRadius": 4,
1001
1005
  "flexDirection": "row",
1002
1006
  "opacity": 1,
1003
1007
  "padding": 16,
@@ -1247,6 +1251,7 @@ exports[`OptionList renders correctly 1`] = `
1247
1251
  Object {
1248
1252
  "alignItems": "center",
1249
1253
  "backgroundColor": "#ffffff",
1254
+ "borderRadius": 4,
1250
1255
  "flexDirection": "row",
1251
1256
  "opacity": 1,
1252
1257
  "padding": 16,
@@ -1364,6 +1369,7 @@ exports[`OptionList renders correctly 1`] = `
1364
1369
  Object {
1365
1370
  "alignItems": "center",
1366
1371
  "backgroundColor": "#ffffff",
1372
+ "borderRadius": 4,
1367
1373
  "flexDirection": "row",
1368
1374
  "opacity": 1,
1369
1375
  "padding": 16,
@@ -1644,7 +1650,8 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
1644
1650
  Array [
1645
1651
  Object {
1646
1652
  "alignItems": "center",
1647
- "backgroundColor": "#f3e6f6",
1653
+ "backgroundColor": "#ECE8EF",
1654
+ "borderRadius": 4,
1648
1655
  "flexDirection": "row",
1649
1656
  "opacity": 1,
1650
1657
  "padding": 16,
@@ -1893,7 +1900,8 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
1893
1900
  Array [
1894
1901
  Object {
1895
1902
  "alignItems": "center",
1896
- "backgroundColor": "#f3e6f6",
1903
+ "backgroundColor": "#ECE8EF",
1904
+ "borderRadius": 4,
1897
1905
  "flexDirection": "row",
1898
1906
  "opacity": 1,
1899
1907
  "padding": 16,
@@ -2036,6 +2044,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
2036
2044
  Object {
2037
2045
  "alignItems": "center",
2038
2046
  "backgroundColor": "#ffffff",
2047
+ "borderRadius": 4,
2039
2048
  "flexDirection": "row",
2040
2049
  "opacity": 1,
2041
2050
  "padding": 16,
@@ -2316,7 +2325,8 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
2316
2325
  Array [
2317
2326
  Object {
2318
2327
  "alignItems": "center",
2319
- "backgroundColor": "#f3e6f6",
2328
+ "backgroundColor": "#ECE8EF",
2329
+ "borderRadius": 4,
2320
2330
  "flexDirection": "row",
2321
2331
  "opacity": 1,
2322
2332
  "padding": 16,
@@ -2566,6 +2576,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
2566
2576
  Object {
2567
2577
  "alignItems": "center",
2568
2578
  "backgroundColor": "#ffffff",
2579
+ "borderRadius": 4,
2569
2580
  "flexDirection": "row",
2570
2581
  "opacity": 1,
2571
2582
  "padding": 16,
@@ -2683,6 +2694,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
2683
2694
  Object {
2684
2695
  "alignItems": "center",
2685
2696
  "backgroundColor": "#ffffff",
2697
+ "borderRadius": 4,
2686
2698
  "flexDirection": "row",
2687
2699
  "opacity": 1,
2688
2700
  "padding": 16,