Skip to content

Commit 371be85

Browse files
weitingsunweitingsun
authored
chore(runway): cherry-pick fix: Unnecessary truncation for MainActionButton cp-7.55.0 (#19612)
- fix: Unnecessary truncation for MainActionButton cp-7.55.0 (#19188) <!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** This PR added a flex shrink 0 to the `MainActionButton` text to prevent unnecessary truncations <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: Fixed unnecessary truncation for the main action buttons on the homepage ## **Related issues** Fixes: #18478 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <img width="1170" height="2532" alt="Simulator Screenshot - iPhone 12 Pro - 2025-09-03 at 09 37 51" src="https://github.com/user-attachments/assets/c333fd94-272d-43d2-ab72-860bd3f1c4fe" /> <!-- [screenshots/recordings] --> ## **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 - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. [3cff431](3cff431)
2 parents 77342f1 + 4a26573 commit 371be85

File tree

9 files changed

+136
-4
lines changed

9 files changed

+136
-4
lines changed

‎app/component-library/components-temp/MainActionButton/MainActionButton.styles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const styleSheet = (params: {
5151
label: {
5252
textAlign: 'center',
5353
marginTop: 2,
54+
flexShrink: 0,
5455
},
5556
});
5657
};

‎app/component-library/components-temp/MainActionButton/__snapshots__/MainActionButton.test.tsx.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ exports[`MainActionButton should render correctly 1`] = `
8686
style={
8787
{
8888
"color": "#121314",
89+
"flexShrink": 0,
8990
"fontFamily": "Geist Medium",
9091
"fontSize": 14,
9192
"letterSpacing": 0,

‎app/component-library/components/Navigation/TabBar/TabBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
139139
<Box
140140
flexDirection={BoxFlexDirection.Row}
141141
alignItems={BoxAlignItems.Center}
142-
twClassName="w-full pt-3 px-2 bg-default border-t border-muted gap-x-2"
142+
twClassName="w-full pt-3 px-2 bg-default border-t border-muted"
143143
style={[tw.style(`pb-[${bottomInset}px]`)]}
144144
>
145145
{renderTabBarItems()}

‎app/component-library/components/Navigation/TabBar/__snapshots__/TabBar.test.tsx.snap

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ exports[`TabBar renders correctly 1`] = `
1010
"backgroundColor": "#ffffff",
1111
"borderColor": "#b7bbc866",
1212
"borderTopWidth": 1,
13-
"columnGap": 8,
1413
"display": "flex",
1514
"flexDirection": "row",
1615
"paddingLeft": 8,
@@ -93,6 +92,7 @@ exports[`TabBar renders correctly 1`] = `
9392
"paddingLeft": 8,
9493
"paddingRight": 8,
9594
"paddingTop": 4,
95+
"width": "100%",
9696
}
9797
}
9898
testID="tab-bar-item-Wallet"
@@ -116,6 +116,7 @@ exports[`TabBar renders correctly 1`] = `
116116
style={
117117
{
118118
"color": "#121314",
119+
"flexShrink": 0,
119120
"fontFamily": "Geist Medium",
120121
"fontSize": 12,
121122
"letterSpacing": 0.25,
@@ -196,6 +197,7 @@ exports[`TabBar renders correctly 1`] = `
196197
"paddingLeft": 8,
197198
"paddingRight": 8,
198199
"paddingTop": 4,
200+
"width": "100%",
199201
}
200202
}
201203
testID="tab-bar-item-Browser"
@@ -219,6 +221,7 @@ exports[`TabBar renders correctly 1`] = `
219221
style={
220222
{
221223
"color": "#686e7d",
224+
"flexShrink": 0,
222225
"fontFamily": "Geist Medium",
223226
"fontSize": 12,
224227
"letterSpacing": 0.25,
@@ -389,6 +392,7 @@ exports[`TabBar renders correctly 1`] = `
389392
"paddingLeft": 8,
390393
"paddingRight": 8,
391394
"paddingTop": 4,
395+
"width": "100%",
392396
}
393397
}
394398
testID="tab-bar-item-Activity"
@@ -412,6 +416,7 @@ exports[`TabBar renders correctly 1`] = `
412416
style={
413417
{
414418
"color": "#686e7d",
419+
"flexShrink": 0,
415420
"fontFamily": "Geist Medium",
416421
"fontSize": 12,
417422
"letterSpacing": 0.25,
@@ -492,6 +497,7 @@ exports[`TabBar renders correctly 1`] = `
492497
"paddingLeft": 8,
493498
"paddingRight": 8,
494499
"paddingTop": 4,
500+
"width": "100%",
495501
}
496502
}
497503
testID="tab-bar-item-Setting"
@@ -515,6 +521,7 @@ exports[`TabBar renders correctly 1`] = `
515521
style={
516522
{
517523
"color": "#686e7d",
524+
"flexShrink": 0,
518525
"fontFamily": "Geist Medium",
519526
"fontSize": 12,
520527
"letterSpacing": 0.25,

‎app/component-library/components/Navigation/TabBarItem/TabBarItem.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ const TabBarItemInner = ({
5252
</ButtonAnimated>
5353
) : (
5454
<ButtonAnimated
55-
style={tw.style('items-center justify-center bg-transparent px-2 py-1')}
55+
style={tw.style(
56+
'items-center justify-center bg-transparent w-full px-2 py-1',
57+
)}
5658
testID={props.testID}
5759
accessibilityLabel={label}
5860
accessible
@@ -64,7 +66,7 @@ const TabBarItemInner = ({
6466
<MMText
6567
variant={TextVariant.BodyXSMedium}
6668
color={isActive ? TextColor.Default : TextColor.Alternative}
67-
style={tw.style('mt-1')}
69+
style={tw.style('mt-1 flex-shrink-0')}
6870
numberOfLines={1}
6971
>
7072
{label}

‎app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,7 @@ exports[`AssetOverview should render correctly 1`] = `
377377
style={
378378
{
379379
"flex": 1,
380+
"overflow": "hidden",
380381
}
381382
}
382383
>
@@ -465,6 +466,7 @@ exports[`AssetOverview should render correctly 1`] = `
465466
style={
466467
{
467468
"color": "#121314",
469+
"flexShrink": 0,
468470
"fontFamily": "Geist Medium",
469471
"fontSize": 14,
470472
"letterSpacing": 0,
@@ -484,6 +486,7 @@ exports[`AssetOverview should render correctly 1`] = `
484486
style={
485487
{
486488
"flex": 1,
489+
"overflow": "hidden",
487490
}
488491
}
489492
>
@@ -572,6 +575,7 @@ exports[`AssetOverview should render correctly 1`] = `
572575
style={
573576
{
574577
"color": "#121314",
578+
"flexShrink": 0,
575579
"fontFamily": "Geist Medium",
576580
"fontSize": 14,
577581
"letterSpacing": 0,
@@ -591,6 +595,7 @@ exports[`AssetOverview should render correctly 1`] = `
591595
style={
592596
{
593597
"flex": 1,
598+
"overflow": "hidden",
594599
}
595600
}
596601
>
@@ -679,6 +684,7 @@ exports[`AssetOverview should render correctly 1`] = `
679684
style={
680685
{
681686
"color": "#121314",
687+
"flexShrink": 0,
682688
"fontFamily": "Geist Medium",
683689
"fontSize": 14,
684690
"letterSpacing": 0,
@@ -698,6 +704,7 @@ exports[`AssetOverview should render correctly 1`] = `
698704
style={
699705
{
700706
"flex": 1,
707+
"overflow": "hidden",
701708
}
702709
}
703710
>
@@ -786,6 +793,7 @@ exports[`AssetOverview should render correctly 1`] = `
786793
style={
787794
{
788795
"color": "#121314",
796+
"flexShrink": 0,
789797
"fontFamily": "Geist Medium",
790798
"fontSize": 14,
791799
"letterSpacing": 0,
@@ -805,6 +813,7 @@ exports[`AssetOverview should render correctly 1`] = `
805813
style={
806814
{
807815
"flex": 1,
816+
"overflow": "hidden",
808817
}
809818
}
810819
>
@@ -893,6 +902,7 @@ exports[`AssetOverview should render correctly 1`] = `
893902
style={
894903
{
895904
"color": "#121314",
905+
"flexShrink": 0,
896906
"fontFamily": "Geist Medium",
897907
"fontSize": 14,
898908
"letterSpacing": 0,
@@ -1546,6 +1556,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
15461556
style={
15471557
{
15481558
"flex": 1,
1559+
"overflow": "hidden",
15491560
}
15501561
}
15511562
>
@@ -1634,6 +1645,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
16341645
style={
16351646
{
16361647
"color": "#121314",
1648+
"flexShrink": 0,
16371649
"fontFamily": "Geist Medium",
16381650
"fontSize": 14,
16391651
"letterSpacing": 0,
@@ -1653,6 +1665,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
16531665
style={
16541666
{
16551667
"flex": 1,
1668+
"overflow": "hidden",
16561669
}
16571670
}
16581671
>
@@ -1741,6 +1754,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
17411754
style={
17421755
{
17431756
"color": "#121314",
1757+
"flexShrink": 0,
17441758
"fontFamily": "Geist Medium",
17451759
"fontSize": 14,
17461760
"letterSpacing": 0,
@@ -1760,6 +1774,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
17601774
style={
17611775
{
17621776
"flex": 1,
1777+
"overflow": "hidden",
17631778
}
17641779
}
17651780
>
@@ -1848,6 +1863,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
18481863
style={
18491864
{
18501865
"color": "#121314",
1866+
"flexShrink": 0,
18511867
"fontFamily": "Geist Medium",
18521868
"fontSize": 14,
18531869
"letterSpacing": 0,
@@ -1867,6 +1883,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
18671883
style={
18681884
{
18691885
"flex": 1,
1886+
"overflow": "hidden",
18701887
}
18711888
}
18721889
>
@@ -1955,6 +1972,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
19551972
style={
19561973
{
19571974
"color": "#121314",
1975+
"flexShrink": 0,
19581976
"fontFamily": "Geist Medium",
19591977
"fontSize": 14,
19601978
"letterSpacing": 0,
@@ -1974,6 +1992,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
19741992
style={
19751993
{
19761994
"flex": 1,
1995+
"overflow": "hidden",
19771996
}
19781997
}
19791998
>
@@ -2062,6 +2081,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
20622081
style={
20632082
{
20642083
"color": "#121314",
2084+
"flexShrink": 0,
20652085
"fontFamily": "Geist Medium",
20662086
"fontSize": 14,
20672087
"letterSpacing": 0,
@@ -2751,6 +2771,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
27512771
style={
27522772
{
27532773
"flex": 1,
2774+
"overflow": "hidden",
27542775
}
27552776
}
27562777
>
@@ -2839,6 +2860,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
28392860
style={
28402861
{
28412862
"color": "#121314",
2863+
"flexShrink": 0,
28422864
"fontFamily": "Geist Medium",
28432865
"fontSize": 14,
28442866
"letterSpacing": 0,
@@ -2858,6 +2880,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
28582880
style={
28592881
{
28602882
"flex": 1,
2883+
"overflow": "hidden",
28612884
}
28622885
}
28632886
>
@@ -2946,6 +2969,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
29462969
style={
29472970
{
29482971
"color": "#121314",
2972+
"flexShrink": 0,
29492973
"fontFamily": "Geist Medium",
29502974
"fontSize": 14,
29512975
"letterSpacing": 0,
@@ -2965,6 +2989,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
29652989
style={
29662990
{
29672991
"flex": 1,
2992+
"overflow": "hidden",
29682993
}
29692994
}
29702995
>
@@ -3053,6 +3078,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
30533078
style={
30543079
{
30553080
"color": "#121314",
3081+
"flexShrink": 0,
30563082
"fontFamily": "Geist Medium",
30573083
"fontSize": 14,
30583084
"letterSpacing": 0,
@@ -3072,6 +3098,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
30723098
style={
30733099
{
30743100
"flex": 1,
3101+
"overflow": "hidden",
30753102
}
30763103
}
30773104
>
@@ -3160,6 +3187,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
31603187
style={
31613188
{
31623189
"color": "#121314",
3190+
"flexShrink": 0,
31633191
"fontFamily": "Geist Medium",
31643192
"fontSize": 14,
31653193
"letterSpacing": 0,
@@ -3179,6 +3207,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
31793207
style={
31803208
{
31813209
"flex": 1,
3210+
"overflow": "hidden",
31823211
}
31833212
}
31843213
>
@@ -3267,6 +3296,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
32673296
style={
32683297
{
32693298
"color": "#121314",
3299+
"flexShrink": 0,
32703300
"fontFamily": "Geist Medium",
32713301
"fontSize": 14,
32723302
"letterSpacing": 0,

0 commit comments

Comments
 (0)