@bitrise/bitkit 13.79.0 → 13.79.1-alpha.0

package/package.json

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

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

@@ -1,45 +1,46 @@
 import { defineStyle } from '@chakra-ui/styled-system';
+import { rem } from '../../../utils/utils';
 
 const InputTheme = defineStyle({
   baseStyle: {
     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,
@@ -47,6 +48,47 @@ const InputTheme = defineStyle({
       transition: '200ms',
       width: '100%',
     },
+    icon: {
+      color: 'icon.tertiary',
+      right: rem(11),
+      _groupHover: {
+        color: 'icon.primary',
+        _disabled: {
+          color: 'icon.on-disabled',
+        },
+      },
+      _disabled: {
+        color: 'icon.on-disabled',
+      },
+    },
+    inputContainer: {
+      position: 'relative',
+    },
+    stateIcon: {
+      position: 'absolute',
+      right: rem(16),
+      top: '50%',
+      transform: 'translateY(-50%)',
+      pointerEvents: 'none',
+    },
+  },
+  sizes: {
+    lg: {
+      field: {
+        fontSize: '3',
+        gap: '0.625rem',
+        height: '48',
+        paddingLeft: '16',
+      },
+    },
+    md: {
+      field: {
+        fontSize: '2',
+        gap: '0.375rem',
+        height: '40',
+        paddingLeft: '12',
+      },
+    },
   },
 });
 

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

@@ -15,6 +15,7 @@ import {
   InputRightElement,
   SystemStyleObject,
   IconProps,
+  useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
@@ -46,6 +47,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   infoText?: string;
   infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
+  isWarning?: boolean;
   helperText?: ReactNode;
   inputHeight?: number;
   inputRef?: Ref<HTMLInputElement>;
@@ -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;
 }
 
 /**
@@ -82,6 +86,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     isDisabled,
     isInvalid,
     isLoading,
+    isWarning,
     label,
     leftAddon,
     leftAddonPlacement,
@@ -101,9 +106,11 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     rightIconName,
     rightIconColor,
     role,
+    size = 'lg',
     step,
     type,
     value,
+    warningText,
     withCounter,
     ...rest
   } = props;
@@ -129,7 +136,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     ref: inputRef,
     role,
     step,
-    sx: { height: inputHeight, ...inputStyle },
+    size,
+    // sx: { height: inputHeight, ...inputStyle },
     type,
     value,
   };
@@ -162,7 +170,14 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   };
 
   const showLabel = label || !!infoText || (withCounter && maxLength);
-  const iconSize = inputHeight && inputHeight < 40 ? 16 : 24;
+
+  const iconNumber = inputHeight && inputHeight < 40 ? 16 : 24;
+
+  const iconSize = size === 'lg' ? '24' : '16';
+  const style = useMultiStyleConfig('Input', {
+    hasStateIcon: isInvalid || isWarning,
+    isPlaceholderShown: !!placeholder && !value,
+  });
 
   return (
     <FormControl {...formControlProps}>
@@ -170,7 +185,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 +196,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 +213,16 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         )}
       </Box>
 
-      <InputWrapper {...inputWrapperProps}>
+      <InputWrapper sx={style.inputContainer}>
         {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
         {!leftAddon && leftIconName && (
           <InputLeftElement
-            marginLeft={inputHeight ? (inputHeight - iconSize) / 2 : 12}
+            marginLeft={inputHeight ? (inputHeight - iconNumber) / 2 : 12}
             pointerEvents="none"
             top="50%"
             transform="translateY(-50%)"
           >
-            <Icon color={leftIconColor} name={leftIconName} size={`${iconSize}`} />
+            <Icon color={leftIconColor} name={leftIconName} size={iconSize} data-disabled={isDisabled || undefined} />
           </InputLeftElement>
         )}
         <ChakraInput
@@ -216,20 +231,47 @@ 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 - iconSize) / 2 : 12}
+            marginRight={inputHeight ? (inputHeight - iconNumber) / 2 : 12}
             pointerEvents="none"
             top="50%"
             transform="translateY(-50%)"
           >
-            <Icon color={rightIconColor} name={rightIconName} size={`${iconSize}`} />
+            <Icon
+              color={rightIconColor}
+              name={rightIconName}
+              size={iconSize}
+              sx={style.icon}
+              data-disabled={isDisabled || undefined}
+            />
           </InputRightElement>
         )}
       </InputWrapper>
       {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>
   );
 });