@hero-design/rn 8.23.0 → 8.24.0-alpha.1

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -4,9 +4,9 @@ import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
-import TextInput, { getVariant, TextInputHandles } from '../index';
+import TextInput, { getState, TextInputHandles } from '../index';
 
-describe('getVariant', () => {
+describe('getState', () => {
   it.each`
     disabled | error                       | editable | loading  | isEmptyValue | expected
     ${false} | ${undefined}                | ${true}  | ${false} | ${true}      | ${'default'}
@@ -15,10 +15,10 @@ describe('getVariant', () => {
     ${false} | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'error'}
     ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'disabled'}
   `(
-    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isEmptyValue $isEmptyValue',
+    'should return the correct state when disabled $disabled, errorMessage $errorMessage, editable $false, isEmptyValue $isEmptyValue',
     ({ disabled, error, editable, loading, isEmptyValue, expected }) => {
       expect(
-        getVariant({
+        getState({
           disabled,
           error,
           editable,
@@ -483,4 +483,16 @@ describe('TextInput', () => {
       expect(blurSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('variants', () => {
+    it('renders textarea variant correctly', () => {
+      const { toJSON, queryByText, queryByDisplayValue } = renderWithTheme(
+        <TextInput label="Amount (AUD)" value="2000" variant="textarea" />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Amount (AUD)')).toBeTruthy();
+      expect(queryByDisplayValue('2000')).toBeTruthy();
+    });
+  });
 });

package/src/components/TextInput/index.tsx

@@ -27,7 +27,7 @@ import {
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
-import type { Variant } from './StyledTextInput';
+import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 import { omit, pick } from '../../utils/helpers';
 
@@ -110,9 +110,13 @@ export interface TextInputProps extends NativeTextInputProps {
    * Component ref.
    */
   ref?: React.Ref<TextInputHandles>;
+  /**
+   * Component variant.
+   */
+  variant?: 'text' | 'textarea';
 }
 
-export const getVariant = ({
+export const getState = ({
   disabled,
   error,
   editable,
@@ -125,7 +129,7 @@ export const getVariant = ({
   loading: boolean;
   isFocused?: boolean;
   isEmptyValue?: boolean;
-}): Variant => {
+}): State => {
   if (disabled) {
     return 'disabled';
   }
@@ -167,6 +171,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       defaultValue,
       renderInputValue,
       allowFontScaling = false,
+      variant = 'text',
       ...nativeProps
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
@@ -177,7 +182,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
 
     const [isFocused, setIsFocused] = React.useState(false);
 
-    const variant = getVariant({
+    const state = getState({
       disabled,
       error,
       editable,
@@ -252,7 +257,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       ]),
       testID: 'text-input',
       accessibilityState: {
-        disabled: variant === 'disabled' || variant === 'readonly',
+        disabled: state === 'disabled' || state === 'readonly',
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -284,14 +289,14 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       <StyledContainer
         style={styleWithoutBackgroundColor}
         pointerEvents={
-          variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+          state === 'disabled' || state === 'readonly' ? 'none' : 'auto'
         }
         testID={testID}
       >
         <StyledTextInputContainer>
           <StyledBorderBackDrop
             themeFocused={isFocused}
-            themeVariant={variant}
+            themeState={state}
             testID="text-input-border"
             style={[{ backgroundColor }, borderStyle]}
           />
@@ -302,7 +307,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               style={{ backgroundColor }}
             >
               {required && (
-                <StyledAsteriskLabel themeVariant={variant} fontSize="small">
+                <StyledAsteriskLabel themeState={state} fontSize="small">
                   *
                 </StyledAsteriskLabel>
               )}
@@ -311,7 +316,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                   nativeID={accessibilityLabelledBy}
                   testID="input-label"
                   fontSize="small"
-                  themeVariant={variant}
+                  themeState={state}
                   style={{ backgroundColor }}
                 >
                   {label}
@@ -321,7 +326,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           )}
           {typeof prefix === 'string' ? (
             <Icon
-              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              intent={state === 'disabled' ? 'disabled-text' : 'text'}
               testID="input-prefix"
               icon={prefix}
               size="xsmall"
@@ -331,9 +336,12 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           )}
           <StyledTextInputAndLabelContainer>
             {!isFocused && isEmptyValue && (
-              <StyledLabelContainerInsideTextInput pointerEvents="none">
+              <StyledLabelContainerInsideTextInput
+                themeVariant={variant}
+                pointerEvents="none"
+              >
                 {required && (
-                  <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                  <StyledAsteriskLabelInsideTextInput themeState={state}>
                     *
                   </StyledAsteriskLabelInsideTextInput>
                 )}
@@ -342,7 +350,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                     nativeID={accessibilityLabelledBy}
                     testID="input-label"
                     fontSize="medium"
-                    themeVariant={variant}
+                    themeState={state}
                   >
                     {label}
                   </StyledLabelInsideTextInput>
@@ -354,6 +362,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
             ) : (
               <StyledTextInput
                 {...nativeInputProps}
+                themeVariant={variant}
+                multiline={variant === 'textarea' || nativeProps.multiline}
                 ref={(reference) => {
                   innerTextInput.current = reference;
                 }}
@@ -362,7 +372,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           </StyledTextInputAndLabelContainer>
           {typeof actualSuffix === 'string' ? (
             <Icon
-              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              intent={state === 'disabled' ? 'disabled-text' : 'text'}
               testID="input-suffix"
               icon={actualSuffix}
               spin={actualSuffix === 'loading'}
@@ -389,7 +399,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
             )}
             {shouldShowMaxLength && (
-              <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+              <StyledMaxLengthMessage themeState={state} fontSize="small">
                 {displayText.length}/{maxLength}
               </StyledMaxLengthMessage>
             )}

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -160,8 +160,11 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>
@@ -307,7 +311,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -354,8 +358,8 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -391,8 +395,11 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -403,6 +410,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -160,8 +160,11 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>
@@ -307,7 +311,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -354,8 +358,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -391,8 +395,11 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -403,6 +410,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -975,17 +975,22 @@ Object {
         "text": "#001f23",
       },
       "fontSizes": Object {
-        "asteriskLabel": 14,
+        "asteriskLabel": 16,
         "error": 12,
-        "labelInsideTextInput": 14,
+        "labelInsideTextInput": 16,
         "maxLength": 12,
-        "text": 14,
+        "text": 16,
+      },
+      "fonts": Object {
+        "text": "BeVietnamPro-Regular",
       },
       "radii": Object {
         "container": 8,
       },
       "sizes": Object {
         "errorAndHelpTextContainerHeight": 16,
+        "textInputMaxHeight": 144,
+        "textareaHeight": 144,
       },
       "space": Object {
         "containerMarginTop": 8,

package/src/theme/components/textInput.ts

@@ -58,12 +58,16 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     labelInsideTextInputMarginTop: -theme.space.xxsmall,
   };
 
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
   const fontSizes = {
-    text: theme.fontSizes.medium,
-    labelInsideTextInput: theme.fontSizes.medium,
+    text: theme.fontSizes.large,
+    labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.medium,
+    asteriskLabel: theme.fontSizes.large,
   };
 
   const borderWidths = {
@@ -79,9 +83,11 @@ const getTextInputTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     errorAndHelpTextContainerHeight: theme.sizes.medium,
+    textareaHeight: theme.sizes['15xlarge'],
+    textInputMaxHeight: theme.sizes['15xlarge'],
   };
 
-  return { colors, space, fontSizes, borderWidths, radii, sizes };
+  return { colors, space, fonts, fontSizes, borderWidths, radii, sizes };
 };
 
 export default getTextInputTheme;

package/testUtils/setup.tsx

@@ -40,6 +40,12 @@ jest.mock('react-native-pager-view', () => {
       this.index = Math.max(0, Math.min(page, React.Children.count(children)));
     };
 
+    setPageWithoutAnimation = (page: number) => {
+      const { children } = this.props;
+
+      this.index = Math.max(0, Math.min(page, React.Children.count(children)));
+    };
+
     render() {
       const { children } = this.props;
       return <RealComponent>{children}</RealComponent>;