Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Remove gap from maxHeight calculation in bottomsheet #8755

Merged
merged 5 commits into from
Feb 28, 2024
Merged

feat: Remove gap from maxHeight calculation in bottomsheet #8755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
73143b0
Removed margin top from bottomsheet
brianacnguyen Feb 27, 2024
c13bfa0
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
brianacnguyen Feb 27, 2024
06a1b71
Rebased and updated snapshots
brianacnguyen Feb 27, 2024
2619bf3
Updated more snapshot
brianacnguyen Feb 27, 2024
4db926f
Updated networkselector snapshot
brianacnguyen Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions app/component-library/components/BottomSheets/BottomSheet/BottomSheet.constants.ts
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
isInteractable = true,
shouldNavigateBack = true,
isFullscreen = false,
customMarginTop,
...props
},
ref,
Expand Down Expand Up @@ -106,7 +105,6 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
isInteractable={isInteractable}
onClose={onCloseCB}
onOpen={onOpenCB}
customMarginTop={customMarginTop}
ref={bottomSheetDialogRef}
isFullscreen={isFullscreen}
>
Expand Down
7 changes: 0 additions & 7 deletions app/component-library/components/BottomSheets/BottomSheet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
| number | No | 250

### `children`

Content to wrap in sheet.
Expand Down
4 changes: 0 additions & 4 deletions ...ents/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
7 changes: 1 addition & 6 deletions ...ry/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -60,7 +59,6 @@ const BottomSheetDialog = forwardRef<
isInteractable = true,
onClose,
onOpen,
customMarginTop,
...props
},
ref,
Expand All @@ -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,
Expand Down
4 changes: 0 additions & 4 deletions ...mponents/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion ...ts/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ exports[`BottomSheetDialog should render correctly 1`] = `
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
"borderWidth": 1,
"maxHeight": 1083,
"maxHeight": 1333,
"overflow": "hidden",
"paddingBottom": 3,
"shadowColor": "#0000001A",
Expand Down
6 changes: 1 addition & 5 deletions app/components/Views/AccountConnect/AccountConnect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,11 +439,7 @@ const AccountConnect = (props: AccountConnectProps) => {
]);

return (
<BottomSheet
onClose={handleSheetDismiss}
customMarginTop={150}
ref={sheetRef}
>
<BottomSheet onClose={handleSheetDismiss} ref={sheetRef}>
{renderConnectScreens()}
</BottomSheet>
);
Expand Down
2 changes: 1 addition & 1 deletion app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion ...nents/Views/ShowDisplayMediaNFTSheet/__snapshots__/ShowDisplayNFTMediaSheet.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion app/components/Views/ShowIpfsGatewaySheet/__snapshots__/ShowIpfsGatewaySheet.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading