@hero-design/rn 7.10.2-rc.0 → 7.10.2

package/src/components/TextInput/index.tsx

@@ -25,6 +25,7 @@ import {
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
+  StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
 import Icon, { IconName } from '../Icon';
 import { useTheme } from '../../theme';
@@ -139,8 +140,7 @@ const TextInput = ({
   ...nativeProps
 }: TextInputProps): JSX.Element => {
   const textInputReference = useRef<RNTextInput | null>(null);
-  const displayText = value || defaultValue || '';
-
+  const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
 
   const [isFocused, setIsFocused] = React.useState(false);
@@ -255,23 +255,25 @@ const TextInput = ({
         )}
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>
-        {error && (
-          <StyledErrorContainer>
-            <Icon
-              testID="input-error-icon"
-              icon="circle-info"
-              size="xsmall"
-              intent="danger"
-            />
+        <StyledErrorAndMaxLengthContainer>
+          {error && (
+            <StyledErrorContainer>
+              <Icon
+                testID="input-error-icon"
+                icon="circle-info"
+                size="xsmall"
+                intent="danger"
+              />
 
-            <StyledError testID="input-error-message">{error}</StyledError>
-          </StyledErrorContainer>
-        )}
-        {shouldShowMaxLength && (
-          <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
-            {displayText.length}/{maxLength}
-          </StyledMaxLengthMessage>
-        )}
+              <StyledError testID="input-error-message">{error}</StyledError>
+            </StyledErrorContainer>
+          )}
+          {shouldShowMaxLength && (
+            <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+              {displayText.length}/{maxLength}
+            </StyledMaxLengthMessage>
+          )}
+        </StyledErrorAndMaxLengthContainer>
         {helpText && <StyledHelperText>{helpText}</StyledHelperText>}
       </StyledErrorAndHelpTextContainer>
     </StyledContainer>

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

@@ -588,7 +588,7 @@ Object {
       "space": Object {
         "containerMarginVertical": 8,
         "containerPadding": 16,
-        "errorContainerMarginLeft": 16,
+        "errorAndHelpTextContainerPaddingLeft": 16,
         "errorContainerMarginRight": 4,
         "errorMarginLeft": 4,
         "inputHorizontalMargin": 8,

package/src/theme/components/textInput.ts

@@ -60,10 +60,10 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     containerMarginVertical: theme.space.small,
-    errorContainerMarginLeft: theme.space.medium,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
     maxLengthLabelMarginLeft: theme.space.xsmall,
+    errorAndHelpTextContainerPaddingLeft: theme.space.medium,
   };
 
   const fontSizes = {

package/types/components/TextInput/StyledTextInput.d.ts

@@ -94,4 +94,10 @@ declare const StyledErrorAndHelpTextContainer: import("@emotion/native").StyledC
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, };
+declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

package/types/theme/components/textInput.d.ts

@@ -58,10 +58,10 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         labelHorizontalPadding: number;
         inputHorizontalMargin: number;
         containerMarginVertical: number;
-        errorContainerMarginLeft: number;
         errorContainerMarginRight: number;
         errorMarginLeft: number;
         maxLengthLabelMarginLeft: number;
+        errorAndHelpTextContainerPaddingLeft: number;
     };
     fontSizes: {
         text: number;