@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

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

@@ -3,10 +3,10 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -50,6 +50,9 @@ exports[`TextBoxIcon component Should be render children 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -57,10 +60,10 @@ exports[`TextBoxIcon component Should be render children 1`] = `
 exports[`TextBoxIcon component Should be render htmlId  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -92,6 +95,9 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -99,10 +105,10 @@ 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="varClass customContainer  border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect   iconOnHoverStyle flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -133,6 +139,9 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -140,11 +149,10 @@ 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="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
-    data-id="textBoxIcon"
+    class="container disabled   iconOnHoverReadonly flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
-    data-title=""
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -177,6 +185,9 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -184,10 +195,10 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -231,6 +242,9 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -238,10 +252,10 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 exports[`TextBoxIcon component Should be render id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -273,6 +287,9 @@ exports[`TextBoxIcon component Should be render id 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -280,10 +297,10 @@ exports[`TextBoxIcon component Should be render id 1`] = `
 exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -314,6 +331,9 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -321,11 +341,10 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container disabled    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
-    data-title=""
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -357,6 +376,9 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -364,10 +386,10 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect effectFocused   flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -398,6 +420,9 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -405,10 +430,10 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container readonly    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -440,6 +465,9 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -447,10 +475,10 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
 exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -482,6 +510,9 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -489,10 +520,10 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 exports[`TextBoxIcon component Should be render name 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -524,6 +555,9 @@ exports[`TextBoxIcon component Should be render name 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -531,10 +565,10 @@ exports[`TextBoxIcon component Should be render name 1`] = `
 exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   effect     container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -572,10 +606,10 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container readonly    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -607,6 +641,9 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -614,10 +651,10 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -648,6 +685,9 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -655,10 +695,10 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
 exports[`TextBoxIcon component Should be render placeholder 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -690,6 +730,9 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -697,10 +740,10 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
 exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -756,6 +799,9 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
         </button>
       </div>
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -763,10 +809,10 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 exports[`TextBoxIcon component Should be render title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container disabled    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
     data-title="TextBoxIconTitle"
   >
     <div
@@ -799,6 +845,9 @@ exports[`TextBoxIcon component Should be render title 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -806,10 +855,10 @@ exports[`TextBoxIcon component Should be render title 1`] = `
 exports[`TextBoxIcon component Should be render value is number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -840,6 +889,9 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -847,10 +899,10 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
 exports[`TextBoxIcon component Should be render value is string and length greater than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -906,6 +958,9 @@ exports[`TextBoxIcon component Should be render value is string and length great
         </button>
       </div>
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -913,10 +968,10 @@ exports[`TextBoxIcon component Should be render value is string and length great
 exports[`TextBoxIcon component Should be render value is string and length less than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -947,6 +1002,9 @@ exports[`TextBoxIcon component Should be render value is string and length less
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -954,10 +1012,10 @@ exports[`TextBoxIcon component Should be render value is string and length less
 exports[`TextBoxIcon component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -988,6 +1046,9 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -995,10 +1056,10 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
 exports[`TextBoxIcon component Should render Varient - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1029,6 +1090,9 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1036,10 +1100,10 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
 exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1070,6 +1134,9 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1077,10 +1144,10 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1111,6 +1178,9 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1118,10 +1188,10 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1152,6 +1222,9 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1159,10 +1232,10 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1193,6 +1266,9 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_error "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1200,10 +1276,10 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1234,6 +1310,9 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_transparent "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1241,10 +1320,10 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 exports[`TextBoxIcon component Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1275,6 +1354,9 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1282,10 +1364,10 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
 exports[`TextBoxIcon component Should render size  - small 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1316,6 +1398,9 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1323,10 +1408,10 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
 exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1357,6 +1442,9 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1364,10 +1452,10 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1398,6 +1486,9 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1405,10 +1496,10 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 exports[`TextBoxIcon component Should render type  - number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1439,6 +1530,9 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1446,10 +1540,10 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
 exports[`TextBoxIcon component Should render type  - password 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1480,6 +1574,9 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1487,10 +1584,10 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
 exports[`TextBoxIcon component Should render type  - text 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1521,6 +1618,9 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1528,10 +1628,10 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
 exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1563,6 +1663,9 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1570,10 +1673,10 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect  customTBoxWrapTextBoxIcon  flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1604,6 +1707,9 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
         data-test-id="containerComponent"
       />
     </div>
+    <div
+      class="line borderColor_default customTBoxLineTextBox"
+    />
   </div>
 </DocumentFragment>
 `;
@@ -1611,10 +1717,10 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
 exports[`TextBoxIcon component rendering the i18n value 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-    data-id="textBoxIcon"
+    class="container effect    flex rowdir"
+    data-id="containerComponent"
     data-selector-id="textBoxIcon"
-    data-test-id="textBoxIcon"
+    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1670,6 +1776,9 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
         </button>
       </div>
     </div>
+    <div
+      class="line borderColor_default "
+    />
   </div>
 </DocumentFragment>
 `;