@bitrise/bitkit 13.150.0 → 13.150.1-alpha.11

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -14,12 +14,12 @@ import {
   FormControl,
   FormErrorMessage,
   FormHelperText,
-  FormLabel,
   useControllableState,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import SearchInput from '../SearchInput/SearchInput';
+import FormLabel from '../Form/FormLabel';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -260,6 +260,8 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       formLabel: customFormLabel,
       helperText,
       iconName,
+      infoText,
+      infoTooltipProps,
       isError,
       isWarning,
       label,
@@ -335,12 +337,10 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       <>
         {name && formValue && <input name={name} type="hidden" value={formValue} />}
         <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
-          <FormControl {...props} isDisabled={disabled} isInvalid={isError}>
-            {label && (
-              <FormLabel htmlFor={buttonId} marginBlockEnd="4">
-                {label}
-              </FormLabel>
-            )}
+          <FormControl {...props} isDisabled={disabled} isInvalid={isError} isRequired>
+            <FormLabel infoText={infoText} infoTooltipProps={infoTooltipProps} htmlFor={buttonId}>
+              {label}
+            </FormLabel>
             <DropdownButton
               {...referenceProps}
               {...buttonProps}

package/src/Components/Dropdown/DropdownProps.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { ChakraProps } from '@chakra-ui/react';
 import { UseFloatingProps } from '@floating-ui/react-dom-interactions';
 import { TypeIconName } from '../Icon/Icon';
+import { TooltipProps } from '../Tooltip/Tooltip';
 
 type DropdownInstance<T> = { value: T; name?: string };
 
@@ -22,9 +23,11 @@ export interface DropdownProps<T> extends ChakraProps {
   helperText?: ReactNode;
   iconName?: TypeIconName;
   id?: string;
+  infoText?: string;
+  infoTooltipProps?: TooltipProps;
   isError?: boolean;
   isWarning?: boolean;
-  label?: ReactNode;
+  label?: string;
   name?: string;
   onBlur?: DropdownChangeEventHandler<T>;
   onChange?: DropdownChangeEventHandler<T>;

package/src/Components/Form/FormLabel.tsx

@@ -0,0 +1,58 @@
+import { FormLabelProps as ChakraFormLabelProps, FormLabel as ChakraFormLabel, forwardRef } from '@chakra-ui/react';
+import Text from '../Text/Text';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import Box from '../Box/Box';
+import Icon from '../Icon/Icon';
+
+export interface FormLabelProps extends ChakraFormLabelProps {
+  children?: string;
+  infoText?: string;
+  infoTooltipProps?: TooltipProps;
+  maxLength?: number;
+  valueLength?: number;
+  withCounter?: boolean;
+}
+
+const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
+  const { infoText, infoTooltipProps, maxLength, valueLength, withCounter, ...rest } = props;
+
+  const showLabel = rest.children || !!infoText || (withCounter && maxLength);
+
+  if (!showLabel) {
+    return null;
+  }
+
+  return (
+    <Box alignItems="center" display="flex" gap="4" marginBlockEnd="4">
+      <ChakraFormLabel
+        optionalIndicator={
+          <Text as="span" color="text/secondary" fontSize="2" fontWeight="normal" marginInlineStart="4">
+            (optional)
+          </Text>
+        }
+        requiredIndicator={null}
+        {...rest}
+        ref={ref}
+      />
+
+      {!!infoText && (
+        <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
+          <Icon color="icon/tertiary" name="Info" size="16" />
+        </Tooltip>
+      )}
+      {withCounter && maxLength && (
+        <Text
+          as="span"
+          color="text/secondary"
+          marginInlineStart="auto"
+          size="2"
+          sx={{ fontVariantNumeric: 'tabular-nums' }}
+        >
+          {valueLength}/{maxLength}
+        </Text>
+      )}
+    </Box>
+  );
+});
+
+export default FormLabel;

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

@@ -4,7 +4,6 @@ import {
   FormControlProps,
   FormErrorMessage,
   FormHelperText,
-  FormLabel,
   forwardRef,
   Input as ChakraInput,
   InputLeftElement,
@@ -19,9 +18,8 @@ import {
   BoxProps,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
-import Text from '../../Text/Text';
-import Box from '../../Box/Box';
-import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
+import { TooltipProps } from '../../Tooltip/Tooltip';
+import FormLabel from '../FormLabel';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -53,7 +51,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
   inputWrapperStyle?: BoxProps;
-  label?: ReactNode;
+  label?: string;
   leftAddon?: ReactNode;
   leftAddonPlacement?: 'inside' | 'outside';
   leftIconColor?: IconProps['color'];
@@ -161,45 +159,20 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     }
   };
 
