@zohodesk/dot 1.0.0-beta.183 → 1.0.0-beta.187

package/README.md

@@ -2,11 +2,30 @@
 
 In this Library we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.187
+
+- AlphabeticList => vertical spaceing incremented
+
+# 1.0.0-beta.186
+
+- AlphabeticList => vertical spaceing incremented, dataId prop added
+
+# 1.0.0-beta.185
+
+- ToggleDropdown => on focusing input preventScroll disabled.
+- ValidationMessage => toolip Prop Added
+
+# 1.0.0-beta.184
+
+- TagsMultiSelect => dataId Changes
+- list/Icons => width added tto avoid jurk
+
 # 1.0.0-beta.183
 
 - Lookup,AlertLookup,AlertLookup2 => eventListeners Removed on UnMount
 - Drawer => getTitleChildren prop added
-- ToggleDropdown => on focusing  input preventScroll disabled.
+- ToggleDropdown => on focusing input preventScroll disabled.
+
 # 1.0.0-beta.182
 
 - ExternalLink, Link, AccountName, ContactName, SecondaryText/Email, SecondaryText/PhoneNumber, SecondaryText/TicketId, Subject => **customProps** prop added
@@ -14,6 +33,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 # 1.0.0-beta.181
 
 - ReadUnReadIcon => icon Name fix
+
 # 1.0.0-beta.180
 
 - TagsMultiSelect => scrollTop Issue Solved

package/es/AlphabeticList/AlphabeticList.js

@@ -36,7 +36,8 @@ export default class AlphabeticList extends React.PureComponent {
       selectedCharacter,
       align,
       type,
-      i18nKeys
+      i18nKeys,
+      dataId
     } = this.props;
     let {
       allText = 'All',
@@ -52,18 +53,19 @@ export default class AlphabeticList extends React.PureComponent {
       dataId: "navigationDiv"
     }, /*#__PURE__*/React.createElement(Box, {
       tagName: "li",
-      className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' && style.selected}`,
-      dataId: "All_Navi"
+      className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,
+      dataId: `All_${dataId}`
     }, /*#__PURE__*/React.createElement("span", {
       onClick: this.handleSelectAll,
-      className: style.heading,
+      className: `${style.heading} ${style.letter}`,
       "data-title": allTitle
     }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItem, {
       id: letter,
       isActive: letter === selectedCharacter,
       onClick: this.handleSelect,
       text: letter,
-      key: letter
+      key: letter,
+      dataId: dataId
     })));
   }
 
