@zohodesk/components 1.4.21 → 1.4.22

package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

@@ -30,10 +30,8 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="container effect  input iconSelect  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -96,9 +94,6 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/Select/props/defaultProps.js

@@ -48,7 +48,8 @@ var Select_defaultProps = {
   customProps: {},
   isLoading: false,
   isAbsolutePositioningNeeded: true,
-  allowValueFallback: true
+  allowValueFallback: true,
+  inputFieldLineA11y: {}
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -116,7 +116,9 @@ var Select_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   allowValueFallback: _propTypes["default"].bool,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
-  renderCustomSearchClearComponent: _propTypes["default"].func
+  renderCustomSearchClearComponent: _propTypes["default"].func,
+  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  inputFieldLineA11y: _propTypes["default"].object
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/lib/TextBox/__tests__/TextBox.spec.js

@@ -2,7 +2,7 @@
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Textbox = _interopRequireDefault(require("../Textbox"));
+var _TextBox = _interopRequireDefault(require("../TextBox"));
 
 var _react2 = require("@testing-library/react");
 
@@ -14,13 +14,13 @@ describe('Textbox component', function () {
   var variant = ['primary', 'secondary', 'default', 'light'];
   var borderColor = ['transparent', 'default'];
   test('Should be render with the basic set of default props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(type)('Should render type  - %s', function (type) {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       type: type
     })),
         asFragment = _render2.asFragment;
@@ -28,7 +28,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render name', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       name: "TextboxName"
     })),
         asFragment = _render3.asFragment;
@@ -36,7 +36,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render id', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       id: "TextboxId"
     })),
         asFragment = _render4.asFragment;
@@ -44,7 +44,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render maxLength in number', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       maxLength: "11"
     })),
         asFragment = _render5.asFragment;
@@ -52,7 +52,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render maxLength in string', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       maxLength: "Ten"
     })),
         asFragment = _render6.asFragment;
@@ -60,7 +60,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render placeholder', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       placeHolder: "TextBoxPlaceHolder"
     })),
         asFragment = _render7.asFragment;
@@ -68,7 +68,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(size)('Should render size  - %s', function (size) {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       size: size
     })),
         asFragment = _render8.asFragment;
@@ -76,7 +76,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isReadOnly is true and needEffect is true', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isReadOnly: true,
       needEffect: true
     })),
@@ -85,7 +85,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isReadOnly is true and needEffect is false', function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isReadOnly: true,
       needEffect: false
     })),
@@ -94,7 +94,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isReadOnly is false and needEffect is false', function () {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isReadOnly: false,
       needEffect: false
     })),
@@ -103,7 +103,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isDisabled is true and needEffect is true', function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isDisabled: true,
       needEffect: true
     })),
@@ -112,7 +112,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isDisabled is true and needEffect is false', function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isDisabled: true,
       needEffect: false
     })),
@@ -121,7 +121,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isDisabled is false and needEffect is false', function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isDisabled: false,
       needEffect: false
     })),
@@ -130,7 +130,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(variant)('Should render Varient - %s', function (variant) {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       variant: variant
     })),
         asFragment = _render15.asFragment;
@@ -138,7 +138,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render needBorder is false  ', function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       needBorder: false
     })),
         asFragment = _render16.asFragment;
@@ -146,7 +146,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render value in number', function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       value: 20
     })),
         asFragment = _render17.asFragment;
@@ -154,7 +154,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render value in string', function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       value: "Tewnty"
     })),
         asFragment = _render18.asFragment;
@@ -162,7 +162,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render needReadOnlyStyle is false and isReadOnly true ', function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       needReadOnlyStyle: false,
       isReadOnly: true
     })),
@@ -171,7 +171,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render needReadOnlyStyle is false  ', function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       needReadOnlyStyle: false
     })),
         asFragment = _render20.asFragment;
@@ -179,7 +179,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render needReadOnlyStyle is true and isReadOnly true  ', function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       needReadOnlyStyle: true,
       isReadOnly: true
     })),
@@ -188,7 +188,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render needAppearance is false ', function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       needAppearance: false
     })),
         asFragment = _render22.asFragment;
@@ -196,7 +196,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isClickable is ture ', function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isClickable: true
     })),
         asFragment = _render23.asFragment;
@@ -204,7 +204,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render autofocus false ', function () {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       autofocus: false
     })),
         asFragment = _render24.asFragment;
@@ -212,7 +212,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render autofocus true ', function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       autofocus: true
     })),
         asFragment = _render25.asFragment;
@@ -220,7 +220,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render autoComplete true ', function () {
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       autoComplete: true
     })),
         asFragment = _render26.asFragment;
@@ -228,7 +228,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render autoComplete false ', function () {
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       autoComplete: false
     })),
         asFragment = _render27.asFragment;
@@ -236,7 +236,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(borderColor)('Should render borderColor - %s', function (borderColor) {
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       borderColor: borderColor
     })),
         asFragment = _render28.asFragment;
@@ -244,7 +244,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render htmlId ', function () {
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       htmlId: "textBoxhtmlId"
     })),
         asFragment = _render29.asFragment;
@@ -252,7 +252,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isFocus is true ', function () {
-    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isFocus: true
     })),
         asFragment = _render30.asFragment;
