@zohodesk/dot 1.0.0-temp-120 → 1.0.0-temp-121

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.247
+
+- **ActionButton** - arrowBoxDataId prop removed .
+- dataSelectorId prop added for all components
+
 # 1.0.0-beta.246
 
 - **AvatarWithTeam** - css variable changed due to the duplicate override issue

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
 	/* action button */
-	--zdt_actionButton_primaryFilled_bg: var(--zdt_m_cta_primary_bg_bg);
-	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_m_cta_primary_hover_bg_bg);
+	--zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
+	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
 	--zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
 	--zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);

package/assets/Appearance/default/mode/dotDefaultMode.module.css

@@ -1,7 +1,7 @@
 [data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
 	/* action button */
-	--zdt_actionButton_primaryFilled_bg: var(--zdt_m_cta_primary_bg_bg);
-	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_m_cta_primary_hover_bg_bg);
+	--zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
+	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
 	--zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
 	--zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'], :global(.bluePureDarkTheme) [data-desk-theme="blue"] {
 	/* action button */
-	--zdt_actionButton_primaryFilled_bg: var(--zdt_m_cta_primary_bg_bg);
-	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_m_cta_primary_hover_bg_bg);
+	--zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
+	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
 	--zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
 	--zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);

package/es/ActionButton/ActionButton.js

