@hero-design/rn 8.123.0 → 8.124.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.124.0
+
+### Minor Changes
+
+- [#5023](https://github.com/Thinkei/hero-design/pull/5023) [`7d35f92916acd42649e79f2f276dff3cf94a5a03`](https://github.com/Thinkei/hero-design/commit/7d35f92916acd42649e79f2f276dff3cf94a5a03) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Tag] Support icon and rightIcon props
+
 ## 8.123.0
 
 ### Minor Changes

package/CLAUDE.md

@@ -0,0 +1,35 @@
+# @hero-design/rn
+
+React Native component library for Hero Design. Built with TypeScript and emotion (`@emotion/native`).
+
+## File Organization
+
+- Entry: `ComponentName/index.tsx` (exports main component, often compound)
+- Component: `ComponentName/ComponentName.tsx` (main implementation)
+- Styled: `ComponentName/StyledComponentName.tsx`
+- Sub-components: `ComponentName/SubComponentName/index.tsx`
+- Types: `ComponentName/types.ts` (if needed)
+- Tests: `ComponentName/__tests__/ComponentName.spec.tsx`
+
+## Conventions
+
+- Import `styled` from `@emotion/native`; use `useTheme()` hook (no prop drilling)
+- Styled props: `themeButtonVariant`, `themeIsPressed`, `themeIsCompact` pattern
+- Use `theme.__hd__.componentName.*` tokens (component-specific) over global tokens
+- JSDoc on each prop; include `testID?: string` for testing
+- Functional components; React Native primitives (`Text`, `View`, not HTML); strict TypeScript
+
+## Testing
+
+- Use `renderWithTheme()` from `'../../../testHelpers/renderWithTheme'` for theme context
+- Use `@testing-library/react-native` + `jest` + `@testing-library/jest-native`
+- Handle nested styles with `StyleSheet.flatten()` when needed
+
+## Commands
+
+```bash
+yarn turbo run test --filter=@hero-design/rn -- -- ComponentName [--watch|--updateSnapshot]
+yarn workspace @hero-design/rn lint
+yarn workspace @hero-design/rn type-check
+yarn build:watch:rn
+```

package/es/index.js

@@ -7187,7 +7187,8 @@ var getTagTheme = function getTagTheme(theme) {
   };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xsmall
+    verticalPadding: theme.space.xsmall,
+    iconGap: theme.space.xsmall
   };
   var radii = {
     "default": theme.radii.large
@@ -28546,7 +28547,10 @@ var StyledView = index$c(View)(function (_ref) {
     backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start'
   };
 });
 var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
@@ -28559,14 +28563,26 @@ var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
     textAlign: 'center'
   };
 });
+var StyledTagIcon = index$c(Icon)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themePosition = _ref3.themePosition,
+    theme = _ref3.theme;
+  return {
+    color: theme.__hd__.tag.colors[themeIntent],
+    marginRight: themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
+    marginLeft: themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined
+  };
+});
 
-var _excluded$9 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$9 = ["content", "icon", "variant", "intent", "rightIcon", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    icon = _ref.icon,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+    rightIcon = _ref.rightIcon,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$9);
@@ -28575,10 +28591,22 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
+  }), icon !== undefined && /*#__PURE__*/React__default.createElement(StyledTagIcon, {
+    icon: icon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "left",
+    testID: testID !== undefined ? "".concat(testID, "-left-icon") : undefined
   }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
-  }, content) : content);
+  }, content) : content, rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledTagIcon, {
+    icon: rightIcon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "right",
+    testID: testID !== undefined ? "".concat(testID, "-right-icon") : undefined
+  }));
 };
 
 var StyledPickerWrapper = index$c(View)(function (_ref) {

package/lib/index.js

@@ -7217,7 +7217,8 @@ var getTagTheme = function getTagTheme(theme) {
   };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xsmall
+    verticalPadding: theme.space.xsmall,
+    iconGap: theme.space.xsmall
   };
   var radii = {
     "default": theme.radii.large
@@ -28576,7 +28577,10 @@ var StyledView = index$c(reactNative.View)(function (_ref) {
     backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start'
   };
 });
 var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
@@ -28589,14 +28593,26 @@ var StyledText$1 = index$c(Typography.Caption)(function (_ref2) {
     textAlign: 'center'
   };
 });
+var StyledTagIcon = index$c(Icon)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themePosition = _ref3.themePosition,
+    theme = _ref3.theme;
+  return {
+    color: theme.__hd__.tag.colors[themeIntent],
+    marginRight: themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
+    marginLeft: themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined
+  };
+});
 
-var _excluded$9 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$9 = ["content", "icon", "variant", "intent", "rightIcon", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    icon = _ref.icon,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+    rightIcon = _ref.rightIcon,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$9);
@@ -28605,10 +28621,22 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
+  }), icon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledTagIcon, {
+    icon: icon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "left",
+    testID: testID !== undefined ? "".concat(testID, "-left-icon") : undefined
   }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
