Web: PhoneInput: bugfix with prefix

packages/components/input-phone/index.js

@@ -7,6 +7,7 @@ import PropTypes from "prop-types";
 import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
 import Box from "@docspace/components/box";
 import ComboBox from "@docspace/components/combobox";
+import Label from "@docspace/components/label";
 import TextInput from "@docspace/components/text-input";
 import SearchInput from "@docspace/components/search-input";
 import DropDown from "@docspace/components/drop-down";
@@ -26,13 +27,12 @@ const InputPhone = (props) => {
     const el = options.find((option) => option.dialCode === str);
 
     if (e.target.value === "") {
-      setPhoneValue("+");
       setIsValid(false);
       setCountry((prev) => ({ ...prev, icon: InvalidFlag }));
-    } else {
-      setPhoneValue(e.target.value);
     }
 
+    setPhoneValue(e.target.value);
+
     if (el) {
       setIsValid(true);
       setCountry({
@@ -99,7 +99,7 @@ const InputPhone = (props) => {
         onClick={onCountryClick}
       >
         <Text className="country-name">{country.name}</Text>
-        <Text className="country-dialcode">{country.dialCode}</Text>
+        <Text className="country-dialcode">{`+${country.dialCode}`}</Text>
       </DropDownItem>
     );
   };
@@ -114,7 +114,7 @@ const InputPhone = (props) => {
         className="country-box"
         selectedOption={country}
       />
-
+      <Label text="+" className="prefix" />
       <TextInput
         type="tel"
         className="input-phone"
@@ -125,7 +125,6 @@ const InputPhone = (props) => {
         value={phoneValue}
         onChange={onInputChange}
       />
-
       <DropDown
         open={isOpen}
         clickOutsideAction={handleClick}

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

@@ -34,7 +34,7 @@ Default.args = {
     mask: options[182].mask, // default dialCode +7
     icon: options[182].flag, // default flag Russia
   },
-  phonePlaceholderText: "+7 XXX XXX-XX-XX",
+  phonePlaceholderText: "7 XXX XXX-XX-XX",
   searchPlaceholderText: "Search",
   searchEmptyMessage: "Nothing found",
   errorMessage: "Сountry code is invalid",

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

@@ -5,7 +5,7 @@ import Base from "../themes/base";
 export const StyledBox = styled(Box)`
   position: relative;
   max-width: ${(props) => props.theme.inputPhone.width};
-  border: 1px solid ${(props) =>
+  outline: 1px solid ${(props) =>
     props.hasError
       ? props.theme.inputPhone.errorBorderColor
       : props.theme.inputPhone.inactiveBorderColor};
@@ -25,7 +25,8 @@ export const StyledBox = styled(Box)`
 
   .input-phone {
     height: ${(props) => props.theme.inputPhone.height};
-    padding-left: 10px;
+    padding-left: 20px;
+    margin-left: -8px;
     border-left: 1px solid ${(props) =>
       props.theme.inputPhone.inactiveBorderColor} !important;
     border-top-left-radius: 0;
@@ -33,6 +34,14 @@ export const StyledBox = styled(Box)`
     background: ${(props) => props.theme.inputPhone.backgroundColor};
   }
 
+  .prefix {
+    position: relative;
+    top: 0;
+    left: 12px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
   .combo-button {
     width: 100%;
     height: 100%;