@zohodesk/components 1.4.21 → 1.4.22

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

@@ -3,10 +3,8 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -50,9 +48,6 @@ exports[`TextBoxIcon component Should be render children 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -60,10 +55,8 @@ exports[`TextBoxIcon component Should be render children 1`] = `
 exports[`TextBoxIcon component Should be render htmlId  1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -95,9 +88,6 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -105,10 +95,8 @@ 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="container effect   iconOnHoverStyle flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -139,9 +127,6 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -149,10 +134,9 @@ 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="container disabled   iconOnHoverReadonly flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-title=""
   >
     <div
       class="grow basis shrinkOff"
@@ -185,9 +169,6 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -195,10 +176,8 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -242,9 +221,6 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -252,10 +228,8 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 exports[`TextBoxIcon component Should be render id 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -287,9 +261,6 @@ exports[`TextBoxIcon component Should be render id 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -297,10 +268,8 @@ exports[`TextBoxIcon component Should be render id 1`] = `
 exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -331,9 +300,6 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -341,10 +307,9 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="container disabled    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-title=""
   >
     <div
       class="grow basis shrinkOff"
@@ -376,9 +341,6 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -386,10 +348,8 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 <DocumentFragment>
   <div
-    class="container effect effectFocused   flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -420,9 +380,6 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -430,10 +387,8 @@ 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="container readonly    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -465,9 +420,6 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -475,10 +427,8 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
 exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -510,9 +460,6 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -520,10 +467,8 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 exports[`TextBoxIcon component Should be render name 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -555,9 +500,6 @@ exports[`TextBoxIcon component Should be render name 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -565,10 +507,8 @@ exports[`TextBoxIcon component Should be render name 1`] = `
 exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer   effect     container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -606,10 +546,8 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="container readonly    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -641,9 +579,6 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -651,10 +586,8 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -685,9 +618,6 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -695,10 +625,8 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
 exports[`TextBoxIcon component Should be render placeholder 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -730,9 +658,6 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -740,10 +665,8 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
 exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -799,9 +722,6 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -809,10 +729,8 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 exports[`TextBoxIcon component Should be render title 1`] = `
 <DocumentFragment>
   <div
-    class="container disabled    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
     data-title="TextBoxIconTitle"
   >
     <div
@@ -845,9 +763,6 @@ exports[`TextBoxIcon component Should be render title 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -855,10 +770,8 @@ exports[`TextBoxIcon component Should be render title 1`] = `
 exports[`TextBoxIcon component Should be render value is number 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -889,9 +802,6 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -899,10 +809,8 @@ 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="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -958,9 +866,6 @@ exports[`TextBoxIcon component Should be render value is string and length great
         </button>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -968,10 +873,8 @@ 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="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1002,9 +905,45 @@ exports[`TextBoxIcon component Should be render value is string and length less
         data-test-id="containerComponent"
       />
     </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-selector-id="textBoxIcon_data_selector_id"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        class="  container medium  default  effect  borderColor_default  "
+        data-id="textBoxIcon"
+        data-selector-id="textBoxIcon_data_selector_id"
+        data-test-id="textBoxIcon"
+        maxlength="250"
+        type="text"
+        value=""
+      />
+    </div>
     <div
-      class="line borderColor_default "
-    />
+      class="iconContainer  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -1012,10 +951,8 @@ 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="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1046,9 +983,6 @@ 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>
 `;
@@ -1056,10 +990,8 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
 exports[`TextBoxIcon component Should render Varient - default 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1090,9 +1022,6 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1100,10 +1029,8 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
 exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1134,9 +1061,6 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1144,10 +1068,8 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1178,9 +1100,6 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1188,10 +1107,8 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1222,9 +1139,6 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1232,10 +1146,8 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1266,9 +1178,6 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_error "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1276,10 +1185,8 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1310,9 +1217,6 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_transparent "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1320,10 +1224,8 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 exports[`TextBoxIcon component Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1354,9 +1256,6 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1364,10 +1263,8 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
 exports[`TextBoxIcon component Should render size  - small 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1398,9 +1295,6 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1408,10 +1302,8 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
 exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1442,9 +1334,6 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1452,10 +1341,8 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1486,9 +1373,6 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1496,10 +1380,8 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 exports[`TextBoxIcon component Should render type  - number 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1530,9 +1412,6 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1540,10 +1419,8 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
 exports[`TextBoxIcon component Should render type  - password 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1574,9 +1451,6 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1584,10 +1458,8 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
 exports[`TextBoxIcon component Should render type  - text 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1618,9 +1490,6 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1628,10 +1497,8 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
 exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1663,9 +1530,6 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1673,10 +1537,8 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="container effect  customTBoxWrapTextBoxIcon  flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1707,9 +1569,6 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default customTBoxLineTextBox"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1717,10 +1576,8 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
 exports[`TextBoxIcon component rendering the i18n value 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
   >
     <div
       class="grow basis shrinkOff"
@@ -1776,9 +1633,6 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;