Migrate ComposedButton to ButtonWithDropdownMenu by Guccio163 · Pull Request #93789 · Expensify/App

Guccio163 · 2026-06-17T10:10:37Z

Explanation of Change

This PR is a part of ButtonComposed migration, implementing the new composed Button from ./ButtonComposed instead of ./Button in the ButtonWithDropdownMenu.

This PR removes ButtonDoubleLineText component, since its only potential usage was inside the ButtonWithDropdownMenu and we can simply use it inline. It also removes the ButtonWithIcons - Button wrapper which is no longer needed, since all of the icon+text coupling logic is gone/implemented inline in designated places.

Fixed Issues

$ #83762
PROPOSAL:

Tests

ButtonWithDropdownMenu can include icons, text and second-line text. Below are test steps for 3 UI
variants of ButtonWithDropdownMenu, verify that all of them are correct. Correctness means the button
is identical to the current one (main/staging/prod); subtle changes like the gap between the text and
icon are also intentional.

All three variants are reached via the report-header pay button (SettlementButton), which is the only
place in the app that renders every form (single, split-with-arrow, and double-line).

Variant 1: "Mark as paid" (single button — text only, NO icon, NO dropdown arrow)

What we're testing: BWDM as a single button — just Button.Text ("Mark as paid"). No leading icon
(SettlementButton doesn't pass an icon), no dropdown arrow, no second line.

Steps (needs a second test account, "User B"):

Sign in as User A and open (or start) a 1:1 DM with User B.
As User B, in that DM submit an expense / request money from User A using a currency that is NOT
USD/AUD/CAD/GBP/EUR — e.g. PLN, amount e.g. 50. (Set the currency on the amount screen before
creating.) This makes User A the payer on the resulting IOU.
Back as User A, open the IOU report from that DM.
In the header you'll see a single button "Mark as paid", NO icon and NO dropdown arrow.

Variant 2: "Pay $XX" (split button — dropdown arrow visible, single-line label)

What we're testing: BWDM as a split button — text + dropdown-arrow icon, no subtitle.

Steps:

Onboard a new account choosing "Manage my team's expenses" (a Collect group workspace is
auto-created). Keep the workspace currency as USD.
Go to Workspaces → [workspace] → More features → enable Workflows.
Open Workflows and turn the "Payments" toggle ON. If it prompts to connect a bank account,
CLOSE / skip it — do NOT connect an account.
In the workspace chat, tap Expense in the quick actions → enter an amount (e.g. 50) → add a merchant
→ Create expense.
Open Spend → Reports, hit Submit, then hit Approve on the row.
Open the report. The header shows a green split button "Pay $50.00" with a dropdown arrow on the right.
Tap the arrow — the menu contains "Business bank account" (starts the connect-bank flow) and
"Pay elsewhere".
The primary button label is a single line — just "Pay $50.00", no subtitle.

Variant 3: "Pay $XX" + second-line text (split button WITH subtitle / double-line)

What we're testing: BWDM with double-line text — line 1 amount, line 2 payment-method subtitle. This is the only path in the app that produces secondLineText (SettlementButton).

Steps:

Start from the Variant 2 workspace (Payments ON).
Open Workflows → in the "Payments" section tap the empty payment-account row / "Connect bank account" and complete the business bank account (VBBA) setup flow to a verified (OPEN) account. On dev the magic code is 000000. When done, the "Payments" section shows "Bank account ending in XXXX".
Create another expense → Submit → Approve.
Open the new report. The Pay button now reads:
- line 1: "Pay $50.00"
- line 2: "Bank account ending in XXXX"

Note: the old "enable Wallet → Wallet subtitle" path does NOT apply to expense reports (wallet payment
is only offered on P2P/invoice reports), so the expense-report subtitle comes from the connected VBBA.

Pragmatic alternative (if KYC/bank setup is too slow): import the prepared Onyx state

Verify that no errors appear in the JS console

Offline tests

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2026-06-18.at.17.45.27.mov

Screen.Recording.2026-06-18.at.18.00.30.mov

Screen.Recording.2026-06-18.at.18.00.59.mov

Android: mWeb Chrome

Screen.Recording.2026-06-18.at.17.48.56.mov

Screen.Recording.2026-06-18.at.17.57.48.mov

Screen.Recording.2026-06-18.at.17.59.10.mov

iOS: Native

Screen.Recording.2026-06-18.at.18.07.00.mov

Screen.Recording.2026-06-18.at.18.07.34.mov

Screen.Recording.2026-06-18.at.17.15.59.mov

iOS: mWeb Safari

Screen.Recording.2026-06-18.at.18.11.51.mov

Screen.Recording.2026-06-18.at.18.12.14.mov

Screen.Recording.2026-06-18.at.17.22.25.mov

MacOS: Chrome / Safari

Screen.Recording.2026-06-18.at.19.09.36.mov

Screen.Recording.2026-06-18.at.19.10.39.mov

Screen.Recording.2026-06-18.at.13.20.54.mov

…-fork into Guccio163/button/ButtonWithDropdownMenu

codecov · 2026-06-19T05:51:34Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
.../components/ButtonComposed/composed/LinkButton.tsx	`100.00% <ø> (ø)`
src/components/ButtonComposed/index.tsx	`100.00% <100.00%> (+100.00%)`	⬆️
...ttonComposed/primitives/ButtonKeyboardShortcut.tsx	`100.00% <ø> (ø)`
src/components/ImportColumn.tsx	`0.00% <ø> (ø)`
...uestConfirmationList/ConfirmationFooterContent.tsx	`92.30% <ø> (ø)`
...stReportView/MoneyRequestReportTransactionList.tsx	`0.58% <ø> (ø)`
src/components/OnboardingHelpDropdownButton.tsx	`95.23% <ø> (ø)`
...onents/ReportActionItem/ExportWithDropdownMenu.tsx	`0.00% <ø> (ø)`
...ts/Search/SearchList/ListItem/ActionCell/index.tsx	`63.88% <ø> (ø)`
...earch/SearchList/ListItem/ReportListItemHeader.tsx	`91.66% <ø> (ø)`
... and 17 more
... and 14 files with indirect coverage changes

melvin-bot · 2026-06-19T05:57:55Z

@ZhenjaHorbach Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

ZhenjaHorbach · 2026-06-19T10:27:56Z

Oh
Big PR 😁
Will start today or on Monday!

…-fork into Guccio163/button/ButtonWithDropdownMenu

joekaufmanexpensify · 2026-06-22T21:30:28Z

No product review needed

ZhenjaHorbach · 2026-06-24T11:51:51Z

Reviewer Checklist

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

2026-07-02.14.18.56.mov

2026-07-02.14.19.12.mov

2026-07-02.14.19.39.mov

2026-07-02.14.21.54.mov

2026-07-02.14.22.20.mov

2026-07-02.14.23.01.mov

2026-07-02.14.24.38.mov

2026-07-02.14.27.28.mov

2026-07-02.14.28.34.mov

2026-07-02.14.29.23.mov

iOS: mWeb Safari

2026-07-02.13.27.39.mov

2026-07-02.13.30.53.mov

2026-07-02.13.39.36.mov

2026-07-02.13.40.23.mov

2026-07-02.13.41.47.mov

2026-07-02.13.44.17.mov

2026-07-02.13.44.58.mov

2026-07-02.14.04.06.mov

2026-07-02.14.04.58.mov

MacOS: Chrome / Safari

2026-07-02.12.06.56.mov

2026-07-02.12.07.25.mov

2026-07-02.12.08.10.mov

2026-07-02.12.18.39.mov

2026-07-02.12.20.46.mov

2026-07-02.12.21.38.mov

2026-07-02.12.22.19.mov

2026-07-02.12.23.21.mov

2026-07-02.12.27.45.mov

…-fork into Guccio163/button/ButtonWithDropdownMenu

Guccio163 · 2026-07-06T09:44:23Z

I also restored the ButtonProps barrel export, just a sidenote; @ZhenjaHorbach I think all checks are passing, so we can also check this one ✅

ZhenjaHorbach · 2026-07-06T11:21:41Z

From my side everything is good!

ZhenjaHorbach · 2026-07-06T11:21:49Z

@codex
Review this PR

ZhenjaHorbach · 2026-07-06T11:21:57Z

@MelvinBot
Review this PR

MelvinBot · 2026-07-06T11:26:55Z

🤖 PR Review — mostly a clean mechanical migration, but there's one behavior change worth confirming before merge.

⚠️ Main concern: mobile search Pay button loses its extra-small size

The new composed Button only supports BUTTON_SIZE (SMALL/MEDIUM/LARGE) — there is no EXTRA_SMALL (CONST/index.ts), whereas the old DROPDOWN_BUTTON_SIZE did. As part of this migration, PayActionCell.tsx:158 dropped extraSmall ? EXTRA_SMALL : SMALL and now hardcodes SMALL.

Extra-small is a genuinely smaller button (minHeight: componentSizeXSmall, paddingHorizontal: 8, fontSizeExtraSmall) vs small (componentSizeSmall, 12, fontSizeSmall). So on narrow/mobile screens (extraSmall was !isLargeScreenWidth), the Pay button in Search list rows will now render taller with larger text/padding. This is a visible UI change that isn't mentioned in the description and isn't covered by the test steps (which only exercise the report-header "Mark as paid"/"Pay" variants, not the Search list ActionCell on a small screen).

Please confirm with @Expensify/design that dropping extra-small here is intended, or preserve the smaller size on narrow screens.

Dead `extraSmall` props left behind

With extra-small gone, the extraSmall prop is now inert everywhere — SettlementButton still forwards it (types.ts:78, index.tsx:694) to ButtonWithDropdownMenu, which still declares it (types.ts:95) but no longer reads it. Recommend removing these to avoid a misleading no-op prop (tied to the decision above).

Minor

The inline DoubleLineButtonText adds styles.ph1 to the second-line Text, which the removed ButtonDoubleLineText didn't have. Your description notes some gap tweaks are intentional — just flagging so it's a conscious choice on the second line.

Looks good

Removals are clean — no orphaned references to ButtonDoubleLineText, ButtonWithIcons, or Button.DoubleLineText anywhere in src/tests.
Relocating withNavigationFallback from the whole Button to only ButtonKeyboardShortcut is correct: ButtonComposed/Button.tsx uses no navigation hooks, so only the keyboard-shortcut path needs the fallback context.
The remaining CONST.BUTTON_SIZE ↔ DROPDOWN_BUTTON_SIZE value strings are identical ('medium'/'small'/'large'), so the size prop swap is behavior-preserving for those three.
Composed-button test import updated to the barrel export.

Note on verification

This is a static review of the diff against the branch head (c5ec0e5). I did not run typecheck/lint/tests or exercise the UI, so please rely on CI + your manual test matrix for the runtime checks — especially a Search-list Pay button screenshot on a narrow screen to gauge the size change above.

chatgpt-codex-connector · 2026-07-06T11:30:01Z

Codex Review: Didn't find any major issues. You're on a roll.

Reviewed commit: c5ec0e5ac0

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

ZhenjaHorbach · 2026-07-06T11:41:46Z

As I remeber we decided to remove extraSmall a bit later

Guccio163 · 2026-07-06T11:47:49Z

Exactly, moreover extra-small wasn't even really used, so this change isn't visible anywhere; Looks like the rest is clean then ✨

mountiny

Just NAB comments

mountiny · 2026-07-06T14:25:16Z

+type DoubleLineButtonTextProps = {
+    primaryText: string;
+    primaryTextStyle?: StyleProp<TextStyle>;
+    secondLineText: string;
+};


mountiny · 2026-07-06T14:25:52Z

+                        stayNormalOnDisable={shouldStayNormalOnDisable}
                        isLoading={isLoading}
-                        shouldRemoveRightBorderRadius
+                        removeBorderRadius="right"


Is there no const for this?

mountiny · 2026-07-06T14:26:04Z

                    <Button
-                        success={success}
-                        pressOnEnter={pressOnEnter}
+                        variant={success ? 'success' : undefined}


no const for the success variant?

github-actions · 2026-07-06T14:29:49Z

🚧 mountiny has triggered a test Expensify/App build. You can view the workflow run here.

OSBotify · 2026-07-06T14:33:15Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2026-07-06T14:36:54Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #93789.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-bb6e72cb766-1af49bb-5f82092551a1c218a24badc5d82248ed2e7b3e97/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-bb6e72c-1af49bb-87a934b1f7a04c25227457c80f51cb936bfd4c74/index.html

Web 🕸️
https://93789.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

Guccio163 · 2026-07-06T14:55:14Z

Right, I'll address the comments in the follow-up; Do you think we should make consts for these two button props? They are already type-guarded for only the allowed options, but if you prefer I can also change this into consts, just LMKWYT @mountiny

mountiny · 2026-07-06T14:56:41Z

I feel like the consts make it a bit cleaner if the value is reused somewhere

Guccio163 · 2026-07-06T15:33:12Z

It sure does; I wasn't sure if we want to add more consts just for this one component, but surely those ~300 calls should be enough to introduce them 😆

OSBotify · 2026-07-06T15:46:11Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.4.28-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

MelvinBot · 2026-07-06T15:49:54Z

🤖 Help site review — no changes required.

I reviewed this PR's changes against Expensify's help site content under App/docs/articles and no documentation updates are needed, so I did not create a draft help site PR.

Why: This is a purely internal component refactor with no user-facing surface that the help site describes:

It migrates ButtonWithDropdownMenu to the composed Button and swaps CONST.DROPDOWN_BUTTON_SIZE → CONST.BUTTON_SIZE.
It removes internal-only components (ButtonDoubleLineText, ButtonWithIcons) and reorganizes primitives.
There are no new/renamed features, tabs, settings labels, or buttons, and no src/languages/* copy changes — the button labels ("Pay", "Mark as paid", "More", etc.) are unchanged; only the underlying implementation changed.

Help articles document product features and flows (how to pay/approve reports, workspace settings, etc.), none of which change here. The one behavioral nuance I flagged in my code review (Search-list Pay button losing its extra-small size on narrow screens) is a visual sizing detail that isn't covered by any help article, so it needs no docs update regardless of how that's resolved.

If a reviewer believes a specific article is affected, reply with the article path and I'll draft the update.

lanitochka17 · 2026-07-06T19:17:52Z

Hello @ZhenjaHorbach @Guccio163
How can we find Reimbursement and pick "Manual" (instead of Direct)?

Guccio163 · 2026-07-06T21:52:23Z

Sorry @lanitochka17, those test steps were outdated, I just updated them so should be fine ✔️

OSBotify · 2026-07-07T17:53:55Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.4.28-2 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android

Guccio163 added 3 commits June 17, 2026 10:59

change button size

784688c

migrate ButtonWithDropdownMenu

2f2c054

implement second line text inline, remove redundant components

a44e0f9

melvin-bot Bot assigned Guccio163 Jun 17, 2026

Guccio163 changed the title ~~Guccio163/button/button with dropdown menu~~ Migrate ComposedButton to ButtonWithDropdownMenu Jun 17, 2026

Guccio163 added 3 commits June 17, 2026 14:35

fix knip check

d769b1e

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

7755f2c

…-fork into Guccio163/button/ButtonWithDropdownMenu

fix dependency cycle

1c8b135

Guccio163 marked this pull request as ready for review June 19, 2026 05:57

Guccio163 requested review from a team as code owners June 19, 2026 05:57

melvin-bot Bot requested review from ZhenjaHorbach and joekaufmanexpensify and removed request for a team June 19, 2026 05:57

melvin-bot Bot removed the request for review from a team June 19, 2026 05:57

github-actions Bot reviewed Jun 19, 2026

View reviewed changes

Comment thread src/components/ButtonComposed/index.tsx

github-actions Bot reviewed Jun 19, 2026

View reviewed changes

Comment thread src/components/ButtonWithDropdownMenu/index.tsx Outdated

Guccio163 mentioned this pull request Jun 19, 2026

[Due for payment 2026-07-14] Button - Composition over Configuration #83762

Open

Guccio163 added 4 commits June 19, 2026 17:11

extract DoubleLineButtonText in ButtonWithDropdownMenu

9ad7240

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

c03f5b6

…-fork into Guccio163/button/ButtonWithDropdownMenu

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

cc0bbae

…-fork into Guccio163/button/ButtonWithDropdownMenu

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

7fbaf7f

…-fork into Guccio163/button/ButtonWithDropdownMenu

joekaufmanexpensify removed their request for review June 22, 2026 21:30

Guccio163 added 2 commits June 24, 2026 14:05

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

ce602cc

…-fork into Guccio163/button/ButtonWithDropdownMenu

mobile exp

a0810a8

Guccio163 added 6 commits July 4, 2026 07:33

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

c7f4fc6

…-fork into Guccio163/button/ButtonWithDropdownMenu

fmt

82f0e18

Merge branch 'main' of github.com:software-mansion-labs/expensify-app…

1db36fe

…-fork into Guccio163/button/ButtonWithDropdownMenu

update seatbelt

fc02508

update Button.KeyboardShortcut calls

672b58e

keep ButtonProps barrel export

c5ec0e5

ZhenjaHorbach approved these changes Jul 6, 2026

View reviewed changes

melvin-bot Bot requested a review from mountiny July 6, 2026 12:21

mountiny approved these changes Jul 6, 2026

View reviewed changes

mountiny merged commit bb6e72c into Expensify:main Jul 6, 2026
36 checks passed

OSBotify mentioned this pull request Jul 6, 2026

Deploy Checklist: New Expensify 2026-07-06 #95398

Closed

46 tasks

Uh oh!

Conversation

Guccio163 commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Variant 1: "Mark as paid" (single button — text only, NO icon, NO dropdown arrow)

Variant 2: "Pay $XX" (split button — dropdown arrow visible, single-line label)

Variant 3: "Pay $XX" + second-line text (split button WITH subtitle / double-line)

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Jun 19, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented Jun 19, 2026

Uh oh!

Uh oh!

Uh oh!

ZhenjaHorbach commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joekaufmanexpensify commented Jun 22, 2026

Uh oh!

ZhenjaHorbach commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

Guccio163 commented Jul 6, 2026

Uh oh!

ZhenjaHorbach commented Jul 6, 2026

Uh oh!

ZhenjaHorbach commented Jul 6, 2026

Uh oh!

ZhenjaHorbach commented Jul 6, 2026

Uh oh!

MelvinBot commented Jul 6, 2026

⚠️ Main concern: mobile search Pay button loses its extra-small size

Dead extraSmall props left behind

Minor

Looks good

Uh oh!

chatgpt-codex-connector Bot commented Jul 6, 2026

Uh oh!

ZhenjaHorbach commented Jul 6, 2026

Uh oh!

Guccio163 commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

mountiny Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

mountiny Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

mountiny Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jul 6, 2026

Uh oh!

OSBotify commented Jul 6, 2026

Uh oh!

github-actions Bot commented Jul 6, 2026

Uh oh!

Guccio163 commented Jul 6, 2026

Uh oh!

mountiny commented Jul 6, 2026

Uh oh!

Guccio163 commented Jul 6, 2026

Uh oh!

OSBotify commented Jul 6, 2026

Guccio163 commented Jun 17, 2026 •

edited

Loading

codecov Bot commented Jun 19, 2026 •

edited by github-actions Bot

Loading

ZhenjaHorbach commented Jun 19, 2026 •

edited

Loading

ZhenjaHorbach commented Jun 24, 2026 •

edited

Loading

Dead `extraSmall` props left behind

Guccio163 commented Jul 6, 2026 •

edited

Loading

lanitochka17 commented Jul 6, 2026 •

edited

Loading