@hero-design/rn 8.12.0 → 8.12.2

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -3,7 +3,6 @@
 exports[`StyledButtonContainer has filled-danger style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -13,16 +12,18 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "#de350b",
-      "borderRadius": 32,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "#de350b",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <Text>
@@ -34,7 +35,6 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
 exports[`StyledButtonContainer has filled-primary style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -44,16 +44,18 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "#401960",
-      "borderRadius": 32,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "#401960",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <Text>
@@ -65,7 +67,6 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
 exports[`StyledButtonContainer has filled-secondary style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -75,16 +76,18 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "#795e90",
-      "borderRadius": 32,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "#795e90",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <Text>
@@ -96,7 +99,6 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
 exports[`StyledButtonContainer has outlined-danger style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -106,18 +108,20 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "transparent",
-      "borderColor": "#de350b",
-      "borderRadius": 32,
-      "borderWidth": 2,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 14,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "transparent",
+        "borderColor": "#de350b",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+      },
+      undefined,
+    ]
   }
 >
   <Text>
@@ -129,7 +133,6 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
 exports[`StyledButtonContainer has outlined-primary style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -139,18 +142,20 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "transparent",
-      "borderColor": "#401960",
-      "borderRadius": 32,
-      "borderWidth": 2,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 14,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "transparent",
+        "borderColor": "#401960",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+      },
+      undefined,
+    ]
   }
 >
   <Text>
@@ -162,7 +167,6 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
 exports[`StyledButtonContainer has outlined-secondary style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -172,18 +176,20 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "transparent",
-      "borderColor": "#795e90",
-      "borderRadius": 32,
-      "borderWidth": 2,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 14,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "transparent",
+        "borderColor": "#795e90",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+      },
+      undefined,
+    ]
   }
 >
   <Text>
@@ -195,7 +201,6 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
 exports[`StyledButtonContainer has text-danger style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -205,14 +210,18 @@ exports[`StyledButtonContainer has text-danger style 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>
@@ -224,7 +233,6 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
 exports[`StyledButtonContainer has text-primary style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -234,14 +242,18 @@ exports[`StyledButtonContainer has text-primary style 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>
@@ -253,7 +265,6 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
 exports[`StyledButtonContainer has text-secondary style 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -263,14 +274,18 @@ exports[`StyledButtonContainer has text-secondary style 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>
@@ -287,7 +302,6 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -297,16 +311,18 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "stretch",
-      "backgroundColor": "#bfc1c5",
-      "borderRadius": 32,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "backgroundColor": "#bfc1c5",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <Text>

package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap

@@ -607,7 +607,6 @@ exports[`Carousel renders basic carousel 1`] = `
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={true}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -617,16 +616,18 @@ exports[`Carousel renders basic carousel 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "stretch",
-            "backgroundColor": "#401960",
-            "borderRadius": 32,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "opacity": 1,
-            "padding": 16,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "backgroundColor": "#401960",
+              "borderRadius": 32,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 16,
+            },
+            undefined,
+          ]
         }
       >
         <Text
@@ -1349,7 +1350,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={true}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -1359,16 +1359,18 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "stretch",
-            "backgroundColor": "#401960",
-            "borderRadius": 32,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "opacity": 1,
-            "padding": 16,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "backgroundColor": "#401960",
+              "borderRadius": 32,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 16,
+            },
+            undefined,
+          ]
         }
       >
         <Text

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

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

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -44,6 +44,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -64,9 +66,15 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -83,9 +91,12 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -101,7 +112,9 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -151,6 +164,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]
@@ -474,7 +488,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
                         }
                       }
                       accessible={true}
-                      collapsable={false}
                       focusable={true}
                       onClick={[Function]}
                       onResponderGrant={[Function]}
@@ -484,14 +497,18 @@ exports[`DatePickerIOS 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/components/FAB/ActionGroup/ActionItem.tsx

@@ -7,6 +7,7 @@ import {
   StyledActionItemText,
   StyledIcon,
 } from './StyledActionItem';
+import { useTheme } from '../../../theme';
 
 export interface ActionItemProps {
   testID?: string;
@@ -21,11 +22,21 @@ const ActionItem = ({
   onPress,
   style,
   testID,
-}: ActionItemProps) => (
-  <StyledActionItem style={style} onPress={onPress} testID={testID}>
-    <StyledIcon icon={icon} />
-    <StyledActionItemText>{title}</StyledActionItemText>
-  </StyledActionItem>
-);
+}: ActionItemProps) => {
+  const theme = useTheme();
+  return (
+    <StyledActionItem
+      underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
+      style={style}
+      onPress={onPress}
+      testID={testID}
+    >
+      <>
+        <StyledIcon icon={icon} />
+        <StyledActionItemText>{title}</StyledActionItemText>
+      </>
+    </StyledActionItem>
+  );
+};
 
 export default ActionItem;