@zohodesk/components 1.6.21 → 1.6.22

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -180,7 +180,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         hasEffect: needEffect,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly && needReadOnlyStyle,
-        customClass: " ".concat(_TextBoxIconModule["default"].container, " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
+        customClass: " ".concat(_TextBoxIconModule["default"].container, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : '', " ").concat(customTBoxWrap, " "),
         title: isDisabled ? title : null,
         onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
         customProps: {

package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap

@@ -95,7 +95,7 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is false  1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container iconOnHoverStyle"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -134,7 +134,7 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is true  1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly"
+    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder    container iconOnHoverReadonly"
     data-selector-id="textBoxIcon"
     data-title=""
   >
@@ -712,7 +712,7 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-delete    rtl "
+              class="zd_font_icons  rtl basic icon-delete   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -856,7 +856,7 @@ exports[`TextBoxIcon component Should be render value is string and length great
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-delete    rtl "
+              class="zd_font_icons  rtl basic icon-delete   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1537,7 +1537,7 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  customTBoxWrapTextBoxIcon"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1623,7 +1623,7 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-delete    rtl "
+              class="zd_font_icons  rtl basic icon-delete   "
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"

package/lib/Textarea/Textarea.js

@@ -133,7 +133,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
-        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)]),
+        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass, " "),
         placeholder: placeHolder
       }, options, {
         "data-id": dataId,

package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Textarea component Should be render  cols only  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container  defaultHeight  default needBorder noresize     effect  borderColor_default"
+    class=" container  defaultHeight  default needBorder noresize     effect  borderColor_default  "
     cols="3"
     data-id="TextareaComp"
     data-selector-id="textarea"
@@ -15,7 +15,7 @@ exports[`Textarea component Should be render  cols only  1`] = `
 exports[`Textarea component Should be render autofocus true  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -26,7 +26,7 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 exports[`Textarea component Should be render custom Attributes  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -38,7 +38,7 @@ exports[`Textarea component Should be render custom Attributes  1`] = `
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
-    class="textAreaCustomClass  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default textAreaCustomClass "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -49,7 +49,7 @@ exports[`Textarea component Should be render customClass  1`] = `
 exports[`Textarea component Should be render htmlId  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -61,7 +61,7 @@ exports[`Textarea component Should be render htmlId  1`] = `
 exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -72,7 +72,7 @@ exports[`Textarea component Should be render isDisabled is false and needEffect
 exports[`Textarea component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize       borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize       borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -84,7 +84,7 @@ exports[`Textarea component Should be render isDisabled is true 1`] = `
 exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize       borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize       borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -96,7 +96,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -108,7 +108,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -119,7 +119,7 @@ exports[`Textarea component Should be render isReadOnly is false and needEffect
 exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small  defaultWidth default needBorder noresize       borderColor_default"
+    class="readonly container small  defaultWidth default needBorder noresize       borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -131,7 +131,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="readonly container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -143,7 +143,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render maxLength in number 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -155,7 +155,7 @@ exports[`Textarea component Should be render maxLength in number 1`] = `
 exports[`Textarea component Should be render maxLength in string 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -167,7 +167,7 @@ exports[`Textarea component Should be render maxLength in string 1`] = `
 exports[`Textarea component Should be render needAppearance is false  1`] = `
 <DocumentFragment>
   <textarea
-    class="  basic borderColor_default"
+    class=" basic borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -178,7 +178,7 @@ exports[`Textarea component Should be render needAppearance is false  1`] = `
 exports[`Textarea component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default noBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default noBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -189,7 +189,7 @@ exports[`Textarea component Should be render needBorder is false 1`] = `
 exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -200,7 +200,7 @@ exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 exports[`Textarea component Should be render placeholder 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -212,7 +212,7 @@ exports[`Textarea component Should be render placeholder 1`] = `
 exports[`Textarea component Should be render rows and cols  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container    default needBorder noresize     effect  borderColor_default"
+    class=" container    default needBorder noresize     effect  borderColor_default  "
     cols="3"
     data-id="TextareaComp"
     data-selector-id="textarea"
@@ -225,7 +225,7 @@ exports[`Textarea component Should be render rows and cols  1`] = `
 exports[`Textarea component Should be render rows only  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container   defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container   defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -237,7 +237,7 @@ exports[`Textarea component Should be render rows only  1`] = `
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -250,7 +250,7 @@ exports[`Textarea component Should be render text 1`] = `
 exports[`Textarea component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -261,7 +261,7 @@ exports[`Textarea component Should be render with the basic set of default props
 exports[`Textarea component Should render Varient - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -272,7 +272,7 @@ exports[`Textarea component Should render Varient - default 1`] = `
 exports[`Textarea component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth primary needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth primary needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -283,7 +283,7 @@ exports[`Textarea component Should render Varient - primary 1`] = `
 exports[`Textarea component Should render animated is false - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container large  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -294,7 +294,7 @@ exports[`Textarea component Should render animated is false - large 1`] = `
 exports[`Textarea component Should render animated is false - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container medium  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -305,7 +305,7 @@ exports[`Textarea component Should render animated is false - medium 1`] = `
 exports[`Textarea component Should render animated is false - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -316,7 +316,7 @@ exports[`Textarea component Should render animated is false - small 1`] = `
 exports[`Textarea component Should render animated is false - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container xmedium  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -327,7 +327,7 @@ exports[`Textarea component Should render animated is false - xmedium 1`] = `
 exports[`Textarea component Should render animated is false - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container xsmall  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -338,7 +338,7 @@ exports[`Textarea component Should render animated is false - xsmall 1`] = `
 exports[`Textarea component Should render animated is true - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
+    class=" container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -349,7 +349,7 @@ exports[`Textarea component Should render animated is true - large 1`] = `
 exports[`Textarea component Should render animated is true - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
+    class=" container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -360,7 +360,7 @@ exports[`Textarea component Should render animated is true - medium 1`] = `
 exports[`Textarea component Should render animated is true - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -371,7 +371,7 @@ exports[`Textarea component Should render animated is true - small 1`] = `
 exports[`Textarea component Should render animated is true - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
+    class=" container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -382,7 +382,7 @@ exports[`Textarea component Should render animated is true - xmedium 1`] = `
 exports[`Textarea component Should render animated is true - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
+    class=" container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -393,7 +393,7 @@ exports[`Textarea component Should render animated is true - xsmall 1`] = `
 exports[`Textarea component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -404,7 +404,7 @@ exports[`Textarea component Should render borderColor - default 1`] = `
 exports[`Textarea component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_transparent"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_transparent  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -415,7 +415,7 @@ exports[`Textarea component Should render borderColor - transparent 1`] = `
 exports[`Textarea component Should render resize  - both 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder resizeboth     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder resizeboth     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -426,7 +426,7 @@ exports[`Textarea component Should render resize  - both 1`] = `
 exports[`Textarea component Should render resize  - horizontal 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder resizeX     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder resizeX     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -437,7 +437,7 @@ exports[`Textarea component Should render resize  - horizontal 1`] = `
 exports[`Textarea component Should render resize  - none 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -448,7 +448,7 @@ exports[`Textarea component Should render resize  - none 1`] = `
 exports[`Textarea component Should render resize  - vertical 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder resizeY     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder resizeY     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -459,7 +459,7 @@ exports[`Textarea component Should render resize  - vertical 1`] = `
 exports[`Textarea component Should render size  - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
+    class=" container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -470,7 +470,7 @@ exports[`Textarea component Should render size  - large 1`] = `
 exports[`Textarea component Should render size  - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
+    class=" container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -481,7 +481,7 @@ exports[`Textarea component Should render size  - medium 1`] = `
 exports[`Textarea component Should render size  - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -492,7 +492,7 @@ exports[`Textarea component Should render size  - small 1`] = `
 exports[`Textarea component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
+    class=" container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -503,7 +503,7 @@ exports[`Textarea component Should render size  - xmedium 1`] = `
 exports[`Textarea component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
+    class=" container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -516,7 +516,7 @@ exports[`Textarea component rendering ally clearLabel 1`] = `
   <textarea
     aria-label="TextAreaAriaLabel"
     aria-labelledby="TexareaAriaLabelledby"
-    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" container small  defaultWidth default needBorder noresize     effect  borderColor_default  "
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"

package/lib/Tooltip/Tooltip.js

@@ -558,7 +558,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
       var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
+        className: "".concat(_TooltipModule["default"].tooltiptext, " ").concat(customClass),
         style: {
           left: left,
           top: top,

package/lib/Typography/css/cssJSLogic.js

@@ -73,7 +73,7 @@ function cssJSLogic(_ref) {
     finalLineHeight = _utils2.lineheightMapping[finalLineHeight];
   }
 
-  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, finalReset), _defineProperty(_compileClassNames, style.dotted, finalDotted), _defineProperty(_compileClassNames, style["size".concat(finalSize)], !!finalSize), _defineProperty(_compileClassNames, style["lineclamp_".concat(finalLineClamp)], !!finalLineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat(finalLineHeight)], !!finalLineHeight), _defineProperty(_compileClassNames, style["display_".concat(finalDisplay)], !!finalDisplay), _defineProperty(_compileClassNames, style["font_".concat(finalWeight)], !!finalWeight), _defineProperty(_compileClassNames, style["fontStyles_".concat(finalTypeFace)], !!finalTypeFace), _defineProperty(_compileClassNames, style["textalign_".concat(finalTextAlign)], !!finalTextAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat(finalLetterSpacing)], !!finalLetterSpacing), _defineProperty(_compileClassNames, style["transform_".concat(finalTransform)], !!finalTransform), _defineProperty(_compileClassNames, style["decoration_".concat(finalDecoration)], !!finalDecoration), _defineProperty(_compileClassNames, finalClassName, !!finalClassName), _defineProperty(_compileClassNames, style["wordBreak_".concat(finalWordBreak)], !!finalWordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat(finalWordWrap)], !!finalWordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat(finalWhiteSpace)], !!finalWhiteSpace), _compileClassNames));
+  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, finalReset), _defineProperty(_compileClassNames, style.dotted, finalDotted), _defineProperty(_compileClassNames, style["size".concat(finalSize)], !!finalSize), _defineProperty(_compileClassNames, style["lineclamp_".concat(finalLineClamp)], !!finalLineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat(finalLineHeight)], !!finalLineHeight), _defineProperty(_compileClassNames, style["display_".concat(finalDisplay)], !!finalDisplay), _defineProperty(_compileClassNames, style["font_".concat(finalWeight)], !!finalWeight), _defineProperty(_compileClassNames, style["fontStyles_".concat(finalTypeFace)], !!finalTypeFace), _defineProperty(_compileClassNames, style["textalign_".concat(finalTextAlign)], !!finalTextAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat(finalLetterSpacing)], !!finalLetterSpacing), _defineProperty(_compileClassNames, style["transform_".concat(finalTransform)], !!finalTransform), _defineProperty(_compileClassNames, style["decoration_".concat(finalDecoration)], !!finalDecoration), _defineProperty(_compileClassNames, style["wordBreak_".concat(finalWordBreak)], !!finalWordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat(finalWordWrap)], !!finalWordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat(finalWhiteSpace)], !!finalWhiteSpace), _defineProperty(_compileClassNames, finalClassName, !!finalClassName), _compileClassNames));
   return {
     typographyClass: typographyClass
   };

package/lib/deprecated/Switch/Switch.js

@@ -62,7 +62,7 @@ var Switch = function Switch(props) {
     isCover: false,
     alignBox: "row",
     isInline: true,
-    className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
+    className: "".concat(_SwitchModule["default"].container, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect, " ").concat(customSwitchWrap, " "),
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -11,7 +11,7 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
   >
     <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"
@@ -32,7 +32,7 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
   >
     <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"
@@ -53,7 +53,7 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
   >
     <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"
@@ -74,7 +74,7 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
   >
     <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"
@@ -96,7 +96,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
   >
     <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"
@@ -117,7 +117,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      class="zd_font_icons  basic icon-down   arrowIcon_iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -138,7 +138,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
   >
     <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"
@@ -159,7 +159,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
   >
     <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"
@@ -189,7 +189,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
   >
     <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"
@@ -210,7 +210,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
   >
     <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/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -44,7 +44,7 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  customIconClass  "
+        class="zd_font_icons  basic icon-plus   customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
@@ -949,7 +949,7 @@ exports[`Button - Component Should render with iconName and iconSize  1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons  basic icon-plus   "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
@@ -981,7 +981,7 @@ exports[`Button - Component Should render with iconPlacement  1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons  basic icon-plus   "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"