@hero-design/rn 8.101.3-alpha.0 → 8.101.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:4149) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3262) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 11.2s
+created lib/index.js, es/index.js in 1m 10.1s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 25.9s
+created ., . in 19.8s

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @hero-design/rn
 
-## 8.101.3-alpha.0
+## 8.101.3
 
 ### Patch Changes
 
-- [`4de62c1c0bda0ef6f78a9c93956192641b6e9eea`](https://github.com/Thinkei/hero-design/commit/4de62c1c0bda0ef6f78a9c93956192641b6e9eea) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - chore: update testId of native text input
+- [#3976](https://github.com/Thinkei/hero-design/pull/3976) [`e33210e17116b5510e62076d52c48ec1e9d3be58`](https://github.com/Thinkei/hero-design/commit/e33210e17116b5510e62076d52c48ec1e9d3be58) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Badge.Count] Increase text size
 
 ## 8.101.2
 

package/es/index.js

@@ -2684,15 +2684,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       medium: theme.fontSizes.small,
       small: 8
     },
-    count: 6
+    count: 8
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: Platform.select({
-      android: 11,
+      android: 14,
       // vertical alignment
-      "default": 12
+      "default": 18
     })
   };
   var radii = {
@@ -2710,8 +2710,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.smallMedium,
-      height: theme.sizes.smallMedium
+      width: theme.sizes.medium,
+      height: theme.sizes.medium
     }
   };
   var borderWidths = {
@@ -2726,6 +2726,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall,
+    countPositionTop: -theme.space.xsmall,
+    countPositionRight: -theme.space.xsmall,
     countPaddingHorizontal: theme.space.xxsmall
   };
   return {
@@ -9724,8 +9726,8 @@ var StyledCount = index$b(View)(function (_ref4) {
     display: 'flex',
     paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
     position: 'absolute',
-    top: theme.__hd__.badge.space.statusPositionTop,
-    right: theme.__hd__.badge.space.statusPositionRight
+    top: theme.__hd__.badge.space.countPositionTop,
+    right: theme.__hd__.badge.space.countPositionRight
   };
 });
 var StyledCountText = index$b(Typography.Text)(function (_ref5) {
@@ -20175,13 +20177,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     }, [style, theme]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
-  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: StyleSheet$1.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
-    testID: "text-input".concat(nativeInputTestIDSuffix),
+    testID: 'text-input',
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/lib/index.js

@@ -2713,15 +2713,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       medium: theme.fontSizes.small,
       small: 8
     },
-    count: 6
+    count: 8
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: reactNative.Platform.select({
-      android: 11,
+      android: 14,
       // vertical alignment
-      "default": 12
+      "default": 18
     })
   };
   var radii = {
@@ -2739,8 +2739,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.smallMedium,
-      height: theme.sizes.smallMedium
+      width: theme.sizes.medium,
+      height: theme.sizes.medium
     }
   };
   var borderWidths = {
@@ -2755,6 +2755,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall,
+    countPositionTop: -theme.space.xsmall,
+    countPositionRight: -theme.space.xsmall,
     countPaddingHorizontal: theme.space.xxsmall
   };
   return {
@@ -9753,8 +9755,8 @@ var StyledCount = index$b(reactNative.View)(function (_ref4) {
     display: 'flex',
     paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
     position: 'absolute',
-    top: theme.__hd__.badge.space.statusPositionTop,
-    right: theme.__hd__.badge.space.statusPositionRight
+    top: theme.__hd__.badge.space.countPositionTop,
+    right: theme.__hd__.badge.space.countPositionRight
   };
 });
 var StyledCountText = index$b(Typography.Text)(function (_ref5) {
@@ -20204,13 +20206,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     }, [style, theme]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
-  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: reactNative.StyleSheet.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
-    testID: "text-input".concat(nativeInputTestIDSuffix),
+    testID: 'text-input',
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.101.3-alpha.0",
+  "version": "8.101.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Badge/StyledBadge.tsx

@@ -77,8 +77,8 @@ const StyledCount = styled(View)(({ theme }) => ({
   display: 'flex',
   paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
   position: 'absolute',
-  top: theme.__hd__.badge.space.statusPositionTop,
-  right: theme.__hd__.badge.space.statusPositionRight,
+  top: theme.__hd__.badge.space.countPositionTop,
+  right: theme.__hd__.badge.space.countPositionRight,
 }));
 
 const StyledCountText = styled(Typography.Text)(({ theme }) => ({

package/src/components/Badge/__tests__/__snapshots__/Count.spec.tsx.snap

@@ -34,15 +34,15 @@ exports[`BadgeCount displays 1 for content 1 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 12,
+            "height": 16,
             "justifyContent": "center",
-            "minWidth": 12,
+            "minWidth": 16,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -2,
+            "right": -4,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -2,
+            "top": -4,
           },
           undefined,
         ]
@@ -63,9 +63,9 @@ exports[`BadgeCount displays 1 for content 1 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 6,
-                "height": 12,
-                "lineHeight": 12,
+                "fontSize": 8,
+                "height": 16,
+                "lineHeight": 18,
               },
               undefined,
             ],
@@ -137,15 +137,15 @@ exports[`BadgeCount displays 12 for content 12 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 12,
+            "height": 16,
             "justifyContent": "center",
-            "minWidth": 12,
+            "minWidth": 16,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -2,
+            "right": -4,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -2,
+            "top": -4,
           },
           undefined,
         ]
@@ -166,9 +166,9 @@ exports[`BadgeCount displays 12 for content 12 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 6,
-                "height": 12,
-                "lineHeight": 12,
+                "fontSize": 8,
+                "height": 16,
+                "lineHeight": 18,
               },
               undefined,
             ],
@@ -240,15 +240,15 @@ exports[`BadgeCount displays 99+ for content 999 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 12,
+            "height": 16,
             "justifyContent": "center",
-            "minWidth": 12,
+            "minWidth": 16,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -2,
+            "right": -4,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -2,
+            "top": -4,
           },
           undefined,
         ]
@@ -269,9 +269,9 @@ exports[`BadgeCount displays 99+ for content 999 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 6,
-                "height": 12,
-                "lineHeight": 12,
+                "fontSize": 8,
+                "height": 16,
+                "lineHeight": 18,
               },
               undefined,
             ],

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1185,7 +1185,7 @@ exports[`TextInput disabled renders correctly 1`] = `
               },
             ]
           }
-          testID="text-input-disabled-text-input"
+          testID="text-input"
           themeVariant="text"
           value="100"
         />
@@ -2320,7 +2320,7 @@ exports[`TextInput idle renders correctly 1`] = `
               },
             ]
           }