@@ -27,10 +27,10 @@ export class ActionButton extends React.Component {
       onClick,
       size,
       dataId,
+      dataSelectorId,
       isArrow,
       text,
       subText,
-      arrowBoxDataId,
       arrowBoxSize,
       palette,
       onHover,
@@ -58,7 +58,8 @@ export class ActionButton extends React.Component {
       onClick: onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined,
       onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
-      eleRef: getTargetRef
+      eleRef: getTargetRef,
+      dataSelectorId: dataSelectorId
     }, isLoading ? /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Button, {
@@ -101,9 +102,10 @@ export class ActionButton extends React.Component {
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
       className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: arrowBoxDataId,
+      dataId: `${dataId}_arrowButton`,
       tabIndex: "0",
-      tagName: "button"
+      tagName: "button",
+      dataSelectorId: `${dataSelectorId}_arrowButton`
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/ActionButton/props/defaultProps.js

@@ -1,8 +1,8 @@
 export const defaultProps = {
   size: 'medium',
   isArrow: false,
-  arrowBoxDataId: 'arrowBox',
   dataId: 'actionButton',
+  dataSelectorId: 'actionButton',
   onHover: false,
   className: '',
   iconName: '',

package/es/ActionButton/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  arrowBoxDataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
   children: PropTypes.node,
   className: PropTypes.string,

package/es/AlphabeticList/AlphabeticList.js

@@ -31,7 +31,8 @@ export default class AlphabeticList extends React.PureComponent {
       align,
       type,
       i18nKeys,
-      dataId
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       allText = 'All',
@@ -44,7 +45,8 @@ export default class AlphabeticList extends React.PureComponent {
       isCover: false,
       alignBox: align === 'vertical' ? 'column' : 'row',
       className: `${style.container} ${alignType} ${type != 'alphabetical' ? style.numbers : ''}`,
-      dataId: "navigationDiv"
+      dataId: "navigationDiv",
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
       tagName: "li",
       className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,

package/es/AlphabeticList/props/defaultProps.js

@@ -2,7 +2,8 @@ export const AlphabeticList_defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
   i18nKeys: {},
-  dataId: 'Navi'
+  dataId: 'Navi',
+  dataSelectorId: 'alphabeticList'
 };
 export const AlphabeticListItem_defaultProps = {
   isActive: false,

package/es/AlphabeticList/props/propTypes.js

@@ -11,7 +11,8 @@ export const AlphabeticList_propTypes = {
     allTitle: PropTypes.string,
     allText: PropTypes.string
   }),
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };
 export const AlphabeticListItem_propTypes = {
   id: PropTypes.string,

package/es/Attachment/Attachment.js

@@ -18,7 +18,8 @@ export default class Attachment extends React.Component {
       palette,
       tooltip,
       fileInfo,
-      i18nKeys
+      i18nKeys,
+      dataSelectorId
     } = this.props;
     let {
       downloadTitle = 'Download'
@@ -30,7 +31,8 @@ export default class Attachment extends React.Component {
       dataId: dataId,
       "data-title": tooltip,
       alignBox: "row",
-      isCover: false
+      isCover: false,
+      dataSelectorId: dataSelectorId
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.attachleft
     }, /*#__PURE__*/React.createElement(Container, {

package/es/Attachment/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   size: 'medium',
   palette: 'default',
   dataId: 'attachment',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'attachment'
 };

package/es/Attachment/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   downloadLink: PropTypes.string,
   fileInfo: PropTypes.string,
   fileName: PropTypes.string,

package/es/ChannelIcon/ChannelIcon.js

@@ -32,7 +32,8 @@ export default class ChannelIcon extends Component {
       topicClass,
       renderIconOnly,
       iconName,
-      title
+      title,
+      dataSelectorId
     } = this.props;
     let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
     let customizedChannelName = null;
@@ -42,7 +43,8 @@ export default class ChannelIcon extends Component {
       iconName = defaultChannelObj[action];
     }
     return /*#__PURE__*/React.createElement("span", {
-      className: style.container
+      className: style.container,
+      "data-selector-id": dataSelectorId
     }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
       name: customizedChannelName,
       size: size,

package/es/ChannelIcon/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   iconSize: '21',
   name: 'phone',
   needTopicBorder: true,
-  renderIconOnly: false
+  renderIconOnly: false,
+  dataSelectorId: 'channelIcon'
 };

package/es/ChannelIcon/props/propTypes.js

@@ -20,5 +20,6 @@ export const propTypes = {
   topicIcon: PropTypes.string,
   topicIconColor: PropTypes.string,
   topicIconSize: PropTypes.string,
-  topicIconTitle: PropTypes.string
+  topicIconTitle: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/FormAction/FormAction.js

@@ -18,7 +18,8 @@ export default class FormAction extends React.Component {
       size,
       children,
       paddingLeftSize,
-      paddingRightClass
+      paddingRightClass,
+      dataSelectorId
     } = this.props;
     let leftbuttonGroup = [],
       rightbuttonGroup = [],
@@ -40,7 +41,8 @@ export default class FormAction extends React.Component {
     let hasRightChild = rightbuttonGroup.length > 0;
     let hasCenterChild = centerbuttonGroup.length > 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.wrapperDiv
+      className: style.wrapperDiv,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,

package/es/FormAction/props/defaultProps.js

@@ -1,4 +1,5 @@
 export const defaultProps = {
   size: 'medium',
-  paddingRightClass: ''
+  paddingRightClass: '',
+  dataSelectorId: 'formAction'
 };

package/es/FormAction/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   children: PropTypes.node,
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small'])
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  dataSelectorId: PropTypes.string
 };

package/es/IconButton/IconButton.js

@@ -69,6 +69,7 @@ export default class IconButton extends React.Component {
       className,
       iconClass,
       dataId,
+      dataSelectorId,
       eleRef,
       isActive,
       tourId,
@@ -112,6 +113,7 @@ export default class IconButton extends React.Component {
       isCover: false,
       className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
       dataId: dataId,
+      dataSelectorId: dataSelectorId,
       onClick: this.triggerClick,
       "data-title": title,
       "data-ishtml": dataIsHtml,

package/es/IconButton/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   needButtonTag: true,
   a11y: {},
   dataIsHtml: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'iconButton'
 };

package/es/IconButton/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
   iconClass: PropTypes.string,

package/es/Message/Message.js

@@ -62,14 +62,16 @@ export function MessageUI(props) {
     type,
     message,
     onClick,
-    i18nKeys
+    i18nKeys,
+    dataSelectorId
   } = props;
   let {
     closeTitle = 'Close'
   } = i18nKeys;
   return /*#__PURE__*/React.createElement("div", {
     className: style.message,
-    "data-id": `show_${type}_message`
+    "data-id": `show_${type}_message`,
+    "data-selector-id": dataSelectorId
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container
   }, /*#__PURE__*/React.createElement("div", {

package/es/Message/props/defaultProps.js

@@ -1,3 +1,4 @@
 export const defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'message'
 };

package/es/Message/props/propTypes.js

@@ -5,6 +5,7 @@ export const propTypes = {
   message: PropTypes.string,
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
   type: PropTypes.oneOf(['success', 'alert', 'info']),
   i18nKeys: PropTypes.shape({
     closeTitle: PropTypes.string

package/es/MessageBanner/MessageBanner.js

@@ -16,13 +16,15 @@ export default class MessageBanner extends React.Component {
       urlText,
       palette,
       customClass,
-      dataId
+      dataId,
+      dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
       alignBox: "row",
       isCover: false,
-      dataId: dataId
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.content,
       flexible: true

package/es/MessageBanner/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   type: 'primary',
   palette: 'default',
   customClass: '',
-  dataId: 'MessageBanner'
+  dataId: 'MessageBanner',
+  dataSelectorId: 'messageBanner'
 };

package/es/MessageBanner/props/propTypes.js

@@ -8,5 +8,6 @@ export const propTypes = {
   palette: PropTypes.oneOf(['default', 'blue', 'white']),
   type: PropTypes.oneOf(['primary', 'secondary']),
   urlText: PropTypes.string,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/ToastMessage/ToastMessage.js

@@ -39,6 +39,7 @@ function ToastMessageUI(props) {
     onSubmit,
     onCancel,
     dataId,
+    dataSelectorId,
     isClose,
     onClose,
     needAutoZindex,
@@ -86,7 +87,8 @@ function ToastMessageUI(props) {
     "aria-live": ariaLive,
     "aria-atomic": ariaAtomic,
     "aria-describedby": ariaDescribedby,
-    "aria-labelledby": ariaLabelledby
+    "aria-labelledby": ariaLabelledby,
+    dataSelectorId: dataSelectorId
   }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
     className: style.alertifychild,
     flexible: true

package/es/ToastMessage/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   hideTime: '3000',
   dataId: 'toastMessage',
   needAutoZindex: true,
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'toastMessage'
 };

package/es/ToastMessage/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   autoClose: PropTypes.bool,
   cancelText: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   getBottomContainer: PropTypes.func,
   getInnerBottomContainer: PropTypes.func,
   getLeftContainer: PropTypes.func,

package/es/Upload/Upload.js

@@ -11,6 +11,7 @@ export default class Upload extends React.Component {
       isPreview,
       tooltip,
       dataId,
+      dataSelectorId,
       progressValue,
       onClick,
       iconName,
@@ -29,7 +30,8 @@ export default class Upload extends React.Component {
       dataId: dataId,
       "data-title": tooltip,
       isCover: false,
-      eleRef: getRef
+      eleRef: getRef,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_attachLoading`,
       className: style.loader,

package/es/Upload/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'upload',
   isPreview: false,
-  palette: 'light'
+  palette: 'light',
+  dataSelectorId: 'upload'
 };

package/es/Upload/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   fileSize: PropTypes.string,
   getRef: PropTypes.func,
   iconName: PropTypes.string,

package/es/avatar/AvatarClose/AvatarClose.js

@@ -17,14 +17,16 @@ export default class AvatarClose extends React.Component {
       size,
       isClose,
       onClick,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       AvatarCloseProps = {},
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: style.container
+      className: style.container,
+      "data-selector-id": dataSelectorId
     }, AvatarCloseProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       src: src,
       name: name,

package/es/avatar/AvatarClose/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   isClose: false,
   size: 'medium',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarClose'
 };

package/es/avatar/AvatarClose/props/propTypes.js

@@ -9,5 +9,6 @@ export const propTypes = {
   customProps: PropTypes.shape({
     AvatarCloseProps: PropTypes.object,
     AvatarProps: PropTypes.object
-  })
+  }),
+  dataSelectorId: PropTypes.string
 };

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -20,7 +20,8 @@ export default class AvatarCollision extends React.Component {
       isLeft,
       isIdle,
       initial,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       AvatarCollisionProps = {},
@@ -30,7 +31,8 @@ export default class AvatarCollision extends React.Component {
       className: `${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`,
       onClick: onClick,
       "data-id": "collsionPop",
-      "data-title": title
+      "data-title": title,
+      "data-selector-id": dataSelectorId
     }, AvatarCollisionProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       src: src,
       name: name,

package/es/avatar/AvatarCollision/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   isLeft: false,
   isIdle: false,
   size: 'xmedium',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarCollision'
 };

package/es/avatar/AvatarCollision/props/propTypes.js

@@ -9,6 +9,7 @@ export const propTypes = {
   size: PropTypes.string,
   src: PropTypes.string,
   title: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   customProps: PropTypes.shape({
     AvatarCollisionProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -22,7 +22,8 @@ export default class AvatarIcon extends React.Component {
       title,
       borderOnActive,
       borderOnHover,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       AvatarIconProps = {}
@@ -35,7 +36,8 @@ export default class AvatarIcon extends React.Component {
       "data-title": title,
       isInline: true,
       align: "both",
-      isCover: false
+      isCover: false,
+      dataSelectorId: dataSelectorId
     }, AvatarIconProps), /*#__PURE__*/React.createElement(Icon, {
       name: name,
       size: iconSize,

package/es/avatar/AvatarIcon/props/defaultProps.js

@@ -9,5 +9,6 @@ export const defaultProps = {
   iconColor: 'default',
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarIcon'
 };

package/es/avatar/AvatarIcon/props/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   iconClass: PropTypes.string,
   iconColor: PropTypes.oneOf(['default', 'primary', 'success', 'danger', 'smoke18', 'grey', 'dark']),
   iconSize: PropTypes.string,

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -26,7 +26,8 @@ export default class AvatarStatus extends React.Component {
       textPalette,
       customTextClass,
       statusTitle,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       AvatarStatusProps = {},
@@ -36,7 +37,8 @@ export default class AvatarStatus extends React.Component {
       className: `${style.container} ${className} `
     }, AvatarStatusProps, {
       tabIndex: "0",
-      "aria-label": `${title}, ${name}, ${statusTitle}`
+      "aria-label": `${title}, ${name}, ${statusTitle}`,
+      "data-selector-id": dataSelectorId
     }), /*#__PURE__*/React.createElement(Avatar, _extends({
       src: src,
       name: name,

package/es/avatar/AvatarStatus/props/defaultProps.js

@@ -5,5 +5,6 @@ export const defaultProps = {
   className: '',
   palette: 'info',
   statusTitle: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarStatus'
 };

package/es/avatar/AvatarStatus/props/propTypes.js

@@ -16,6 +16,7 @@ export const propTypes = {
   statusTitle: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   customProps: PropTypes.shape({
     AvatarStatusProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/avatar/AvatarThread/AvatarThread.js

@@ -30,7 +30,8 @@ export default class AvatarThread extends React.Component {
       needTitle,
       customProps,
       iconClass,
-      getCustomThread
+      getCustomThread,
+      dataSelectorId
     } = this.props;
     let {
       AvatarThreadProps = {},
@@ -38,7 +39,8 @@ export default class AvatarThread extends React.Component {
     } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`
+      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
+      "data-selector-id": dataSelectorId
     }, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       initial: initial,
       src: src,

package/es/avatar/AvatarThread/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   borderPalette: 'default',
   needBorder: true,
   needBackground: true,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarThread'
 };

package/es/avatar/AvatarThread/props/propTypes.js

@@ -17,6 +17,7 @@ export const propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   showOnHover: PropTypes.bool,
   size: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,