@bitrise/bitkit 13.79.1-alpha.1 → 13.80.0

package/package.json

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

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { Children } from 'react';
+import React, { Children } from 'react';
 import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem,
@@ -24,6 +24,10 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
 
   const childrenCount = Children.count(children);
   const items = Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
     return (
       <BreadcrumbItem>
         {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator marginLeft="0" />}

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

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

package/src/Components/Select/Select.tsx

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