@zohodesk/dot 1.8.6 → 1.9.1

package/es/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/es/form/fields/TextEditor/TextEditor.js

@@ -384,8 +384,12 @@ export default class TextEditor extends Component {
       isNightMode,
       isReadOnly,
       dataSelectorId,
-      isDisabled
+      isDisabled,
+      customClass
     } = this.props;
+    const {
+      wrapper: wrapperClass = ''
+    } = customClass;
     let {
       isEditorLoad,
       isEditorShow
@@ -393,7 +397,7 @@ export default class TextEditor extends Component {
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''} ${wrapperClass}`,
       dataId: dataId,
       "data-isEditor": true,
       dataSelectorId: dataSelectorId

package/es/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light   editorHide flex cover coldir"
+        light   editorHide  flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"

package/es/form/fields/TextEditor/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   dataSelectorId: 'textEditor',
   customCSS: '',
   isDisabled: false,
-  inlineImageProps: {}
+  inlineImageProps: {},
+  customClass: {}
 };

package/es/form/fields/TextEditor/props/propTypes.js

@@ -49,5 +49,6 @@ export const propTypes = {
     allowedFileExtensions: PropTypes.array,
     fileNameMaxCharacters: PropTypes.number,
     fileSizeMaxBytes: PropTypes.number
-  })
+  }),
+  customClass: PropTypes.object
 };

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -4,7 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/es/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TextEditorWrapper from "../TextEditorWrapper/TextEditorWrapper";
 import FieldContainer from "../FieldContainer/FieldContainer";
@@ -122,10 +122,16 @@ export default class TextEditorField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       htmlFor: !isReadOnly && !isDisabled ? id : undefined,
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
       onClick: this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customClass: {
+        label: labelCustomClass
+      },
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/TextareaField/TextareaField.js

@@ -4,7 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/es/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
@@ -131,12 +131,22 @@ export default class TextareaField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
+      isRequired: isMandatory,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      palette: labelPalette,
+      customClass: {
+        label: labelCustomClass
+      },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Search rendering the customized style search 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -75,7 +75,7 @@ exports[`Search rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -132,7 +132,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -192,7 +192,7 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -262,7 +262,7 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   effect     container   flex rowdir"
+            class="varClass customContainer    effect     container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -321,7 +321,7 @@ exports[`Search rendering the search active 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect  active   container   flex rowdir"
+        class="varClass customContainer    effect  active   container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/common/dot_boxShadow.module.css

@@ -37,8 +37,7 @@
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
 
     /* onboarding  */
-    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
+    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-
 }

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _CheckBox = _interopRequireDefault(require("@zohodesk/components/es/CheckBox/CheckBox"));
 
@@ -140,15 +140,24 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        id: id,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass,
+          container: !isDirectCol ? _FieldsModule["default"].checkboxText : ''
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        infoText: infoText,
-        customClass: "".concat(!isDirectCol ? _FieldsModule["default"].checkboxText : '', " ").concat(!isDirectCol ? _FieldsModule["default"]["lineClamp_".concat(lineClamp)] : '', " ").concat(isReadOnly || isDisabled ? _FieldsModule["default"].cbTextReadonly : _FieldsModule["default"].cbTextPointer, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        title: labelName,
+        fontWeight: isDirectCol ? 'regular' : 'semibold',
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         onClick: !removeEvent ? this.handleLabelClick : null,
-        variant: isDirectCol ? 'default' : 'primary',
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)));
 
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/es/TextBoxIcon/TextBoxIcon"));
 
@@ -178,11 +178,17 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/form/fields/DateField/DateField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _DateWidget = _interopRequireDefault(require("@zohodesk/components/es/DateTime/DateWidget"));
 
@@ -185,15 +185,24 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        htmlFor: getAriaId,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+        htmlFor: getAriaId,
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
-      }, LabelProps, {
-        id: labelName
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
+      }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].lockText

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _MultiSelect = _interopRequireDefault(require("@zohodesk/components/es/MultiSelect/MultiSelect"));
 
@@ -198,13 +198,20 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        id: id,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+        htmlFor: uniqueId // onClick={this.handleLabelClick}
         ,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        htmlFor: uniqueId
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
         options: options,
         onChange: this.handleChange,

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/RadioField/RadioField.js

@@ -17,7 +17,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _Radio = _interopRequireDefault(require("@zohodesk/components/es/Radio/Radio"));
 
@@ -188,10 +188,20 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",
-        id: id,
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(customLabelClass),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: customLabelClass
+        },
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {

package/lib/form/fields/SelectField/SelectField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _Select = _interopRequireDefault(require("@zohodesk/components/es/Select/Select"));
 
@@ -166,14 +166,23 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass
+        },
         htmlFor: uniqueId,
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
-      }, LabelProps, {
-        id: uniqueId
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        size: fieldSize === 'small' ? 'small' : 'medium',
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: uniqueId
+          }
+        }
+      }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: options,

package/lib/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -19,7 +19,7 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="varClass customContainer   effect     container custmInp  flex rowdir"
+          class="varClass customContainer    effect     container custmInp  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
 
@@ -247,13 +247,22 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
     text: labelName,
-    title: labelName,
-    id: id,
+    isRequired: isMandatory,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    palette: labelPalette,
+    customClass: {
+      label: labelClass
+    },
+    htmlFor: htmlId,
     size: labelSize,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
-    dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-    htmlFor: htmlId
+    testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    tagAttributes: {
+      label: {
+        id: id
+      }
+    }
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     dataId: "".concat(dataId, "_tagCount"),
     className: _TagsMultiSelectFieldModule["default"].count

package/lib/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -31,7 +31,7 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="varClass customContainer   effect     container custmInp  flex rowdir"
+            class="varClass customContainer    effect     container custmInp  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/es/TextBoxIcon/TextBoxIcon"));
 
@@ -156,14 +156,23 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId,
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
-      }, LabelProps, {
-        id: labelName
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
+      }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: uniqueId,

package/lib/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/form/fields/TextEditor/TextEditor.js

@@ -427,13 +427,16 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           isNightMode = _this$props9.isNightMode,
           isReadOnly = _this$props9.isReadOnly,
           dataSelectorId = _this$props9.dataSelectorId,
-          isDisabled = _this$props9.isDisabled;
+          isDisabled = _this$props9.isDisabled,
+          customClass = _this$props9.customClass;
+      var _customClass$wrapper = customClass.wrapper,
+          wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
       var _this$state = this.state,
           isEditorLoad = _this$state.isEditorLoad,
           isEditorShow = _this$state.isEditorShow;
       var editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
+        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : '', " ").concat(wrapperClass),
         dataId: dataId,
         "data-isEditor": true,
         dataSelectorId: dataSelectorId

package/lib/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light   editorHide flex cover coldir"
+        light   editorHide  flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"