@bitrise/bitkit 12.38.1 → 12.39.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.38.1",
+  "version": "12.39.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/AccordionLegacy/Accordion.theme.ts

@@ -16,7 +16,6 @@ type ColorObj = {
 type VariantObj = {
   [key: string]: {
     borderRadius: string;
-    boxShadow: string;
     marginBottom: string;
     border?: string;
   };
@@ -67,12 +66,10 @@ const colors: ColorObj = {
 const variants: VariantObj = {
   legacy: {
     borderRadius: '8',
-    boxShadow: 'small',
     marginBottom: '16',
   },
   flat: {
     borderRadius: '0',
-    boxShadow: 'none',
     marginBottom: '16',
   },
 };
@@ -85,7 +82,6 @@ const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colo
     border: variants[variant].border ?? '1px solid',
     borderColor: colors[colorScheme].border,
     borderRadius: variants[variant].borderRadius,
-    boxShadow: variants[variant].boxShadow,
     marginBottom: variants[variant].marginBottom,
     _last: {
       marginBottom: 0,

package/src/Components/DefinitionTooltip/DefinitionTooltip.theme.ts

@@ -13,6 +13,7 @@ const DefinitionTooltipTheme = defineMultiStyleConfig({
     trigger: {
       borderBottom: '1px dotted',
       borderBottomColor: 'neutral.60',
+      width: 'fit-content',
       _hover: {
         borderBottomColor: 'purple.50',
       },

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

@@ -23,7 +23,6 @@ const FormTheme = {
   },
   FormLabel: {
     baseStyle: {
-      marginBottom: '4',
       fontSize: '2',
       fontWeight: 'bold',
     } as ComponentStyleConfig,

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

@@ -18,6 +18,7 @@ import { TypeColors } from '../../../Foundations/Colors/Colors';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';
+import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -40,6 +41,8 @@ type UsedChakraInputProps = Pick<
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   'data-testid'?: string;
   errorText?: ReactNode;
+  infoText?: string;
+  infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
   helperText?: ReactNode;
   inputRef?: Ref<HTMLInputElement>;
@@ -64,6 +67,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     errorText,
     helperText,
     isDisabled,
+    infoText,
+    infoTooltipProps,
     inputRef,
     inputStyle,
     isInvalid,
@@ -138,7 +143,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
 
   return (
     <FormControl {...formControlProps}>
-      <Box display="flex" justifyContent="space-between">
+      <Box display="flex" gap="4" alignItems="center" marginBlockEnd="4">
         {label && (
           <FormLabel
             requiredIndicator={null as any}
@@ -151,8 +156,20 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
             {label}
           </FormLabel>
         )}
+        {!!infoText && (
+          <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
+            <Icon color="neutral.50" name="Info" size="16" />
+          </Tooltip>
+        )}
+
         {withCounter && maxLength && (
-          <Text as="span" size="2" color="neutral.40" sx={{ fontVariantNumeric: 'tabular-nums' }}>
+          <Text
+            as="span"
+            size="2"
+            color="neutral.40"
+            sx={{ fontVariantNumeric: 'tabular-nums' }}
+            marginInlineStart="auto"
+          >
             {valueLength}/{maxLength}
           </Text>
         )}

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

@@ -11,6 +11,8 @@ import {
 } from '@chakra-ui/react';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';
+import Icon from '../../Icon/Icon';
+import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraTextProps = Pick<
@@ -21,6 +23,8 @@ type UsedChakraTextProps = Pick<
 export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {
   'data-testid'?: string;
   errorText?: string;
+  infoText?: string;
+  infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
   helperText?: string;
   label?: ReactNode;
@@ -41,6 +45,8 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     'data-testid': dataTestid,
     errorText,
     helperText,
+    infoText,
+    infoTooltipProps,
     isDisabled,
     isInvalid,
     isLoading,
@@ -90,7 +96,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   return (
     <FormControl {...formControlProps}>
       {label && (
-        <Box display="flex" justifyContent="space-between">
+        <Box display="flex" gap="4" alignItems="center" marginBlockEnd="4">
           <FormLabel
             requiredIndicator={null as any}
             optionalIndicator={
@@ -101,8 +107,19 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
           >
             {label}
           </FormLabel>
+          {!!infoText && (
+            <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
+              <Icon color="neutral.50" name="Info" size="16" />
+            </Tooltip>
+          )}
           {withCounter && maxLength && (
-            <Text as="span" size="2" color="neutral.40" sx={{ fontVariantNumeric: 'tabular-nums' }}>
+            <Text
+              as="span"
+              size="2"
+              color="neutral.40"
+              sx={{ fontVariantNumeric: 'tabular-nums' }}
+              marginInlineStart="auto"
+            >
               {valueLength}/{maxLength}
             </Text>
           )}