@bitrise/bitkit 13.216.0 → 13.217.0

package/package.json

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

package/src/Components/Form/Input/Input.theme.ts

@@ -65,13 +65,11 @@ const InputTheme = defineStyle({
       pointerEvents: 'none',
       top: '50%',
       transform: 'translateY(-50%)',
-      left: '12',
     },
     rightIconWrapper: {
       pointerEvents: 'none',
       top: '50%',
       transform: 'translateY(-50%)',
-      right: '12',
     },
     inputContainer: {
       position: 'relative',

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, Ref, useState } from 'react';
+import { ChangeEvent, ReactNode, Ref, useCallback, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
@@ -20,7 +20,7 @@ import {
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 import FormLabel, { FormLabelProps } from '../FormLabel';
-import { getDataAttributes } from '../../../utils/utils';
+import { getDataAttributes, rem } from '../../../utils/utils';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -169,6 +169,22 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const iconSize = size === 'lg' ? '24' : '16';
   const style = useMultiStyleConfig('Input');
 
+  const [leftIconPos, setLeftIconPos] = useState(rem(12));
+
+  const leftAddonRef = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setLeftIconPos(rem(node.getBoundingClientRect().width + 12));
+    }
+  }, []);
+
+  const [rightIconPos, setRightIconPos] = useState(rem(12));
+
+  const rightAddonRef = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setRightIconPos(rem(node.getBoundingClientRect().width + 12));
+    }
+  }, []);
+
   return (
     <FormControl {...formControlProps}>
       <FormLabel
@@ -182,9 +198,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         {label}
       </FormLabel>
       <InputGroup sx={style.inputContainer} {...inputWrapperStyle}>
-        {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
-        {!leftAddon && leftIconName && (
-          <InputLeftElement sx={style.leftIconWrapper}>
+        {leftAddon && <LeftContentWrapper ref={leftAddonRef}>{leftAddon}</LeftContentWrapper>}
+        {leftIconName && (
+          <InputLeftElement sx={style.leftIconWrapper} left={leftIconPos}>
             <Icon
               color={leftIconColor}
               name={leftIconName}
@@ -201,9 +217,13 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           {...dataAttributes}
           onChange={onInputChange}
         />
-        {rightAddon && <RightContentWrapper bottom="0">{rightAddon}</RightContentWrapper>}
-        {!rightAddon && (rightIconName || isWarning || warningText || isInvalid) && (
-          <InputRightElement sx={style.rightIconWrapper}>
+        {rightAddon && (
+          <RightContentWrapper ref={rightAddonRef} bottom="0">
+            {rightAddon}
+          </RightContentWrapper>
+        )}
+        {(rightIconName || isWarning || warningText || isInvalid) && (
+          <InputRightElement sx={style.rightIconWrapper} right={rightIconPos}>
             {rightIconName && !isWarning && !warningText && !isInvalid && (
               <Icon
                 color={rightIconColor}