@hero-design/rn 7.16.0-alpha.1 → 7.16.0-alpha.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 (21) hide show
  1. package/assets/fonts/hero-icons.ttf +0 -0
  2. package/package.json +2 -2
  3. package/src/components/BottomSheet/Header.tsx +1 -2
  4. package/src/components/BottomSheet/StyledBottomSheet.tsx +18 -23
  5. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +22 -22
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +11 -11
  7. package/src/components/Icon/HeroIcon/selection.json +1 -1
  8. package/src/components/Icon/IconList.ts +0 -1
  9. package/src/components/Icon/__tests__/__snapshots__/index.spec.tsx.snap +0 -31
  10. package/src/components/Icon/__tests__/index.spec.tsx +0 -5
  11. package/src/components/Icon/index.tsx +9 -24
  12. package/src/components/RichTextEditor/index.tsx +2 -8
  13. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +22 -22
  14. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +20 -20
  15. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +11 -11
  16. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +3 -6
  17. package/src/theme/components/bottomSheet.ts +4 -8
  18. package/src/types.ts +2 -10
  19. package/lib2/assets/fonts/hero-icons.ttf +0 -0
  20. package/lib2/index.js +0 -1140
  21. package/src/components/Icon/AnimatedIcon.tsx +0 -46
package/assets/fonts/hero-icons.ttf CHANGED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn",
3
- "version": "7.16.0-alpha.1",
3
+ "version": "7.16.0-alpha.3",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -20,7 +20,7 @@
20
20
  "dependencies": {
21
21
  "@emotion/native": "^11.9.3",
22
22
  "@emotion/react": "^11.9.3",
23
- "@hero-design/colors": "7.16.0",
23
+ "@hero-design/colors": "7.15.5",
24
24
  "date-fns": "^2.16.1",
25
25
  "events": "^3.2.0",
26
26
  "hero-editor": "^1.9.9"
package/src/components/BottomSheet/Header.tsx CHANGED
@@ -23,7 +23,7 @@ const Header = ({
23
23
  <>
24
24
  <StyledHeaderWrapper>
25
25
  {typeof content === 'string' ? (
26
- <StyledHeader>
26
+ <StyledHeader adjacentIcon={showCloseButton}>
27
27
  <Typography.Text fontSize="large" fontWeight="semi-bold">
28
28
  {content}
29
29
  </Typography.Text>
@@ -38,7 +38,6 @@ const Header = ({
38
38
  onPress={onRequestClose}
39
39
  intent="text"
40
40
  testID="bottom-sheet-close-icon"
41
- size="small"
42
41
  />
43
42
  </StyledIconWrapper>
44
43
  ) : null}
package/src/components/BottomSheet/StyledBottomSheet.tsx CHANGED
@@ -1,24 +1,16 @@
1
1
  import styled from '@emotion/native';
2
2
  import { ComponentProps } from 'react';
3
- import {
4
- Animated,
5
- Pressable,
6
- SafeAreaView,
7
- StyleSheet,
8
- View,
9
- ViewProps,
10
- } from 'react-native';
3
+ import { Animated, Pressable, StyleSheet, View, ViewProps } from 'react-native';
11
4
 
12
5
  const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
13
- const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
14
6
 
15
7
  const StyledWrapper = styled(View)<ViewProps>({
16
8
  ...StyleSheet.absoluteFillObject,
17
9
  flexDirection: 'column-reverse',
18
10
  });
19
11
 
20
- const StyledBottomSheet = styled(AnimatedSafeAreaView)<
21
- ComponentProps<typeof AnimatedSafeAreaView>
12
+ const StyledBottomSheet = styled(Animated.View)<
13
+ ComponentProps<typeof Animated.View>
22
14
  >(({ theme }) => ({
23
15
  borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
24
16
  borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
@@ -41,20 +33,25 @@ const StyledBackdrop = styled(AnimatedPressable)<
41
33
  }));
42
34
 
43
35
  const StyledHeaderWrapper = styled(View)(({ theme }) => ({
36
+ minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
44
37
  flexDirection: 'row',
45
- paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
46
- paddingHorizontal:
47
- theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding,
48
38
  }));
49
39
 
50
- const StyledHeader = styled(View)<ViewProps>({
51
- flex: 1,
52
- justifyContent: 'center',
53
- });
40
+ const StyledHeader = styled(View)<{ adjacentIcon: boolean }>(
41
+ ({ theme, adjacentIcon }) => ({
42
+ flex: 1,
43
+ paddingLeft: theme.__hd__.bottomSheet.space.horizontalPadding,
44
+ paddingRight: adjacentIcon
45
+ ? 0
46
+ : theme.__hd__.bottomSheet.space.horizontalPadding,
47
+ paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
48
+ justifyContent: 'center',
49
+ })
50
+ );
54
51
 
55
52
  const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
56
- paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
57
- paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
53
+ paddingHorizontal: theme.__hd__.bottomSheet.space.horizontalPadding,
54
+ paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
58
55
  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
59
56
  alignItems: 'center',
60
57
  justifyContent: 'flex-end',
@@ -64,9 +61,7 @@ const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
64
61
  const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
65
62
  alignItems: 'center',
66
63
  justifyContent: 'center',
67
- width: theme.__hd__.bottomSheet.sizes.closeIcon,
68
- height: theme.__hd__.bottomSheet.sizes.closeIcon,
69
- marginLeft: theme.__hd__.bottomSheet.space.closeIconMargin,
64
+ width: theme.__hd__.bottomSheet.sizes.closeIconWidth,
70
65
  }));
71
66
 
72
67
  export {
package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -49,9 +49,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
49
49
  }
50
50
  }
51
51
  />
52
- <RCTSafeAreaView
52
+ <View
53
53
  collapsable={false}
54
- emulateUnlessSupported={true}
55
54
  nativeID="animatedComponent"
56
55
  onLayout={[Function]}
57
56
  style={
@@ -85,19 +84,22 @@ exports[`BottomSheet renders correctly with close state 1`] = `
85
84
  Array [
86
85
  Object {
87
86
  "flexDirection": "row",
88
- "paddingHorizontal": 16,
89
- "paddingVertical": 8,
87
+ "minHeight": 64,
90
88
  },
91
89
  undefined,
92
90
  ]
93
91
  }
94
92
  >
95
93
  <View
94
+ adjacentIcon={true}
96
95
  style={
97
96
  Array [
98
97
  Object {
99
98
  "flex": 1,
100
99
  "justifyContent": "center",
100
+ "paddingLeft": 24,
101
+ "paddingRight": 0,
102
+ "paddingVertical": 8,
101
103
  },
102
104
  undefined,
103
105
  ]
@@ -128,10 +130,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
128
130
  Array [
129
131
  Object {
130
132
  "alignItems": "center",
131
- "height": 48,
132
133
  "justifyContent": "center",
133
- "marginLeft": 12,
134
- "width": 48,
134
+ "width": 72,
135
135
  },
136
136
  undefined,
137
137
  ]
@@ -162,13 +162,13 @@ exports[`BottomSheet renders correctly with close state 1`] = `
162
162
  Array [
163
163
  Object {
164
164
  "color": "#292a2b",
165
- "fontSize": 20,
165
+ "fontSize": 24,
166
166
  },
167
167
  undefined,
168
168
  ]
169
169
  }
170
170
  themeIntent="text"
171
- themeSize="small"
171
+ themeSize="medium"
172
172
  />
173
173
  </View>
174
174
  </View>
@@ -209,7 +209,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
209
209
  "flexDirection": "row",
210
210
  "justifyContent": "flex-end",
211
211
  "minHeight": 64,
212
- "paddingHorizontal": 12,
212
+ "paddingHorizontal": 24,
213
213
  "paddingVertical": 8,
214
214
  },