-          testID="text-input-idle-text-input"
+          testID="text-input"
           themeVariant="text"
         />
       </View>

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -54,9 +54,7 @@ describe('TextInput', () => {
       expect(toJSON()).toMatchSnapshot();
       expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId(
-          'text-input-idle-text-input'
-        )
+        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
       ).toHaveLength(1);
       expect(
         within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
@@ -71,9 +69,7 @@ describe('TextInput', () => {
         within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
 
-      expect(getByTestId('text-input-idle-text-input').props.placeholder).toBe(
-        ' '
-      );
+      expect(getByTestId('text-input').props.placeholder).toBe(' ');
     });
 
     it('should not render input-label if label is empty', () => {
@@ -108,7 +104,7 @@ describe('TextInput', () => {
       );
 
       const testInput = within(getByTestId('idle-text-input')).getByTestId(
-        'text-input-idle-text-input'
+        'text-input'
       );
 
       fireEvent.changeText(testInput, 'Thong Quach');
@@ -309,18 +305,13 @@ describe('TextInput', () => {
       expect(toJSON()).toMatchSnapshot();
       expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
       expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('text-input-disabled-text-input')).toHaveLength(
-        1
-      );
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
       expect(getByTestId('disabled-text-input')).toHaveProp(
         'pointerEvents',
         'none'
       );
 
-      expect(getByTestId('text-input-disabled-text-input')).not.toHaveProp(
-        'multiline',
-        'true'
-      );
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
   });
 
@@ -569,7 +560,7 @@ describe('renderInput', () => {
         {renderInput({
           variant: 'textarea',
           nativeInputProps: {
-            testID: 'text-input-idle-text-input',
+            testID: 'text-input',
             value: 'text input value',
           },
           theme,
@@ -577,9 +568,7 @@ describe('renderInput', () => {
       </>
     );
 
-    expect(wrapper.queryAllByTestId('text-input-idle-text-input')).toHaveLength(
-      1
-    );
+    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
     expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
   });
 });

package/src/components/TextInput/index.tsx

@@ -397,8 +397,6 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       };
     }, [style, theme]);
 
-    const nativeInputTestIDSuffix = testID ? `-${testID}` : '';
-
     const nativeInputProps: NativeTextInputProps = {
       style: StyleSheet.flatten([
         {
@@ -407,7 +405,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         },
         textStyleWithoutBorderStyle,
       ]),
-      testID: `text-input${nativeInputTestIDSuffix}`,
+      testID: 'text-input',
       accessibilityState: {
         disabled: state === 'disabled' || state === 'readonly',
       },

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -157,7 +157,7 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
       },
       "fontSizes": {
-        "count": 6,
+        "count": 8,
         "icon": {
           "medium": 12,
           "small": 8,
@@ -170,7 +170,7 @@ exports[`theme returns correct theme object 1`] = `
         "small": "BeVietnamPro-SemiBold",
       },
       "lineHeights": {
-        "count": 12,
+        "count": 18,
         "medium": 16,
         "small": 10,
       },
@@ -179,8 +179,8 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "count": {
-          "height": 12,
-          "width": 12,
+          "height": 16,
+          "width": 16,
         },
         "medium": {
           "height": 24,
@@ -195,6 +195,8 @@ exports[`theme returns correct theme object 1`] = `
       },
       "space": {
         "countPaddingHorizontal": 2,
+        "countPositionRight": -4,
+        "countPositionTop": -4,
         "medium": {
           "horizontalPadding": 8,
         },

package/src/theme/components/badge.ts

@@ -26,15 +26,15 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       medium: theme.fontSizes.small,
       small: 8,
     },
-    count: 6,
+    count: 8,
   };
 
   const lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: Platform.select({
-      android: 11, // vertical alignment
-      default: 12,
+      android: 14, // vertical alignment
+      default: 18,
     }),
   };
 
@@ -54,8 +54,8 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.smallMedium,
-      height: theme.sizes.smallMedium,
+      width: theme.sizes.medium,
+      height: theme.sizes.medium,
     },
   };
 
@@ -72,6 +72,8 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall,
+    countPositionTop: -theme.space.xsmall,
+    countPositionRight: -theme.space.xsmall,
     countPaddingHorizontal: theme.space.xxsmall,
   };
 

package/src/types.ts

@@ -22,6 +22,7 @@ import type { CalendarDateRange } from './components/Calendar/CalendarRange';
 import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
 import type { ColumnChartProps } from './components/Chart/ColumnChart';
 import { LineChartProps } from './components/Chart/Line';
+import type { Scale, SystemPalette } from './theme/global';
 
 export type {
   BottomNavigationTabType,
@@ -48,4 +49,6 @@ export type {
   DateTimeFormats,
   ColumnChartProps,
   LineChartProps,
+  Scale,
+  SystemPalette,
 };