@bitrise/bitkit 10.24.2-alpha-chakra.1 → 10.24.2

package/package.json

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

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' | string[];
+  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;
 }