@bitrise/bitkit 10.29.0-alpha-chakra.1 → 10.29.0-alpha-input.1

package/package.json

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

package/src/Components/Form/FormLabel/FormLabel.tsx

@@ -0,0 +1,9 @@
+import { FormLabel as ChakraFormLabel, FormLabelProps, forwardRef } from '@chakra-ui/react';
+
+const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
+  return <ChakraFormLabel {...props} ref={ref} />;
+});
+
+export type { FormLabelProps };
+
+export default FormLabel;

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

@@ -14,30 +14,34 @@ import {
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 
-export interface InputProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
+type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
+type UsedChakraInputProps = Pick<
+  ChakraInputProps,
+  | 'onBlur'
+  | 'onChange'
+  | 'role'
+  | 'name'
+  | 'type'
+  | 'value'
+  | 'autoComplete'
+  | 'autoFocus'
+  | 'max'
+  | 'maxLength'
+  | 'min'
+  | 'minLength'
+  | 'pattern'
+  | 'step'
+>;
+export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   'data-testid'?: string;
-  errorText?: string;
+  errorText?: ReactNode;
   isLoading?: boolean;
-  helperText?: string;
+  helperText?: ReactNode;
   inputRef?: Ref<HTMLInputElement>;
   label?: ReactNode;
   leftIconName?: TypeIconName;
-  name?: string;
-  onBlur?: ChakraInputProps['onBlur'];
-  onChange?: ChakraInputProps['onChange'];
   rightElement?: ReactNode;
   rightIconName?: TypeIconName;
-  role?: ChakraInputProps['role'];
-  type?: ChakraInputProps['type'];
-  value?: ChakraInputProps['value'];
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
-  autoComplete?: ChakraInputProps['autoComplete'];
-  max?: ChakraInputProps['max'];
-  maxLength?: ChakraInputProps['maxLength'];
-  min?: ChakraInputProps['min'];
-  minLength?: ChakraInputProps['minLength'];
-  pattern?: ChakraInputProps['pattern'];
-  step?: ChakraInputProps['step'];
 }
 
 /**
@@ -47,6 +51,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const {
     'data-testid': dataTestid,
     autoComplete,
+    autoFocus,
     errorText,
     helperText,
     isDisabled,
@@ -79,8 +84,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     ...rest,
     ref,
   };
-  const InputProps = {
+  const inputProps = {
     autoComplete,
+    autoFocus,
     'data-testid': dataTestid,
     onBlur,
     onChange,
@@ -106,11 +112,15 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
             <Icon name={leftIconName} />
           </InputLeftElement>
         )}
-        <ChakraInput paddingLeft={leftIconName ? '43px' : '11px'} {...InputProps} />
+        <ChakraInput
+          paddingLeft={leftIconName ? '43px' : '11px'}
+          paddingRight={rightIconName ? '43px' : '11px'}
+          {...inputProps}
+        />
         {rightElement && <InputRightElement>{rightElement}</InputRightElement>}
         {!rightElement && rightIconName && (
-          <InputRightElement>
-            <Icon name={rightIconName} margin="12px" pointerEvents="none" />
+          <InputRightElement margin="12px" pointerEvents="none">
+            <Icon name={rightIconName} />
           </InputRightElement>
         )}
       </InputGroup>

package/src/index.ts

@@ -204,3 +204,6 @@ export { default as Textarea } from './Components/Form/Textarea/Textarea';
 
 export type { InputProps } from './Components/Form/Input/Input';
 export { default as Input } from './Components/Form/Input/Input';
+
+export type { FormLabelProps } from './Components/Form/FormLabel/FormLabel';
+export { default as FormLabel } from './Components/Form/FormLabel/FormLabel';