@bitrise/bitkit 13.152.0 → 13.153.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -249,6 +249,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   (
     {
       'aria-label': ariaLabel,
+      badge,
       buttonProps = {},
       'data-testid': dataTestid,
       defaultValue,
@@ -339,7 +340,12 @@ 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} isRequired={required}>
-            <FormLabel infoTooltipLabel={infoTooltipLabel} infoTooltipProps={infoTooltipProps} htmlFor={buttonId}>
+            <FormLabel
+              badge={badge}
+              infoTooltipLabel={infoTooltipLabel}
+              infoTooltipProps={infoTooltipProps}
+              htmlFor={buttonId}
+            >
               {label}
             </FormLabel>
             <DropdownButton

package/src/Components/Dropdown/DropdownProps.ts

@@ -3,6 +3,7 @@ import { ChakraProps } from '@chakra-ui/react';
 import { UseFloatingProps } from '@floating-ui/react-dom-interactions';
 import { TypeIconName } from '../Icon/Icon';
 import { TooltipProps } from '../Tooltip/Tooltip';
+import { FormLabelProps } from '../Form/FormLabel';
 
 type DropdownInstance<T> = { value: T; name?: string };
 
@@ -10,6 +11,7 @@ type DropdownChangeEventHandler<T> = (ev: { target: DropdownInstance<T> }) => vo
 
 export interface DropdownProps<T> extends ChakraProps {
   'aria-label'?: string;
+  badge?: FormLabelProps['badge'];
   buttonProps?: ChakraProps;
   children?: ReactNode;
   'data-testid'?: string;

package/src/Components/Form/FormLabel.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FormLabelProps as ChakraFormLabelProps, FormLabel as ChakraFormLabel, forwardRef } from '@chakra-ui/react';
 import Text from '../Text/Text';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
@@ -5,6 +6,7 @@ import Box from '../Box/Box';
 import Icon from '../Icon/Icon';
 
 export interface FormLabelProps extends ChakraFormLabelProps {
+  badge?: ReactNode;
   children?: string;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
@@ -14,7 +16,7 @@ export interface FormLabelProps extends ChakraFormLabelProps {
 }
 
 const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
-  const { infoTooltipLabel, infoTooltipProps, maxLength, valueLength, withCounter, ...rest } = props;
+  const { badge, infoTooltipLabel, infoTooltipProps, maxLength, valueLength, withCounter, ...rest } = props;
 
   const showLabel = rest.children || !!infoTooltipLabel || (withCounter && maxLength);
 
@@ -40,7 +42,10 @@ const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
           <Icon color="icon/tertiary" name="Info" size="16" />
         </Tooltip>
       )}
-      {withCounter && maxLength && (
+      <Box as="span" alignSelf="flex-end" marginInlineStart="auto">
+        {badge}
+      </Box>
+      {!badge && withCounter && maxLength && (
         <Text
           as="span"
           color="text/secondary"

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

@@ -19,7 +19,7 @@ import {
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import { TooltipProps } from '../../Tooltip/Tooltip';
-import FormLabel from '../FormLabel';
+import FormLabel, { FormLabelProps } from '../FormLabel';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -41,6 +41,7 @@ type UsedChakraInputProps = Pick<
   | 'step'
 >;
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
+  badge?: FormLabelProps['badge'];
   'data-testid'?: string;
   errorText?: ReactNode;
   infoTooltipLabel?: string;
@@ -72,6 +73,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const {
     autoComplete,
     autoFocus,
+    badge,
     'data-testid': dataTestid,
     defaultValue,
     errorText,
@@ -165,6 +167,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   return (
     <FormControl {...formControlProps}>
       <FormLabel
+        badge={badge}
         infoTooltipLabel={infoTooltipLabel}
         infoTooltipProps={infoTooltipProps}
         maxLength={maxLength}

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

@@ -11,11 +11,12 @@ 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 FormLabel, { FormLabelProps } from '../FormLabel';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 export interface TagsInputProps extends UsedFormControlProps {
+  badge?: FormLabelProps['badge'];
   label?: string;
   placeholder?: string;
   value: string[];
@@ -32,6 +33,7 @@ export interface TagsInputProps extends UsedFormControlProps {
 }
 
 const TagsInput = ({
+  badge,
   errorText,
   helperText,
   infoTooltipLabel,
@@ -83,7 +85,7 @@ const TagsInput = ({
   return (
     <FormControl {...rest} isInvalid={isInvalid} isReadOnly={isReadOnly}>
       <Box alignItems="center" display={label || maxCount ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
-        <FormLabel infoTooltipLabel={infoTooltipLabel} infoTooltipProps={infoTooltipProps} htmlFor={id}>
+        <FormLabel badge={badge} infoTooltipLabel={infoTooltipLabel} infoTooltipProps={infoTooltipProps} htmlFor={id}>
           {label}
         </FormLabel>
 

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

@@ -27,6 +27,7 @@ type UsedChakraTextProps = Pick<
 >;
 
 export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {
+  badge?: FormLabelProps['badge'];
   'data-testid'?: string;
   errorText?: string;
   infoTooltipLabel?: string;
@@ -48,6 +49,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   const {
     autoComplete,
     autoFocus,
+    badge,
     'data-testid': dataTestid,
     errorText,
     helperText,
@@ -102,6 +104,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   return (
     <FormControl {...formControlProps}>
       <FormLabel
+        badge={badge}
         infoTooltipLabel={infoTooltipLabel}
         infoTooltipProps={infoTooltipProps}
         maxLength={maxLength}

package/src/Components/Select/Select.tsx

@@ -11,10 +11,11 @@ import {
 import Box from '../Box/Box';
 import Icon from '../Icon/Icon';
 import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
-import FormLabel from '../Form/FormLabel';
+import FormLabel, { FormLabelProps } from '../Form/FormLabel';
 import { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
+  badge?: FormLabelProps['badge'];
   'data-testid'?: string;
   errorText?: string;
   helperText?: string;
@@ -33,6 +34,7 @@ export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' |
 
 const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   const {
+    badge,
     children,
     'data-testid': dataTestid,
     defaultValue,
@@ -87,7 +89,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
 
   return (
     <FormControl {...formControlProps}>
-      <FormLabel infoTooltipLabel={infoTooltipLabel} infoTooltipProps={infoTooltipProps}>
+      <FormLabel badge={badge} infoTooltipLabel={infoTooltipLabel} infoTooltipProps={infoTooltipProps}>
         {label}
       </FormLabel>
       <Box sx={style.selectContainer}>

package/src/index.ts

@@ -358,6 +358,9 @@ export { default as DataWidgetItem } from './Components/DataWidget/DataWidgetIte
 export type { LabelProps } from './Components/Label/Label';
 export { default as Label } from './Components/Label/Label';
 
+export type { FormLabelProps } from './Components/Form/FormLabel';
+export { default as FormLabel } from './Components/Form/FormLabel';
+
 export {
   default as SettingsCard,
   SettingsCardData,