@bitrise/bitkit 13.65.0 → 13.66.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.65.0",
+  "version": "13.66.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Form/Input/Input.tsx

@@ -11,14 +11,15 @@ import {
   InputLeftElement,
   InputProps as ChakraInputProps,
   InputRightAddon,
+  InputLeftAddon,
   InputRightElement,
   SystemStyleObject,
+  IconProps,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';
 import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
-import { TypeColors } from '../../../types/bitkit';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -51,11 +52,14 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   inputStyle?: SystemStyleObject;
   inputWrapperStyle?: SystemStyleObject;
   label?: ReactNode;
-  leftIconColor?: TypeColors;
+  leftAddon?: ReactNode;
+  leftAddonPlacement?: 'inside' | 'outside';
+  leftIconColor?: IconProps['color'];
   leftIconName?: TypeIconName;
   rightAddon?: ReactNode;
   rightAddonPlacement?: 'inside' | 'outside';
   rightIconName?: TypeIconName;
+  rightIconColor?: IconProps['color'];
   withCounter?: boolean;
 }
 
@@ -79,6 +83,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     isInvalid,
     isLoading,
     label,
+    leftAddon,
+    leftAddonPlacement,
     leftIconColor,
     leftIconName,
     max,
@@ -93,6 +99,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     rightAddon,
     rightAddonPlacement,
     rightIconName,
+    rightIconColor,
     role,
     step,
     type,
@@ -128,16 +135,22 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   };
 
   let InputWrapper: any = Box;
+
   const inputWrapperProps: SystemStyleObject = {
     ...inputWrapperStyle,
   };
-  if (leftIconName || rightAddon || rightIconName) {
+
+  if (leftAddon || leftIconName || rightAddon || rightIconName) {
     InputWrapper = InputGroup;
     inputWrapperProps.zIndex = 0;
   }
+
   const RightContentWrapper = rightAddonPlacement === 'inside' ? InputRightElement : InputRightAddon;
   const inputRightPadding = rightIconName || (rightAddon && rightAddonPlacement === 'inside') ? '43px' : '11px';
 
+  const LeftContentWrapper = leftAddonPlacement === 'inside' ? InputLeftElement : InputLeftAddon;
+  const inputLeftPadding = leftIconName || (leftAddon && leftAddonPlacement === 'inside') ? '43px' : '11px';
+
   const [valueLength, setValueLength] = useState(value?.toString().length || 0);
 
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -186,7 +199,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
       </Box>
 
       <InputWrapper {...inputWrapperProps}>
-        {leftIconName && (
+        {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
+        {!leftAddon && leftIconName && (
           <InputLeftElement
             marginLeft={inputHeight ? (inputHeight - iconSize) / 2 : 12}
             pointerEvents="none"
@@ -197,7 +211,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           </InputLeftElement>
         )}
         <ChakraInput
-          paddingLeft={leftIconName ? (inputHeight ? (inputHeight - iconSize) / 2 : 12) + iconSize + 4 : '11px'}
+          paddingLeft={inputLeftPadding}
           paddingRight={inputRightPadding}
           {...inputProps}
           onChange={onInputChange}
@@ -210,7 +224,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
             top="50%"
             transform="translateY(-50%)"
           >
-            <Icon name={rightIconName} size={`${iconSize}`} />
+            <Icon color={rightIconColor} name={rightIconName} size={`${iconSize}`} />
           </InputRightElement>
         )}
       </InputWrapper>