@hero-design/rn 8.36.2 → 8.37.0

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/StyledActionGroup.tsx

@@ -1,10 +1,8 @@
-import { Animated, View } from 'react-native';
+import { Animated, Pressable, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
-import Typography from '../../Typography';
-import type { TextProps } from '../../Typography/Text';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -40,9 +38,8 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const StyledBackdrop = styled(Animated.View)<
-  ComponentProps<typeof Animated.View>
->(({ theme }) => ({
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -52,18 +49,10 @@ const StyledBackdrop = styled(Animated.View)<
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
-const StyledHeaderText = styled(Typography.Title)<TextProps>(({ theme }) => ({
-  color: theme.__hd__.fab.colors.headerText,
-  marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-  marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-  textAlign: 'right',
-}));
-
 export {
-  StyledHeaderText,
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledContainerInModal,
-  StyledActionGroupContainer,
   StyledFAB,
 };

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 [
@@ -307,7 +307,18 @@ exports[`ActionGroup has active true 1`] = `
       }
     >
       <View
+        accessible={true}
         collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Object {
             "backgroundColor": "#000000",
@@ -323,6 +334,7 @@ exports[`ActionGroup has active true 1`] = `
       />
       <View
         collapsable={false}
+        pointerEvents="box-none"
         style={
           Object {
             "alignItems": "flex-end",
@@ -333,48 +345,6 @@ exports[`ActionGroup has active true 1`] = `
         }
         testID="action-group"
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "transform": Array [
-                Object {
-                  "translateY": 50,
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 24,
-                  "letterSpacing": 0,
-                  "lineHeight": 32,
-                },
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "marginBottom": 24,
-                    "marginRight": 24,
-                    "textAlign": "right",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="header-text"
-            themeIntent="body"
-            themeLevel="h4"
-            themeTypeface="neutral"
-          >
-            What would you like to create?
-          </Text>
-        </View>
         <View
           style={
             Array [
@@ -923,7 +893,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 +903,7 @@ exports[`ActionGroup has active true 1`] = `
                 "width": 0,
               },
               "shadowOpacity": 0.12,
-              "shadowRadius": 8,
+              "shadowRadius": 4,
             },
             Array [
               Array [