@zohodesk/dot 1.0.0-temp-137 → 1.0.0-temp.139

package/README.md

@@ -2,6 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.252
+
+- **ToggleDropdown**  - customClass (customDropBox and customListBox) Support added.
+
+- **StatusDropdown** - align item value changed (center => baseline) and Line-height changed(18px => 20px)
+
 # 1.0.0-beta.251
 
 - **ToggleDropdown, StatusDropdown, StatusListItem**  - Added New Prop `needMultiLineText`

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

@@ -538,4 +538,70 @@
 	--zdt_separator_default_text: var(--dot_riverbed);
 	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
 	--zdt_separator_secondary_text: var(--dot_platinum);
+	
+	/* webpage selection color */
+	--zdt_selection_bg: var(--zdt_cta_primary_bg);
+	--zdt_selection_text: var(--zdt_cta_secondary_text);
+	
+	/* webpage selection color */
+	--zdt_inverted_selection_text: var(--dot_black);
+	
+	/* comment list */
+	--zdt_commentList_public_bg: #273447;
+	--zdt_commentList_public_border: #2c4463;
+	--zdt_commentList_private_bg: #323439;
+	--zdt_commentList_private_border: #463f32;
+	--zdt_commentList_normal_bg: var(--dot_ebonyclay);
+	--zdt_commentList_publicIcon_border: var(--dot_butterflyblue);
+	--zdt_commentList_publicIcon_bg: #433c32;
+	--zdt_commentList_privateIcon_border: var(--dot_brightOrange);
+	--zdt_commentList_privateIcon_bg: #313d54;
+	--zdt_commentList_edit_hover_text: var(--zdt_cta_primary_text);
+	--zdt_commentBox_publicIcon_bg: var(--dot_white);
+	--zdt_commentBox_publicIcon_night_bg: var(--dot_ebonyclay);
+	
+	/* Conversation */
+	--zdt_conversationList_border: var(--zdt_cta_grey_15_border);
+	--zdt_conversationList_secondaryText: var(--dot_cadetblue);
+	--zdt_conversationList_attachCount_text: var(--dot_oslogrey);
+	--zdt_conversationList_time_text: var(--dot_cadetblue);
+	--zdt_conversationList_agentName_text: var(--dot_platinum);
+	--zdt_conversationList_thread_text: var(--dot_black);
+	--zdt_conversationList_agent_text: var(--zdt_cta_primary_text);
+	--zdt_conversationList_agent_hover_text: var(--zdt_cta_primary_hover_text);
+	
+	/* tag with icon */
+	--zdt_tagWithIconGrey_bg: rgba(255, 255, 255, 0.03);
+	--zdt_tagWithIconGrey_border: rgba(255, 255, 255, 0.2);
+	--zdt_tagWithIconGrey_text: var(--dot_platinum);
+	--zdt_tagWithIconBlue_bg: #253142;
+	--zdt_tagWithIconBlue_border: #2d4869;
+	--zdt_tagWithIconBlue_text: var(--dot_butterflyblue);
+	--zdt_tagWithIconYellow_bg: #2d3239;
+	--zdt_tagWithIconYellow_border: #574c3d;
+	--zdt_tagWithIconYellow_text: var(--dot_brightOrange);
+	
+	/* dv threads */
+	--zdt_thread_bg: var(--dot_ebonyclay);
+	--zdt_threadList_Draft_text: var(--dot_bittersweet);
+	--zdt_threadList_BestAns_text: var(--dot_darkmint);
+	--zdt_threadList_secondaryText: var(--dot_oslogrey);
+	--zdt_threadList_secondaryText_hover: var(--dot_platinum);
+	--zdt_threadList_expand_icon: var(--zdt_cta_grey_40_text);
+	--zdt_threadList_expand_icon_active: var(--dot_platinum);
+	--zdt_threadList_recipient_border: var(--zdt_cta_grey_35_border);
+	--zdt_threadList_recipient_border_hover: var(--dot_oslogrey);
+	--zdt_threadList_link_text: var(--zdt_cta_primary_text);
+	--zdt_threadlistitem_feedbackicon_text: var(--dot_platinum);
+	--zdt_threadattachments_text: var(--dot_platinum);
+	
+	/* read receipts */
+	--zdt_readReceipts_statusIcon_blue: var(--zdt_cta_primary_text);
+	--zdt_readReceipts_statusIcon_green: #4ac064;
+	--zdt_readReceipts_statusIcon_red: #ff6b6b;
+	--zdt_readReceipts_statusIcon_grey: #a8b0bd;
+	--zdt_readReceipts_statusIcon_grey_bg: #2d3748;
+	--zdt_readReceipts_statusIcon_green_bg: #2d4e42;
+	--zdt_readReceipts_statusIcon_blue_bg: #3f536b;
+	--zdt_readReceipts_statusIcon_red_bg: #4b323d;
 }

