Web: InputPhone: bug with style fixed

packages/components/input-phone/index.js

@@ -57,7 +57,7 @@ const InputPhone = (props) => {
   };
 
   const handleClick = () => {
-    setIsOpen(!isOpen), setIsValid(true);
+    setIsOpen(!isOpen);
   };
 
   useEffect(() => {
@@ -82,6 +82,7 @@ const InputPhone = (props) => {
       mask: country.mask,
       icon: country.flag,
     });
+    setIsValid(true);
     setPhoneValue(country.dialCode);
   };
 
@@ -105,11 +106,15 @@ const InputPhone = (props) => {
   };
 
   return (
-    <StyledBox hasError={!isValid} displayProp="flex" alignItems="center">
+    <StyledBox
+      hasError={!isValid}
+      displayProp="flex"
+      alignItems="center"
+      scale={props.scale}
+    >
       <ComboBox
         onClick={handleClick}
         options={[]}
-        scaled={true}
         noBorder={true}
         className="country-box"
         selectedOption={country}
@@ -135,7 +140,7 @@ const InputPhone = (props) => {
         <SearchInput
           placeholder={props.searchPlaceholderText}
           value={searchValue}
-          className="search-input"
+          className="search-country_input"
           scale={true}
           onClearSearch={onClearSearch}
           refreshTimeout={100}
@@ -154,7 +159,11 @@ const InputPhone = (props) => {
               {Row}
             </List>
           ) : (
-            <Text textAlign="center" className="empty-message" fontSize="14px">
+            <Text
+              textAlign="center"
+              className="phone-input_empty-text"
+              fontSize="14px"
+            >
               {props.searchEmptyMessage}
             </Text>
           )}
@@ -162,7 +171,7 @@ const InputPhone = (props) => {
       </DropDown>
       {!isValid && (
         <Text
-          className="error-text"
+          className="phone-input_error-text"
           color="#f21c0e"
           fontSize="11px"
           lineHeight="14px"
@@ -174,8 +183,6 @@ const InputPhone = (props) => {
   );
 };
 
-export default memo(InputPhone);
-
 InputPhone.propTypes = {
   /** Default selected country Russia */
   defaultCountry: PropTypes.object.isRequired,
@@ -183,13 +190,11 @@ InputPhone.propTypes = {
   phonePlaceholderText: PropTypes.string,
   /** Text displayed on the SearchInput placeholder */
   searchPlaceholderText: PropTypes.string,
-  /** Called when field is clicked */
-  onClick: PropTypes.func,
+  /** Indicates the input field has scale */
+  scale: PropTypes.bool,
   /** Called when value is changed */
   onChange: PropTypes.func,
   /** Gets the country mask  */
-  getMask: PropTypes.func,
-  /** Text is displayed when nothing found */
   searchEmptyMessage: PropTypes.string,
   /** Text is displayed when invalid country dial code */
   errorMessage: PropTypes.string,
@@ -204,8 +209,11 @@ InputPhone.defaultProps = {
   },
   phonePlaceholderText: "",
   searchPlaceholderText: "",
+  scale: false,
   searchEmptyMessage: "",
   errorMessage: "",
 };
 
 InputPhone.displayName = "InputPhone";
+
+export default memo(InputPhone);

packages/components/input-phone/input-phone.stories.js

@@ -36,6 +36,7 @@ Default.args = {
   },
   phonePlaceholderText: "7 XXX XXX-XX-XX",
   searchPlaceholderText: "Search",
+  scale: false,
   searchEmptyMessage: "Nothing found",
   errorMessage: "Сountry code is invalid",
 };

packages/components/input-phone/styled-input-phone.js

@@ -4,8 +4,8 @@ import Base from "../themes/base";
 
 export const StyledBox = styled(Box)`
   position: relative;
-  max-width: ${(props) => props.theme.inputPhone.width};
-  outline: 1px solid ${(props) =>
+  width: ${(props) => (props.scale ? "100%" : props.theme.inputPhone.width)};
+  border: 1px solid ${(props) =>
     props.hasError
       ? props.theme.inputPhone.errorBorderColor
       : props.theme.inputPhone.inactiveBorderColor};
@@ -28,7 +28,7 @@ export const StyledBox = styled(Box)`
     padding-left: 20px;
     margin-left: -8px;
     border-left: 1px solid ${(props) =>
-      props.theme.inputPhone.inactiveBorderColor} !important;
+      props.theme.inputPhone.inactiveBorderColor};
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     background: ${(props) => props.theme.inputPhone.backgroundColor};
@@ -89,7 +89,7 @@ export const StyledBox = styled(Box)`
     box-shadow: none;
   }
 
-  .search-input {
+  .search-country_input {
     .search-input-block {
       font-weight: 400;
       border-color: ${(props) => props.theme.inputPhone.inactiveBorderColor};
@@ -116,6 +116,7 @@ export const StyledBox = styled(Box)`
   .country-item {
     display: flex;
     align-items: center;
+    max-width: 100%;
     padding: 0;
     height: 36px;
     svg {
@@ -139,8 +140,9 @@ export const StyledBox = styled(Box)`
     }
   }
 
-  .empty-message {
+  .phone-input_empty-text {
     padding: 30px 0;
+    word-break: break-all;
     color: ${(props) => props.theme.inputPhone.placeholderColor};
   }
 
@@ -152,8 +154,9 @@ export const StyledBox = styled(Box)`
     }
   }
 
-  .error-text {
+  .phone-input_error-text {
     position: absolute;
+    word-break: break-all;
     top: 48px;
   }
 }

packages/components/themes/base.js

@@ -774,16 +774,6 @@ const Base = {
     height: "44px",
   },
 
-  phoneInput: {
-    width: "304px",
-    height: "44px",
-    itemTextColor: black,
-    itemBackgroundColor: white,
-    itemHoverColor: grayLightMid,
-    scrollBackground: "rgba(0, 0, 0, 0.1)",
-    placeholderColor: gray,
-  },
-
   textInput: {
     fontWeight: "normal",
     placeholderColor: gray,

packages/components/themes/dark.js

@@ -770,17 +770,6 @@ const Dark = {
     width: "320px",
     height: "44px",
   },
-
-  phoneInput: {
-    width: "304px",
-    height: "44px",
-    itemTextColor: black,
-    itemBackgroundColor: white,
-    itemHoverColor: grayLightMid,
-    scrollBackground: "rgba(0, 0, 0, 0.1)",
-    placeholderColor: gray,
-  },
-
   textInput: {
     fontWeight: "normal",
     placeholderColor: "#474747",