@zohodesk/components 1.6.20 → 1.6.22-exp-1

package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Textbox component Should be render autoComplete false  1`] = `
 <DocumentFragment>
   <input
     autocomplete="off"
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -17,7 +17,7 @@ exports[`Textbox component Should be render autoComplete false  1`] = `
 exports[`Textbox component Should be render autoComplete true  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -30,7 +30,7 @@ exports[`Textbox component Should be render autoComplete true  1`] = `
 exports[`Textbox component Should be render autofocus false  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -43,7 +43,7 @@ exports[`Textbox component Should be render autofocus false  1`] = `
 exports[`Textbox component Should be render autofocus true  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -56,7 +56,7 @@ exports[`Textbox component Should be render autofocus true  1`] = `
 exports[`Textbox component Should be render customClass  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  TextBoxCustomClass"
+    class="container medium default border effect borderColor_default TextBoxCustomClass"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -69,7 +69,7 @@ exports[`Textbox component Should be render customClass  1`] = `
 exports[`Textbox component Should be render htmlId  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -83,7 +83,7 @@ exports[`Textbox component Should be render htmlId  1`] = `
 exports[`Textbox component Should be render id 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -97,7 +97,7 @@ exports[`Textbox component Should be render id 1`] = `
 exports[`Textbox component Should be render isClickable is ture  1`] = `
 <DocumentFragment>
   <input
