@hero-design/rn 8.12.0-rc.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/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -113,7 +113,7 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -311,7 +311,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#017d6d",
+          "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -377,7 +377,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -28,7 +28,7 @@ exports[`StyledText has danger intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#de350b",
+        "color": "#f46363",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -327,7 +327,7 @@ exports[`StyledText has success intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#017d6d",
+        "color": "#5ace7d",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -350,7 +350,7 @@ exports[`StyledText has warning intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#ffa234",
+        "color": "#ffbe71",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

package/src/theme/ThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 
 import getTheme from './getTheme';
 import {
@@ -41,8 +41,11 @@ const ThemeSwitcher = ({
 };
 
 export const withTheme =
-  <P extends {}>(C: React.ComponentType<P>, themeName: ThemeName) =>
-  (props: P) => {
+  <P extends Record<string, unknown>>(
+    C: React.ComponentType<P>,
+    themeName: ThemeName
+  ) =>
+  (props: PropsWithChildren<P>) => {
     return (
       <ThemeSwitcher name={themeName}>
         <C {...props} />

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 {
@@ -949,14 +950,14 @@ Object {
       "colors": Object {
         "archived": "#737479",
         "body": "#001f23",
-        "danger": "#de350b",
+        "danger": "#f46363",
         "info": "#4568fb",
         "inverted": "#ffffff",
         "primary": "#401960",
         "secondary": "#795e90",
         "subdued": "#4d6265",
-        "success": "#017d6d",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "6xlarge": 36,

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/src/theme/components/typography.ts

@@ -7,9 +7,9 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
   };

package/src/theme/global/colors/__tests__/__snapshots__/swagDark.spec.ts.snap

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#82858a",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#160922",
+  "highlightedSurface": "#443153",
   "inactiveOnDefaultGlobalSurface": "#99a5a7",
   "inactiveOutline": "#99a5a7",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#727478",
-  "pressedSurface": "#664780",
+  "pressedSurface": "#cc9df1",
   "primary": "#c38cee",
   "primaryOutline": "#ffffff",
-  "secondary": "#d5aff3",
+  "secondary": "#dbbaf5",
   "secondaryOutline": "#193539",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/src/theme/global/colors/swagDark.ts

@@ -5,11 +5,11 @@ import globalDarkPalette from './globalDark';
 const swagDarkBrandSystemPalette: BrandSystemPalette = {
   primary: palette.mauve,
   onPrimary: palette.maasstrichtBlue,
-  secondary: palette.mauveLight30,
+  secondary: palette.mauveLight40,
   onSecondary: palette.maasstrichtBlue,
   defaultSurface: palette.maasstrichtBlue,
-  highlightedSurface: palette.scarletGumDark65,
-  pressedSurface: palette.scarletGumLight20,
+  highlightedSurface: palette.mauveDark65,
+  pressedSurface: palette.mauveLight15,
 
   decorativePrimary: palette.maasstrichtBlue,
   decorativePrimarySurface: palette.maasstrichtBlueLight10,