@bitrise/bitkit 13.328.0 → 13.330.0

package/package.json

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

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ export interface CheckboxProps extends Omit<
 > {
   inputProps?: CheckboxInputProps;
   helperText?: ReactNode;
-  errorText?: string;
+  errorText?: ReactNode;
   value?: ChakraCheckboxProps['value'];
   inputRef?: Ref<HTMLInputElement>;
   isIndeterminate?: ChakraCheckboxProps['isIndeterminate'];

package/src/Components/Form/FileInput/FileInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, DragEvent, useId, useRef, useState } from 'react';
+import { ChangeEvent, DragEvent, ReactNode, useId, useRef, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
@@ -15,8 +15,8 @@ import Text from '../../Text/Text';
 export interface FileInputProps extends Omit<FormControlProps, 'onChange'> {
   accept?: HTMLInputElement['accept'];
   disabledLabel?: string;
-  errorText?: string;
-  helperText?: string;
+  errorText?: ReactNode;
+  helperText?: ReactNode;
   name?: string;
   onChange: (files: FileList | null) => void;
 }

package/src/Components/Form/Radio/Radio.tsx

@@ -19,7 +19,7 @@ export interface RadioProps extends Omit<
 > {
   inputProps?: RadioInputProps;
   helperText?: ReactNode;
-  errorText?: string;
+  errorText?: ReactNode;
   value?: ChakraRadioProps['value'];
   inputRef?: Ref<HTMLInputElement>;
   isChecked?: ChakraRadioProps['isChecked'];

package/src/Components/Form/Textarea/Textarea.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, ReactNode, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
@@ -29,11 +29,11 @@ type UsedChakraTextProps = Pick<
 
 export type TextareaProps = {
   badge?: FormLabelProps['badge'];
-  errorText?: string;
+  errorText?: ReactNode;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
-  helperText?: string;
+  helperText?: ReactNode;
   label?: FormLabelProps['children'];
   maxLength?: number;
   recommendedLength?: number;

package/src/Components/Select/Select.tsx

@@ -18,7 +18,7 @@ import { getDataAttributes } from '../../utils/utils';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   badge?: FormLabelProps['badge'];
-  errorText?: string;
+  errorText?: ReactNode;
   helperText?: ReactNode;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;

package/src/Components/TreeView/TreeView.theme.ts

@@ -15,14 +15,14 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
   'leafBadge',
 ]);
 
-const baseStyle = definePartsStyle({
+const baseStyle = definePartsStyle(({ variant, isEmpty }) => ({
   listItem: {
     overflow: 'hidden',
   },
   icon: {
     marginTop: '10px',
     marginBottom: '2px',
-    color: 'icon/primary',
+    color: isEmpty ? 'icon/disabled' : 'icon/primary',
   },
   leafBadge: {
     marginTop: '10px',
@@ -92,7 +92,7 @@ const baseStyle = definePartsStyle({
     display: 'flex',
     alignItems: 'flex-start',
     textAlign: 'start',
-    borderBottom: '1px solid',
+    borderBottom: variant === 'files' ? 'none' : '1px solid',
     borderColor: 'border/minimal',
   },
   textBlock: {
@@ -102,6 +102,13 @@ const baseStyle = definePartsStyle({
     py: '8',
     gap: '4',
     flex: '1',
+    color: isEmpty ? 'text/tertiary' : 'text/body',
+    '& > .description-text': {
+      wordBreak: 'break-word',
+      overflowWrap: 'break-word',
+      textStyle: 'body/sm/regular',
+      color: 'text/secondary',
+    },
   },
   suffixBlock: {
     display: 'flex',
@@ -144,7 +151,7 @@ const baseStyle = definePartsStyle({
     display: 'none',
     alignItems: 'center',
   },
-});
+}));
 
 const TreeViewTheme = defineMultiStyleConfig({
   baseStyle,

package/src/Components/TreeView/TreeViewNode.tsx

@@ -49,13 +49,18 @@ const TreeViewNodeContent = memo(
     onClick,
     children,
   }: TreeViewNodeContentProps) => {
-    const styles = useMultiStyleConfig('TreeView', {});
     const { variant } = useTreeViewContext();
 
     const isFilesVariant = variant === 'files';
     const hasChildren = Boolean(children);
-    const isSelectable = !(isBranch && !hasChildren);
     const isEmptyBranch = isBranch && !hasChildren;
+    const isSelectable = !isEmptyBranch;
+
+    const styles = useMultiStyleConfig('TreeView', {
+      variant,
+      isEmpty: isEmptyBranch,
+    });
+
     const chevronIcon = isExpanded ? 'ChevronDown' : 'ChevronRight';
     const primaryIconName = isFilesVariant ? 'FolderEmpty' : chevronIcon;
 
@@ -137,16 +142,7 @@ const TreeViewNodeContent = memo(
                 <Text fontWeight={isExpanded ? 'semibold' : 'normal'} overflowWrap="break-word" wordBreak="break-word">
                   {title}
                 </Text>
-                {description && (
-                  <Text
-                    color="text/secondary"
-                    wordBreak="break-word"
-                    overflowWrap="break-word"
-                    textStyle="body/sm/regular"
-                  >
-                    {description}
-                  </Text>
-                )}
+                {description && <Text className="description-text">{description}</Text>}
               </Box>
 
               {(hasLabelContent || hasHoverActions) && (

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -71,7 +71,7 @@ export const SettingsCardFooterToggle = ({
   label,
   errorText,
   ...props
-}: { label: string; errorText?: string } & ToggleComponentProps) => {
+}: { label: string; errorText?: ReactNode } & ToggleComponentProps) => {
   return (
     <SettingsCardFooter>
       <Box display="flex" alignItems="center" gap="8">