@zohodesk/components 1.5.3 → 1.5.4

package/README.md

@@ -2,6 +2,11 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.5.4
+
+- **Tag**
+  - Added support for rendering left & right custom children using `renderLeftChildren`,`renderRightChildren` prop.
+
 # 1.5.3
 
 - **CheckBox, Radio**

package/es/Tag/Tag.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { renderNode } from '@zohodesk/utils';
 import { Icon } from '@zohodesk/icons';
 import Avatar from "../Avatar/Avatar";
 import { Container } from "../Layout";
@@ -84,6 +85,8 @@ export default class Tag extends PureComponent {
       a11y,
       needEffect,
       isReadOnly,
+      renderLeftChildren,
+      renderRightChildren,
       customProps
     } = this.props;
     const {
@@ -113,7 +116,7 @@ export default class Tag extends PureComponent {
       "aria-labelledby": getAriaId,
       "data-selector-id": dataSelectorId,
       ...customAttributes
-    }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
+    }, renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
       className: style.avatar
     }, /*#__PURE__*/React.createElement(Avatar, {
       palette: isDarkPalette ? 'info' : avatarPalette,
@@ -150,7 +153,7 @@ export default class Tag extends PureComponent {
       isBold: true,
       name: "ZD-close2",
       size: "8"
-    }))));
+    }))), renderNode(renderRightChildren));
   }
 
 }

package/es/Tag/props/propTypes.js

@@ -35,6 +35,8 @@ export const propTypes = {
   needEffect: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   dataSelectorId: PropTypes.string,
+  renderLeftChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderRightChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarPropTypes),
     iconProps: PropTypes.exact(IconPropTypes)

package/lib/Tag/Tag.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("@zohodesk/utils");
+
 var _icons = require("@zohodesk/icons");
 
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
@@ -141,6 +143,8 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           a11y = _this$props4.a11y,
           needEffect = _this$props4.needEffect,
           isReadOnly = _this$props4.isReadOnly,
+          renderLeftChildren = _this$props4.renderLeftChildren,
+          renderRightChildren = _this$props4.renderRightChildren,
           customProps = _this$props4.customProps;
       var _customProps$avatarPr = customProps.avatarProps,
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr,
@@ -169,7 +173,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         tabIndex: disabled ? '-1' : '0',
         "aria-labelledby": getAriaId,
         "data-selector-id": dataSelectorId
-      }, customAttributes), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, customAttributes), (0, _utils.renderNode)(renderLeftChildren), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _TagModule["default"].avatar
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         palette: isDarkPalette ? 'info' : avatarPalette,
@@ -202,7 +206,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         isBold: true,
         name: "ZD-close2",
         size: "8"
-      }))));
+      }))), (0, _utils.renderNode)(renderRightChildren));
     }
   }]);
 

package/lib/Tag/props/propTypes.js

@@ -47,6 +47,8 @@ var propTypes = {
   needEffect: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
+  renderLeftChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderRightChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   customProps: _propTypes["default"].shape({
     avatarProps: _propTypes["default"].exact(_propTypes2.propTypes),
     iconProps: _propTypes["default"].exact(_propTypes3.IconProps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,