@@ -76,12 +78,14 @@ AlphabeticList.propTypes = {
   i18nKeys: PropTypes.shape({
     allTitle: PropTypes.string,
     allText: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 AlphabeticList.defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataId: 'Navi'
 };
 AlphabeticList.docs = {
   componentGroup: 'Atom'
@@ -104,15 +108,18 @@ class AlphabeticListItem extends React.PureComponent {
   render() {
     let {
       isActive,
-      text
+      text,
+      dataId
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       tagName: "li",
       className: `${style.list} ${isActive ? style.selected : ''}`,
       onClick: this.handleClick,
-      dataId: `${text}_Navi`
-    }, /*#__PURE__*/React.createElement("span", null, text));
+      dataId: `${text}_${dataId}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.letter
+    }, text));
   }
 
 }
@@ -121,9 +128,11 @@ AlphabeticListItem.propTypes = {
   id: PropTypes.string,
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
-  text: PropTypes.string
+  text: PropTypes.string,
+  dataId: PropTypes.string
 };
 AlphabeticListItem.defaultProps = {
   isActive: false,
-  text: ''
+  text: '',
+  dataId: 'Navi'
 };

package/es/AlphabeticList/AlphabeticList.module.css

@@ -20,10 +20,10 @@
 [dir=rtl] .row .title {
   margin-left: var(--zd_size3);
 }
-.row .list > span {
+.row  .letter {
   padding: 0 var(--zd_size3);
 }
-.column .list > span {
+.column .letter {
   padding: var(--zd_size3) 0;
 }
 .heading {
@@ -32,7 +32,7 @@
 }
 .list {
   font-size: var(--zd_font_size11);
-  flex-basis: var(--zd_size10);
+  flex-basis: var(--zd_size12);
   color: var(--textColor);
   text-align: center;
   cursor: pointer;
@@ -40,7 +40,7 @@
 .title {
   flex-basis: var(--zd_size15);
 }
-.list > span {
+.letter {
   text-transform: uppercase;
   display: inline-block;
 }
@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11);
-  font-family: semibold;
+  font-family: var(--zd_semibold);
 }

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -153,11 +153,11 @@ export class ToggleDropDown extends Component {
     if (prevProps.isPopupReady !== isPopupReady) {
       setTimeout(() => {
         isPopupReady ? isSearch ? this.searchInput.focus({
-          preventScroll: false
+          preventScroll: true
         }) : this.hiddenInput.focus({
-          preventScroll: false
+          preventScroll: true
         }) : this.hiddenInput.focus({
-          preventScroll: false
+          preventScroll: true
         });
       }, 10);
     }
@@ -366,11 +366,11 @@ export class ToggleDropDown extends Component {
             togglePopup(e, boxPosition);
           } else if (isSearch) {
             this.searchInput.focus({
-              preventScroll: false
+              preventScroll: true
             });
           } else {
             this.hiddenInput.focus({
-              preventScroll: false
+              preventScroll: true
             });
           }
 

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -190,7 +190,8 @@ export default class TagsMultiSelect extends React.Component {
       isPadding: false,
       customClass: {
         customDropBoxWrap: style.dropdown
-      }
+      },
+      dataId: `${dataId}_dropbox`
     }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.viewpopNew
@@ -216,7 +217,8 @@ export default class TagsMultiSelect extends React.Component {
         needTick: true,
         highlight: selectSearchIndex === index,
         getRef: this.getSelectedItemRef,
-        isDisabled: listDisabled
+        isDisabled: listDisabled,
+        dataId: dataId
       }, isNew ? /*#__PURE__*/React.createElement(Container, {
         alignBox: "row",
         align: "vertical"
@@ -225,10 +227,12 @@ export default class TagsMultiSelect extends React.Component {
       }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
         shrink: true,
         "data-title": name,
-        className: `${style.dotted} ${style.newTagText} `
+        className: `${style.dotted} ${style.newTagText} `,
+        dataId: `${dataId}_new_tag_text`
       }, name)) : null));
     })) : /*#__PURE__*/React.createElement(Box, {
-      flexible: true
+      flexible: true,
+      dataId: `${dataId}_empty`
     }, /*#__PURE__*/React.createElement(Container, {
       className: style.searchEmpty
     }, /*#__PURE__*/React.createElement(CommonEmptyState, {
@@ -282,7 +286,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId: ''
 };
 
 if (false) {

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import style from './ValidationMessage.module.css';
 import Label from '@zohodesk/components/lib/Label/Label';
+import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import style from './ValidationMessage.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
 export default class ValidationMessage extends React.Component {
   render() {
     let {
@@ -13,7 +15,8 @@ export default class ValidationMessage extends React.Component {
       size,
       dataId,
       clipped,
-      a11y
+      a11y,
+      tooltip
     } = this.props;
     let {
       role = 'alert'
@@ -30,8 +33,15 @@ export default class ValidationMessage extends React.Component {
       size: size,
       dataId: dataId,
       clipped: clipped,
-      title: clipped ? text : ''
-    }));
+      title: clipped ? text : '',
+      customClass: style.lable
+    }), tooltip ? /*#__PURE__*/React.createElement("span", {
+      className: `${style.icon} ${colors[palette]}`,
+      "data-title": tooltip
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-information57",
+      size: "14"
+    })) : null);
   }
 
 }
@@ -45,7 +55,8 @@ ValidationMessage.propTypes = {
   type: PropTypes.oneOf(['primary', 'secondary']),
   a11y: PropTypes.shape({
     role: PropTypes.string
-  })
+  }),
+  tooltip: PropTypes.string
 };
 ValidationMessage.defaultProps = {
   palette: 'mandatory',

package/es/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -1,12 +1,27 @@
+.basic{
+  font-size: 0;
+}
+.lable{
+  display: inline;
+}
+.icon{
+  color:var(--label_text_color);
+  display: inline-block;
+  margin: 0 var(--zd_size5);
+}
 .primary {
   position: absolute;
   top: 100%;
+  composes:basic;
   margin-top: var(--zd_size5);
-}[dir=ltr] .primary {
+}
+[dir=ltr] .primary {
   left: 0;
-}[dir=rtl] .primary {
+}
+[dir=rtl] .primary {
   right: 0;
 }
 .secondary {
+  composes:basic;
   margin-top: var(--zd_size5);
 }

package/es/form/fields/ValidationMessage/docs/ValidationMessage__default.docs.js

@@ -6,11 +6,46 @@ export default class ValidationMessage__default extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ValidationMessage, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ValidationMessage, {
       text: "validation",
+      palette: "default",
+      size: "small",
       type: "secondary",
-      size: "small"
-    });
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "primary",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "secondary",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "danger",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "mandatory",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "dark",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "disable",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }));
   }
 
 }

package/es/list/Icons/Icons.module.css

@@ -4,7 +4,8 @@
 }
 .iconStyle {
   color: var(--zdt_icons_default);
-  padding: 0 var(--zd_size9);
+  width: var(--zd_size33);
+  padding: 0 var(--zd_size8);
   cursor: pointer;
 }
 .blueHover:hover {

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -25,7 +25,7 @@
 
 .noteUl li {
     font-size: var(--zd_font_size12);
-    line-height: var(--zd_size14);
+    /* line-height: var(--zd_size14); */
     color: var(--zdt_alertlookuop_text);
     list-style-type: disc;
     line-height: initial;

package/lib/AlphabeticList/AlphabeticList.js

@@ -94,7 +94,8 @@ var AlphabeticList = /*#__PURE__*/function (_React$PureComponent) {
           selectedCharacter = _this$props3.selectedCharacter,
           align = _this$props3.align,
           type = _this$props3.type,
-          i18nKeys = _this$props3.i18nKeys;
+          i18nKeys = _this$props3.i18nKeys,
+          dataId = _this$props3.dataId;
       var _i18nKeys$allText = i18nKeys.allText,
           allText = _i18nKeys$allText === void 0 ? 'All' : _i18nKeys$allText,
           _i18nKeys$allTitle = i18nKeys.allTitle,
@@ -109,11 +110,11 @@ var AlphabeticList = /*#__PURE__*/function (_React$PureComponent) {
         dataId: "navigationDiv"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         tagName: "li",
-        className: "".concat(_AlphabeticListModule["default"].list, " ").concat(_AlphabeticListModule["default"].title, " ").concat(selectedCharacter === 'ALL' && _AlphabeticListModule["default"].selected),
-        dataId: "All_Navi"
+        className: "".concat(_AlphabeticListModule["default"].list, " ").concat(_AlphabeticListModule["default"].title, " ").concat(selectedCharacter === 'ALL' ? _AlphabeticListModule["default"].selected : ''),
+        dataId: "All_".concat(dataId)
       }, /*#__PURE__*/_react["default"].createElement("span", {
         onClick: this.handleSelectAll,
-        className: _AlphabeticListModule["default"].heading,
+        className: "".concat(_AlphabeticListModule["default"].heading, " ").concat(_AlphabeticListModule["default"].letter),
         "data-title": allTitle
       }, allText)), letters.map(function (letter) {
         return /*#__PURE__*/_react["default"].createElement(AlphabeticListItem, {
@@ -121,7 +122,8 @@ var AlphabeticList = /*#__PURE__*/function (_React$PureComponent) {
           isActive: letter === selectedCharacter,
           onClick: _this2.handleSelect,
           text: letter,
-          key: letter
+          key: letter,
+          dataId: dataId
         });
       }));
     }
@@ -139,12 +141,14 @@ AlphabeticList.propTypes = {
   i18nKeys: _propTypes["default"].shape({
     allTitle: _propTypes["default"].string,
     allText: _propTypes["default"].string
-  })
+  }),
+  dataId: _propTypes["default"].string
 };
 AlphabeticList.defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataId: 'Navi'
 };
 AlphabeticList.docs = {
   componentGroup: 'Atom'
@@ -178,14 +182,17 @@ var AlphabeticListItem = /*#__PURE__*/function (_React$PureComponent2) {
     value: function render() {
       var _this$props5 = this.props,
           isActive = _this$props5.isActive,
-          text = _this$props5.text;
+          text = _this$props5.text,
+          dataId = _this$props5.dataId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         tagName: "li",
         className: "".concat(_AlphabeticListModule["default"].list, " ").concat(isActive ? _AlphabeticListModule["default"].selected : ''),
         onClick: this.handleClick,
-        dataId: "".concat(text, "_Navi")
-      }, /*#__PURE__*/_react["default"].createElement("span", null, text));
+        dataId: "".concat(text, "_").concat(dataId)
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: _AlphabeticListModule["default"].letter
+      }, text));
     }
   }]);
 
@@ -196,9 +203,11 @@ AlphabeticListItem.propTypes = {
   id: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  text: _propTypes["default"].string
+  text: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 AlphabeticListItem.defaultProps = {
   isActive: false,
-  text: ''
+  text: '',
+  dataId: 'Navi'
 };

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -20,10 +20,10 @@
 [dir=rtl] .row .title {
   margin-left: var(--zd_size3);
 }
-.row .list > span {
+.row  .letter {
   padding: 0 var(--zd_size3);
 }
-.column .list > span {
+.column .letter {
   padding: var(--zd_size3) 0;
 }
 .heading {
@@ -32,7 +32,7 @@
 }
 .list {
   font-size: var(--zd_font_size11);
-  flex-basis: var(--zd_size10);
+  flex-basis: var(--zd_size12);
   color: var(--textColor);
   text-align: center;
   cursor: pointer;
@@ -40,7 +40,7 @@
 .title {
   flex-basis: var(--zd_size15);
 }
-.list > span {
+.letter {
   text-transform: uppercase;
   display: inline-block;
 }
@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11);
-  font-family: semibold;
+  font-family: var(--zd_semibold);
 }

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -225,11 +225,11 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
       if (prevProps.isPopupReady !== isPopupReady) {
         setTimeout(function () {
           isPopupReady ? isSearch ? _this2.searchInput.focus({
-            preventScroll: false
+            preventScroll: true
           }) : _this2.hiddenInput.focus({
-            preventScroll: false
+            preventScroll: true
           }) : _this2.hiddenInput.focus({
-            preventScroll: false
+            preventScroll: true
           });
         }, 10);
       }
@@ -433,11 +433,11 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               togglePopup(e, boxPosition);
             } else if (isSearch) {
               this.searchInput.focus({
-                preventScroll: false
+                preventScroll: true
               });
             } else {
               this.hiddenInput.focus({
-                preventScroll: false
+                preventScroll: true
               });
             }
 

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -244,7 +244,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         isPadding: false,
         customClass: {
           customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
-        }
+        },
+        dataId: "".concat(dataId, "_dropbox")
       }, isTagListLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         className: _TagsMultiSelectModule["default"].viewpopNew
@@ -268,7 +269,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           needTick: true,
           highlight: selectSearchIndex === index,
           getRef: _this3.getSelectedItemRef,
-          isDisabled: listDisabled
+          isDisabled: listDisabled,
+          dataId: dataId
         }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: "row",
           align: "vertical"
@@ -277,10 +279,12 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, i18nKeys.newTagText, ":"), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           shrink: true,
           "data-title": name,
-          className: "".concat(_TagsMultiSelectModule["default"].dotted, " ").concat(_TagsMultiSelectModule["default"].newTagText, " ")
+          className: "".concat(_TagsMultiSelectModule["default"].dotted, " ").concat(_TagsMultiSelectModule["default"].newTagText, " "),
+          dataId: "".concat(dataId, "_new_tag_text")
         }, name)) : null));
       })) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
+        flexible: true,
+        dataId: "".concat(dataId, "_empty")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         className: _TagsMultiSelectModule["default"].searchEmpty
       }, /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
@@ -338,7 +342,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId: ''
 };
 
 if (false) {

package/lib/form/fields/ValidationMessage/ValidationMessage.js

@@ -11,9 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
+
+var _LabelColorsModule = _interopRequireDefault(require("@zohodesk/components/lib/Label/LabelColors.module.css"));
+
 var _ValidationMessageModule = _interopRequireDefault(require("./ValidationMessage.module.css"));
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -60,7 +64,8 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
           size = _this$props.size,
           dataId = _this$props.dataId,
           clipped = _this$props.clipped,
-          a11y = _this$props.a11y;
+          a11y = _this$props.a11y,
+          tooltip = _this$props.tooltip;
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'alert' : _a11y$role;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -75,8 +80,15 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
         size: size,
         dataId: dataId,
         clipped: clipped,
-        title: clipped ? text : ''
-      }));
+        title: clipped ? text : '',
+        customClass: _ValidationMessageModule["default"].lable
+      }), tooltip ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette]),
+        "data-title": tooltip
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: "ZD-information57",
+        size: "14"
+      })) : null);
     }
   }]);
 
@@ -94,7 +106,8 @@ ValidationMessage.propTypes = {
   type: _propTypes["default"].oneOf(['primary', 'secondary']),
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string
-  })
+  }),
+  tooltip: _propTypes["default"].string
 };
 ValidationMessage.defaultProps = {
   palette: 'mandatory',

package/lib/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -1,12 +1,27 @@
+.basic{
+  font-size: 0;
+}
+.lable{
+  display: inline;
+}
+.icon{
+  color:var(--label_text_color);
+  display: inline-block;
+  margin: 0 var(--zd_size5);
+}
 .primary {
   position: absolute;
   top: 100%;
+  composes:basic;
   margin-top: var(--zd_size5);
-}[dir=ltr] .primary {
+}
+[dir=ltr] .primary {
   left: 0;
-}[dir=rtl] .primary {
+}
+[dir=rtl] .primary {
   right: 0;
 }
 .secondary {
+  composes:basic;
   margin-top: var(--zd_size5);
 }

package/lib/form/fields/ValidationMessage/docs/ValidationMessage__default.docs.js

@@ -47,11 +47,46 @@ var ValidationMessage__default = /*#__PURE__*/function (_React$Component) {
   _createClass(ValidationMessage__default, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
         text: "validation",
+        palette: "default",
+        size: "small",
         type: "secondary",
-        size: "small"
-      });
+        tooltip: "Information"
+      }), /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+        text: "validation",
+        palette: "primary",
+        size: "small",
+        type: "secondary"
+      }), /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+        text: "validation",
+        palette: "secondary",
+        size: "small",
+        type: "secondary",
+        tooltip: "Information"
+      }), /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+        text: "validation",
+        palette: "danger",
+        size: "small",
+        type: "secondary"
+      }), /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+        text: "validation",
+        palette: "mandatory",
+        size: "small",
+        type: "secondary",
+        tooltip: "Information"
+      }), /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+        text: "validation",
+        palette: "dark",
+        size: "small",
+        type: "secondary"
+      }), /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], {
+        text: "validation",
+        palette: "disable",
+        size: "small",
+        type: "secondary",
+        tooltip: "Information"
+      }));
     }
   }]);
 

package/lib/list/Icons/Icons.module.css

@@ -4,7 +4,8 @@
 }
 .iconStyle {
   color: var(--zdt_icons_default);
-  padding: 0 var(--zd_size9);
+  width: var(--zd_size33);
+  padding: 0 var(--zd_size8);
   cursor: pointer;
 }
 .blueHover:hover {

package/lib/version2/lookup/alertLookupCommonNew.module.css

@@ -25,7 +25,7 @@
 
 .noteUl li {
     font-size: var(--zd_font_size12);
-    line-height: var(--zd_size14);
+    /* line-height: var(--zd_size14); */
     color: var(--zdt_alertlookuop_text);
     list-style-type: disc;
     line-height: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.183",
+  "version": "1.0.0-beta.187",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -32,7 +32,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "1.0.0-beta.23",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-204",
+    "@zohodesk/components": "1.0.0-alpha-205",
     "@zohodesk/icons": "1.0.0-beta.85",
     "@zohodesk/svg": "1.0.0-beta.34",
     "@zohodesk/virtualizer": "1.0.3",
@@ -42,7 +42,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "^1.0.0-beta.23",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-204",
+    "@zohodesk/components": "1.0.0-alpha-205",
     "@zohodesk/icons": "^1.0.0-beta.85",
     "@zohodesk/svg": "^1.0.0-beta.34"
   },

package/src/AlphabeticList/AlphabeticList.js

@@ -56,7 +56,7 @@ export default class AlphabeticList extends React.PureComponent {
   }
 
   render() {
-    let { selectedCharacter, align, type, i18nKeys } = this.props;
+    let { selectedCharacter, align, type, i18nKeys, dataId } = this.props;
     let { allText = 'All', allTitle = 'All' } = i18nKeys;
     let alignType = align === 'vertical' ? style.column : style.row;
     let letters =
@@ -79,13 +79,13 @@ export default class AlphabeticList extends React.PureComponent {
         <Box
           tagName='li'
           className={`${style.list} ${style.title} ${
-            selectedCharacter === 'ALL' && style.selected
+            selectedCharacter === 'ALL' ? style.selected : ''
           }`}
-          dataId='All_Navi'
+          dataId={`All_${dataId}`}
         >
           <span
             onClick={this.handleSelectAll}
-            className={style.heading}
+            className={`${style.heading} ${style.letter}`}
             data-title={allTitle}
           >
             {allText}
@@ -98,6 +98,7 @@ export default class AlphabeticList extends React.PureComponent {
             onClick={this.handleSelect}
             text={letter}
             key={letter}
+            dataId={dataId}
           />
         ))}
       </Container>
@@ -118,13 +119,15 @@ AlphabeticList.propTypes = {
   i18nKeys: PropTypes.shape({
     allTitle: PropTypes.string,
     allText: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 
 AlphabeticList.defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataId: 'Navi'
 };
 
 AlphabeticList.docs = {
@@ -143,16 +146,16 @@ class AlphabeticListItem extends React.PureComponent {
   }
 
   render() {
-    let { isActive, text } = this.props;
+    let { isActive, text, dataId } = this.props;
     return (
       <Box
         flexible
         tagName='li'
         className={`${style.list} ${isActive ? style.selected : ''}`}
         onClick={this.handleClick}
-        dataId={`${text}_Navi`}
+        dataId={`${text}_${dataId}`}
       >
-        <span>{text}</span>
+        <span className={style.letter}>{text}</span>
       </Box>
     );
   }
@@ -162,10 +165,12 @@ AlphabeticListItem.propTypes = {
   id: PropTypes.string,
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
-  text: PropTypes.string
+  text: PropTypes.string,
+  dataId: PropTypes.string
 };
 
 AlphabeticListItem.defaultProps = {
   isActive: false,
-  text: ''
+  text: '',
+  dataId: 'Navi'
 };

package/src/AlphabeticList/AlphabeticList.module.css

@@ -17,10 +17,10 @@
 .row .title {
   margin-right: var(--zd_size3);
 }
-.row .list > span {
+.row  .letter {
   padding: 0 var(--zd_size3);
 }
-.column .list > span {
+.column .letter {
   padding: var(--zd_size3) 0;
 }
 .heading {
@@ -30,14 +30,14 @@
 .list {
   font-size: var(--zd_font_size11);
   text-align: center;
-  flex-basis: var(--zd_size10);
+  flex-basis: var(--zd_size12);
   cursor: pointer;
   color: var(--textColor);
 }
 .title {
   flex-basis: var(--zd_size15);
 }
-.list > span {
+.letter {
   text-transform: uppercase;
   display: inline-block;
 }
@@ -50,5 +50,5 @@
 }
 .title {
   font-size: var(--zd_font_size11);
-  font-family: semibold;
+  font-family: var(--zd_semibold);
 }

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -65,7 +65,13 @@ export class ToggleDropDown extends Component {
   }
 
   handleTogglePopup(e) {
-    const { togglePopup, boxPosition, onSelectLabel, isPopupOpen, removeClose } = this.props;
+    const {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen,
+      removeClose
+    } = this.props;
     removeClose && removeClose(e);
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     togglePopup(e, boxPosition);
@@ -124,9 +130,9 @@ export class ToggleDropDown extends Component {
       setTimeout(() => {
         isPopupReady
           ? isSearch
-            ? this.searchInput.focus({preventScroll:false})
-            : this.hiddenInput.focus({preventScroll:false})
-          : this.hiddenInput.focus({preventScroll:false});
+            ? this.searchInput.focus({ preventScroll: true })
+            : this.hiddenInput.focus({ preventScroll: true })
+          : this.hiddenInput.focus({ preventScroll: true });
       }, 10);
     }
     const optionsArr = this.getOptionsArray();
@@ -162,22 +168,17 @@ export class ToggleDropDown extends Component {
   }
 
   handleFilterSuggestions(searchValue) {
-    const {
-      options,
-      keyName,
-      isGroupDropDown,
-      groupOptionsKey,
-      groupNameKey
-    } = this.props;
+    const { options, keyName, isGroupDropDown, groupOptionsKey, groupNameKey } =
+      this.props;
     searchValue = searchValue.trim().toLowerCase();
     let result = [];
     if (isGroupDropDown) {
       const filteredGroups = [];
-      options.map((group) => {
+      options.map(group => {
         const { needDivider } = group;
         const name = group[groupNameKey];
         const groupOptions = group[groupOptionsKey];
-        const datas = groupOptions.filter((list) => {
+        const datas = groupOptions.filter(list => {
           const value = list[keyName];
           return value.toLowerCase().includes(searchValue);
         });
@@ -200,7 +201,7 @@ export class ToggleDropDown extends Component {
       if (filteredOptions.length) {
         // to avoid more than one dividers consecutively comes as one by one
         let needDividerCount = 0;
-        const orderedOptions = filteredOptions.filter((item) => {
+        const orderedOptions = filteredOptions.filter(item => {
           if (item.needDivider && needDividerCount === 0) {
             needDividerCount++;
             return true;
@@ -240,7 +241,7 @@ export class ToggleDropDown extends Component {
         Array.prototype.push.apply(optionsArr, groupOptions);
       }
     } else {
-      optionsArr = options.filter((item) => !item.needDivider);
+      optionsArr = options.filter(item => !item.needDivider);
     }
     return optionsArr;
   }
@@ -263,7 +264,11 @@ export class ToggleDropDown extends Component {
       preventPopupClose,
       isSearch
     } = this.props;
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+    if (
+      isPopupReady &&
+      (keyCode === 38 || keyCode === 40) &&
+      e.preventDefault
+    ) {
       e.preventDefault(); //prevent body scroll
     }
     if (isPopupReady) {
@@ -294,14 +299,12 @@ export class ToggleDropDown extends Component {
         case 13:
           const selectedId = optionsArr[selectedIndex][idName] || '';
           onClick && onClick(selectedId, optionsArr[selectedIndex]);
-          if(!preventPopupClose) {
+          if (!preventPopupClose) {
             togglePopup(e, boxPosition);
-          }
-          else if(isSearch) {
-            this.searchInput.focus({preventScroll:false});
-          }
-          else {
-            this.hiddenInput.focus({preventScroll:false});
+          } else if (isSearch) {
+            this.searchInput.focus({ preventScroll: true });
+          } else {
+            this.hiddenInput.focus({ preventScroll: true });
           }
           break;
       }
@@ -314,7 +317,7 @@ export class ToggleDropDown extends Component {
 
   getSelectedIndex(optionsArr) {
     const { selectedId, idName } = this.props;
-    if(selectedId) {
+    if (selectedId) {
       for (let i = 0; i < optionsArr.length; i++) {
         const indexId = optionsArr[i][idName];
         if (selectedId === indexId) {
@@ -324,11 +327,10 @@ export class ToggleDropDown extends Component {
           break;
         }
       }
-    }
-    else {
+    } else {
       this.setState({
         selectedIndex: -1
-      })
+      });
     }
   }
 
@@ -439,7 +441,13 @@ export class ToggleDropDown extends Component {
       getFooter,
       customProps
     } = this.props;
-    let {ToggleDropDownProps={},DropBoxProps={},TextBoxIconProps={},ListItemWithIconProps={},ListItemProps={}}=customProps;
+    let {
+      ToggleDropDownProps = {},
+      DropBoxProps = {},
+      TextBoxIconProps = {},
+      ListItemWithIconProps = {},
+      ListItemProps = {}
+    } = customProps;
     const isPopupOpen = needExternalPopupState
       ? isPopupActive && isOpen
       : isOpen;
@@ -453,10 +461,10 @@ export class ToggleDropDown extends Component {
       isDisabled
         ? CssProvider('isDisable')
         : isReadOnly || !isEditable
-          ? style.cursorDefault
-          : !showOnHover
-            ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}`
-            : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`
+        ? style.cursorDefault
+        : !showOnHover
+        ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}`
+        : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`
     }`;
     let listIndex = -1;
     const ariaTitleId = this.getAriaId();
@@ -637,7 +645,7 @@ export class ToggleDropDown extends Component {
                   options && options.length != 0 ? (
                     isGroupDropDown ? (
                       <Fragment>
-                        {options.map((group) => {
+                        {options.map(group => {
                           const groupName = group[groupNameKey];
                           const groupOptions = group[groupOptionsKey];
                           const { needDivider } = group;
@@ -658,7 +666,7 @@ export class ToggleDropDown extends Component {
                                 </div>
                               )}
                               {groupOptions &&
-                                groupOptions.map((item) => {
+                                groupOptions.map(item => {
                                   const {
                                     iconName,
                                     iconSize,
@@ -818,9 +826,7 @@ export class ToggleDropDown extends Component {
                   </div>
                 )}
               </Box>
-              {getFooter ? (
-                <div>{getFooter()}</div>
-              ) : null}
+              {getFooter ? <div>{getFooter()}</div> : null}
             </Fragment>
           </DropBox>
         ) : null}
@@ -849,7 +855,7 @@ ToggleDropDown.defaultProps = {
   isNeedEffect: true,
   hoverType: 'default',
   needExternalPopupState: false,
-  customProps:{},
+  customProps: {},
   preventPopupClose: false
 };
 
@@ -926,7 +932,7 @@ ToggleDropDown.propTypes = {
   onDropDownOpen: PropTypes.func,
   onDropDownClose: PropTypes.func,
   getFooter: PropTypes.func,
-  customProps:PropTypes.shape({
+  customProps: PropTypes.shape({
     ToggleDropDownProps: PropTypes.object,
     DropBoxProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object,

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -203,6 +203,7 @@ export default class TagsMultiSelect extends React.Component {
             customClass={{
               customDropBoxWrap: style.dropdown
             }}
+            dataId={`${dataId}_dropbox`}
           >
             {isTagListLoading ? (
               <Container align='both' className={style.viewpopNew}>
@@ -236,6 +237,7 @@ export default class TagsMultiSelect extends React.Component {
                               highlight={selectSearchIndex === index}
                               getRef={this.getSelectedItemRef}
                               isDisabled={listDisabled}
+                              dataId={dataId}
                             >
                               {isNew ? (
                                 <Container alignBox='row' align='vertical'>
@@ -246,6 +248,7 @@ export default class TagsMultiSelect extends React.Component {
                                     shrink
                                     data-title={name}
                                     className={`${style.dotted} ${style.newTagText} `}
+                                    dataId={`${dataId}_new_tag_text`}
                                   >
                                     {name}
                                   </Box>
@@ -257,7 +260,7 @@ export default class TagsMultiSelect extends React.Component {
                       })}
                     </Box>
                   ) : (
-                    <Box flexible>
+                    <Box flexible  dataId={`${dataId}_empty`}>
                       <Container className={style.searchEmpty}>
                         <CommonEmptyState
                           title={i18nKeys.emptyTitleText}
@@ -320,7 +323,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId:''
 };
 
 if (__DOCS__) {

package/src/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,12 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import style from './ValidationMessage.module.css';
 import Label from '@zohodesk/components/lib/Label/Label';
+import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import style from './ValidationMessage.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class ValidationMessage extends React.Component {
   render() {
-    let { palette, text, htmlFor, onClick, type, size, dataId, clipped, a11y } =
-      this.props;
+    let {
+      palette,
+      text,
+      htmlFor,
+      onClick,
+      type,
+      size,
+      dataId,
+      clipped,
+      a11y,
+      tooltip
+    } = this.props;
     let { role = 'alert' } = a11y;
     return (
       <div
@@ -23,7 +35,16 @@ export default class ValidationMessage extends React.Component {
           dataId={dataId}
           clipped={clipped}
           title={clipped ? text : ''}
+          customClass={style.lable}
         />
+        {tooltip ? (
+          <span
+            className={`${style.icon} ${colors[palette]}`}
+            data-title={tooltip}
+          >
+            <Icon name='ZD-information57' size='14' />
+          </span>
+        ) : null}
       </div>
     );
   }
@@ -38,7 +59,8 @@ ValidationMessage.propTypes = {
   type: PropTypes.oneOf(['primary', 'secondary']),
   a11y: PropTypes.shape({
     role: PropTypes.string
-  })
+  }),
+  tooltip: PropTypes.string
 };
 ValidationMessage.defaultProps = {
   palette: 'mandatory',

package/src/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -1,9 +1,22 @@
+.basic{
+  font-size: 0;
+}
+.lable{
+  display: inline;
+}
+.icon{
+  margin: 0 var(--zd_size5);
+  color:var(--label_text_color);
+  display: inline-block;
+}
 .primary {
   position: absolute;
   top: 100%;
   left: 0;
   margin-top: var(--zd_size5);
+  composes:basic;
 }
 .secondary {
   margin-top: var(--zd_size5);
+  composes:basic;
 }

package/src/form/fields/ValidationMessage/docs/ValidationMessage__default.docs.js

@@ -7,7 +7,54 @@ export default class ValidationMessage__default extends React.Component {
 
   render() {
     return (
-      <ValidationMessage text='validation' type='secondary' size='small' />
+      <div>
+        <ValidationMessage
+          text='validation'
+          palette='default'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='primary'
+          size='small'
+          type='secondary'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='secondary'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='danger'
+          size='small'
+          type='secondary'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='mandatory'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='dark'
+          size='small'
+          type='secondary'
+        />
+        <ValidationMessage
+          text='validation'
+          palette='disable'
+          size='small'
+          type='secondary'
+          tooltip='Information'
+        />
+      </div>
     );
   }
 }

package/src/list/Icons/Icons.module.css

@@ -3,9 +3,10 @@
   composes: inlineFlex from '../listCommon.module.css';
 }
 .iconStyle {
-  padding: 0 var(--zd_size9);
-  cursor: pointer;
   color: var(--zdt_icons_default);
+  padding: 0 var(--zd_size8);
+  width: var(--zd_size33);
+  cursor: pointer;
 }
 .blueHover:hover {
   color: var(--zdt_icons_hover_blue);

package/src/version2/lookup/alertLookupCommonNew.module.css

@@ -18,7 +18,7 @@
 
 .noteUl li {
     font-size: var(--zd_font_size12);
-    line-height: var(--zd_size14);
+    /* line-height: var(--zd_size14); */
     color: var(--zdt_alertlookuop_text);
     margin-bottom: var(--zd_size15);
     list-style-type: disc;