@zohodesk/components 1.5.8 → 1.6.0

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

@@ -30,7 +30,7 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/Select/props/propTypes.js

@@ -103,7 +103,8 @@ var Select_propTypes = {
     TextBoxIconProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     listItemProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    SuggestionsProps: _propTypes["default"].object,
+    InputFieldLineProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -176,7 +176,6 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
         isActive: isActive || isFocus,
         border: needBorder ? 'bottom' : 'none',
-        size: size,
         borderColor: borderColor,
         hasEffect: needEffect,
         isDisabled: isDisabled,

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

@@ -3,7 +3,7 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -55,7 +55,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -95,7 +95,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -134,7 +134,7 @@ 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"
+    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
     data-selector-id="textBoxIcon"
     data-title=""
   >
@@ -176,7 +176,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -228,7 +228,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -268,7 +268,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -307,7 +307,7 @@ 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"
+    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
     data-title=""
   >
@@ -348,7 +348,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -387,7 +387,7 @@ 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"
+    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -427,7 +427,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -467,7 +467,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -507,7 +507,7 @@ 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"
+    class="varClass customContainer    effect     container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -546,7 +546,7 @@ 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"
+    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -586,7 +586,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -625,7 +625,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -665,7 +665,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -729,7 +729,7 @@ 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"
+    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
     data-title="TextBoxIconTitle"
   >
@@ -770,7 +770,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -809,7 +809,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -873,7 +873,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -912,7 +912,7 @@ exports[`TextBoxIcon component Should be render value is string and length less
 exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon_data_selector_id"
   >
     <div
@@ -951,7 +951,7 @@ exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -990,7 +990,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1029,7 +1029,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1068,7 +1068,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1107,7 +1107,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1146,7 +1146,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1185,7 +1185,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1224,7 +1224,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1263,7 +1263,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1302,7 +1302,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1341,7 +1341,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1380,7 +1380,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1419,7 +1419,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1458,7 +1458,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1497,7 +1497,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1537,7 +1537,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1576,7 +1576,7 @@ 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"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div

package/lib/shared/InputFieldLine/InputFieldLine.js

@@ -47,7 +47,8 @@ function InputFieldLine(props) {
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
-    className: "".concat(_InputFieldLineModule["default"].varClass, " ").concat(_InputFieldLineModule["default"].customContainer, " ").concat(hasPadding ? _InputFieldLineModule["default"][size] : '', " ").concat(borderClass, " ").concat(isDisabled ? _InputFieldLineModule["default"].disabled : isReadOnly ? hasEffect ? _InputFieldLineModule["default"].effect : _InputFieldLineModule["default"].readonly : _InputFieldLineModule["default"].effect, " ").concat(border !== 'none' ? "".concat(borderColorClass, " ").concat(_InputFieldLineModule["default"].hasBorder) : '', " ").concat(isActive && !(isDisabled || isReadOnly) ? _InputFieldLineModule["default"].active : '', "  ").concat(customClass)
+    scroll: size != 'auto' ? 'vertical' : undefined,
+    className: "".concat(_InputFieldLineModule["default"].varClass, " ").concat(_InputFieldLineModule["default"].customContainer, " ").concat(size != 'auto' ? _InputFieldLineModule["default"][size] : '', " ").concat(hasPadding && size != 'auto' ? _InputFieldLineModule["default"]["padding_".concat(size)] : '', " ").concat(borderClass, " ").concat(isDisabled ? _InputFieldLineModule["default"].disabled : isReadOnly ? hasEffect ? _InputFieldLineModule["default"].effect : _InputFieldLineModule["default"].readonly : _InputFieldLineModule["default"].effect, " ").concat(border !== 'none' ? "".concat(borderColorClass, " ").concat(_InputFieldLineModule["default"].hasBorder) : '', " ").concat(isActive && !(isDisabled || isReadOnly) ? _InputFieldLineModule["default"].active : '', "  ").concat(customClass)
   }), children);
 }
 

package/lib/shared/InputFieldLine/InputFieldLine.module.css

@@ -6,12 +6,12 @@
 }
 
 .customContainer {
-    composes: oflowy from '../../common/common.module.css';
     cursor: var(--local_cursor);
     border-color: var(--local_inputFieldLine_border_color);
 }
 
-.disabled,.readonly {
+.disabled,
+.readonly {
     --local_cursor: not-allowed;
 }
 
@@ -57,28 +57,34 @@
     border-style: solid;
 }
 
+.padding_small,
+.padding_xmedium {
+    --local_padding: var(--zd_size3);
+}
+
+.padding_medium,
+.padding_large {
+    --local_padding: var(--zd_size8);
+}
+
 .xmedium {
     min-height: var(--zd_size30) ;
-    --local_padding: var(--zd_size3);
 }
 
 .small {
     max-height: var(--zd_size200) ;
-    --local_padding: var(--zd_size3);
 }
 
 .medium {
     max-height: var(--zd_size350) ;
-    --local_padding: var(--zd_size8);
 }
 
 .large {
     max-height: var(--zd_size400) ;
-    --local_padding: var(--zd_size8);
 }
 
 .border_bottom {
-    border-width:  0 0 var(--local_inputFieldLine_border_width) 0;
+    border-width: 0 0 var(--local_inputFieldLine_border_width) 0;
     padding-bottom: var(--local_padding);
 }
 

package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_all effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   effect     flex rowdir"
+    class="varClass customContainer    effect     flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
     data-selector-id="container"
     data-title=""
   />

package/lib/shared/InputFieldLine/props/defaultProps.js

@@ -14,10 +14,10 @@ var _default = {
   dataId: '',
   customClass: '',
   customProps: {},
-  size: 'medium',
   borderColor: 'default',
   border: 'bottom',
   a11yAttributes: {},
-  tagAttribute: {}
+  tagAttributes: {},
+  size: 'auto'
 };
 exports["default"] = _default;

package/lib/shared/InputFieldLine/props/propTypes.js

@@ -28,7 +28,7 @@ var _default = {
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape(_objectSpread({}, _propTypes2.ContainerProps)),
   onClick: _propTypes["default"].func,
-  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
+  size: _propTypes["default"].oneOf(['auto', 'medium', 'xmedium']),
   border: _propTypes["default"].oneOf(['bottom', 'all', 'none']),
   borderColor: _propTypes["default"].oneOf(['default', 'dark', 'error', 'transparent']),
   children: _propTypes["default"].node,