215
215
  undefined,
@@ -260,7 +260,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
260
260
  </View>
261
261
  </View>
262
262
  </View>
263
- </RCTSafeAreaView>
263
+ </View>
264
264
  </View>
265
265
  </Modal>
266
266
  `;
@@ -314,9 +314,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
314
314
  }
315
315
  }
316
316
  />
317
- <RCTSafeAreaView
317
+ <View
318
318
  collapsable={false}
319
- emulateUnlessSupported={true}
320
319
  nativeID="animatedComponent"
321
320
  onLayout={[Function]}
322
321
  style={
@@ -350,19 +349,22 @@ exports[`BottomSheet renders correctly with open state 1`] = `
350
349
  Array [
351
350
  Object {
352
351
  "flexDirection": "row",
353
- "paddingHorizontal": 16,
354
- "paddingVertical": 8,
352
+ "minHeight": 64,
355
353
  },
356
354
  undefined,
357
355
  ]
358
356
  }
359
357
  >
360
358
  <View
359
+ adjacentIcon={true}
361
360
  style={
362
361
  Array [
363
362
  Object {
364
363
  "flex": 1,
365
364
  "justifyContent": "center",
365
+ "paddingLeft": 24,
366
+ "paddingRight": 0,
367
+ "paddingVertical": 8,
366
368
  },
367
369
  undefined,
368
370
  ]
@@ -393,10 +395,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
393
395
  Array [
394
396
  Object {
395
397
  "alignItems": "center",
396
- "height": 48,
397
398
  "justifyContent": "center",
398
- "marginLeft": 12,
399
- "width": 48,
399
+ "width": 72,
400
400
  },
401
401
  undefined,
402
402
  ]
@@ -427,13 +427,13 @@ exports[`BottomSheet renders correctly with open state 1`] = `
427
427
  Array [
428
428
  Object {
429
429
  "color": "#292a2b",
430
- "fontSize": 20,
430
+ "fontSize": 24,
431
431
  },
432
432
  undefined,
433
433
  ]
434
434
  }
435
435
  themeIntent="text"
436
- themeSize="small"
436
+ themeSize="medium"
437
437
  />
438
438
  </View>
439
439
  </View>
@@ -474,7 +474,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
474
474
  "flexDirection": "row",
475
475
  "justifyContent": "flex-end",
476
476
  "minHeight": 64,
477
- "paddingHorizontal": 12,
477
+ "paddingHorizontal": 24,
478
478
  "paddingVertical": 8,
479
479
  },
480
480
  undefined,
@@ -525,7 +525,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
525
525
  </View>
526
526
  </View>
527
527
  </View>
528
- </RCTSafeAreaView>
528
+ </View>
529
529
  </View>
530
530
  </Modal>
531
531
  `;
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -276,9 +276,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
276
276
  }
