@zohodesk/components 1.4.21 → 1.4.22

package/es/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/es/Select/props/defaultProps.js

@@ -36,7 +36,8 @@ export const Select_defaultProps = {
   customProps: {},
   isLoading: false,
   isAbsolutePositioningNeeded: true,
-  allowValueFallback: true
+  allowValueFallback: true,
+  inputFieldLineA11y: {}
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -100,7 +100,9 @@ export const Select_propTypes = {
   dropBoxPortalId: PropTypes.string,
   allowValueFallback: PropTypes.bool,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  renderCustomSearchClearComponent: PropTypes.func
+  renderCustomSearchClearComponent: PropTypes.func,
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  inputFieldLineA11y: PropTypes.object
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textbox from "../Textbox";
+import Textbox from "../TextBox";
 import { render } from "@testing-library/react";
 describe('Textbox component', () => {
   const type = ['text', 'password', 'number'];

package/es/TextBoxIcon/TextBoxIcon.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import TextBox from "../TextBox/TextBox";
 import { Container, Box } from "../Layout";
+import InputFieldLine from "../shared/InputFieldLine/InputFieldLine";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from "../semantic/Button/semanticButton.module.css";
 import style from "./TextBoxIcon.module.css";
@@ -118,8 +119,7 @@ export default class TextBoxIcon extends React.Component {
     const {
       customTBoxWrap = '',
       customTextBox = '',
-      customTBoxIcon = '',
-      customTBoxLine = ''
+      customTBoxIcon = ''
     } = customClass;
     const {
       clearText = 'Clear'
@@ -127,13 +127,20 @@ export default class TextBoxIcon extends React.Component {
     let {
       TextBoxProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      isCover: false,
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
-      dataSelectorId: dataSelectorId,
-      "data-title": isDisabled ? title : null,
-      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
+    return /*#__PURE__*/React.createElement(InputFieldLine, {
+      isActive: isActive || isFocus,
+      border: needBorder ? 'bottom' : 'none',
+      size: size,
+      borderColor: borderColor,
+      hasEffect: needEffect,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly && needReadOnlyStyle,
+      customClass: ` ${style.container} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      title: isDisabled ? title : null,
+      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
+      customProps: {
+        dataSelectorId: dataSelectorId
+      }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
@@ -186,9 +193,7 @@ export default class TextBoxIcon extends React.Component {
       size: "14"
     }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.icon} ${iconRotated ? style.rotated : ''}`
-    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
-      className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
-    }));
+    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)));
   }
 
 }

package/es/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/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -232,8 +232,7 @@ describe('TextBoxIcon component', () => {
       customClass: {
         customTBoxWrap: 'customTBoxWrapTextBoxIcon',
         customTextBox: 'customTextBoxTextBoxIcon',
-        customTBoxIcon: 'customTBoxIconTextBox',
-        customTBoxLine: 'customTBoxLineTextBox'
+        customTBoxIcon: 'customTBoxIconTextBox'
       }
     }));
     expect(asFragment()).toMatchSnapshot();
@@ -265,4 +264,12 @@ describe('TextBoxIcon component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      dataSelectorId: "textBoxIcon_data_selector_id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });