@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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

@@ -30,10 +30,10 @@ 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-id="selectWithIcon_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="selectWithIcon_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -96,9 +96,6 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/Select/props/propTypes.js

@@ -112,7 +112,8 @@ 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])
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -17,6 +17,8 @@ var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
 var _Layout = require("../Layout");
 
+var _InputFieldLine = _interopRequireDefault(require("../InputFieldLine/InputFieldLine"));
+
 var _icons = require("@zohodesk/icons");
 
 var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
@@ -166,20 +168,26 @@ 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,
+        dataId: dataId,
+        customProps: {
+          dataSelectorId: dataSelectorId
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({}, this.props, {
@@ -232,9 +240,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;