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

package/src/components/TextInput/StyledTextInput.tsx

@@ -2,7 +2,8 @@ import { TextInput, View, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
-export type Variant = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+type Variant = 'text' | 'textarea';
 
 const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
@@ -19,39 +20,41 @@ const StyledLabelContainer = styled(View)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
 }));
 const StyledLabel = styled(Typography.Text)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
-  color: theme.__hd__.textInput.colors.labels[themeVariant],
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  color: theme.__hd__.textInput.colors.labels[themeState],
 }));
 
 const StyledAsteriskLabel = styled(Typography.Text)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
-  color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  color: theme.__hd__.textInput.colors.asterisks[themeState],
 }));
 
-const StyledLabelContainerInsideTextInput = styled(View)((): any => ({
+const StyledLabelContainerInsideTextInput = styled(View)<{
+  themeVariant: Variant;
+}>(({ themeVariant }) => ({
   flexDirection: 'row',
   zIndex: 9999,
-  alignItems: 'center',
+  alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
   ...StyleSheet.absoluteFillObject,
 }));
 
 const StyledLabelInsideTextInput = styled(Typography.Text)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
+  themeState: State;
+}>(({ theme, themeState }) => ({
   textAlignVertical: 'center',
   alignContent: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
   alignItems: 'center',
-  color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant],
+  color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
   marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
 }));
 
 const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
-  color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  color: theme.__hd__.textInput.colors.asterisks[themeState],
   fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
 }));
 
@@ -70,9 +73,9 @@ const StyledError = styled(Typography.Text)(({ theme }) => ({
 }));
 
 const StyledMaxLengthMessage = styled(Typography.Text)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
-  color: theme.__hd__.textInput.colors.maxLengthLabels[themeVariant],
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
   fontSize: theme.__hd__.textInput.fontSizes.maxLength,
   marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
   alignSelf: 'flex-end',
@@ -85,26 +88,34 @@ const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
   fontSize: theme.__hd__.textInput.fontSizes.error,
 }));
 
-const StyledTextInput = styled(TextInput)(({ theme }) => ({
-  textAlignVertical: 'center',
-  fontSize: theme.__hd__.textInput.fontSizes.text,
-  alignSelf: 'stretch',
-  flexGrow: 2,
-  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
-  paddingVertical: 0,
-}));
+const StyledTextInput = styled(TextInput)<{ themeVariant: Variant }>(
+  ({ theme, themeVariant }) => ({
+    textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
+    fontSize: theme.__hd__.textInput.fontSizes.text,
+    alignSelf: 'stretch',
+    flexGrow: 2,
+    marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+    paddingVertical: 0,
+    maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
+    height:
+      themeVariant === 'text'
+        ? undefined
+        : theme.__hd__.textInput.sizes.textareaHeight,
+    fontFamily: theme.__hd__.textInput.fonts.text,
+  })
+);
 
 const StyledBorderBackDrop = styled(View)<{
-  themeVariant: Variant;
+  themeState: State;
   themeFocused: boolean;
-}>(({ theme, themeFocused, themeVariant }) => ({
+}>(({ theme, themeFocused, themeState }) => ({
   ...StyleSheet.absoluteFillObject,
   borderWidth: themeFocused
     ? theme.__hd__.textInput.borderWidths.container.focused
     : theme.__hd__.textInput.borderWidths.container.normal,
   borderRadius: theme.__hd__.textInput.radii.container,
   borderColor:
-    theme.__hd__.textInput.colors.borders[themeVariant] ??
+    theme.__hd__.textInput.colors.borders[themeState] ??
     theme.__hd__.textInput.colors.borders.default,
 }));
 

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

@@ -15,15 +15,15 @@ import {
 
 describe('Label', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `('renders correctly with themeVariant $themeVariant', ({ themeVariant }) => {
+  `('renders correctly with themeState $themeState', ({ themeState }) => {
     const { toJSON } = renderWithTheme(
-      <StyledLabel themeVariant={themeVariant}>Label</StyledLabel>
+      <StyledLabel themeState={themeState}>Label</StyledLabel>
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -31,24 +31,21 @@ describe('Label', () => {
 });
 describe('LabelInsideTextInput', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledLabelInsideTextInput themeVariant={themeVariant}>
-          Label
-        </StyledLabelInsideTextInput>
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledLabelInsideTextInput themeState={themeState}>
+        Label
+      </StyledLabelInsideTextInput>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('LabelContainer', () => {
@@ -61,22 +58,19 @@ describe('LabelContainer', () => {
 
 describe('StyledAsteriskLabel', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledAsteriskLabel themeVariant={themeVariant}>*</StyledAsteriskLabel>
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledAsteriskLabel themeState={themeState}>*</StyledAsteriskLabel>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledErrorMessageContainer', () => {
@@ -99,24 +93,21 @@ describe('StyledErrorMessage', () => {
 
 describe('StyledMaxLengthMessage', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledMaxLengthMessage themeVariant={themeVariant}>
-          100/255
-        </StyledMaxLengthMessage>
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledMaxLengthMessage themeState={themeState}>
+        100/255
+      </StyledMaxLengthMessage>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledHelperText', () => {
@@ -131,29 +122,23 @@ describe('StyledHelperText', () => {
 
 describe('StyledBorderBackDrop', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledBorderBackDrop
-          themeVariant={themeVariant}
-          themeFocused={false}
-        />
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledBorderBackDrop themeState={themeState} themeFocused={false} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 
   it('renders correctly when focused', (): void => {
     const { toJSON } = renderWithTheme(
-      <StyledBorderBackDrop themeVariant="error" themeFocused />
+      <StyledBorderBackDrop themeState="error" themeFocused />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -161,8 +146,14 @@ describe('StyledBorderBackDrop', () => {
 });
 
 describe('StyledTextInput', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<StyledTextInput />);
+  it.each`
+    themeVariant
+    ${'text'}
+    ${'textarea'}
+  `('renders correctly with $themeState state', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledTextInput themeVariant={themeVariant} />
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });