@bitrise/bitkit 13.205.0 → 13.206.0

package/package.json

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

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

@@ -20,6 +20,7 @@ import {
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 import FormLabel, { FormLabelProps } from '../FormLabel';
+import { getDataAttributes } from '../../../utils/utils';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -42,7 +43,6 @@ type UsedChakraInputProps = Pick<
 >;
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   badge?: FormLabelProps['badge'];
-  'data-testid'?: string;
   errorText?: ReactNode;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
@@ -74,7 +74,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     autoComplete,
     autoFocus,
     badge,
-    'data-testid': dataTestid,
     defaultValue,
     errorText,
     helperText,
@@ -124,7 +123,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const inputProps = {
     autoComplete,
     autoFocus,
-    'data-testid': dataTestid,
     defaultValue,
     max,
     maxLength,
@@ -142,6 +140,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     value,
   };
 
+  const dataAttributes = getDataAttributes(rest);
+
   const inputInlinePadding = size === 'lg' ? '15' : '11';
 
   const RightContentWrapper = rightAddonPlacement === 'inside' ? InputRightElement : InputRightAddon;
@@ -193,6 +193,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           paddingLeft={inputLeftPadding}
           paddingRight={inputRightPadding}
           {...inputProps}
+          {...dataAttributes}
           onChange={onInputChange}
         />
         {rightAddon && <RightContentWrapper>{rightAddon}</RightContentWrapper>}

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

@@ -10,6 +10,7 @@ import {
 } from '@chakra-ui/react';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 import FormLabel, { FormLabelProps } from '../FormLabel';
+import { getDataAttributes } from '../../../utils/utils';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraTextProps = Pick<
@@ -28,7 +29,6 @@ type UsedChakraTextProps = Pick<
 
 export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {
   badge?: FormLabelProps['badge'];
-  'data-testid'?: string;
   errorText?: string;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
@@ -50,7 +50,6 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     autoComplete,
     autoFocus,
     badge,
-    'data-testid': dataTestid,
     errorText,
     helperText,
     infoTooltipLabel,
@@ -80,7 +79,6 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   const textareaProps = {
     autoComplete,
     autoFocus,
-    'data-testid': dataTestid,
     maxLength,
     minLength,
     name,
@@ -101,6 +99,8 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     }
   };
 
+  const dataAttributes = getDataAttributes(props);
+
   return (
     <FormControl {...formControlProps}>
       <FormLabel
@@ -114,7 +114,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
         {label}
       </FormLabel>
 
-      <ChakraTextarea {...textareaProps} onChange={onTextareaChange} />
+      <ChakraTextarea {...textareaProps} {...dataAttributes} onChange={onTextareaChange} />
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
       {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
     </FormControl>

package/src/Components/Select/Select.tsx

@@ -14,6 +14,7 @@ import Icon from '../Icon/Icon';
 import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 import FormLabel, { FormLabelProps } from '../Form/FormLabel';
 import { TooltipProps } from '../Tooltip/Tooltip';
+import { getDataAttributes } from '../../utils/utils';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   badge?: FormLabelProps['badge'];
@@ -72,6 +73,9 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     size,
     value,
   };
+
+  const dataAttributes = getDataAttributes(props);
+
   if (placeholder) {
     if ('value' in props) {
       selectProperties.value = selectProperties.value ?? '';
@@ -92,7 +96,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
         {label}
       </FormLabel>
       <Box sx={style.selectContainer}>
-        <ChakraSelect ref={ref} {...selectProperties} sx={style.field}>
+        <ChakraSelect ref={ref} {...selectProperties} {...dataAttributes} sx={style.field}>
           {placeholder && (
             <option disabled value="">
               {placeholder}