package/assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: var(--dot_tuna);
 	--zdt_attachmentviewer_footer_bg: #1b212b;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(27 33 43 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: #39414e;
+	--zdt_twotoneIcon_primary_border: var(--dot_cadetblue);
 }

package/assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: var(--dot_tuna);
 	--zdt_attachmentviewer_footer_bg: #1b212b;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(27 33 43 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: #39414e;
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: var(--dot_tuna);
 	--zdt_attachmentviewer_footer_bg: #1b212b;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(27 33 43 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: #39414e;
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/dark/themes/red/redDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: var(--dot_tuna);
 	--zdt_attachmentviewer_footer_bg: #1b212b;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(27 33 43 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: #39414e;
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: var(--dot_tuna);
 	--zdt_attachmentviewer_footer_bg: #1b212b;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(27 33 43 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: #39414e;
+	--zdt_twotoneIcon_primary_border: undefined;
 }

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

@@ -538,4 +538,70 @@
 	--zdt_separator_default_text: var(--zd_smoke12);
 	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
 	--zdt_separator_secondary_text: var(--dot_black);
+	
+	/* webpage selection color */
+	--zdt_selection_bg: var(--zdt_cta_primary_bg);
+	--zdt_selection_text: var(--zdt_cta_secondary_text);
+	
+	/* webpage selection color */
+	--zdt_inverted_selection_text: var(--zdt_cta_secondary_text);
+	
+	/* comment list */
+	--zdt_commentList_public_bg: #edf4fd;
+	--zdt_commentList_public_border: #bdd9f9;
+	--zdt_commentList_private_bg: #fefcf3;
+	--zdt_commentList_private_border: #f8eaae;
+	--zdt_commentList_normal_bg: var(--dot_white);
+	--zdt_commentList_publicIcon_border: var(--dot_primary);
+	--zdt_commentList_publicIcon_bg: var(--dot_white);
+	--zdt_commentList_privateIcon_border: var(--dot_brightOrange);
+	--zdt_commentList_privateIcon_bg: var(--dot_white);
+	--zdt_commentList_edit_hover_text: var(--zdt_cta_primary_text);
+	--zdt_commentBox_publicIcon_bg: var(--dot_white);
+	--zdt_commentBox_publicIcon_night_bg: var(--dot_white);
+	
+	/* Conversation */
+	--zdt_conversationList_border: var(--zdt_cta_grey_15_border);
+	--zdt_conversationList_secondaryText: var(--dot_shuttleGrey);
+	--zdt_conversationList_attachCount_text: var(--dot_slateGrey);
+	--zdt_conversationList_time_text: var(--dot_shuttleGrey);
+	--zdt_conversationList_agentName_text: var(--dot_black);
+	--zdt_conversationList_thread_text: var(--dot_black);
+	--zdt_conversationList_agent_text: var(--zdt_cta_primary_text);
+	--zdt_conversationList_agent_hover_text: var(--zdt_cta_primary_hover_text);
+	
+	/* tag with icon */
+	--zdt_tagWithIconGrey_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_tagWithIconGrey_border: var(--zdt_cta_grey_35_border);
+	--zdt_tagWithIconGrey_text: var(--dot_black);
+	--zdt_tagWithIconBlue_bg: #e7f1fd;
+	--zdt_tagWithIconBlue_border: #bdd9f9;
+	--zdt_tagWithIconBlue_text: var(--dot_primary);
+	--zdt_tagWithIconYellow_bg: #fefae8;
+	--zdt_tagWithIconYellow_border: #f8eaae;
+	--zdt_tagWithIconYellow_text: #f6a459;
+	
+	/* dv threads */
+	--zdt_thread_bg: var(--dot_white);
+	--zdt_threadList_Draft_text: var(--dot_brightRed);
+	--zdt_threadList_BestAns_text: var(--dot_strongGreen);
+	--zdt_threadList_secondaryText: var(--dot_slateGrey);
+	--zdt_threadList_secondaryText_hover: var(--dot_black);
+	--zdt_threadList_expand_icon: var(--zdt_cta_grey_40_text);
+	--zdt_threadList_expand_icon_active: var(--dot_black);
+	--zdt_threadList_recipient_border: var(--zdt_cta_grey_35_border);
+	--zdt_threadList_recipient_border_hover: var(--dot_slateGrey);
+	--zdt_threadList_link_text: var(--zdt_cta_primary_text);
+	--zdt_threadlistitem_feedbackicon_text: #010101;
+	--zdt_threadattachments_text: var(--dot_black);
+	
+	/* read receipts */
+	--zdt_readReceipts_statusIcon_blue: var(--zdt_cta_primary_text);
+	--zdt_readReceipts_statusIcon_green: var(--dot_strongGreen);
+	--zdt_readReceipts_statusIcon_red: var(--dot_brightRed);
+	--zdt_readReceipts_statusIcon_grey: var(--dot_shuttleGrey);
+	--zdt_readReceipts_statusIcon_grey_bg: var(--dot_solitude);
+	--zdt_readReceipts_statusIcon_green_bg: #d4eed9;
+	--zdt_readReceipts_statusIcon_blue_bg: #e7f1fd;
+	--zdt_readReceipts_statusIcon_red_bg: var(--dot_paleRed);
 }

package/assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #42485f;
 	--zdt_attachmentviewer_footer_bg: #2c334d;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(44 51 77 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(200, 203, 220, 0.5);
+	--zdt_twotoneIcon_primary_border: var(--dot_black);
 }

package/assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #1a3439;
 	--zdt_attachmentviewer_footer_bg: #0f2226;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(15 34 38 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(197, 205, 199, 0.5);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #2e2b11;
 	--zdt_attachmentviewer_footer_bg: #241e13;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(36 30 19 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(204, 201, 199, 0.5);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #321f22;
 	--zdt_attachmentviewer_footer_bg: #220f1b;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(34 15 27 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(204, 199, 201, 0.5);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: rgba(255, 255, 255, 0.08);
 	--zdt_attachmentviewer_footer_bg: #222412;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(34 36 18 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(204, 203, 199, 0.5);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

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

@@ -538,4 +538,70 @@
 	--zdt_separator_default_text: #585858;
 	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
 	--zdt_separator_secondary_text: var(--dot_platinum);
+	
+	/* webpage selection color */
+	--zdt_selection_bg: var(--zdt_cta_primary_bg);
+	--zdt_selection_text: var(--zdt_cta_secondary_text);
+	
+	/* webpage selection color */
+	--zdt_inverted_selection_text: var(--dot_black);
+	
+	/* comment list */
+	--zdt_commentList_public_bg: #23282f;
+	--zdt_commentList_public_border: #2b3846;
+	--zdt_commentList_private_bg: #2a2722;
+	--zdt_commentList_private_border: #3e362a;
+	--zdt_commentList_normal_bg: #212121;
+	--zdt_commentList_publicIcon_border: var(--dot_butterflyblue);
+	--zdt_commentList_publicIcon_bg: #212121;
+	--zdt_commentList_privateIcon_border: var(--dot_brightOrange);
+	--zdt_commentList_privateIcon_bg: #212121;
+	--zdt_commentList_edit_hover_text: var(--zdt_cta_primary_text);
+	--zdt_commentBox_publicIcon_bg: var(--dot_white);
+	--zdt_commentBox_publicIcon_night_bg: #212121;
+	
+	/* Conversation */
+	--zdt_conversationList_border: #2e2e2e;
+	--zdt_conversationList_secondaryText: #999;
+	--zdt_conversationList_attachCount_text: var(--dot_oslogrey);
+	--zdt_conversationList_time_text: #999;
+	--zdt_conversationList_agentName_text: var(--dot_platinum);
+	--zdt_conversationList_thread_text: var(--dot_black);
+	--zdt_conversationList_agent_text: var(--zdt_cta_primary_text);
+	--zdt_conversationList_agent_hover_text: var(--zdt_cta_primary_hover_text);
+	
+	/* tag with icon */
+	--zdt_tagWithIconGrey_bg: rgba(255, 255, 255, 0.03);
+	--zdt_tagWithIconGrey_border: rgba(255, 255, 255, 0.2);
+	--zdt_tagWithIconGrey_text: var(--dot_platinum);
+	--zdt_tagWithIconBlue_bg: #253142;
+	--zdt_tagWithIconBlue_border: #2d4869;
+	--zdt_tagWithIconBlue_text: var(--dot_butterflyblue);
+	--zdt_tagWithIconYellow_bg: rgba(245, 176, 65, 0.05);
+	--zdt_tagWithIconYellow_border: #574c3d;
+	--zdt_tagWithIconYellow_text: var(--dot_brightOrange);
+	
+	/* dv threads */
+	--zdt_thread_bg: #212121;
+	--zdt_threadList_Draft_text: var(--dot_bittersweet);
+	--zdt_threadList_BestAns_text: var(--dot_darkmint);
+	--zdt_threadList_secondaryText: var(--dot_oslogrey);
+	--zdt_threadList_secondaryText_hover: var(--dot_platinum);
+	--zdt_threadList_expand_icon: var(--zdt_cta_grey_40_text);
+	--zdt_threadList_expand_icon_active: var(--dot_platinum);
+	--zdt_threadList_recipient_border: var(--zdt_cta_grey_35_border);
+	--zdt_threadList_recipient_border_hover: var(--dot_oslogrey);
+	--zdt_threadList_link_text: var(--zdt_cta_primary_text);
+	--zdt_threadlistitem_feedbackicon_text: var(--dot_platinum);
+	--zdt_threadattachments_text: var(--dot_platinum);
+	
+	/* read receipts */
+	--zdt_readReceipts_statusIcon_blue: var(--zdt_cta_primary_text);
+	--zdt_readReceipts_statusIcon_green: #4ac064;
+	--zdt_readReceipts_statusIcon_red: #ff6b6b;
+	--zdt_readReceipts_statusIcon_grey: #a8b0bd;
+	--zdt_readReceipts_statusIcon_grey_bg: #2d3748;
+	--zdt_readReceipts_statusIcon_green_bg: #2d4e42;
+	--zdt_readReceipts_statusIcon_blue_bg: #3f536b;
+	--zdt_readReceipts_statusIcon_red_bg: #4b323d;
 }

