@bitrise/bitkit 13.79.1-alpha.0 → 13.79.1-alpha.1

package/package.json

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

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

@@ -1,5 +1,4 @@
 import { defineStyle } from '@chakra-ui/styled-system';
-import { rem } from '../../../utils/utils';
 
 const InputTheme = defineStyle({
   baseStyle: {
@@ -44,13 +43,11 @@ const InputTheme = defineStyle({
       borderRadius: '4',
       boxShadow: 'inner',
       outline: 0,
-      padding: '0.6875rem',
       transition: '200ms',
       width: '100%',
     },
     icon: {
       color: 'icon.tertiary',
-      right: rem(11),
       _groupHover: {
         color: 'icon.primary',
         _disabled: {
@@ -61,22 +58,26 @@ const InputTheme = defineStyle({
         color: 'icon.on-disabled',
       },
     },
-    inputContainer: {
-      position: 'relative',
-    },
-    stateIcon: {
-      position: 'absolute',
-      right: rem(16),
+    leftIconWrapper: {
+      pointerEvents: 'none',
       top: '50%',
       transform: 'translateY(-50%)',
+      left: '12',
+    },
+    rightIconWrapper: {
       pointerEvents: 'none',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      right: '12',
+    },
+    inputContainer: {
+      position: 'relative',
     },
   },
   sizes: {
     lg: {
       field: {
         fontSize: '3',
-        gap: '0.625rem',
         height: '48',
         paddingLeft: '16',
       },
@@ -84,7 +85,6 @@ const InputTheme = defineStyle({
     md: {
       field: {
         fontSize: '2',
-        gap: '0.375rem',
         height: '40',
         paddingLeft: '12',
       },

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

@@ -7,7 +7,6 @@ import {
   FormLabel,
   forwardRef,
   Input as ChakraInput,
-  InputGroup,
   InputLeftElement,
   InputProps as ChakraInputProps,
   InputRightAddon,
@@ -16,6 +15,8 @@ import {
   SystemStyleObject,
   IconProps,
   useMultiStyleConfig,
+  InputGroup,
+  BoxProps,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
@@ -49,10 +50,9 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   isLoading?: boolean;
   isWarning?: boolean;
   helperText?: ReactNode;
-  inputHeight?: number;
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
-  inputWrapperStyle?: SystemStyleObject;
+  inputWrapperStyle?: BoxProps;
   label?: ReactNode;
   leftAddon?: ReactNode;
   leftAddonPlacement?: 'inside' | 'outside';
@@ -79,7 +79,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     helperText,
     infoText,
     infoTooltipProps,
-    inputHeight,
     inputRef,
     inputStyle,
     inputWrapperStyle,
@@ -137,22 +136,10 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     role,
     step,
     size,
-    // sx: { height: inputHeight, ...inputStyle },
     type,
     value,
   };
 
-  let InputWrapper: any = Box;
-
-  const inputWrapperProps: SystemStyleObject = {
-    ...inputWrapperStyle,
-  };
-
-  if (leftAddon || leftIconName || rightAddon || rightIconName) {
-    InputWrapper = InputGroup;
-    inputWrapperProps.zIndex = 0;
-  }
-
   const RightContentWrapper = rightAddonPlacement === 'inside' ? InputRightElement : InputRightAddon;
   const inputRightPadding = rightIconName || (rightAddon && rightAddonPlacement === 'inside') ? '43px' : '11px';
 
@@ -171,13 +158,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
 
   const showLabel = label || !!infoText || (withCounter && maxLength);
 
-  const iconNumber = inputHeight && inputHeight < 40 ? 16 : 24;
-
   const iconSize = size === 'lg' ? '24' : '16';
-  const style = useMultiStyleConfig('Input', {
-    hasStateIcon: isInvalid || isWarning,
-    isPlaceholderShown: !!placeholder && !value,
-  });
+  const style = useMultiStyleConfig('Input');
 
   return (
     <FormControl {...formControlProps}>
@@ -213,16 +195,17 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         )}
       </Box>
 
-      <InputWrapper sx={style.inputContainer}>
+      <InputGroup sx={style.inputContainer} {...inputWrapperStyle}>
         {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
         {!leftAddon && leftIconName && (
-          <InputLeftElement
-            marginLeft={inputHeight ? (inputHeight - iconNumber) / 2 : 12}
-            pointerEvents="none"
-            top="50%"
-            transform="translateY(-50%)"
-          >
-            <Icon color={leftIconColor} name={leftIconName} size={iconSize} data-disabled={isDisabled || undefined} />
+          <InputLeftElement sx={style.leftIconWrapper}>
+            <Icon
+              color={leftIconColor}
+              name={leftIconName}
+              size={iconSize}
+              data-disabled={isDisabled || undefined}
+              sx={style.icon}
+            />
           </InputLeftElement>
         )}
         <ChakraInput
@@ -231,36 +214,33 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           {...inputProps}
           onChange={onInputChange}
         />
-        {!isInvalid && (isWarning || warningText) && (
-          <Icon aria-hidden="true" name="WarningColored" size={iconSize} sx={style.stateIcon} />
-        )}
-        {isInvalid && (
-          <Icon
-            aria-hidden="true"
-            color="icon.negative"
-            name="ErrorCircleFilled"
-            size={iconSize}
-            sx={style.stateIcon}
-          />
-        )}
         {rightAddon && <RightContentWrapper>{rightAddon}</RightContentWrapper>}
-        {!rightAddon && rightIconName && (
-          <InputRightElement
-            marginRight={inputHeight ? (inputHeight - iconNumber) / 2 : 12}
-            pointerEvents="none"
-            top="50%"
-            transform="translateY(-50%)"
-          >
-            <Icon
-              color={rightIconColor}
-              name={rightIconName}
-              size={iconSize}
-              sx={style.icon}
-              data-disabled={isDisabled || undefined}
-            />
+        {!rightAddon && (rightIconName || isWarning || warningText || isInvalid) && (
+          <InputRightElement sx={style.rightIconWrapper}>
+            {rightIconName && !isWarning && !warningText && !isInvalid && (
+              <Icon
+                color={rightIconColor}
+                name={rightIconName}
+                size={iconSize}
+                sx={style.icon}
+                data-disabled={isDisabled || undefined}
+              />
+            )}
+            {!isInvalid && (isWarning || warningText) && (
+              <Icon aria-hidden="true" name="WarningColored" size={iconSize} sx={style.stateIcon} />
+            )}
+            {isInvalid && (
+              <Icon
+                aria-hidden="true"
+                color="icon.negative"
+                name="ErrorCircleFilled"
+                size={iconSize}
+                sx={style.stateIcon}
+              />
+            )}
           </InputRightElement>
         )}
-      </InputWrapper>
+      </InputGroup>
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
       {!errorText && warningText && (
         <FormHelperText color="text.body" as="p">