@bitrise/bitkit 13.79.1-alpha.0 → 13.80.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.79.1-alpha.0",
+  "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

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