package/assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #222;
 	--zdt_attachmentviewer_footer_bg: #171717;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(255, 255, 255, 0.08);
+	--zdt_twotoneIcon_primary_border: #999;
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #222;
 	--zdt_attachmentviewer_footer_bg: #171717;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(255, 255, 255, 0.08);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #222;
 	--zdt_attachmentviewer_footer_bg: #171717;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(255, 255, 255, 0.08);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #222;
 	--zdt_attachmentviewer_footer_bg: #171717;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(255, 255, 255, 0.08);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css

@@ -13,4 +13,8 @@
 	--zdt_attachmentviewer_header_border: #222;
 	--zdt_attachmentviewer_footer_bg: #171717;
 	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	
+	/* twotone icon */
+	--zdt_twotoneIcon_primary_bg: rgba(255, 255, 255, 0.08);
+	--zdt_twotoneIcon_primary_border: undefined;
 }

package/css_error.log

@@ -0,0 +1 @@
+DOT Package error log:

package/es/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Icon from '@zohodesk/icons/es/Icon';
+import style from './TagWithIcon.module.css';
+export default class TagWithIcon extends React.Component {
+  render() {
+    const {
+      text,
+      iconName,
+      iconSize,
+      palette,
+      iconClass,
+      isBold,
+      size,
+      dataId,
+      className,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: `${style.wrapper} ${style[palette]} ${style[size]} ${className}`,
+      dataId: dataId,
+      title: title
+    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: `${text ? style.iconSpace : ''} ${iconClass} `
+    }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      "data-title": text,
+      className: `${style.text} ${style[size]}_text ${isBold ? style.bold : ''}`
+    }, text) : null);
+  }
+}
+TagWithIcon.defaultProps = {
+  iconSize: '9',
+  size: 'large',
+  iconClass: '',
+  isBold: true,
+  palette: 'grey',
+  className: ''
+};
+TagWithIcon.propTypes = {
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  title: PropTypes.string,
+  isBold: PropTypes.bool,
+  palette: PropTypes.oneOf(['yellow', 'blue', 'grey']),
+  size: PropTypes.oneOf('small', 'large'),
+  className: PropTypes.string,
+  text: PropTypes.string
+};
+if (false) {
+  TagWithIcon.docs = {
+    componentGroup: 'TagWithIcon'
+  };
+}