277
277
  }
278
278
  />
279
- <RCTSafeAreaView
279
+ <View
280
280
  collapsable={false}
281
- emulateUnlessSupported={true}
282
281
  nativeID="animatedComponent"
283
282
  onLayout={[Function]}
284
283
  style={
@@ -312,19 +311,22 @@ exports[`DatePickerIOS renders correctly 1`] = `
312
311
  Array [
313
312
  Object {
314
313
  "flexDirection": "row",
315
- "paddingHorizontal": 16,
316
- "paddingVertical": 8,
314
+ "minHeight": 64,
317
315
  },
318
316
  undefined,
319
317
  ]
320
318
  }
321
319
  >
322
320
  <View
321
+ adjacentIcon={true}
323
322
  style={
324
323
  Array [
325
324
  Object {
326
325
  "flex": 1,
327
326
  "justifyContent": "center",
327
+ "paddingLeft": 24,
328
+ "paddingRight": 0,
329
+ "paddingVertical": 8,
328
330
  },
329
331
  undefined,
330
332
  ]
@@ -355,10 +357,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
355
357
  Array [
356
358
  Object {
357
359
  "alignItems": "center",
358
- "height": 48,
359
360
  "justifyContent": "center",
360
- "marginLeft": 12,
361
- "width": 48,
361
+ "width": 72,
362
362
  },
363
363
  undefined,
364
364
  ]
@@ -389,13 +389,13 @@ exports[`DatePickerIOS renders correctly 1`] = `
389
389
  Array [
390
390
  Object {
391
391
  "color": "#292a2b",
392
- "fontSize": 20,
392
+ "fontSize": 24,
393
393
  },
394
394
  undefined,
395
395
  ]
396
396
  }
397
397
  themeIntent="text"
398
- themeSize="small"
398
+ themeSize="medium"
399
399
  />
400
400
  </View>
401
401
  </View>
@@ -456,7 +456,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
456
456
  "flexDirection": "row",
457
457
  "justifyContent": "flex-end",
458
458
  "minHeight": 64,
459
- "paddingHorizontal": 12,
459
+ "paddingHorizontal": 24,
460
460
  "paddingVertical": 8,
461
461
  },
462
462
  undefined,
@@ -503,7 +503,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
503
503
  </View>
504
504
  </View>
505
505
  </View>
506
- </RCTSafeAreaView>
506
+ </View>
507
507
  </View>
508
508
  </View>
509
509
  </View>