@bitrise/bitkit 11.1.3 → 11.2.0

package/package.json

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

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

@@ -34,9 +34,8 @@ const CheckboxTheme: ComponentStyleConfig = {
       _hover: {
         borderColor: 'neutral.70',
       },
-      // TODO: change it to _focusVisible when the Chakra updated to v2
-      _focus: {
-        boxShadow: 'outline',
+      _focusVisible: {
+        boxShadow: 'formFocus',
       },
     },
     label: {

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

@@ -19,14 +19,23 @@ const InputTheme = defineStyle({
       _disabled: {
         background: 'neutral.93',
         cursor: 'not-allowed',
+        _hover: {
+          borderColor: 'neutral.90',
+        },
       },
       _focusVisible: {
         boxShadow: 'formFocus',
         borderColor: 'purple.50',
       },
+      _hover: {
+        borderColor: 'neutral.70',
+      },
       _invalid: {
         color: 'red.50',
         borderColor: 'red.50',
+        _hover: {
+          borderColor: 'red.50',
+        },
       },
     },
   },

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

@@ -14,6 +14,7 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
+import { TypeColors } from '../../../Foundations/Colors/Colors';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
@@ -42,6 +43,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
   label?: ReactNode;
+  leftIconColor?: TypeColors;
   leftIconName?: TypeIconName;
   rightAddon?: ReactNode;
   rightAddonPlacement?: 'inside' | 'outside';
@@ -64,6 +66,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     isInvalid,
     isLoading,
     label,
+    leftIconColor,
     leftIconName,
     max,
     maxLength,
@@ -126,7 +129,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
       <InputWrapper {...inputWrapperProps}>
         {leftIconName && (
           <InputLeftElement margin="12px" pointerEvents="none">
-            <Icon name={leftIconName} />
+            <Icon color={leftIconColor} name={leftIconName} />
           </InputLeftElement>
         )}
         <ChakraInput paddingLeft={leftIconName ? '43px' : '11px'} paddingRight={inputRightPadding} {...inputProps} />

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

@@ -41,9 +41,8 @@ const RadioTheme: ComponentStyleConfig = {
       _hover: {
         borderColor: 'neutral.70',
       },
-      // TODO: change it to _focusVisible when the Chakra updated to v2
-      _focus: {
-        boxShadow: 'outline',
+      _focusVisible: {
+        boxShadow: 'formFocus',
       },
     },
     label: {

package/src/Components/SearchInput/SearchInput.tsx

@@ -0,0 +1,52 @@
+import { ChangeEvent, useState } from 'react';
+import Input, { InputProps } from '../Form/Input/Input';
+import IconButton from '../IconButton/IconButton';
+
+export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
+  onChange?: (value: string) => void;
+}
+
+const SearchInput = (props: SearchInputProps) => {
+  const { onChange, ...rest } = props;
+
+  const [value, setValue] = useState('');
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const q = event.target.value;
+    setValue(q);
+    if (onChange) {
+      onChange(q);
+    }
+  };
+
+  const onClearClick = () => {
+    setValue('');
+    if (onChange) {
+      onChange('');
+    }
+  };
+
+  const rightButton = (
+    <IconButton
+      aria-label="Clear"
+      iconName="CloseSmall"
+      onClick={onClearClick}
+      variant="tertiary"
+      _active={{ background: 'transparent' }}
+      _hover={{ background: 'transparent' }}
+    />
+  );
+  const inputProps: InputProps = {
+    leftIconColor: 'neutral.60',
+    leftIconName: 'Magnifier',
+    onChange: onInputChange,
+    rightAddon: value ? rightButton : undefined,
+    rightAddonPlacement: 'inside',
+    type: 'text',
+    value,
+    ...rest,
+  };
+  return <Input {...inputProps} />;
+};
+
+export default SearchInput;

package/src/Foundations/Shadows/Shadows.ts

@@ -6,7 +6,7 @@ const shadows = {
   innerSmall: '0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset',
   outline: '0 0 0 3px #C289E6',
   tooltip: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)',
-  formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, inset 0 0 0 3px rgba(146, 71, 194, 0.3)',
+  formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px #C289E6',
   none: 'none',
 };