@aws-amplify/ui-react-native 1.2.20 → 1.2.22

package/src/primitives/TextField/__tests__/TextField.spec.tsx

@@ -67,7 +67,7 @@ describe('TextField', () => {
     expect(queryByText(message)).toBeNull();
   });
 
-  it(`doesn't render the errorMessage if errorMessage prop is undefined`, () => {
+  it(`shows error style, but doesn't render the errorMessage if errorMessage prop is undefined`, () => {
     const message = 'Error message';
     const { toJSON, queryByText } = render(
       <TextField {...defaultProps} error />
@@ -111,18 +111,13 @@ describe('TextField', () => {
   });
 
   it('applies theme and style props', () => {
-    const errorMessageText = 'Error!';
-    const customErrorMessageStyle = { color: 'red' };
     const customFieldStyle = { color: 'orange' };
     const customLabelStyle = { color: 'blue' };
     const customStyle = { backgroundColor: 'purple' };
 
-    const { getByTestId, getByText } = render(
+    const { getByTestId } = render(
       <TextField
         {...defaultProps}
-        error
-        errorMessage={errorMessageText}
-        errorMessageStyle={customErrorMessageStyle}
         fieldStyle={customFieldStyle}
         labelStyle={customLabelStyle}
         style={customStyle}
@@ -135,7 +130,6 @@ describe('TextField', () => {
     const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
     const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
     const input = getByTestId(testID);
-    const errorMessage = getByText(errorMessageText);
 
     expect(container.props.style).toStrictEqual([
       themedStyle.container,
@@ -148,6 +142,61 @@ describe('TextField', () => {
       themedStyle.field,
       customFieldStyle,
     ]);
+  });
+
+  it('applies theme and style props with error', () => {
+    const errorMessageText = 'Error!';
+    const customErrorMessageStyle = { color: 'red' };
+    const customStyle = { backgroundColor: 'purple' };
+
+    const { getByTestId, getByText } = render(
+      <TextField
+        {...defaultProps}
+        style={customStyle}
+        error
+        errorMessage={errorMessageText}
+        errorMessageStyle={customErrorMessageStyle}
+      />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
+    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
+    const errorMessage = getByText(errorMessageText);
+
+    expect(container.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle,
+    ]);
+    expect(inputContainer.props.style).toStrictEqual({
+      ...themedStyle.fieldContainer,
+      ...themedStyle.error,
+    });
     expect(errorMessage.props.style).toContain(customErrorMessageStyle);
   });
+
+  it('applies theme and style props for disabled', () => {
+    const customStyle = { backgroundColor: 'purple' };
+
+    const { getByTestId } = render(
+      <TextField {...defaultProps} style={customStyle} disabled />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
+    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
+
+    expect(container.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle,
+    ]);
+    expect(inputContainer.props.style).toStrictEqual({
+      ...themedStyle.fieldContainer,
+      ...themedStyle.disabled,
+    });
+  });
 });

package/src/primitives/TextField/__tests__/__snapshots__/TextField.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       undefined,
     ]
@@ -18,9 +19,9 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -28,8 +29,7 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -69,6 +69,7 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -80,12 +81,13 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
 </View>
 `;
 
-exports[`TextField doesn't render the errorMessage if errorMessage prop is undefined 1`] = `
+exports[`TextField renders as expected 1`] = `
 <View
   style={
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       undefined,
     ]
@@ -98,9 +100,9 @@ exports[`TextField doesn't render the errorMessage if errorMessage prop is undef
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -108,8 +110,7 @@ exports[`TextField doesn't render the errorMessage if errorMessage prop is undef
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -149,6 +150,7 @@ exports[`TextField doesn't render the errorMessage if errorMessage prop is undef
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -160,12 +162,13 @@ exports[`TextField doesn't render the errorMessage if errorMessage prop is undef
 </View>
 `;
 
-exports[`TextField renders as expected 1`] = `
+exports[`TextField renders as expected as password field 1`] = `
 <View
   style={
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       undefined,
     ]
@@ -178,9 +181,9 @@ exports[`TextField renders as expected 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -188,8 +191,7 @@ exports[`TextField renders as expected 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -223,12 +225,14 @@ exports[`TextField renders as expected 1`] = `
       editable={true}
       placeholder="Placeholder"
       placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
       style={
         Array [
           Object {
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -240,12 +244,13 @@ exports[`TextField renders as expected 1`] = `
 </View>
 `;
 
-exports[`TextField renders as expected as password field 1`] = `
+exports[`TextField renders as expected when disabled 1`] = `
 <View
   style={
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       undefined,
     ]
@@ -258,9 +263,9 @@ exports[`TextField renders as expected as password field 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -268,8 +273,7 @@ exports[`TextField renders as expected as password field 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -287,6 +291,7 @@ exports[`TextField renders as expected as password field 1`] = `
         "borderRadius": 4,
         "borderWidth": 1,
         "flexDirection": "row",
+        "opacity": 0.6,
         "paddingHorizontal": 8,
       }
     }
@@ -295,21 +300,21 @@ exports[`TextField renders as expected as password field 1`] = `
     <TextInput
       accessibilityState={
         Object {
-          "disabled": undefined,
+          "disabled": true,
         }
       }
       accessible={true}
       autoCapitalize="none"
-      editable={true}
+      editable={false}
       placeholder="Placeholder"
       placeholderTextColor="hsl(210, 10%, 40%)"
-      secureTextEntry={true}
       style={
         Array [
           Object {
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -321,12 +326,13 @@ exports[`TextField renders as expected as password field 1`] = `
 </View>
 `;
 
-exports[`TextField renders as expected when disabled 1`] = `
+exports[`TextField renders as expected with error message 1`] = `
 <View
   style={
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       undefined,
     ]
@@ -339,9 +345,9 @@ exports[`TextField renders as expected when disabled 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -349,8 +355,7 @@ exports[`TextField renders as expected when disabled 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -364,11 +369,10 @@ exports[`TextField renders as expected when disabled 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
+        "borderColor": "hsl(0, 95%, 30%)",
         "borderRadius": 4,
         "borderWidth": 1,
         "flexDirection": "row",
-        "opacity": 0.6,
         "paddingHorizontal": 8,
       }
     }
@@ -377,12 +381,12 @@ exports[`TextField renders as expected when disabled 1`] = `
     <TextInput
       accessibilityState={
         Object {
-          "disabled": true,
+          "disabled": undefined,
         }
       }
       accessible={true}
       autoCapitalize="none"
-      editable={false}
+      editable={true}
       placeholder="Placeholder"
       placeholderTextColor="hsl(210, 10%, 40%)"
       style={
@@ -391,6 +395,7 @@ exports[`TextField renders as expected when disabled 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -399,15 +404,34 @@ exports[`TextField renders as expected when disabled 1`] = `
       testID="textInput"
     />
   </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "fontWeight": "400",
+          "lineHeight": 24,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    Error message
+  </Text>
 </View>
 `;
 
-exports[`TextField renders as expected with error message 1`] = `
+exports[`TextField shows error style, but doesn't render the errorMessage if errorMessage prop is undefined 1`] = `
 <View
   style={
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       undefined,
     ]
@@ -420,9 +444,9 @@ exports[`TextField renders as expected with error message 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -430,8 +454,7 @@ exports[`TextField renders as expected with error message 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -445,7 +468,7 @@ exports[`TextField renders as expected with error message 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
+        "borderColor": "hsl(0, 95%, 30%)",
         "borderRadius": 4,
         "borderWidth": 1,
         "flexDirection": "row",
@@ -471,6 +494,7 @@ exports[`TextField renders as expected with error message 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -479,23 +503,5 @@ exports[`TextField renders as expected with error message 1`] = `
       testID="textInput"
     />
   </View>
-  <Text
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 14,
-          "fontWeight": "400",
-          "lineHeight": 21,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        undefined,
-      ]
-    }
-  >
-    Error message
-  </Text>
 </View>
 `;

package/src/primitives/TextField/styles.ts

@@ -1,7 +1,6 @@
 import { Platform, StyleSheet } from 'react-native';
 
 import { StrictTheme } from '../../theme';
-import { getLineHeight } from '../../utils';
 import { TextFieldStyles } from './types';
 
 export const getThemedStyles = (theme: StrictTheme): TextFieldStyles => {
@@ -13,12 +12,16 @@ export const getThemedStyles = (theme: StrictTheme): TextFieldStyles => {
   return StyleSheet.create({
     container: {
       alignItems: 'flex-start',
+      marginBottom: space.xs,
       ...components?.textField?.container,
     },
     disabled: {
       opacity: opacities[60],
       ...components?.textField?.disabled,
     },
+    error: {
+      borderColor: colors.border.error,
+    },
     fieldContainer: {
       alignItems: 'center',
       borderColor: colors.border.primary,
@@ -33,14 +36,14 @@ export const getThemedStyles = (theme: StrictTheme): TextFieldStyles => {
       fontSize: fontSizes.medium,
       flexGrow: 1,
       paddingVertical: space.small,
+      paddingHorizontal: space.xxs,
       // this is needed because of extra padding inside the input - in Android only
       ...(Platform.OS === 'android' && { padding: 0 }),
       ...components?.textField?.field,
     },
     label: {
       color: colors.font.secondary,
-      lineHeight: getLineHeight(fontSizes.small),
-      padding: space.xxs,
+      paddingVertical: space.xs,
       ...components?.textField?.label,
     },
   });

package/src/primitives/TextField/types.ts

@@ -60,6 +60,7 @@ export interface TextFieldProps extends Omit<TextInputProps, 'editable'> {
 export interface TextFieldStyles {
   container?: ViewStyle;
   disabled?: ViewStyle;
+  error?: ViewStyle;
   field?: TextStyle;
   fieldContainer?: ViewStyle;
   label?: TextStyle;

package/src/theme/__tests__/createTheme.spec.ts

@@ -21,6 +21,54 @@ describe('createTheme', () => {
     });
   });
 
+  describe('number conversions', () => {
+    it('should convert strings to numbers where applicable', () => {
+      const { tokens } = createTheme({
+        tokens: {
+          borderWidths: {
+            small: '4',
+            medium: '1rem',
+            large: 6,
+          },
+          opacities: {
+            '10': '0.2',
+          },
+          space: {
+            small: 4,
+            medium: '6',
+            large: '{space.small.value}',
+          },
+          fontSizes: {
+            small: '1rem',
+          },
+        },
+      });
+      expect(tokens.borderWidths.small).toBe(4);
+      expect(tokens.borderWidths.medium).toBe(16);
+      expect(tokens.borderWidths.large).toBe(6);
+      expect(tokens.opacities['10']).toBe(0.2);
+      expect(tokens.space.small).toBe(4);
+      expect(tokens.space.medium).toBe(6);
+      expect(tokens.space.large).toBe(4);
+      expect(tokens.fontSizes.small).toBe(16);
+    });
+
+    it('should use the spaceModifier for space tokens with rem', () => {
+      const { tokens } = createTheme({
+        spaceModifier: 1.25,
+        tokens: {
+          space: {
+            small: 4,
+            medium: '1rem',
+          },
+        },
+      });
+
+      expect(tokens.space.small).toEqual(4);
+      expect(tokens.space.medium).toEqual(20);
+    });
+  });
+
   describe('with mixture of value and no value', () => {
     const { tokens } = createTheme({
       tokens: {

package/src/theme/createTheme.ts

@@ -2,21 +2,33 @@ import deepExtend from 'style-dictionary/lib/utils/deepExtend';
 import resolveObject from 'style-dictionary/lib/utils/resolveObject';
 import usesReference from 'style-dictionary/lib/utils/references/usesReference';
 import { isFunction, setupTokens } from '@aws-amplify/ui';
-import { Theme, StrictTheme, ColorMode, Components } from './types';
+import {
+  Theme,
+  StrictTheme,
+  ColorMode,
+  Components,
+  StrictTokens,
+} from './types';
 import { defaultTheme } from './defaultTheme';
 
 // This will resolve all references in component themes by either
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
-const setupComponents = ({ components, tokens }: StrictTheme) => {
+const setupComponents = ({
+  components,
+  tokens,
+}: {
+  components: Components;
+  tokens: StrictTokens;
+}) => {
   const output = components
     ? Object.entries(components).reduce(
         (acc, [key, value]) => ({
           ...acc,
           [key]: isFunction(value) ? (value(tokens) as typeof value) : value,
         }),
-        {} as Components<'components'>
+        {}
       )
     : {};
 
@@ -26,6 +38,16 @@ const setupComponents = ({ components, tokens }: StrictTheme) => {
   }).components;
 };
 
+const shouldParseFloatValue = (pathKey: string) =>
+  [
+    'space',
+    'borderWidths',
+    'opacities',
+    'fontSizes',
+    'lineHeights',
+    'radii',
+  ].includes(pathKey);
+
 const setupToken = ({
   token,
   path = [],
@@ -39,27 +61,28 @@ const setupToken = ({
 }): string | number => {
   const { value } = token;
   if (typeof value === 'string') {
-    // Perform transforms
-    if (path[0] === 'space') {
-      if (value.includes('rem')) {
-        return Math.floor(parseFloat(value) * 16 * spaceModifier);
-      }
-    }
-    if (value.includes('rem')) {
-      return Math.floor(parseFloat(value) * 16);
-    }
-    if (value.includes('px')) {
-      return parseInt(value, 10);
-    }
-    if (path[0] === 'opacities') {
-      return parseFloat(value);
-    }
     // Remove .value from references if there is a reference
+    // this needs to come first so we don't get NaNs for references
     if (usesReference(value)) {
       return value.replace('.value', '');
     }
+
+    if (shouldParseFloatValue(path[0])) {
+      if (value.includes('rem')) {
+        if (path[0] === 'space') {
+          return Math.floor(parseFloat(value) * 16 * spaceModifier);
+        }
+        return Math.floor(parseFloat(value) * 16);
+      }
+      if (value.includes('px')) {
+        return parseInt(value, 10);
+      }
+      return parseFloat(value);
+    }
+
     return value;
   }
+
   // Font Weights in RN are strings
   if (path[0] === 'fontWeights') {
     return `${value}`;
@@ -118,14 +141,14 @@ export const createTheme = (
     }) as StrictTheme['tokens']
   );
 
-  let { components } = mergedTheme;
+  let components;
 
   // Resolve component token references too
   if (mergedTheme.components) {
     components = setupComponents({
-      ...mergedTheme,
+      components: mergedTheme.components,
       tokens,
-    }) as Components<'output'>;
+    });
   }
 
   return { ...mergedTheme, tokens, components };