@hero-design/rn 8.36.1 → 8.36.3

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -68,49 +68,7 @@ exports[`StyledCheckbox renders correctly when disabled is true and readonly is
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is false 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is false 2`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 1`] = `
+exports[`StyledWrapper renders correctly when disabled is false, readonly is false 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -135,7 +93,7 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is t
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 2`] = `
+exports[`StyledWrapper renders correctly when disabled is false, readonly is true 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -160,49 +118,7 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is t
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is false 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is false 2`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 1`] = `
+exports[`StyledWrapper renders correctly when disabled is true, readonly is false 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -227,7 +143,7 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 2`] = `
+exports[`StyledWrapper renders correctly when disabled is true, readonly is true 1`] = `
 <View
   accessible={true}
   collapsable={false}

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

@@ -19,8 +19,12 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
   onStartShouldSetResponder={[Function]}
   style={
     Object {
+      "borderColor": "#001f23",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
       "opacity": 1,
+      "padding": 16,
     }
   }
 >
@@ -73,8 +77,12 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
   onStartShouldSetResponder={[Function]}
   style={
     Object {
+      "borderColor": "#001f23",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
       "opacity": 1,
+      "padding": 16,
     }
   }
 >
@@ -130,167 +138,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is false, withBorder is false and readonly is false 1`] = `
-<View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
->
-  <Text
-    allowFontScaling={false}
-    style={
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.48,
-          "lineHeight": 22,
-        },
-        Array [
-          Object {
-            "flex": 1,
-            "paddingRight": 12,
-          },
-          undefined,
-        ],
-      ]
-    }
-    themeIntent="body"
-    themeTypeface="neutral"
-    themeVariant="small"
-  >
-    Please agree to our privacy policy
-  </Text>
-  <View
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "overflow": "hidden",
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "borderColor": "#001f23",
-            "borderRadius": 4,
-            "borderWidth": 2,
-            "flex": 1,
-          },
-          undefined,
-        ]
-      }
-      themeState="default"
-    />
-  </View>
-</View>
-`;
-
-exports[`Checkbox renders correctly when disabled is false, withBorder is false and readonly is true 1`] = `
-<View
-  accessibilityState={
-    Object {
-      "disabled": true,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
->
-  <Text
-    allowFontScaling={false}
-    style={
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.48,
-          "lineHeight": 22,
-        },
-        Array [
-          Object {
-            "flex": 1,
-            "paddingRight": 12,
-          },
-          undefined,
-        ],
-      ]
-    }
-    themeIntent="body"
-    themeTypeface="neutral"
-    themeVariant="small"
-  >
-    Please agree to our privacy policy
-  </Text>
-  <View
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "overflow": "hidden",
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "borderColor": "#808f91",
-            "borderRadius": 4,
-            "borderWidth": 2,
-            "flex": 1,
-          },
-          undefined,
-        ]
-      }
-      themeState="readonly"
-    />
-  </View>
-</View>
-`;
-
-exports[`Checkbox renders correctly when disabled is false, withBorder is true and readonly is false 1`] = `
+exports[`Checkbox renders correctly when disabled is false and readonly is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -374,7 +222,7 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true a
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is false, withBorder is true and readonly is true 1`] = `
+exports[`Checkbox renders correctly when disabled is false and readonly is true 1`] = `
 <View
   accessibilityState={
     Object {
@@ -458,167 +306,7 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true a
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is true, withBorder is false and readonly is false 1`] = `
-<View
-  accessibilityState={
-    Object {
-      "disabled": true,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
->
-  <Text
-    allowFontScaling={false}
-    style={
-      Array [
-        Object {
-          "color": "#4d6265",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.48,
-          "lineHeight": 22,
-        },
-        Array [
-          Object {
-            "flex": 1,
-            "paddingRight": 12,
-          },
-          undefined,
-        ],
-      ]
-    }
-    themeIntent="subdued"
-    themeTypeface="neutral"
-    themeVariant="small"
-  >
-    Please agree to our privacy policy
-  </Text>
-  <View
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "overflow": "hidden",
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "borderColor": "#bfc1c5",
-            "borderRadius": 4,
-            "borderWidth": 2,
-            "flex": 1,
-          },
-          undefined,
-        ]
-      }
-      themeState="disabled"
-    />
-  </View>
-</View>
-`;
-
-exports[`Checkbox renders correctly when disabled is true, withBorder is false and readonly is true 1`] = `
-<View
-  accessibilityState={
-    Object {
-      "disabled": true,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
->
-  <Text
-    allowFontScaling={false}
-    style={
-      Array [
-        Object {
-          "color": "#4d6265",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.48,
-          "lineHeight": 22,
-        },
-        Array [
-          Object {
-            "flex": 1,
-            "paddingRight": 12,
-          },
-          undefined,
-        ],
-      ]
-    }
-    themeIntent="subdued"
-    themeTypeface="neutral"
-    themeVariant="small"
-  >
-    Please agree to our privacy policy
-  </Text>
-  <View
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "overflow": "hidden",
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "borderColor": "#bfc1c5",
-            "borderRadius": 4,
-            "borderWidth": 2,
-            "flex": 1,
-          },
-          undefined,
-        ]
-      }
-      themeState="disabled"
-    />
-  </View>
-</View>
-`;
-
-exports[`Checkbox renders correctly when disabled is true, withBorder is true and readonly is false 1`] = `
+exports[`Checkbox renders correctly when disabled is true and readonly is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -702,7 +390,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true an
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is true, withBorder is true and readonly is true 1`] = `
+exports[`Checkbox renders correctly when disabled is true and readonly is true 1`] = `
 <View
   accessibilityState={
     Object {

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

@@ -21,22 +21,17 @@ describe('getThemeState', () => {
 
 describe('Checkbox', () => {
   it.each`
-    withBorder | disabled | readonly
-    ${false}   | ${false} | ${false}
-    ${false}   | ${true}  | ${false}
-    ${true}    | ${false} | ${false}
-    ${true}    | ${true}  | ${false}
-    ${false}   | ${false} | ${true}
-    ${false}   | ${true}  | ${true}
-    ${true}    | ${false} | ${true}
-    ${true}    | ${true}  | ${true}
+    disabled | readonly
+    ${false} | ${false}
+    ${true}  | ${false}
+    ${false} | ${true}
+    ${true}  | ${true}
   `(
-    'renders correctly when disabled is $disabled, withBorder is $withBorder and readonly is $readonly',
-    ({ disabled, withBorder, readonly }) => {
+    'renders correctly when disabled is $disabled and readonly is $readonly',
+    ({ disabled, readonly }) => {
       const wrapper = renderWithTheme(
         <Checkbox
           disabled={disabled}
-          withBorder={withBorder}
           readonly={readonly}
           description="Please agree to our privacy policy"
         />

package/src/components/Checkbox/index.tsx

@@ -7,6 +7,7 @@ import {
   StyledDescription,
   StyledWrapper,
 } from './StyledCheckbox';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface CheckboxProps {
   /**
@@ -18,6 +19,7 @@ export interface CheckboxProps {
    */
   description?: string;
   /**
+   * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
    * Whether the border is shown.
    */
   withBorder?: boolean;
@@ -70,13 +72,17 @@ const Checkbox = ({
   testID,
   readonly = false,
 }: CheckboxProps) => {
+  useDeprecation(
+    `Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.`,
+    withBorder === true
+  );
+
   const themeState = getThemeState({ disabled, readonly });
 
   return (
     <StyledWrapper
       onPress={onPress}
       disabled={disabled || readonly}
-      themeWithBorder={withBorder}
       themeState={themeState}
       style={style}
       testID={testID}

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

@@ -66,7 +66,7 @@ exports[`Drawer renders correctly in invisible state 1`] = `
         "overflow": "hidden",
         "transform": Array [
           Object {
-            "translateY": -0,
+            "translateY": -1334,
           },
         ],
       }
@@ -145,7 +145,7 @@ exports[`Drawer renders correctly in visible state 1`] = `
         "overflow": "hidden",
         "transform": Array [
           Object {
-            "translateY": -0,
+            "translateY": 0,
           },
         ],
       }
@@ -224,7 +224,7 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
         "overflow": "hidden",
         "transform": Array [
           Object {
-            "translateY": -0,
+            "translateY": -1334,
           },
         ],
       }

package/src/components/Drawer/index.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing } from 'react-native';
 import type { ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Dimensions, Easing } from 'react-native';
 import DragableDrawer from './DragableDrawer';
 
 import {
@@ -40,7 +40,7 @@ const Drawer = ({
   testID,
 }: DrawerProps): JSX.Element => {
   const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
-  const [height, setHeight] = useState(0);
+  const [height, setHeight] = useState(Dimensions.get('window').height);
 
   const enableShadow = visible && !hasBackdrop;
 

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -44,7 +44,7 @@ exports[`ActionGroup has active false 1`] = `
             "alignSelf": "flex-start",
             "backgroundColor": "#401960",
             "borderRadius": 999,
-            "elevation": 2,
+            "elevation": 3,
             "flexDirection": "row",
             "justifyContent": "center",
             "padding": 20,
@@ -54,7 +54,7 @@ exports[`ActionGroup has active false 1`] = `
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 8,
+            "shadowRadius": 4,
           },
           Array [
             Array [
@@ -197,7 +197,7 @@ exports[`ActionGroup has active true 1`] = `
             "alignSelf": "flex-start",
             "backgroundColor": "#33144d",
             "borderRadius": 999,
-            "elevation": 2,
+            "elevation": 3,
             "flexDirection": "row",
             "justifyContent": "center",
             "padding": 20,
@@ -207,7 +207,7 @@ exports[`ActionGroup has active true 1`] = `
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 8,
+            "shadowRadius": 4,
           },
           Array [
             Array [
@@ -923,7 +923,7 @@ exports[`ActionGroup has active true 1`] = `
               "alignSelf": "flex-start",
               "backgroundColor": "#33144d",
               "borderRadius": 999,
-              "elevation": 2,
+              "elevation": 3,
               "flexDirection": "row",
               "justifyContent": "center",
               "padding": 20,
@@ -933,7 +933,7 @@ exports[`ActionGroup has active true 1`] = `
                 "width": 0,
               },
               "shadowOpacity": 0.12,
-              "shadowRadius": 8,
+              "shadowRadius": 4,
             },
             Array [
               Array [

package/src/components/FAB/StyledFAB.tsx

@@ -21,7 +21,7 @@ const StyledFAB = styled(TouchableHighlight)<
   padding: theme.__hd__.fab.space.containerPadding,
   flexDirection: 'row',
   elevation: theme.__hd__.fab.shadows.elevation,
-  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowColor: theme.__hd__.fab.shadows.color,
   shadowOffset: theme.__hd__.fab.shadows.offset,
   shadowRadius: theme.__hd__.fab.shadows.radius,
   shadowOpacity: theme.__hd__.fab.shadows.opacity,

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -18,7 +18,7 @@ exports[`StyledFAB renders correctly 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -28,7 +28,7 @@ exports[`StyledFAB renders correctly 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       undefined,
     ]
@@ -75,7 +75,7 @@ exports[`StyledFAB renders correctly 2`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#33144d",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -85,7 +85,7 @@ exports[`StyledFAB renders correctly 2`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       undefined,
     ]