@bitrise/bitkit 10.24.0 → 10.24.2

package/package.json

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

package/src/Components/Icons/16x16/History.tsx

@@ -3,10 +3,11 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const History = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.36668 8.66667C1.7039 12.0234 4.55826 14.6667 8.00002 14.6667C11.6667 14.6667 14.6667 11.6667 14.6667 8C14.6667 4.33333 11.6667 1.33333 8.00002 1.33333C5.37001 1.33333 3.08299 2.87679 2.00002 5.10263L2.00002 3.33333H0.666687V7.33333L4.66669 7.33333V6H3.05803C3.85332 4.05009 5.77296 2.66667 8.00002 2.66667C10.9334 2.66667 13.3334 5.06667 13.3334 8C13.3334 10.9333 10.9334 13.3333 8.00002 13.3333C5.29235 13.3333 3.03911 11.2884 2.70845 8.66667H1.36668ZM8.26675 9.93333L11.0668 8.6L10.4668 7.4L8.66675 8.26667V4.66667H7.33342V9.33333L8.26675 9.93333Z"
       fill="currentColor"
-      d="M1.333 8c0 3.442 2.644 6.296 6 6.633v-1.341C4.712 12.96 2.667 10.708 2.667 8c0-2.933 2.4-5.333 5.333-5.333 2.933 0 5.333 2.4 5.333 5.333 0 2.227-1.383 4.147-3.333 4.942v-1.609H8.667v4h4V14h-1.77c2.226-1.083 3.77-3.37 3.77-6 0-3.667-3-6.667-6.667-6.667S1.333 4.333 1.333 8Z"
     />
-    <path fill="currentColor" d="m11.067 8.6-2.8 1.333-.934-.6V4.667h1.334v3.6l1.8-.867.6 1.2Z" />
   </Icon>
 ));
 

package/src/Components/Icons/24x24/History.tsx

@@ -3,10 +3,11 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const History = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
-      d="M2 12c0 5.163 3.965 9.444 9 9.95v-2.013C7.067 19.441 4 16.061 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8c0 3.34-2.075 6.22-5 7.413V17h-2v6h6v-2h-2.654C19.685 19.375 22 15.945 22 12c0-5.5-4.5-10-10-10S2 6.5 2 12Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.04999 13C2.55581 18.0351 6.83737 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C8.05498 2 4.62445 4.31518 3 7.65394L3 5L1 5V11H7V9L4.58701 9C5.77995 6.07513 8.6594 4 12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20C7.93849 20 4.55863 16.9326 4.06264 13H2.04999ZM12.4001 14.9L16.6001 12.9L15.7001 11.1L13.0001 12.4V7H11.0001V14L12.4001 14.9Z"
       fill="currentColor"
     />
-    <path d="m16.6 12.9-4.2 2L11 14V7h2v5.4l2.7-1.3.9 1.8Z" fill="currentColor" />
   </Icon>
 ));
 

package/src/Components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useForm } from 'react-hook-form';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Select from './Select';
 
@@ -54,6 +55,22 @@ export const Controlled = () => {
   );
 };
 
+export const ControlledWithReactHookForm = () => {
+  const form = useForm({
+    defaultValues: {
+      field: undefined,
+    },
+  });
+
+  const props = form.register('field');
+
+  return (
+    <Select w="300px" placeholder="Test holder" {...props} isRequired>
+      {children}
+    </Select>
+  );
+};
+
 export const WithLoading = () => (
   <>
     <Select w="300px" isDisabled placeholder="Test holder">

package/src/Components/Select/Select.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import Select from './Select';
+
+const WithReactHookForm = ({ placeholder }: { placeholder?: string }) => {
+  const form = useForm({ defaultValues: { rating: undefined } });
+  const props = form.register('rating');
+
+  return (
+    <Select placeholder={placeholder} {...props}>
+      <option value="bad">Bad</option>
+      <option value="good">Good</option>
+    </Select>
+  );
+};
+
+const placeholder = 'What was your impression?';
+
+describe('Select', () => {
+  it('renders placeholder option', async () => {
+    render(
+      <Select placeholder={placeholder}>
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const placeholderOption = screen.queryByRole('option', { name: placeholder });
+    expect(placeholderOption).toBeInTheDocument();
+  });
+
+  it('renders placeholder option as disabled', async () => {
+    render(
+      <Select placeholder={placeholder}>
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const placeholderOption = screen.queryByRole('option', { name: placeholder });
+    expect(placeholderOption).toBeDisabled();
+  });
+
+  it('placeholder option is selected if no value is set', async () => {
+    render(
+      <Select placeholder={placeholder}>
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    expect(select).toHaveValue('');
+  });
+
+  it('updates selected option without placeholder', async () => {
+    render(<WithReactHookForm />);
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    await userEvent.selectOptions(select, 'good');
+    expect(select).toHaveValue('good');
+  });
+
+  it('updates selected option with placeholder', async () => {
+    render(<WithReactHookForm placeholder="What was your impression?" />);
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    await userEvent.selectOptions(select, 'good');
+    expect(select).toHaveValue('good');
+  });
+
+  it('handles defaultValue correctly without placeholder', async () => {
+    render(
+      <Select defaultValue="good">
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    expect(select).toHaveValue('good');
+  });
+
+  it('handles defaultValue correctly with placeholder', async () => {
+    render(
+      <Select placeholder="What was your impression?" defaultValue="good">
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    expect(select).toHaveValue('good');
+  });
+});

package/src/Components/Select/Select.tsx

@@ -41,6 +41,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     placeholder,
     size,
     value,
+    defaultValue,
     ...rest
   } = props;
   const iconSize = size === 'medium' ? '24' : '16';
@@ -48,7 +49,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
     ...rest,
-    ref,
   };
   const selectProperties: ChakraSelectProps = {
     icon: isLoading ? (
@@ -61,21 +61,23 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     onChange,
     size,
     value,
+    defaultValue,
     variant: 'select',
   };
   if (placeholder) {
-    if ('value' in selectProperties) {
-      selectProperties.value = selectProperties.value || '';
+    if ('value' in props) {
+      selectProperties.value = selectProperties.value ?? '';
     } else {
-      selectProperties.defaultValue = '';
+      selectProperties.defaultValue = props.defaultValue ?? '';
     }
   }
+
   return (
     <FormControl {...formControlProps}>
       {label && <FormLabel>{label}</FormLabel>}
       <ChakraSelect data-testid={dataTestid} ref={ref} {...selectProperties}>
         {placeholder && (
-          <option hidden disabled value="">
+          <option disabled value="">
             {placeholder}
           </option>
         )}

package/src/Components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef } from '@chakra-ui/react';
+import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef, ResponsiveValue } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 type TextTags =
@@ -37,21 +37,20 @@ type TextTags =
   | 'var';
 
 export interface TextProps extends ChakraTextProps {
-  align?: 'center' | 'justify' | 'left' | 'right';
+  align?: ResponsiveValue<'center' | 'justify' | 'left' | 'right'>;
   /**
    * Any valid HTML text tag
    */
   as?: TextTags;
-  className?: string;
   /**
    * Font weight
    */
-  fontWeight?: 'bold' | 'normal';
+  fontWeight?: ResponsiveValue<'bold' | 'normal'>;
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
-  size?: TextSizes;
-  textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
+  size?: ResponsiveValue<TextSizes>;
+  textTransform?: ResponsiveValue<'capitalize' | 'lowercase' | 'none' | 'uppercase'>;
   hasEllipsis?: boolean;
 }