package/es/TagWithIcon/TagWithIcon.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+.small,
+.large {
+  max-width: 100%;
+  height: var(--zd_size18);
+}
+.small, .large {
+  border: 1px solid;
+  border-color: var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6);
+}
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .iconSpace{
+  margin-right: var(--zd_size4);
+}
+[dir=rtl] .iconSpace{
+  margin-left: var(--zd_size4);
+}
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+}

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -520,7 +520,8 @@ export class ToggleDropDown extends Component {
       palette,
       getFooter,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      customClass
     } = this.props;
     let {
       ToggleDropDownProps = {},
@@ -529,6 +530,10 @@ export class ToggleDropDown extends Component {
       ListItemWithIconProps = {},
       ListItemProps = {}
     } = customProps;
+    let {
+      customDropBox = '',
+      customListBox = ''
+    } = customClass;
     const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     const Component = isToggleStateNeeded ? children.type : null,
       componentProps = isToggleStateNeeded ? children.props : null;
@@ -613,7 +618,8 @@ export class ToggleDropDown extends Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: customDropBox
         },
         needResponsive: needResponsive,
         isPadding: isPadding,
@@ -659,7 +665,7 @@ export class ToggleDropDown extends Component {
         scroll: "vertical",
         preventParentScroll: "vertical",
         dataId: `${dataId}_list`,
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
         eleRef: this.scrollContentRef,
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : undefined,

package/es/dropdown/ToggleDropDown/props/defaultProps.js

@@ -22,5 +22,6 @@ export const defaultProps = {
   customProps: {},
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: {}
 };

package/es/dropdown/ToggleDropDown/props/propTypes.js

@@ -68,5 +68,9 @@ export const propTypes = {
     ListItemProps: PropTypes.object
   }),
   preventPopupClose: PropTypes.bool,
-  needMultiLineText: PropTypes.bool
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customDropBox: PropTypes.string,
+    customListBox: PropTypes.string
+  })
 };