@@ -260,7 +260,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render isScrollPrevent is true ', function () {
-    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       isScrollPrevent: true
     })),
         asFragment = _render31.asFragment;
@@ -268,7 +268,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is true', function () {
-    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       a11y: {
         ariaLabel: 'textboxAriaLabel',
         ariaAutocomplete: 'textboxAriaAutocomplete',
@@ -291,7 +291,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is false', function () {
-    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       a11y: {
         ariaLabel: 'textboxAriaLabel',
         ariaAutocomplete: 'textboxAriaAutocomplete',
@@ -314,7 +314,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render customClass ', function () {
-    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       customClass: "TextBoxCustomClass"
     })),
         asFragment = _render34.asFragment;
@@ -322,7 +322,7 @@ describe('Textbox component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering the Custom Props', function () {
-    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textbox["default"], {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
       customProps: {
         'textbox-props': "true"
       }

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -17,6 +17,8 @@ var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
 var _Layout = require("../Layout");
 
+var _InputFieldLine = _interopRequireDefault(require("../shared/InputFieldLine/InputFieldLine"));
+
 var _icons = require("@zohodesk/icons");
 
 var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
@@ -166,20 +168,25 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           _customClass$customTe = customClass.customTextBox,
           customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe,
           _customClass$customTB2 = customClass.customTBoxIcon,
-          customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2,
-          _customClass$customTB3 = customClass.customTBoxLine,
-          customTBoxLine = _customClass$customTB3 === void 0 ? '' : _customClass$customTB3;
+          customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2;
       var _i18nKeys$clearText = i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear' : _i18nKeys$clearText;
       var _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        isCover: false,
-        className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : _TextBoxIconModule["default"].readonly : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
-        dataSelectorId: dataSelectorId,
-        "data-title": isDisabled ? title : null,
-        onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
+      return /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+        isActive: isActive || isFocus,
+        border: needBorder ? 'bottom' : 'none',
+        size: size,
+        borderColor: borderColor,
+        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 : ''),
+        title: isDisabled ? title : null,
+        onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
+        customProps: {
+          dataSelectorId: dataSelectorId
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({}, this.props, {
@@ -232,9 +239,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         size: "14"
       }))) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TextBoxIconModule["default"].icon, " ").concat(iconRotated ? _TextBoxIconModule["default"].rotated : '')
-      }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, renderRightPlaceholderNode) : null)), needBorder && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TextBoxIconModule["default"].line, " ").concat(_TextBoxIconModule["default"]["borderColor_".concat(borderColor)], " ").concat(customTBoxLine)
-      }));
+      }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, renderRightPlaceholderNode) : null)));
     }
   }]);
 

package/lib/TextBoxIcon/TextBoxIcon.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* textboxicon default variables */
-  --textboxicon_line_height: var(--zd_size1);
+  --textboxicon_line_height: 1px;
   --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
 
   /* textboxicon icon default variables */
@@ -11,13 +11,12 @@
 .container {
   composes: varClass;
   position: relative;
+  --local_inputFieldLine_border_width: var(--textboxicon_line_height);
+  --local_inputFieldLine_border_color: var(--textboxicon_line_color);
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
-.disabled, .readonly {
-  cursor: not-allowed;
-}
 .icon {
   composes: offSelection from '../common/common.module.css';
   margin: var(--textboxicon_icon_margin);
@@ -33,40 +32,6 @@
 .rotated {
   transform: rotateX(180deg);
 }
-.line {
-  position: absolute;
-  bottom: 0 ;
-  /*  Variable:Ignore  */
-  min-height: 1px;
-  transition: var(--zd_transition2);
-  height: var(--textboxicon_line_height);
-  transform: perspective(1px);
-}
-[dir=ltr] .line {
-  left: 0 ;
-  right: 0 ;
-}
-[dir=rtl] .line {
-  right: 0 ;
-  left: 0 ;
-}
-.line, .borderColor_default {
-  background-color: var(--textboxicon_line_color);
-}
-.borderColor_transparent {
-  --textboxicon_line_color: var(--zdt_textboxicon_transparent_line_bg);
-}
-.effect:hover .line {
-  --textboxicon_line_color: var(--zdt_textboxicon_hover_line_bg);
-}
-.effectFocused .line,
-.effectFocused:hover .line {
-  --textboxicon_line_color: var(--zdt_textboxicon_focus_line_bg);
-}
-.borderColor_error,
-.effect:hover .borderColor_error {
-  --textboxicon_line_color: var(--zdt_textboxicon_error_line_bg);
-}
 .iconOnHoverStyle .icon,
 .iconOnHoverReadonly .icon,
 .iconOnHoverReadonly:hover .icon {

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

@@ -240,8 +240,7 @@ describe('TextBoxIcon component', function () {
       customClass: {
         customTBoxWrap: 'customTBoxWrapTextBoxIcon',
         customTextBox: 'customTextBoxTextBoxIcon',
-        customTBoxIcon: 'customTBoxIconTextBox',
-        customTBoxLine: 'customTBoxLineTextBox'
+        customTBoxIcon: 'customTBoxIconTextBox'
       }
     })),
         asFragment = _render27.asFragment;
@@ -276,4 +275,12 @@ describe('TextBoxIcon component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render with dataSelectorId', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      dataSelectorId: "textBoxIcon_data_selector_id"
+    })),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });