@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

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

@@ -23,6 +23,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -156,7 +158,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
@@ -183,7 +185,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           }
         }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : ''))
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: options,
         selectedValue: selectedValue,

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

@@ -3,14 +3,14 @@
 exports[`SelectField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="selectField"
   >
     <div
-      class="fieldContainer  "
+      class="fieldContainer"
     >
       <div
-        class="container box_medium   "
+        class="container box_medium"
         data-selector-id="select"
       >
         <div
@@ -19,11 +19,11 @@ 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="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -37,7 +37,7 @@ exports[`SelectField rendering the defult props 1`] = `
                 aria-owns="2"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="selectComponent_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="selectComponent_textBox"
@@ -51,39 +51,39 @@ exports[`SelectField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="selectComponent_downIcon"
                       data-selector-id="container"
                       data-test-id="selectComponent_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

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

@@ -39,6 +39,8 @@ var _General = require("../../../utils/General");
 
 var _Common = require("@zohodesk/components/es/utils/Common.js");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagsMultiSelectModule = _interopRequireDefault(require("./TagsMultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -235,7 +237,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
+        className: (0, _cssUtility.cn)("".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className)),
         onClick: _General.stopBubbling,
         "data-id": "".concat(dataId, "_tagsContainer"),
         "data-test-id": "".concat(dataId, "_tagsContainer"),
@@ -277,7 +279,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         className: _TagsMultiSelectModule["default"].inputWrapper
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _TagsMultiSelectModule["default"].custmSpan
+        className: (0, _cssUtility.cn)(_TagsMultiSelectModule["default"].custmSpan)
       }, name), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: htmlId,
         dataId: "".concat(dataId, "_tagInp"),

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

@@ -3,20 +3,19 @@
 exports[`TagsMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  hasBorder
-              borderColor_default  "
+    class="container hasBorder borderColor_default"
     data-id="_tagsContainer"
     data-selector-id="tagsMultiSelectField"
     data-test-id="_tagsContainer"
   >
     <div
-      class="tagDiv  flex rowdir wrap vCenter scrolly"
+      class="flex row wrap alignItems_center scroll_vertical tagDiv"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="inputWrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink inputWrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -25,17 +24,17 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="varClass customContainer    effect     container custmInp  flex rowdir"
+          class="flex row varClass customContainer effect container custmInp"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <input
-              class="  container xsmall  default  effect  borderColor_default  input"
+              class="container xsmall default effect borderColor_default input"
               data-id="_tagInp"
               data-selector-id="textBoxIcon"
               data-test-id="_tagInp"
@@ -46,13 +45,13 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"

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

@@ -25,6 +25,8 @@ var _TagsMultiSelect = _interopRequireDefault(require("../TagsMultiSelect/TagsMu
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 var _TagsMultiSelectFieldModule = _interopRequireDefault(require("./TagsMultiSelectField.module.css"));
@@ -232,7 +234,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    className: (0, _cssUtility.cn)("".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
     tabIndex: "0",
     "aria-label": "".concat(labelName),
     "data-selector-id": dataSelectorId

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

@@ -9,20 +9,19 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="container  hasBorder
-              borderColor_default  "
+      class="container hasBorder borderColor_default"
       data-id="_tagsContainer"
       data-selector-id="tagsMultiSelectField"
       data-test-id="_tagsContainer"
     >
       <div
-        class="tagDiv  flex rowdir wrap vCenter scrolly"
+        class="flex row wrap alignItems_center scroll_vertical tagDiv"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="inputWrapper grow basisAuto shrinkOn"
+          class="flexible basis_auto shrink inputWrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -31,17 +30,17 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="varClass customContainer    effect     container custmInp  flex rowdir"
+            class="flex row varClass customContainer effect container custmInp"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <input
-                class="  container xsmall  default  effect  borderColor_default  input"
+                class="container xsmall default effect borderColor_default input"
                 data-id="_tagInp"
                 data-selector-id="textBoxIcon"
                 data-test-id="_tagInp"
@@ -52,13 +51,13 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"

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

@@ -23,6 +23,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -144,7 +146,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
@@ -173,7 +175,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
           }
         }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : ''))
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: uniqueId,
         id: id,

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

@@ -3,24 +3,24 @@
 exports[`TextBoxField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="textBoxField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container xmedium  primary  effect  borderColor_default  "
+            class="container xmedium primary effect borderColor_default"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
             data-test-id="textBoxIcon"
@@ -31,13 +31,13 @@ exports[`TextBoxField rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

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

@@ -19,6 +19,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _editorUtils = require("../../../utils/editorUtils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextEditorModule = _interopRequireDefault(require("./TextEditor.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -289,9 +291,9 @@ var TextEditor = /*#__PURE__*/function (_Component) {
 
         var customStyleTag = document.createElement('style');
         customStyleTag.type = 'text/css';
-        var customizedCSS = "pre {white-space: pre-wrap} ".concat(customCSS);
-        var fontCSS = "@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}\n      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}";
-        customStyleTag.textContent = "".concat(customizedCSS, " ").concat(fontCSS);
+        var fontCSS = "\n        @font-face {\n          font-family: Lato;\n          src: url(\"https://static.zohocdn.com/webfonts/lato2regular/font.woff2\")\n            format(\"woff2\");\n          font-weight: 400;\n          font-style: normal;\n          font-display: swap;\n        }\n        @font-face {\n          font-family: Lato;\n          src: url(\"https://static.zohocdn.com/webfonts/lato2bold/font.woff2\")\n            format(\"woff2\");\n          font-weight: 700 900;\n          font-style: normal;\n          font-display: swap;\n        }\n      ";
+        var customizedCSS = "pre {white-space: pre-wrap} ".concat(fontCSS, " ").concat(customCSS);
+        customStyleTag.textContent = "".concat(customizedCSS);
         iframeHead.appendChild(customStyleTag);
       }
     }
@@ -447,7 +449,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
       }), editorDoc && ImgLazyLoad ? /*#__PURE__*/_react["default"].createElement(ImgLazyLoad, {
         node: editorDoc
       }) : null, isReadOnly || isDisabled ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorModule["default"].readOnlyMask
+        className: (0, _cssUtility.cn)(_TextEditorModule["default"].readOnlyMask)
       }) : null);
     }
   }]);

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

@@ -3,15 +3,14 @@
 exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="textEditor large borderTop
-        light   editorHide  flex cover coldir"
+    class="flex fullSize column textEditor large borderTop light editorHide"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -21,6 +21,8 @@ var _TextEditorWrapper = _interopRequireDefault(require("../TextEditorWrapper/Te
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -157,7 +159,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           _customProps$Validati = customProps.ValidationMessageProps,
           ValidationMessageProps = _customProps$Validati === void 0 ? {} : _customProps$Validati;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')),
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
@@ -183,7 +185,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
         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)] : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : ''))
       }, /*#__PURE__*/_react["default"].createElement(_TextEditorWrapper["default"], _extends({
         needEditor: needEditor,
         onChange: this.handleChange,

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

@@ -3,18 +3,18 @@
 exports[`TextEditorField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  "
+    class="container"
     data-selector-id="textEditorField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
         class="container"
         data-selector-id="textEditorWrapper"
       >
         <textarea
-          class="textBox  container xsmall  defaultWidth primary needBorder noresize     effect  borderColor_default"
+          class="container xsmall defaultWidth primary needBorder noresize effect borderColor_default textBox"
           data-id="TextareaComp"
           data-selector-id="textarea"
           data-test-id="TextareaComp"

package/lib/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -21,6 +21,8 @@ var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/componen
 
 var _editorUtils = require("../../../utils/editorUtils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextEditorWrapperModule = _interopRequireDefault(require("./TextEditorWrapper.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -179,7 +181,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
       };
       var editorOptionsObject = Object.assign(defaultObj, editorOptions);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorWrapperModule["default"].container,
+        className: (0, _cssUtility.cn)(_TextEditorWrapperModule["default"].container),
         "data-selector-id": dataSelectorId
       }, !isEditorShow ? /*#__PURE__*/_react["default"].createElement(_Textarea["default"], _extends({
         onFocus: this.handleTextareaFocus,
@@ -202,7 +204,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
         isActive: isEditorShow,
         component: "div"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorWrapperModule["default"].textEditor
+        className: (0, _cssUtility.cn)(_TextEditorWrapperModule["default"].textEditor)
       }, isEditorShow && needEditor ? /*#__PURE__*/_react["default"].createElement(_TextEditor["default"], _extends({
         id: id,
         value: value,

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

@@ -7,7 +7,7 @@ exports[`TextEditorWrapper rendering the defult props 1`] = `
     data-selector-id="textEditorWrapper"
   >
     <textarea
-      class="textBox  container small  defaultWidth primary needBorder noresize  smallanimated   effect  borderColor_default"
+      class="container small defaultWidth primary needBorder noresize smallanimated effect borderColor_default textBox"
       data-id="TextareaComp"
       data-selector-id="textarea"
       data-test-id="TextareaComp"

package/lib/form/fields/TextareaField/TextareaField.js

@@ -23,6 +23,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -175,7 +177,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
       }));
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
@@ -202,11 +204,11 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           }
         }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : ''))
       }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FieldsModule["default"].hasChildren
+        className: (0, _cssUtility.cn)(_FieldsModule["default"].hasChildren)
       }, textAreaContent, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].rightPlaceholder, " ").concat(rightPlaceholderCustomClass)
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].rightPlaceholder, " ").concat(rightPlaceholderCustomClass))
       }, renderRightPlaceholderNode)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

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

@@ -3,14 +3,14 @@
 exports[`TextareaField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="textareaField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <textarea
-        class="  container xsmall  defaultWidth primary needBorder resizeY  xsmallanimated   effect  borderColor_default"
+        class="container xsmall defaultWidth primary needBorder resizeY xsmallanimated effect borderColor_default"
         data-id="property(undefined)"
         data-selector-id="textarea"
         data-test-id="property(undefined)"

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

@@ -19,6 +19,8 @@ var _utils = require("@zohodesk/utils");
 
 var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LabelColorsModule = _interopRequireDefault(require("@zohodesk/components/es/Label/LabelColors.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -143,7 +145,7 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
         customClass: "".concat(_ValidationMessageModule["default"].lable, " ").concat(customLabelClass),
         id: id
       }), tooltip ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette]),
+        className: (0, _cssUtility.cn)("".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette])),
         "data-title": tooltip
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-information57",

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

@@ -3,15 +3,14 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary "
+    class="primary"
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
     role="alert"
   >
     <label
-      class="label title xsmall mandatory font_default
-           cursor lable  "
+      class="label title xsmall mandatory font_default cursor lable"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/lib/form/layout/Field/Field.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldModule = _interopRequireDefault(require("./Field.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,13 +66,13 @@ var Field = /*#__PURE__*/function (_Component) {
           containerClass = _this$props.containerClass,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(containerClass ? containerClass : '', " ").concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " ")),
+        className: (0, _cssUtility.cn)("".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " "), " ").concat(containerClass ? containerClass : '')),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : '', " ", "fieldWidth_".concat(width))
+        className: (0, _cssUtility.cn)("".concat("fieldWidth_".concat(width), " ", className ? className : ''))
       }, children)), rowBreak && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FieldModule["default"].rowBreak
+        className: (0, _cssUtility.cn)(_FieldModule["default"].rowBreak)
       }));
     }
   }]);