From 73143b0fdee378187d34d54a90610ed264494311 Mon Sep 17 00:00:00 2001 From: Brian Nguyen Date: Mon, 26 Feb 2024 18:39:45 -0800 Subject: [PATCH 1/4] Removed margin top from bottomsheet --- .../BottomSheet/BottomSheet.constants.ts | 24 ------------------- .../BottomSheetDialog.constants.ts | 4 ---- .../BottomSheetDialog.test.tsx.snap | 2 +- 3 files changed, 1 insertion(+), 29 deletions(-) delete mode 100644 app/component-library/components/BottomSheets/BottomSheet/BottomSheet.constants.ts diff --git a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.constants.ts b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.constants.ts deleted file mode 100644 index 324db6823da..00000000000 --- a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.constants.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * This indicates that 60% of the sheet needs to be offscreen to meet the distance threshold. - */ -export const DISMISS_DISTANCE_THRESHOLD = 0.6; -/** - * This number represents the swipe speed to meet the velocity threshold. - */ -export const DISMISS_SWIPE_SPEED_THRESHOLD = 300; -/** - * The animation duration of the sheet after tapping on an action. - */ -export const TAP_TRIGGERED_ANIMATION_DURATION = 300; -/** - * The animation duration of the sheet after letting go of a swipe. - */ -export const SWIPE_TRIGGERED_ANIMATION_DURATION = 200; -/** - * The animation duration used for initial render. - */ -export const INITIAL_RENDER_ANIMATION_DURATION = 350; -/** - * Minimum spacing reserved for the overlay tappable area. - */ -export const DEFAULT_MIN_OVERLAY_HEIGHT = 250; diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts index 2769c50d1f1..0fe149de8b3 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts @@ -18,7 +18,3 @@ export const DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION = * This indicates that 60% of the sheet needs to be offscreen to meet the distance threshold. */ export const DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD = 0.6; -/** - * Minimum spacing reserved for the overlay tappable area. - */ -export const DEFAULT_BOTTOMSHEETDIALOG_MARGINTOP = 250; diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap index 3ac901ca328..7622d8a4259 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap @@ -30,7 +30,7 @@ exports[`BottomSheetDialog should render correctly 1`] = ` "borderTopLeftRadius": 8, "borderTopRightRadius": 8, "borderWidth": 1, - "maxHeight": 1083, + "maxHeight": NaN, "overflow": "hidden", "paddingBottom": 3, "shadowColor": "#0000001A", From 06a1b710235f88cc767f72604ecdad9ad9c250e2 Mon Sep 17 00:00:00 2001 From: Brian Nguyen Date: Tue, 27 Feb 2024 11:45:14 -0800 Subject: [PATCH 2/4] Rebased and updated snapshots --- .../components/BottomSheets/BottomSheet/BottomSheet.tsx | 2 -- .../components/BottomSheets/BottomSheet/README.md | 7 ------- .../foundation/BottomSheetDialog/BottomSheetDialog.tsx | 7 +------ .../BottomSheetDialog/BottomSheetDialog.types.ts | 4 ---- .../__snapshots__/BottomSheetDialog.test.tsx.snap | 2 +- app/components/Views/AccountConnect/AccountConnect.tsx | 6 +----- .../__snapshots__/ShowDisplayNFTMediaSheet.test.tsx.snap | 2 +- 7 files changed, 4 insertions(+), 26 deletions(-) diff --git a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx index ed26cfd5340..1f70eb9e00a 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx @@ -39,7 +39,6 @@ const BottomSheet = forwardRef( isInteractable = true, shouldNavigateBack = true, isFullscreen = false, - customMarginTop, ...props }, ref, @@ -106,7 +105,6 @@ const BottomSheet = forwardRef( isInteractable={isInteractable} onClose={onCloseCB} onOpen={onOpenCB} - customMarginTop={customMarginTop} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} > diff --git a/app/component-library/components/BottomSheets/BottomSheet/README.md b/app/component-library/components/BottomSheets/BottomSheet/README.md index cd3f19b7748..b4c4b122ca8 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/README.md +++ b/app/component-library/components/BottomSheets/BottomSheet/README.md @@ -23,13 +23,6 @@ Boolean that indicates if sheet is swippable. This affects whether or not tappin | boolean | No | true | -### `customMarginTop` - -Configure height of the modal by setting the distance between top of modal and top of screen. -| TYPE | REQUIRED | DEFAULT | -| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | -| number | No | 250 - ### `children` Content to wrap in sheet. diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx index a5d1a69c510..61e3cfe9c78 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx @@ -41,7 +41,6 @@ import { DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION, DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD, DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION, - DEFAULT_BOTTOMSHEETDIALOG_MARGINTOP, } from './BottomSheetDialog.constants'; import styleSheet from './BottomSheetDialog.styles'; import { @@ -60,7 +59,6 @@ const BottomSheetDialog = forwardRef< isInteractable = true, onClose, onOpen, - customMarginTop, ...props }, ref, @@ -69,10 +67,7 @@ const BottomSheetDialog = forwardRef< useSafeAreaInsets(); const { y: frameY } = useSafeAreaFrame(); const { height: screenHeight } = useWindowDimensions(); - const marginTop = customMarginTop ?? DEFAULT_BOTTOMSHEETDIALOG_MARGINTOP; - const maxSheetHeight = isFullscreen - ? screenHeight - screenTopPadding - : screenHeight - screenTopPadding - marginTop; + const maxSheetHeight = screenHeight - screenTopPadding; const { styles } = useStyles(styleSheet, { maxSheetHeight, screenBottomPadding, diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts index 244e00d0c0b..da2ba4a6f35 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts @@ -27,10 +27,6 @@ export interface BottomSheetDialogProps extends ViewProps { * Optional callback that gets triggered when sheet is opened. */ onOpen?: (hasPendingAction?: boolean) => void; - /** - * Customize the top margin of the sheet. - */ - customMarginTop?: number; } export interface BottomSheetDialogRef { diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap index 7622d8a4259..1955cb79cd5 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap @@ -30,7 +30,7 @@ exports[`BottomSheetDialog should render correctly 1`] = ` "borderTopLeftRadius": 8, "borderTopRightRadius": 8, "borderWidth": 1, - "maxHeight": NaN, + "maxHeight": 1333, "overflow": "hidden", "paddingBottom": 3, "shadowColor": "#0000001A", diff --git a/app/components/Views/AccountConnect/AccountConnect.tsx b/app/components/Views/AccountConnect/AccountConnect.tsx index f597f2b79ea..305d3e9d03a 100644 --- a/app/components/Views/AccountConnect/AccountConnect.tsx +++ b/app/components/Views/AccountConnect/AccountConnect.tsx @@ -439,11 +439,7 @@ const AccountConnect = (props: AccountConnectProps) => { ]); return ( - + {renderConnectScreens()} ); diff --git a/app/components/Views/ShowDisplayMediaNFTSheet/__snapshots__/ShowDisplayNFTMediaSheet.test.tsx.snap b/app/components/Views/ShowDisplayMediaNFTSheet/__snapshots__/ShowDisplayNFTMediaSheet.test.tsx.snap index 99d77939cb3..9847d60adfb 100644 --- a/app/components/Views/ShowDisplayMediaNFTSheet/__snapshots__/ShowDisplayNFTMediaSheet.test.tsx.snap +++ b/app/components/Views/ShowDisplayMediaNFTSheet/__snapshots__/ShowDisplayNFTMediaSheet.test.tsx.snap @@ -377,7 +377,7 @@ exports[`ShowNftSheet should render correctly 1`] = ` "borderTopLeftRadius": 8, "borderTopRightRadius": 8, "borderWidth": 1, - "maxHeight": 1064, + "maxHeight": 1314, "overflow": "hidden", "paddingBottom": 0, "shadowColor": "#0000001A", From 2619bf3f263072e49ba7222df96efd698a561a61 Mon Sep 17 00:00:00 2001 From: Brian Nguyen Date: Tue, 27 Feb 2024 12:47:58 -0800 Subject: [PATCH 3/4] Updated more snapshot --- .../__snapshots__/ShowIpfsGatewaySheet.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Views/ShowIpfsGatewaySheet/__snapshots__/ShowIpfsGatewaySheet.test.tsx.snap b/app/components/Views/ShowIpfsGatewaySheet/__snapshots__/ShowIpfsGatewaySheet.test.tsx.snap index 63857735c15..e6f7fe2c2ec 100644 --- a/app/components/Views/ShowIpfsGatewaySheet/__snapshots__/ShowIpfsGatewaySheet.test.tsx.snap +++ b/app/components/Views/ShowIpfsGatewaySheet/__snapshots__/ShowIpfsGatewaySheet.test.tsx.snap @@ -377,7 +377,7 @@ exports[`ShowIpfsGatewaySheet should render correctly 1`] = ` "borderTopLeftRadius": 8, "borderTopRightRadius": 8, "borderWidth": 1, - "maxHeight": 1064, + "maxHeight": 1314, "overflow": "hidden", "paddingBottom": 0, "shadowColor": "#0000001A", From 4db926f2b7f3866b41a38bcc5cd0d8596e60e9aa Mon Sep 17 00:00:00 2001 From: Brian Nguyen Date: Tue, 27 Feb 2024 13:11:40 -0800 Subject: [PATCH 4/4] Updated networkselector snapshot --- .../NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap b/app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap index 25e8f277dde..2190b749f69 100644 --- a/app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap +++ b/app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap @@ -377,7 +377,7 @@ exports[`Network Selector renders correctly 1`] = ` "borderTopLeftRadius": 8, "borderTopRightRadius": 8, "borderWidth": 1, - "maxHeight": 1064, + "maxHeight": 1314, "overflow": "hidden", "paddingBottom": 0, "shadowColor": "#0000001A",