Skip to content

Commit 002e35b

Browse files
georgewrmarshallgeorgewrmarshall
authored
chore: standardize back ButtonIcon sizes to md (MetaMask#26181)
## **Description** Any `ButtonIcon` inside of a header should be size `md`. This PR standardizes header back button icon sizing from large to medium across navigation surfaces that use `ButtonIcon` (both design-system-react-native and component-library variants), with a targeted Security & Privacy override to keep behavior consistent. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: ## **Manual testing steps** ```gherkin Feature: Header back button icon sizing consistency Scenario: user opens screens with header back buttons Given the app is launched and user can navigate to Settings, Assets, Browser, Perps, Ramp, and Card flows When user opens screens that render back-arrow ButtonIcon controls in the header Then back-arrow ButtonIcon controls render at medium size consistently ``` ## **Screenshots/Recordings** ### **Before** Not collected for every header. ### **After** Not collected for every header. Given the low-risk nature of this change and confidence from direct code-level verification, I am forgoing exhaustive visual regression screenshots for every navbar. ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk visual-only change that adjusts back button sizing and snapshot expectations without altering navigation behavior or business logic. > > **Overview** > Standardizes header back-arrow `ButtonIcon` size from `Lg` to `Md` across common navigation surfaces (navbar headers, onboarding/card KYC screens, perps order book, ramp region selector, browser tabs, token/asset inline headers, confirmations, and bottom sheet headers). > > Updates affected Jest snapshots to match the new rendered touch target/icon dimensions. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit ff40b4d. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 7140d26 commit 002e35b

18 files changed

Lines changed: 41 additions & 41 deletions

File tree

‎app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({
3535
iconName={IconName.ArrowLeft}
3636
iconColor={IconColor.Default}
3737
onPress={onBack}
38-
size={ButtonIconSizes.Lg}
38+
size={ButtonIconSizes.Md}
3939
{...backButtonProps}
4040
/>
4141
);

‎app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -968,25 +968,25 @@ exports[`SnapUIForm will render with fields 1`] = `
968968
{
969969
"alignItems": "center",
970970
"borderRadius": 8,
971-
"height": 32,
971+
"height": 28,
972972
"justifyContent": "center",
973973
"opacity": 1,
974-
"width": 32,
974+
"width": 28,
975975
}
976976
}
977977
>
978978
<SvgMock
979979
color="#131416"
980980
fill="currentColor"
981-
height={24}
981+
height={20}
982982
name="ArrowLeft"
983983
style={
984984
{
985-
"height": 24,
986-
"width": 24,
985+
"height": 20,
986+
"width": 20,
987987
}
988988
}
989-
width={24}
989+
width={20}
990990
/>
991991
</TouchableOpacity>
992992
</View>
@@ -1701,25 +1701,25 @@ exports[`SnapUIForm will render with fields 1`] = `
17011701
{
17021702
"alignItems": "center",
17031703
"borderRadius": 8,
1704-
"height": 32,
1704+
"height": 28,
17051705
"justifyContent": "center",
17061706
"opacity": 1,
1707-
"width": 32,
1707+
"width": 28,
17081708
}
17091709
}
17101710
>
17111711
<SvgMock
17121712
color="#131416"
17131713
fill="currentColor"
1714-
height={24}
1714+
height={20}
17151715
name="ArrowLeft"
17161716
style={
17171717
{
1718-
"height": 24,
1719-
"width": 24,
1718+
"height": 20,
1719+
"width": 20,
17201720
}
17211721
}
1722-
width={24}
1722+
width={20}
17231723
/>
17241724
</TouchableOpacity>
17251725
</View>

‎app/components/UI/Card/components/Onboarding/KYCFailed.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const KYCFailed = () => {
108108
<Box twClassName="px-4 py-2 items-start">
109109
<ButtonIcon
110110
iconName={IconName.ArrowLeft}
111-
size={ButtonIconSizes.Lg}
111+
size={ButtonIconSizes.Md}
112112
iconColor={importedColors.white}
113113
onPress={navigateToHome}
114114
testID="kyc-failed-back-button"

‎app/components/UI/Card/components/Onboarding/KYCPending.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const KYCPending = () => {
6464
<Box twClassName="px-4 py-2 items-start">
6565
<ButtonIcon
6666
iconName={IconName.ArrowLeft}
67-
size={ButtonIconSizes.Lg}
67+
size={ButtonIconSizes.Md}
6868
iconColor={importedColors.white}
6969
onPress={navigateToHome}
7070
testID="kyc-pending-back-button"

‎app/components/UI/Navbar/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export function getNavigationOptionsTitle(
256256
headerLeft: () =>
257257
isFullScreenModal ? null : (
258258
<ButtonIcon
259-
size={ButtonIconSize.Lg}
259+
size={ButtonIconSize.Md}
260260
iconName={IconName.ArrowLeft}
261261
onPress={navigationPop}
262262
style={innerStyles.accessories}
@@ -1249,7 +1249,7 @@ export function getNetworkNavbarOptions(
12491249
style={styles.headerLeftButton}
12501250
onPress={() => navigation.pop()}
12511251
testID={CommonSelectorsIDs.BACK_ARROW_BUTTON}
1252-
size={ButtonIconSize.Lg}
1252+
size={ButtonIconSize.Md}
12531253
iconName={IconName.ArrowLeft}
12541254
iconColor={IconColor.Default}
12551255
/>
@@ -1651,7 +1651,7 @@ export function getPerpsTransactionsDetailsNavbar(navigation, title) {
16511651
<ButtonIcon
16521652
iconName={IconName.Arrow2Left}
16531653
onPress={leftAction}
1654-
size={ButtonIconSize.Lg}
1654+
size={ButtonIconSize.Md}
16551655
/>
16561656
),
16571657
headerRight: () => <View style={innerStyles.rightSpacer} />,
@@ -1684,7 +1684,7 @@ export function getPerpsMarketDetailsNavbar(navigation, title) {
16841684
<ButtonIcon
16851685
iconName={IconName.Arrow2Left}
16861686
onPress={leftAction}
1687-
size={ButtonIconSize.Lg}
1687+
size={ButtonIconSize.Md}
16881688
/>
16891689
),
16901690
};
@@ -1901,7 +1901,7 @@ export function getStakingNavbar(
19011901
headerLeft: () =>
19021902
hasBackButton ? (
19031903
<ButtonIcon
1904-
size={ButtonIconSize.Lg}
1904+
size={ButtonIconSize.Md}
19051905
iconName={IconName.ArrowLeft}
19061906
onPress={handleBackPress}
19071907
style={innerStyles.headerLeft}
@@ -1947,7 +1947,7 @@ export function getDeFiProtocolPositionDetailsNavbarOptions(navigation) {
19471947
style={styles.headerLeftButton}
19481948
onPress={() => navigation.pop()}
19491949
testID={CommonSelectorsIDs.BACK_ARROW_BUTTON}
1950-
size={ButtonIconSize.Lg}
1950+
size={ButtonIconSize.Md}
19511951
iconName={IconName.ArrowLeft}
19521952
iconColor={IconColor.Default}
19531953
/>

‎app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,7 @@ const PerpsOrderBookView: React.FC<PerpsOrderBookViewProps> = ({
499499
<ButtonIcon
500500
iconName={IconName.ArrowLeft}
501501
iconColor={IconColor.Default}
502-
size={ButtonIconSizes.Lg}
502+
size={ButtonIconSizes.Md}
503503
onPress={handleBack}
504504
testID={PerpsOrderBookViewSelectorsIDs.BACK_BUTTON}
505505
/>

‎app/components/UI/Ramp/Views/Settings/RegionSelector/RegionSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ interface HeaderBackButtonProps {
9393
function HeaderBackButton({ onPress, testID }: HeaderBackButtonProps) {
9494
return (
9595
<ButtonIcon
96-
size={ButtonIconSizes.Lg}
96+
size={ButtonIconSizes.Md}
9797
iconName={IconName.ArrowLeft}
9898
onPress={onPress}
9999
style={navigationOptionsStyles.headerLeft}
@@ -706,7 +706,7 @@ RegionSelector.navigationOptions = ({
706706
}) => ({
707707
headerLeft: () => (
708708
<ButtonIcon
709-
size={ButtonIconSizes.Lg}
709+
size={ButtonIconSizes.Md}
710710
iconName={IconName.ArrowLeft}
711711
onPress={() => navigation.goBack()}
712712
style={navigationOptionsStyles.headerLeft}

‎app/components/UI/Tabs/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ class Tabs extends PureComponent {
258258
<View style={styles.topBar}>
259259
<ButtonIcon
260260
iconName={IconName.ArrowLeft}
261-
size={ButtonIconSizes.Lg}
261+
size={ButtonIconSizes.Md}
262262
onPress={closeTabsView}
263263
testID={BrowserViewSelectorsIDs.TABS_BACK_BUTTON}
264264
accessibilityLabel={strings('browser.go_back')}

‎app/components/UI/TokenDetails/components/TokenDetailsInlineHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const TokenDetailsInlineHeader = ({
6666
<ButtonIcon
6767
style={styles.leftButton}
6868
onPress={onBackPress}
69-
size={ButtonIconSize.Lg}
69+
size={ButtonIconSize.Md}
7070
iconName={IconName.ArrowLeft}
7171
testID="back-arrow-button"
7272
/>

‎app/components/Views/AssetDetails/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -414,7 +414,7 @@ const AssetDetails = (props: InnerProps) => {
414414
<ButtonIcon
415415
style={inlineHeaderStyles.leftButton}
416416
onPress={() => navigation.goBack()}
417-
size={ButtonIconSize.Lg}
417+
size={ButtonIconSize.Md}
418418
iconName={IconName.ArrowLeft}
419419
/>
420420
<View style={inlineHeaderStyles.titleWrapper}>

0 commit comments

Comments
 (0)