@bitrise/bitkit 10.32.0 → 10.32.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.32.0",
+  "version": "10.32.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

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

@@ -1,4 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
+import Button from '@/Components/Button/Button';
 import IconButton from '@/Components/IconButton/IconButton';
 import Input from './Input';
 
@@ -18,7 +19,6 @@ export default {
     label: 'Input',
     placeholder: 'Placeholder text',
     type: 'text',
-    width: '400px',
   },
 } as ComponentMeta<typeof Input>;
 
@@ -31,19 +31,38 @@ export const WithProps = {
   },
 };
 
-export const WithElement = {
+export const WithElementOutside = {
   args: {
     isDisabled: true,
-    label: 'With additional element (Like IconButton)',
+    label: 'With additional element outside (Like Button)',
     rightAddon: (
-      <IconButton aria-label="Copy to clipboard" borderLeftRadius="0" iconName="Duplicate" variant="secondary">
-        eee
-      </IconButton>
+      <Button borderLeftRadius="0" leftIconName="Duplicate" variant="secondary">
+        Copy to clipboard
+      </Button>
     ),
+    rightAddonPlacement: 'outside',
     value: '1234567890ABCDE',
   },
 };
 
+export const WithElementInside = {
+  args: {
+    label: 'With additional element inside (Like IconButton)',
+    rightAddon: (
+      <IconButton
+        aria-label="Search"
+        borderLeftRadius="0"
+        iconName="Magnifier"
+        variant="tertiary"
+        _active={{ background: 'transparent' }}
+        _hover={{ background: 'transparent' }}
+      />
+    ),
+    rightAddonPlacement: 'inside',
+    width: '100%',
+  },
+};
+
 export const WithIcon = {
   args: {
     label: 'With Icon on the left and/or right side',

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

@@ -40,9 +40,11 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   isLoading?: boolean;
   helperText?: ReactNode;
   inputRef?: Ref<HTMLInputElement>;
+  inputStyle?: SystemStyleObject;
   label?: ReactNode;
   leftIconName?: TypeIconName;
   rightAddon?: ReactNode;
+  rightAddonPlacement?: 'inside' | 'outside';
   rightIconName?: TypeIconName;
 }
 
@@ -58,6 +60,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     helperText,
     isDisabled,
     inputRef,
+    inputStyle,
     isInvalid,
     isLoading,
     label,
@@ -72,6 +75,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     onBlur,
     onChange,
     rightAddon,
+    rightAddonPlacement,
     rightIconName,
     name,
     role,
@@ -102,6 +106,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     ref: inputRef,
     role,
     step,
+    sx: inputStyle,
     type,
     value,
   };
@@ -112,6 +117,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     InputWrapper = InputGroup;
     inputWrapperProps.zIndex = 0;
   }
+  const RightContentWrapper = rightAddonPlacement === 'inside' ? InputRightElement : InputRightAddon;
+  const inputRightPadding = rightIconName || (rightAddon && rightAddonPlacement === 'inside') ? '43px' : '11px';
+
   return (
     <FormControl {...formControlProps}>
       {label && <FormLabel>{label}</FormLabel>}
@@ -121,12 +129,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
             <Icon name={leftIconName} />
           </InputLeftElement>
         )}
-        <ChakraInput
-          paddingLeft={leftIconName ? '43px' : '11px'}
-          paddingRight={rightIconName ? '43px' : '11px'}
-          {...inputProps}
-        />
-        {rightAddon && <InputRightAddon>{rightAddon}</InputRightAddon>}
+        <ChakraInput paddingLeft={leftIconName ? '43px' : '11px'} paddingRight={inputRightPadding} {...inputProps} />
+        {rightAddon && <RightContentWrapper>{rightAddon}</RightContentWrapper>}
         {!rightAddon && rightIconName && (
           <InputRightElement margin="12px" pointerEvents="none">
             <Icon name={rightIconName} />