-  const showLabel = label || !!infoText || (withCounter && maxLength);
-
   const iconSize = size === 'lg' ? '24' : '16';
   const style = useMultiStyleConfig('Input');
 
   return (
     <FormControl {...formControlProps}>
-      <Box alignItems="center" display={showLabel ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
-        {label && (
-          <FormLabel
-            optionalIndicator={
-              <Text as="span" color="text.secondary" fontSize="2" fontWeight="normal" marginLeft="4">
-                (Optional)
-              </Text>
-            }
-            requiredIndicator={null}
-          >
-            {label}
-          </FormLabel>
-        )}
-        {!!infoText && (
-          <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
-            <Icon color="icon.tertiary" name="Info" size="16" />
-          </Tooltip>
-        )}
-
-        {withCounter && maxLength && (
-          <Text
-            as="span"
-            color="text.secondary"
-            marginInlineStart="auto"
-            size="2"
-            sx={{ fontVariantNumeric: 'tabular-nums' }}
-          >
-            {valueLength}/{maxLength}
-          </Text>
-        )}
-      </Box>
-
+      <FormLabel
+        infoText={infoText}
+        infoTooltipProps={infoTooltipProps}
+        maxLength={maxLength}
+        valueLength={valueLength}
+        withCounter={withCounter}
+      >
+        {label}
+      </FormLabel>
       <InputGroup sx={style.inputContainer} {...inputWrapperStyle}>
         {leftAddon && <LeftContentWrapper>{leftAddon}</LeftContentWrapper>}
         {!leftAddon && leftIconName && (

package/src/Components/Form/TagsInput/TagsInput.tsx

@@ -5,13 +5,14 @@ import {
   FormControlProps,
   FormErrorMessage,
   FormHelperText,
-  FormLabel,
   useStyleConfig,
 } from '@chakra-ui/react';
 import Icon from '../../Icon/Icon';
 import Box from '../../Box/Box';
 import Tag from '../../Tag/Tag';
 import Text from '../../Text/Text';
+import FormLabel from '../FormLabel';
+import { TooltipProps } from '../../Tooltip/Tooltip';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 export interface TagsInputProps extends UsedFormControlProps {
@@ -26,11 +27,15 @@ export interface TagsInputProps extends UsedFormControlProps {
   errorText?: ReactNode;
   helperText?: ReactNode;
   isReadOnly?: boolean;
+  infoText?: string;
+  infoTooltipProps?: TooltipProps;
 }
 
 const TagsInput = ({
   errorText,
   helperText,
+  infoText,
+  infoTooltipProps,
   invalidValues = [],
   isReadOnly,
   label,
@@ -78,19 +83,9 @@ const TagsInput = ({
   return (
     <FormControl {...rest} isInvalid={isInvalid} isReadOnly={isReadOnly}>
       <Box alignItems="center" display={label || maxCount ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
-        {label && (
-          <FormLabel
-            htmlFor={id}
-            optionalIndicator={
-              <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
-                (Optional)
-              </Text>
-            }
-            requiredIndicator={false}
-          >
-            {label}
-          </FormLabel>
-        )}
+        <FormLabel infoText={infoText} infoTooltipProps={infoTooltipProps} htmlFor={id}>
+          {label}
+        </FormLabel>
 
         {maxCount && (
           <Text

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

@@ -1,18 +1,15 @@
-import { ChangeEvent, ReactNode, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
   FormErrorMessage,
   FormHelperText,
-  FormLabel,
   forwardRef,
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
 } 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';
+import { TooltipProps } from '../../Tooltip/Tooltip';
+import FormLabel, { FormLabelProps } from '../FormLabel';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraTextProps = Pick<
@@ -36,7 +33,7 @@ export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps
   infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
   helperText?: string;
-  label?: ReactNode;
+  label?: FormLabelProps['children'];
   name?: string;
   onBlur?: ChakraTextareaProps['onBlur'];
   onChange?: ChakraTextareaProps['onChange'];
@@ -104,36 +101,15 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
 
   return (
     <FormControl {...formControlProps}>
-      {label && (
-        <Box alignItems="center" display="flex" gap="4" marginBlockEnd="4">
-          <FormLabel
-            optionalIndicator={
-              <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
-                (Optional)
-              </Text>
-            }
-            requiredIndicator={null}
-          >
-            {label}
-          </FormLabel>
-          {!!infoText && (
-            <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
-              <Icon color="neutral.50" name="Info" size="16" />
-            </Tooltip>
-          )}
-          {withCounter && maxLength && (
-            <Text
-              as="span"
-              color="neutral.40"
-              marginInlineStart="auto"
-              size="2"
-              sx={{ fontVariantNumeric: 'tabular-nums' }}
-            >
-              {valueLength}/{maxLength}
-            </Text>
-          )}
-        </Box>
-      )}
+      <FormLabel
+        infoText={infoText}
+        infoTooltipProps={infoTooltipProps}
+        maxLength={maxLength}
+        valueLength={valueLength}
+        withCounter={withCounter}
+      >
+        {label}
+      </FormLabel>
 
       <ChakraTextarea {...textareaProps} onChange={onTextareaChange} />
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}

package/src/Components/Select/Select.tsx

@@ -1,27 +1,28 @@
-import { ReactNode } from 'react';
 import {
   FormControl,
   FormControlProps,
   FormErrorMessage,
   FormHelperText,
-  FormLabel,
   forwardRef,
   Select as ChakraSelect,
   SelectProps as ChakraSelectProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
-import Text from '../Text/Text';
 import Icon from '../Icon/Icon';
 import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
+import FormLabel from '../Form/FormLabel';
+import { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
   errorText?: string;
   helperText?: string;
+  infoText?: string;
+  infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
   isWarning?: boolean;
-  label?: ReactNode;
+  label?: string;
   name?: string;
   onBlur?: ChakraSelectProps['onBlur'];
   onChange?: ChakraSelectProps['onChange'];
@@ -37,6 +38,8 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     defaultValue,
     errorText,
     helperText,
+    infoText,
+    infoTooltipProps,
     isDisabled,
     isInvalid,
     isLoading,
@@ -84,19 +87,9 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
 
   return (
     <FormControl {...formControlProps}>
-      {label && (
-        <FormLabel
-          marginBlockEnd="4"
-          optionalIndicator={
-            <Text as="span" color="neutral.40" fontSize="2" fontWeight="normal" marginLeft="4px">
-              (Optional)
-            </Text>
-          }
-          requiredIndicator={null}
-        >
-          {label}
-        </FormLabel>
-      )}
+      <FormLabel infoText={infoText} infoTooltipProps={infoTooltipProps}>
+        {label}
+      </FormLabel>
       <Box sx={style.selectContainer}>
         <ChakraSelect ref={ref} data-testid={dataTestid} {...selectProperties} sx={style.field}>
           {placeholder && (