-    class=" pointer container medium  default border effect  borderColor_default  "
+    class="pointer container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -110,7 +110,7 @@ exports[`Textbox component Should be render isClickable is ture  1`] = `
 exports[`Textbox component Should be render isDisabled is false and needEffect is false 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -123,7 +123,7 @@ exports[`Textbox component Should be render isDisabled is false and needEffect i
 exports[`Textbox component Should be render isDisabled is true and needEffect is false 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border   borderColor_default  "
+    class="container medium default border borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -137,7 +137,7 @@ exports[`Textbox component Should be render isDisabled is true and needEffect is
 exports[`Textbox component Should be render isDisabled is true and needEffect is true 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -151,7 +151,7 @@ exports[`Textbox component Should be render isDisabled is true and needEffect is
 exports[`Textbox component Should be render isFocus is true  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect focus borderColor_default  "
+    class="container medium default border effect focus borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -164,7 +164,7 @@ exports[`Textbox component Should be render isFocus is true  1`] = `
 exports[`Textbox component Should be render isReadOnly is false and needEffect is false 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -177,7 +177,7 @@ exports[`Textbox component Should be render isReadOnly is false and needEffect i
 exports[`Textbox component Should be render isReadOnly is true and needEffect is false 1`] = `
 <DocumentFragment>
   <input
-    class="readonly  container medium  default border   borderColor_default  "
+    class="readonly container medium default border borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -191,7 +191,7 @@ exports[`Textbox component Should be render isReadOnly is true and needEffect is
 exports[`Textbox component Should be render isReadOnly is true and needEffect is true 1`] = `
 <DocumentFragment>
   <input
-    class="readonly  container medium  default border effect  borderColor_default  "
+    class="readonly container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -205,7 +205,7 @@ exports[`Textbox component Should be render isReadOnly is true and needEffect is
 exports[`Textbox component Should be render isScrollPrevent is true  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default inputDotted "
+    class="container medium default border effect borderColor_default inputDotted"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -218,7 +218,7 @@ exports[`Textbox component Should be render isScrollPrevent is true  1`] = `
 exports[`Textbox component Should be render maxLength in number 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -232,7 +232,7 @@ exports[`Textbox component Should be render maxLength in number 1`] = `
 exports[`Textbox component Should be render maxLength in string 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -246,7 +246,7 @@ exports[`Textbox component Should be render maxLength in string 1`] = `
 exports[`Textbox component Should be render name 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -260,7 +260,7 @@ exports[`Textbox component Should be render name 1`] = `
 exports[`Textbox component Should be render needAppearance is false  1`] = `
 <DocumentFragment>
   <input
-    class="  basic borderColor_default  "
+    class="basic borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -273,7 +273,7 @@ exports[`Textbox component Should be render needAppearance is false  1`] = `
 exports[`Textbox component Should be render needBorder is false   1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default  effect  borderColor_default  "
+    class="container medium default effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -286,7 +286,7 @@ exports[`Textbox component Should be render needBorder is false   1`] = `
 exports[`Textbox component Should be render needReadOnlyStyle is false   1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -299,7 +299,7 @@ exports[`Textbox component Should be render needReadOnlyStyle is false   1`] = `
 exports[`Textbox component Should be render needReadOnlyStyle is false and isReadOnly true  1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -313,7 +313,7 @@ exports[`Textbox component Should be render needReadOnlyStyle is false and isRea
 exports[`Textbox component Should be render needReadOnlyStyle is true and isReadOnly true   1`] = `
 <DocumentFragment>
   <input
-    class="readonly  container medium  default border effect  borderColor_default  "
+    class="readonly container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -327,7 +327,7 @@ exports[`Textbox component Should be render needReadOnlyStyle is true and isRead
 exports[`Textbox component Should be render placeholder 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -341,7 +341,7 @@ exports[`Textbox component Should be render placeholder 1`] = `
 exports[`Textbox component Should be render value in number 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -354,7 +354,7 @@ exports[`Textbox component Should be render value in number 1`] = `
 exports[`Textbox component Should be render value in string 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -367,7 +367,7 @@ exports[`Textbox component Should be render value in string 1`] = `
 exports[`Textbox component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -380,7 +380,7 @@ exports[`Textbox component Should be render with the basic set of default props
 exports[`Textbox component Should render Varient - default 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -393,7 +393,7 @@ exports[`Textbox component Should render Varient - default 1`] = `
 exports[`Textbox component Should render Varient - light 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  light border effect  borderColor_default  "
+    class="container medium light border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -406,7 +406,7 @@ exports[`Textbox component Should render Varient - light 1`] = `
 exports[`Textbox component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  primary border effect  borderColor_default  "
+    class="container medium primary border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -419,7 +419,7 @@ exports[`Textbox component Should render Varient - primary 1`] = `
 exports[`Textbox component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  secondary border effect  borderColor_default  "
+    class="container medium secondary border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -432,7 +432,7 @@ exports[`Textbox component Should render Varient - secondary 1`] = `
 exports[`Textbox component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -445,7 +445,7 @@ exports[`Textbox component Should render borderColor - default 1`] = `
 exports[`Textbox component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_transparent  "
+    class="container medium default border effect borderColor_transparent"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -458,7 +458,7 @@ exports[`Textbox component Should render borderColor - transparent 1`] = `
 exports[`Textbox component Should render size  - medium 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -471,7 +471,7 @@ exports[`Textbox component Should render size  - medium 1`] = `
 exports[`Textbox component Should render size  - small 1`] = `
 <DocumentFragment>
   <input
-    class="  container small  default border effect  borderColor_default  "
+    class="container small default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -484,7 +484,7 @@ exports[`Textbox component Should render size  - small 1`] = `
 exports[`Textbox component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <input
-    class="  container xmedium  default border effect  borderColor_default  "
+    class="container xmedium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -497,7 +497,7 @@ exports[`Textbox component Should render size  - xmedium 1`] = `
 exports[`Textbox component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <input
-    class="  container xsmall  default border effect  borderColor_default  "
+    class="container xsmall default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -510,7 +510,7 @@ exports[`Textbox component Should render size  - xsmall 1`] = `
 exports[`Textbox component Should render type  - number 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -523,7 +523,7 @@ exports[`Textbox component Should render type  - number 1`] = `
 exports[`Textbox component Should render type  - password 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -536,7 +536,7 @@ exports[`Textbox component Should render type  - password 1`] = `
 exports[`Textbox component Should render type  - text 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -562,7 +562,7 @@ exports[`Textbox component rendering ally ariaExpanded,ariaHaspopup,ariaRequired
     aria-owns="textboxAriaOwns"
     aria-readonly="false"
     aria-required="false"
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -589,7 +589,7 @@ exports[`Textbox component rendering ally ariaExpanded,ariaHaspopup,ariaRequired
     aria-owns="textboxAriaOwns"
     aria-readonly="true"
     aria-required="true"
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"
@@ -603,7 +603,7 @@ exports[`Textbox component rendering ally ariaExpanded,ariaHaspopup,ariaRequired
 exports[`Textbox component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <input
-    class="  container medium  default border effect  borderColor_default  "
+    class="container medium default border effect borderColor_default"
     data-id="textBox"
     data-selector-id="textBox"
     data-test-id="textBox"

package/es/TextBoxIcon/TextBoxIcon.js

@@ -136,7 +136,7 @@ export default class TextBoxIcon extends React.Component {
       hasEffect: needEffect,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly && needReadOnlyStyle,
-      customClass: ` ${style.container} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      customClass: ` ${style.container} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''} ${customTBoxWrap} `,
       title: isDisabled ? title : null,
       onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
       customProps: {