-  }, content) : content);
+  }, content) : content, rightIcon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledTagIcon, {
+    icon: rightIcon,
+    size: "xsmall",
+    themeIntent: intent,
+    themePosition: "right",
+    testID: testID !== undefined ? "".concat(testID, "-right-icon") : undefined
+  }));
 };
 
 var StyledPickerWrapper = index$c(reactNative.View)(function (_ref) {

package/package.json

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

package/src/components/Tag/StyledTag.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
 import Typography from '../Typography';
+import Icon from '../Icon';
 
 type ThemeIntent =
   | 'primary'
@@ -18,6 +19,9 @@ const StyledView = styled(View)<{
     borderRadius: theme.__hd__.tag.radii.default,
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
   };
 });
 
@@ -32,4 +36,15 @@ const StyledText = styled(Typography.Caption)<{
   };
 });
 
-export { StyledText, StyledView };
+const StyledTagIcon = styled(Icon)<{
+  themeIntent: ThemeIntent;
+  themePosition: 'left' | 'right';
+}>(({ themeIntent, themePosition, theme }) => ({
+  color: theme.__hd__.tag.colors[themeIntent],
+  marginRight:
+    themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
+  marginLeft:
+    themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined,
+}));
+
+export { StyledText, StyledView, StyledTagIcon };

package/src/components/Tag/index.tsx

@@ -1,18 +1,27 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { StyledText, StyledView } from './StyledTag';
+import { StyledText, StyledView, StyledTagIcon } from './StyledTag';
 import { useDeprecation } from '../../utils/hooks';
+import type { IconName } from '../Icon';
 
 interface TagProps extends ViewProps {
   /**
    * Content of the Tag.
    */
   content: string | ReactElement;
+  /**
+   * Places an icon within the tag, before the content.
+   */
+  icon?: IconName;
   /**
    * Visual intent color to apply to Tag.
    */
   intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+  /**
+   * Places an icon within the tag, after the content.
+   */
+  rightIcon?: IconName;
   /**
    * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
    *
@@ -31,8 +40,10 @@ interface TagProps extends ViewProps {
 
 const Tag = ({
   content,
+  icon,
   variant = 'outlined',
   intent = 'primary',
+  rightIcon,
   style,
   testID,
   ...nativeProps
@@ -49,6 +60,15 @@ const Tag = ({
       style={style}
       testID={testID}
     >
+      {icon !== undefined && (
+        <StyledTagIcon
+          icon={icon}
+          size="xsmall"
+          themeIntent={intent}
+          themePosition="left"
+          testID={testID !== undefined ? `${testID}-left-icon` : undefined}
+        />
+      )}
       {typeof content === 'string' ? (
         <StyledText themeIntent={intent} fontWeight="semi-bold">
           {content}
@@ -56,6 +76,15 @@ const Tag = ({
       ) : (
         content
       )}
+      {rightIcon !== undefined && (
+        <StyledTagIcon
+          icon={rightIcon}
+          size="xsmall"
+          themeIntent={intent}
+          themePosition="right"
+          testID={testID !== undefined ? `${testID}-right-icon` : undefined}
+        />
+      )}
     </StyledView>
   );
 };

package/src/theme/components/tag.ts

@@ -35,6 +35,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   const space = {
     horizontalPadding: theme.space.small,
     verticalPadding: theme.space.xsmall,
+    iconGap: theme.space.xsmall,
   };
 
   const radii = {

package/types/components/Tag/StyledTag.d.ts

@@ -14,4 +14,11 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("../.
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;
-export { StyledText, StyledView };
+declare const StyledTagIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeIntent: ThemeIntent;
+    themePosition: "left" | "right";
+}, {}, {}>;
+export { StyledText, StyledView, StyledTagIcon };

package/types/components/Tag/index.d.ts

@@ -1,14 +1,23 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 interface TagProps extends ViewProps {
     /**
      * Content of the Tag.
      */
     content: string | ReactElement;
+    /**
+     * Places an icon within the tag, before the content.
+     */
+    icon?: IconName;
     /**
      * Visual intent color to apply to Tag.
      */
     intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    /**
+     * Places an icon within the tag, after the content.
+     */
+    rightIcon?: IconName;
     /**
      * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
      *
@@ -24,5 +33,5 @@ interface TagProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Tag: ({ content, variant, intent, style, testID, ...nativeProps }: TagProps) => ReactElement;
+declare const Tag: ({ content, icon, variant, intent, rightIcon, style, testID, ...nativeProps }: TagProps) => ReactElement;
 export default Tag;

package/types/theme/components/tag.d.ts

@@ -27,6 +27,7 @@ declare const getTagTheme: (theme: GlobalTheme) => {
     space: {
         horizontalPadding: number;
         verticalPadding: number;
+        iconGap: number;
     };
     radii: {
         default: number;