@bitrise/bitkit 13.80.0 → 13.81.0

package/package.json

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

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

@@ -5,48 +5,90 @@ const InputTheme = defineStyle({
     field: {
       _disabled: {
         _hover: {
-          borderColor: 'neutral.90',
+          borderColor: 'border.disabled',
         },
         _placeholder: {
-          color: 'neutral.80',
+          color: 'text.disabled',
         },
-        background: 'neutral.93',
+        color: 'text.disabled',
+        background: 'background.disabled',
         cursor: 'not-allowed',
       },
       _focusVisible: {
-        borderColor: 'purple.50',
         boxShadow: 'formFocus',
       },
       _hover: {
-        borderColor: 'neutral.70',
+        borderColor: 'border.hover',
       },
       _invalid: {
         _hover: {
-          borderColor: 'red.50',
+          borderColor: 'border.error',
         },
-        borderColor: 'red.50',
-        color: 'red.50',
+        borderColor: 'border.error',
+        color: 'input.text.error',
       },
       _placeholder: {
-        color: 'neutral.60',
+        color: 'input.text.placeholder',
       },
       _readOnly: {
         _hover: {
-          borderColor: 'neutral.90',
+          borderColor: 'border.regular',
         },
-        background: 'neutral.93',
+        background: 'background.disabled',
       },
       appearance: 'none',
-      background: 'neutral.100',
+      background: 'background.primary',
       border: '1px solid',
-      borderColor: 'neutral.90',
+      borderColor: 'border.regular',
       borderRadius: '4',
       boxShadow: 'inner',
       outline: 0,
-      padding: '0.6875rem',
       transition: '200ms',
       width: '100%',
     },
+    icon: {
+      color: 'icon.tertiary',
+      _groupHover: {
+        color: 'icon.primary',
+        _disabled: {
+          color: 'icon.on-disabled',
+        },
+      },
+      _disabled: {
+        color: 'icon.on-disabled',
+      },
+    },
+    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',
+        height: '48',
+        paddingLeft: '16',
+      },
+    },
+    md: {
+      field: {
+        fontSize: '2',
+        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,
@@ -15,6 +14,9 @@ import {
   InputRightElement,
   SystemStyleObject,
   IconProps,
+  useMultiStyleConfig,
+  InputGroup,
+  BoxProps,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
@@ -46,11 +48,11 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   infoText?: string;
   infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
+  isWarning?: boolean;
   helperText?: ReactNode;
-  inputHeight?: number;
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
-  inputWrapperStyle?: SystemStyleObject;
+  inputWrapperStyle?: BoxProps;
   label?: ReactNode;
   leftAddon?: ReactNode;
   leftAddonPlacement?: 'inside' | 'outside';
@@ -60,7 +62,9 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   rightAddonPlacement?: 'inside' | 'outside';
   rightIconName?: TypeIconName;
   rightIconColor?: IconProps['color'];
+  size?: 'lg' | 'md';
   withCounter?: boolean;
+  warningText?: ReactNode;
 }
 
 /**
@@ -75,13 +79,13 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     helperText,
     infoText,
     infoTooltipProps,
-    inputHeight,
     inputRef,
     inputStyle,
     inputWrapperStyle,
     isDisabled,
     isInvalid,
     isLoading,
+    isWarning,
     label,
     leftAddon,
     leftAddonPlacement,
@@ -101,9 +105,11 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     rightIconName,
     rightIconColor,
     role,
+    size = 'lg',
     step,
     type,
     value,
+    warningText,
     withCounter,
     ...rest
   } = props;
@@ -129,22 +135,11 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     ref: inputRef,
     role,
     step,
-    sx: { height: inputHeight, ...inputStyle },
+    size,
     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';
 
@@ -162,7 +157,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   };
 
   const showLabel = label || !!infoText || (withCounter && maxLength);
-  const iconSize = inputHeight && inputHeight < 40 ? 16 : 24;
+
+  const iconSize = size === 'lg' ? '24' : '16';
+  const style = useMultiStyleConfig('Input');
 
   return (
     <FormControl {...formControlProps}>
@@ -170,7 +167,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         {label && (
           <FormLabel
             optionalIndicator={
-              <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
+              <Text as="span" color="text.secondary" fontSize="2" fontWeight="normal" marginLeft="4">
                 (Optional)
               </Text>
             }
@@ -181,14 +178,14 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         )}
         {!!infoText && (
           <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
-            <Icon color="neutral.50" name="Info" size="16" />
+            <Icon color="icon.tertiary" name="Info" size="16" />
           </Tooltip>
         )}
 
         {withCounter && maxLength && (
           <Text
             as="span"
-            color="neutral.40"
+            color="text.secondary"
             marginInlineStart="auto"
             size="2"
             sx={{ fontVariantNumeric: 'tabular-nums' }}
@@ -198,16 +195,17 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         )}
       </Box>
 
-      <InputWrapper {...inputWrapperProps}>
+      <InputGroup sx={style.inputContainer} {...inputWrapperStyle}>
         {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
         {!leftAddon && leftIconName && (
-          <InputLeftElement
-            marginLeft={inputHeight ? (inputHeight - iconSize) / 2 : 12}
-            pointerEvents="none"
-            top="50%"
-            transform="translateY(-50%)"
-          >
-            <Icon color={leftIconColor} name={leftIconName} size={`${iconSize}`} />
+          <InputLeftElement sx={style.leftIconWrapper}>
+            <Icon
+              color={leftIconColor}
+              name={leftIconName}
+              size={iconSize}
+              data-disabled={isDisabled || undefined}
+              sx={style.icon}
+            />
           </InputLeftElement>
         )}
         <ChakraInput
@@ -217,19 +215,43 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           onChange={onInputChange}
         />
         {rightAddon && <RightContentWrapper>{rightAddon}</RightContentWrapper>}
-        {!rightAddon && rightIconName && (
-          <InputRightElement
-            marginRight={inputHeight ? (inputHeight - iconSize) / 2 : 12}
-            pointerEvents="none"
-            top="50%"
-            transform="translateY(-50%)"
-          >
-            <Icon color={rightIconColor} name={rightIconName} size={`${iconSize}`} />
+        {!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>}
-      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+      {!errorText && warningText && (
+        <FormHelperText color="text.body" as="p">
+          {warningText}
+        </FormHelperText>
+      )}
+      {!errorText && !warningText && helperText && (
+        <FormHelperText as="p" data-disabled={isDisabled || undefined}>
+          {helperText}
+        </FormHelperText>
+      )}
     </FormControl>
   );
 });

package/src/Components/Select/Select.tsx

@@ -120,7 +120,11 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
         )}
       </Box>
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
-      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
+      {!errorText && helperText && (
+        <FormHelperText as="p" data-disabled={isDisabled || undefined}>
+          {helperText}
+        </FormHelperText>
+      )}
     </FormControl>
   );
 });