@hero-design/rn 8.101.2 → 8.101.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3313) 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 10.7s
+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 22.5s
+created ., . in 19.8s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.101.3
+
+### Patch Changes
+
+- [#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
 
 ### Patch Changes

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) {

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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.101.2",
+  "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/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,
 };