@hero-design/rn 8.12.0 → 8.12.2

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",
                 },
               ]
@@ -688,7 +716,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         }
                       }
                       accessible={true}
-                      collapsable={false}
                       focusable={true}
                       onClick={[Function]}
                       onResponderGrant={[Function]}
@@ -698,14 +725,18 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       onResponderTerminationRequest={[Function]}
                       onStartShouldSetResponder={[Function]}
                       style={
-                        Object {
-                          "alignItems": "center",
-                          "borderWidth": 0,
-                          "flexDirection": "row",
-                          "justifyContent": "center",
-                          "opacity": 1,
-                          "padding": 16,
-                        }
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                            "borderWidth": 0,
+                            "flexDirection": "row",
+                            "justifyContent": "center",
+                            "padding": 12,
+                          },
+                          undefined,
+                        ]
                       }
                     >
                       <Text

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

@@ -183,8 +183,20 @@ Object {
         "disabledBorder": "#bfc1c5",
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
+        "pressedBackground": Object {
+          "filledDanger": "#fcebe7",
+          "filledPrimary": "#664780",
+          "filledSecondary": "#664780",
+          "outlineDanger": "#fcebe7",
+          "outlinedPrimary": "#ece8ef",
+          "outlinedSecondary": "#ece8ef",
+          "textDanger": "#fcebe7",
+          "textPrimary": "#ece8ef",
+          "textSecondary": "#ece8ef",
+        },
         "primary": "#401960",
         "secondary": "#795e90",
+        "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#f6f6f7",
       },
       "fontSize": Object {
@@ -201,6 +213,7 @@ Object {
       },
       "radii": Object {
         "default": 32,
+        "text": 4,
         "utilityRadii": 8,
       },
       "sizes": Object {
@@ -209,6 +222,7 @@ Object {
       "space": Object {
         "buttonPadding": 16,
         "iconPadding": 12,
+        "textButtonPadding": 12,
         "utilityPadding": 8,
       },
     },
@@ -396,9 +410,11 @@ Object {
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#401960",
+        "actionItemPressedBackground": "#664780",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
         "buttonBackground": "#401960",
+        "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
         "icon": "#ffffff",
         "titleText": "#ffffff",
@@ -829,6 +845,7 @@ Object {
           "filled": "#001f23",
           "readonly": "#808f91",
         },
+        "containerBackground": "#ffffff",
         "error": "#de350b",
         "labelBackground": "#ffffff",
         "labels": Object {
@@ -1081,6 +1098,7 @@ Object {
     "xxxxxlarge": 40,
   },
   "radii": Object {
+    "5xlarge": 32,
     "base": 4,
     "large": 12,
     "medium": 8,

package/src/theme/components/button.ts

@@ -22,6 +22,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const space = {
     buttonPadding: theme.space.medium,
+    textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
   };
@@ -31,8 +32,9 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    default: theme.space.xlarge,
-    utilityRadii: theme.space.small,
+    default: theme.radii['5xlarge'],
+    utilityRadii: theme.radii.medium,
+    text: theme.radii.base,
   };
 
   const colors = {
@@ -45,6 +47,18 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
     utilityBackground: theme.colors.neutralGlobalSurface,
+    textLoadingBackground: theme.colors.highlightedSurface,
+    pressedBackground: {
+      filledPrimary: theme.colors.pressedSurface,
+      filledSecondary: theme.colors.pressedSurface,
+      filledDanger: theme.colors.errorSurface,
+      outlinedPrimary: theme.colors.highlightedSurface,
+      outlinedSecondary: theme.colors.highlightedSurface,
+      outlineDanger: theme.colors.errorSurface,
+      textPrimary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.highlightedSurface,
+      textDanger: theme.colors.errorSurface,
+    },
   };
 
   return {

package/src/theme/components/fab.ts

@@ -3,9 +3,11 @@ import type { GlobalTheme } from '../global';
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,

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/global/borders.ts

@@ -11,6 +11,7 @@ interface Radii {
   xlarge: number;
   xxlarge: number;
   xxxlarge: number;
+  '5xlarge': number;
 }
 
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
@@ -26,6 +27,7 @@ const getRadii = (baseRadius: number): Radii => ({
   xlarge: baseRadius * 4, // 16
   xxlarge: baseRadius * 5, // 20
   xxxlarge: baseRadius * 6, // 24
+  '5xlarge': baseRadius * 8, // 32
 });
 
 export { getBorderWidths, getRadii };

package/types/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactChild } from 'react';
+import { ReactChild } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';

package/types/components/Button/StyledButton.d.ts

@@ -1,16 +1,17 @@
 /// <reference types="react" />
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
 declare type Intent = 'primary' | 'secondary' | 'danger';
 declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
-declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeVariant: ThemeVariant;
+    loading?: boolean | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: Theme | undefined;

package/types/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { TouchableOpacity } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconProps } from '../../Icon';
-declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+declare const StyledActionItem: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;

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/button.d.ts

@@ -18,6 +18,7 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     radii: {
         default: number;
         utilityRadii: number;
+        text: number;
     };
     colors: {
         primary: string;
@@ -29,12 +30,25 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
+        textLoadingBackground: string;
+        pressedBackground: {
+            filledPrimary: string;
+            filledSecondary: string;
+            filledDanger: string;
+            outlinedPrimary: string;
+            outlinedSecondary: string;
+            outlineDanger: string;
+            textPrimary: string;
+            textSecondary: string;
+            textDanger: string;
+        };
     };
     lineHeight: {
         default: number;
     };
     space: {
         buttonPadding: number;
+        textButtonPadding: number;
         iconPadding: number;
         utilityPadding: number;
     };

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

@@ -15,9 +15,11 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     };
     colors: {
         buttonBackground: string;
+        buttonPressedBackground: string;
         icon: string;
         headerText: string;
         actionItemBackground: string;
+        actionItemPressedBackground: string;
         backdropBackground: string;
         titleText: string;
         actionItemText: string;

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;

package/types/theme/global/borders.d.ts

@@ -10,6 +10,7 @@ interface Radii {
     xlarge: number;
     xxlarge: number;
     xxxlarge: number;
+    '5xlarge': number;
 }
 declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
 declare const getRadii: (baseRadius: number) => Radii;