@hero-design/rn-work-uikit 1.12.0 → 1.12.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn-work-uikit
 
+## 1.12.2
+
+### Patch Changes
+
+- Updated dependencies [[`c3c35f0c8d2825138330aaae0ae383b624b8e067`](https://github.com/Thinkei/hero-design/commit/c3c35f0c8d2825138330aaae0ae383b624b8e067)]:
+  - @hero-design/rn@8.120.0
+
+## 1.12.1
+
+### Patch Changes
+
+- Updated dependencies [[`bc9741dbf1dcb5a8176a14bfe85c19a70c50d283`](https://github.com/Thinkei/hero-design/commit/bc9741dbf1dcb5a8176a14bfe85c19a70c50d283), [`611662ff1d9a1ebe799a6c4a06935b51d6795da2`](https://github.com/Thinkei/hero-design/commit/611662ff1d9a1ebe799a6c4a06935b51d6795da2)]:
+  - @hero-design/rn@8.119.1
+
 ## 1.12.0
 
 ### Minor Changes

package/es/index.js

@@ -5913,7 +5913,23 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
-    countText: theme.colors.onDarkGlobalSurface
+    countText: theme.colors.onDarkGlobalSurface,
+    stringBackground: {
+      primary: theme.colors.highlightedSurface,
+      danger: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      archived: theme.colors.archivedSurface
+    },
+    stringText: {
+      primary: theme.colors.primary,
+      danger: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      archived: theme.colors.onArchivedSurface
+    }
   };
   var fonts = {
     medium: theme.fonts.neutral.regular,
@@ -7249,7 +7265,7 @@ var getTagTheme = function getTagTheme(theme) {
     verticalPadding: theme.space.xsmall
   };
   var radii = {
-    "default": theme.radii.base
+    "default": theme.radii.large
   };
   return {
     borderWidths: borderWidths,
@@ -16213,27 +16229,31 @@ var StyledView$1 = index$c(Animated.View)(function (_ref) {
     themePadding = _ref.themePadding,
     themeSize = _ref.themeSize,
     themeVariant = _ref.themeVariant,
+    themeIsStringBadge = _ref.themeIsStringBadge,
     theme = _ref.theme;
+  var backgroundColor = themeIsStringBadge ? theme.__hd__.badge.colors.stringBackground[themeIntent] : theme.__hd__.badge.colors[themeIntent];
   return {
     height: theme.__hd__.badge.sizes[themeSize].height,
     minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: theme.__hd__.badge.colors[themeIntent],
+    backgroundColor: backgroundColor,
     borderRadius: theme.radii.rounded,
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined,
     borderWidth: theme.__hd__.badge.borderWidths["default"],
-    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
+    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : backgroundColor
   };
 });
 var StyledText$2 = index$c(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
-    themeSize = _ref2.themeSize;
+    themeSize = _ref2.themeSize,
+    themeIntent = _ref2.themeIntent,
+    themeIsStringBadge = _ref2.themeIsStringBadge;
   return {
     fontSize: theme.__hd__.badge.fontSizes[themeSize],
     lineHeight: theme.__hd__.badge.lineHeights[themeSize],
     fontFamily: theme.__hd__.badge.fonts[themeSize],
-    color: theme.__hd__.badge.colors.text,
+    color: themeIsStringBadge ? theme.__hd__.badge.colors.stringText[themeIntent] : theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
@@ -16391,6 +16411,7 @@ var Badge$1 = function Badge(_ref) {
     }).start();
   }, [visible, opacity]);
   var isIconBadge = !!icon;
+  var isStringBadge = !isIconBadge && typeof originalContent === 'string';
   var content = useMemo(function () {
     if (isIconBadge) {
       return '';
@@ -16402,6 +16423,7 @@ var Badge$1 = function Badge(_ref) {
     themePadding: getPaddingState(content),
     themeSize: size,
     themeVariant: variant,
+    themeIsStringBadge: isStringBadge,
     style: [{
       opacity: opacity,
       transform: [{
@@ -16417,7 +16439,9 @@ var Badge$1 = function Badge(_ref) {
     themeSize: size,
     intent: "text-inverted"
   }) : /*#__PURE__*/React__default.createElement(StyledText$2, {
-    themeSize: size
+    themeSize: size,
+    themeIntent: intent,
+    themeIsStringBadge: isStringBadge
   }, content));
 };
 var Badge = Object.assign(Badge$1, {
@@ -16543,10 +16567,12 @@ var BottomNavigation = function BottomNavigation(_ref) {
   })), /*#__PURE__*/React__default.createElement(BottomBarWrapper, {
     themeInsets: insets
   }, /*#__PURE__*/React__default.createElement(BottomBar, null, tabs.map(function (tab) {
+    var _badge$count, _badge$testID;
     var key = tab.key,
       icon = tab.icon,
       title = tab.title,
-      testID = tab.testID;
+      testID = tab.testID,
+      badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
     return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
@@ -16555,11 +16581,16 @@ var BottomNavigation = function BottomNavigation(_ref) {
         return onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__default.createElement(BottomBarItem, null, /*#__PURE__*/React__default.createElement(Icon, {
+    }, /*#__PURE__*/React__default.createElement(BottomBarItem, null, /*#__PURE__*/React__default.createElement(Status, {
+      content: (_badge$count = badge === null || badge === void 0 ? void 0 : badge.count) !== null && _badge$count !== void 0 ? _badge$count : 0,
+      visible: !!badge && badge.count > 0,
+      max: badge === null || badge === void 0 ? void 0 : badge.max,
+      testID: (_badge$testID = badge === null || badge === void 0 ? void 0 : badge.testID) !== null && _badge$testID !== void 0 ? _badge$testID : "bottom-nav-badge-".concat(key)
+    }, /*#__PURE__*/React__default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__default.createElement(StyledBottomBarText, {
+    })), !!title && /*#__PURE__*/React__default.createElement(StyledBottomBarText, {
       intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));

package/lib/index.js

@@ -5942,7 +5942,23 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
-    countText: theme.colors.onDarkGlobalSurface
+    countText: theme.colors.onDarkGlobalSurface,
+    stringBackground: {
+      primary: theme.colors.highlightedSurface,
+      danger: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      archived: theme.colors.archivedSurface
+    },
+    stringText: {
+      primary: theme.colors.primary,
+      danger: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      archived: theme.colors.onArchivedSurface
+    }
   };
   var fonts = {
     medium: theme.fonts.neutral.regular,
@@ -7278,7 +7294,7 @@ var getTagTheme = function getTagTheme(theme) {
     verticalPadding: theme.space.xsmall
   };
   var radii = {
-    "default": theme.radii.base
+    "default": theme.radii.large
   };
   return {
     borderWidths: borderWidths,
@@ -16242,27 +16258,31 @@ var StyledView$1 = index$c(reactNative.Animated.View)(function (_ref) {
     themePadding = _ref.themePadding,
     themeSize = _ref.themeSize,
     themeVariant = _ref.themeVariant,
+    themeIsStringBadge = _ref.themeIsStringBadge,
     theme = _ref.theme;
+  var backgroundColor = themeIsStringBadge ? theme.__hd__.badge.colors.stringBackground[themeIntent] : theme.__hd__.badge.colors[themeIntent];
   return {
     height: theme.__hd__.badge.sizes[themeSize].height,
     minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: theme.__hd__.badge.colors[themeIntent],
+    backgroundColor: backgroundColor,
     borderRadius: theme.radii.rounded,
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined,
     borderWidth: theme.__hd__.badge.borderWidths["default"],
-    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
+    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : backgroundColor
   };
 });
 var StyledText$2 = index$c(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
-    themeSize = _ref2.themeSize;
+    themeSize = _ref2.themeSize,
+    themeIntent = _ref2.themeIntent,
+    themeIsStringBadge = _ref2.themeIsStringBadge;
   return {
     fontSize: theme.__hd__.badge.fontSizes[themeSize],
     lineHeight: theme.__hd__.badge.lineHeights[themeSize],
     fontFamily: theme.__hd__.badge.fonts[themeSize],
-    color: theme.__hd__.badge.colors.text,
+    color: themeIsStringBadge ? theme.__hd__.badge.colors.stringText[themeIntent] : theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
@@ -16420,6 +16440,7 @@ var Badge = function Badge(_ref) {
     }).start();
   }, [visible, opacity]);
   var isIconBadge = !!icon;
+  var isStringBadge = !isIconBadge && typeof originalContent === 'string';
   var content = React.useMemo(function () {
     if (isIconBadge) {
       return '';
@@ -16431,6 +16452,7 @@ var Badge = function Badge(_ref) {
     themePadding: getPaddingState(content),
     themeSize: size,
     themeVariant: variant,
+    themeIsStringBadge: isStringBadge,
     style: [{
       opacity: opacity,
       transform: [{
@@ -16446,7 +16468,9 @@ var Badge = function Badge(_ref) {
     themeSize: size,
     intent: "text-inverted"
   }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
-    themeSize: size
+    themeSize: size,
+    themeIntent: intent,
+    themeIsStringBadge: isStringBadge
   }, content));
 };
 var Badge$1 = Object.assign(Badge, {
@@ -16572,10 +16596,12 @@ var BottomNavigation = function BottomNavigation(_ref) {
   })), /*#__PURE__*/React__namespace.default.createElement(BottomBarWrapper, {
     themeInsets: insets
   }, /*#__PURE__*/React__namespace.default.createElement(BottomBar, null, tabs.map(function (tab) {
+    var _badge$count, _badge$testID;
     var key = tab.key,
       icon = tab.icon,
       title = tab.title,
-      testID = tab.testID;
+      testID = tab.testID,
+      badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
     return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
@@ -16584,11 +16610,16 @@ var BottomNavigation = function BottomNavigation(_ref) {
         return onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Status, {
+      content: (_badge$count = badge === null || badge === void 0 ? void 0 : badge.count) !== null && _badge$count !== void 0 ? _badge$count : 0,
+      visible: !!badge && badge.count > 0,
+      max: badge === null || badge === void 0 ? void 0 : badge.max,
+      testID: (_badge$testID = badge === null || badge === void 0 ? void 0 : badge.testID) !== null && _badge$testID !== void 0 ? _badge$testID : "bottom-nav-badge-".concat(key)
+    }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
+    })), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
       intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.119.0",
+    "@hero-design/rn": "8.120.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {