@hero-design/rn 8.12.0 → 8.12.1

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

@@ -380,6 +380,38 @@ describe('TextInput', () => {
     });
   });
 
+  describe('backgroundColor', () => {
+    it('renders correctly', () => {
+      const wrapper = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          required
+          helpText="This is helper text"
+          placeholder="Enter Amount"
+          defaultValue="1000"
+          value="2000"
+          maxLength={255}
+          style={{ backgroundColor: theme.colors.neutralGlobalSurface }}
+        />
+      );
+
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.getByTestId('text-input')).toHaveStyle({
+        backgroundColor: theme.colors.neutralGlobalSurface,
+      });
+      expect(wrapper.getByTestId('text-input-border')).toHaveStyle({
+        backgroundColor: theme.colors.neutralGlobalSurface,
+      });
+      expect(wrapper.getByTestId('label-container')).toHaveStyle({
+        backgroundColor: theme.colors.neutralGlobalSurface,
+      });
+      expect(wrapper.getByText('Amount (AUD)')).toHaveStyle({
+        backgroundColor: theme.colors.neutralGlobalSurface,
+      });
+    });
+  });
+
   describe('ref', () => {
     it('ref methods work correctly', () => {
       const mockChildMethod = jest.fn();

package/src/components/TextInput/index.tsx

@@ -217,9 +217,31 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       };
     }, [textStyle]);
 
+    const { backgroundColor, styleWithoutBackgroundColor } = useMemo(() => {
+      if (!style) {
+        return {
+          backgroundColor: theme.__hd__.textInput.colors.containerBackground,
+        };
+      }
+
+      const flattenTextStyle = StyleSheet.flatten(style);
+      return {
+        backgroundColor:
+          flattenTextStyle.backgroundColor ??
+          theme.__hd__.textInput.colors.containerBackground,
+        styleWithoutBackgroundColor: omit(
+          ['backgroundColor'],
+          flattenTextStyle
+        ),
+      };
+    }, [style, theme]);
+
     const nativeInputProps: NativeTextInputProps = {
       style: StyleSheet.flatten([
-        { color: theme.__hd__.textInput.colors.text },
+        {
+          backgroundColor,
+          color: theme.__hd__.textInput.colors.text,
+        },
         textStyleWithoutBorderStyle,
       ]),
       testID: 'text-input',
@@ -253,7 +275,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
 
     return (
       <StyledContainer
-        style={style}
+        style={styleWithoutBackgroundColor}
         pointerEvents={
           variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
         }
@@ -263,10 +285,15 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           <StyledBorderBackDrop
             themeFocused={isFocused}
             themeVariant={variant}
-            style={borderStyle}
+            testID="text-input-border"
+            style={[{ backgroundColor }, borderStyle]}
           />
           {(isFocused || (label && !isEmptyValue)) && (
-            <StyledLabelContainer pointerEvents="none">
+            <StyledLabelContainer
+              pointerEvents="none"
+              testID="label-container"
+              style={{ backgroundColor }}
+            >
               {required && (
                 <StyledAsteriskLabel themeVariant={variant} fontSize="small">
                   *
@@ -278,6 +305,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                   testID="input-label"
                   fontSize="small"
                   themeVariant={variant}
+                  style={{ backgroundColor }}
                 >
                   {label}
                 </StyledLabel>

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

@@ -44,6 +44,8 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -64,9 +66,15 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -83,9 +91,12 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -101,7 +112,9 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -151,6 +164,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]
@@ -258,6 +272,8 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -278,9 +294,15 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -297,9 +319,12 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -315,7 +340,9 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -365,6 +392,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]

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

@@ -44,6 +44,8 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -64,9 +66,15 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -83,9 +91,12 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -101,7 +112,9 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -151,6 +164,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]
@@ -258,6 +272,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -278,9 +294,15 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -297,9 +319,12 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -315,7 +340,9 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -365,6 +392,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]

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

@@ -829,6 +829,7 @@ Object {
           "filled": "#001f23",
           "readonly": "#808f91",
         },
+        "containerBackground": "#ffffff",
         "error": "#de350b",
         "labelBackground": "#ffffff",
         "labels": Object {

package/src/theme/components/textInput.ts

@@ -3,6 +3,7 @@ import type { GlobalTheme } from '../global';
 const getTextInputTheme = (theme: GlobalTheme) => {
   const colors = {
     labelBackground: theme.colors.defaultGlobalSurface,
+    containerBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
       default: theme.colors.onErrorSurface,
       error: theme.colors.onErrorSurface,

package/types/components/List/StyledBasicListItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 declare const StyledPrefixContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -18,13 +18,13 @@ declare const StyledTitleContainer: import("@emotion/native").StyledComponent<im
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeSelected?: boolean | undefined;
     themeDisabled?: boolean | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 export { StyledListItemContainer, StyledPrefixContainer, StyledTitleContainer, StyledSuffixContainer, };

package/types/components/List/StyledListItem.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 export declare type Variant = 'full-width' | 'card';
 export declare type LeadingStatusIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
-declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeSelected?: boolean | undefined;
     themeVariant?: Variant | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -2,6 +2,7 @@ import type { GlobalTheme } from '../global';
 declare const getTextInputTheme: (theme: GlobalTheme) => {
     colors: {
         labelBackground: string;
+        containerBackground: string;
         asterisks: {
             default: string;
             error: string;