Migrate Button ro ButtonComposed (batch 10) by Guccio163 · Pull Request #98861 · Expensify/App

Guccio163 · 2026-08-18T11:20:39Z

Explanation of Change

This is an extra, 10th batch in the ongoing effort to migrate all direct usages (import Button from '@components/Button') to the new composed ButtonComposed, allowing the old Button component to eventually be deprecated. This PR migrates 44 leftover files that appeared after the original 282-file census, plus BaseWidgetItem's buttonProps public API and its 14 callers. Adds accessibilityLabel support to ButtonIcon to preserve NumberWithSymbolForm's icon labels.

Moreover this PR changes BaseWidgetItem API proposed in this comment, from buttonProps to buttonVariant as only buttonVariant has been passed in this prop.

Fixed Issues

$ #98878
PROPOSAL:

Tests

For every migrated button, verify that behaviour is unchanged from before the migration:

Label renders correctly and is not clipped or truncated.
Variant/color is correct — success = green, danger = red, default = grey.
Size is correct — SMALL vs MEDIUM vs LARGE height/padding matches the previous look.
Icon renders on the correct side (left icon before the label, right icon after it) and is centered/grouped with the label.
Disabled state — the button greys out and is non-interactive when its precondition isn't met (offline, throttled, no write access).
Loading state — the spinner replaces the label and the button is non-interactive while a request is in flight (isLoading).
Press action — tapping fires the same documented action as before (navigates / submits / opens modal / opens popover).
Enter key — where the old button had pressOnEnter, pressing Enter still submits exactly once.
Forwarded ref — where a ref is forwarded, its consumer still works: popovers open anchored to the button, not pinned to a window corner.

Below are test steps for testing a representative migrated Button use-case: BaseWidgetItem:

Open expensify app (on any platform)
Enter any unused email (f.ex. buttontests+randomnumber@gmail.com) → Continue
Click Join (since this is a new account)
After redirection to 'Home' you should see 'Validate your account' text in the Time sensitive' section, with green button 'Validate'
Click the 'Validate' button, check if the 'Validate your account' page opens with validation/magic code.
Check if the 'Validate' button is styles correctly.

Offline tests

QA Steps

Same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2026-08-18.at.14.16.18.mov

Follow-up cleanup after the 9 batch PRs: migrates 44 leftover files that appeared after the original 282-file census, plus BaseWidgetItem's buttonProps public API and its 14 callers. Adds accessibilityLabel support to ButtonIcon to preserve NumberWithSymbolForm's icon labels.

melvin-bot · 2026-08-18T11:20:44Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

melvin-bot · 2026-08-18T12:39:19Z

@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]

Guccio163 · 2026-08-18T12:40:20Z

@ZhenjaHorbach should be ready for a review, I'll change that buttonProps -> buttonVariant part later, after Vit's opinion

codecov · 2026-08-18T12:43:28Z

Codecov Report

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

Files with missing lines	Coverage Δ
src/components/AccountSwitcher.tsx	`82.35% <ø> (ø)`
src/components/ApprovalWorkflowSection.tsx	`80.00% <ø> (ø)`
src/components/Banner.tsx	`100.00% <ø> (ø)`
src/components/BaseWidgetItem.tsx	`100.00% <100.00%> (ø)`
src/components/BiometricsTestToolRow.tsx	`100.00% <100.00%> (ø)`
src/components/BookCallButton.tsx	`100.00% <100.00%> (ø)`
src/components/BookTravelButton.tsx	`83.95% <100.00%> (+2.37%)`	⬆️
...rc/components/Button/ButtonDisabledWhenOffline.tsx	`0.00% <ø> (ø)`
...omponents/ButtonComposed/primitives/ButtonIcon.tsx	`92.30% <100.00%> (ø)`
src/components/ConfirmationPage.tsx	`92.10% <ø> (ø)`
... and 50 more
... and 156 files with indirect coverage changes

ZhenjaHorbach · 2026-08-18T13:34:11Z

@Guccio163
Let's link this PR to this issue

trjExpensify · 2026-08-18T14:25:47Z

PR doesn’t need product input as a refactor PR. Unassigning and unsubscribing myself.

…-fork into Guccio163/button/afterBatchesCleanup

Every real caller only ever spread buttonProps to set a single variant, so replace the generic Partial<ButtonProps> prop-spread with a typed buttonVariant prop instead.

Guccio163 · 2026-08-19T10:14:26Z

@ZhenjaHorbach I just applied changes proposed in this comment

ZhenjaHorbach · 2026-08-20T07:40:20Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

2026-08-20.11.44.54.mov

Android: mWeb Chrome

2026-08-20.11.37.23.mov

iOS: HybridApp

2026-08-20.11.40.56.mov

iOS: mWeb Safari

2026-08-20.11.39.19.mov

MacOS: Chrome / Safari

2026-08-20.11.33.36.mov

ZhenjaHorbach · 2026-08-20T09:31:37Z

Overall, the changes look good
But found a small mismatch on BookCallButton
We have different paddings on dev and staging

2026-08-20.11.30.44.mov

Guccio163 · 2026-08-20T10:24:34Z

@ZhenjaHorbach thanks, I'll do it soon; BTW since we are targeting button wrappers to use variant instead of success and danger I wanted to migrate ConfirmModal's usages and wrappers, but ended up with ~100 files; Would you rather add it in this PR, or separate into another follow-up, potentially taking care of other Button wrappers still using success/button. I think that the second option would be cleaner LMKWYT 👀

ZhenjaHorbach · 2026-08-20T10:26:10Z

Yeah
This PR is too big
Let's create separate subissues!

Guccio163 · 2026-08-20T11:09:32Z

We have different paddings on dev and staging

@ZhenjaHorbach I can't measure this Button's horizontal paddings on staging/prod because I don't have Concierge pass, but I checked that dev correctly applies styles

In default size (medium) it should have 12px on the left and 16px on the right - Left is from paddingHorizontal 12px, Right is from paddingHorizontal 12px+4px ButtonText paddingHorizontal, gap is fine too. I verified that BookCallButton doesn't receive custom styles anywhere, so it should be like it's now 👍

ZhenjaHorbach · 2026-08-20T11:18:27Z

We have different paddings on dev and staging

@ZhenjaHorbach I can't measure this Button's horizontal paddings on staging/prod because I don't have Concierge pass, but I checked that dev correctly applies styles
In default size (medium) it should have 12px on the left and 16px on the right - Left is from paddingHorizontal 12px, Right is from paddingHorizontal 12px+4px ButtonText paddingHorizontal, gap is fine too. I verified that BookCallButton doesn't receive custom styles anywhere, so it should be like it's now 👍

I think it's a bit of a different case

Now on dev, we have 12 horizontal padding

And n staging, we have 16 horizontal padding

But now checked different places, and 12 px is okay
So probably we can leave this

mountiny

@ZhenjaHorbach @Guccio163 I think we should make sure it matches production

ZhenjaHorbach · 2026-08-20T13:48:35Z

@ZhenjaHorbach @Guccio163 I think we should make sure it matches production

I suppose now it matches the similar buttons that have the same paddings
So, as for me, everything is fine

@Expensify/design
But can you confirm which horizontal padding we should have for BookCallButton?

Like on staging

On, like on dev

And we have similar buttons where we also use 12

Guccio163 · 2026-08-20T13:58:11Z

When using icon + text it should be asymmetric 12px on icon's side and 16px on text's, just as on the last screenshot (right 4px coming from Text component). On your screenshot with avatar instead of icon, text doesn't add said padding, because there is normal Text instead of Button.Text used (custom children). In this scenario I would fix text-side padding to be 16px and either treat Avatar like a normal icon and leave the 12px or (since it looks like it's bigger than medium icon) also bump avatar-side padding to the 16px, just like bigger icons (in bigger buttons) receive. WDYT @ZhenjaHorbach @mountiny ?

ZhenjaHorbach · 2026-08-20T14:00:16Z

When using icon + text it should be asymmetric 12px on icon's side and 16px on text's, just as on the last screenshot (right 4px coming from Text component). On your screenshot with avatar instead of icon, text doesn't add said padding, because there is normal Text instead of Button.Text used (custom children). In this scenario I would fix text-side padding to be 16px and either treat Avatar like a normal icon and leave the 12px or (since it looks like it's bigger than medium icon) also bump avatar-side padding to the 16px, just like bigger icons (in bigger buttons) receive. WDYT @ZhenjaHorbach @mountiny ?

In my opinion, the avatar should use the same styles as the icon
But I already pinged the design team
So let's wait 😁

shawnborton · 2026-08-20T14:01:54Z

Agree, I would think we'd just reuse the same styles for simplicity's sake.

Guccio163 · 2026-08-20T14:03:27Z

But I already pinged the design team

Good call, I think I would go with that logic too. Overall good catch though, since text-side padding is 100% wrong

Guccio163 · 2026-08-20T14:04:45Z

Agree, I would think we'd just reuse the same styles for simplicity's sake.

Thanks @shawnborton, I'll fix it right away and we'll see if it looks right 👌

Guccio163 · 2026-08-20T14:14:41Z

I fixed (and simplified while on it) BookCallButton's use-case, now with style identical as with icon:

shawnborton · 2026-08-20T14:24:33Z

Looks good 👍

mountiny

Thanks everyone

github-actions · 2026-08-20T14:58:44Z

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

OSBotify · 2026-08-20T14:59:34Z

✋ 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-08-20T15:02:53Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-0714c20-3346034-1b4cdeaf0a43d7f1cbae6625963f6968c733ebab/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-0714c20-3346034-7a81e0684c1b4a3c53db807a92d8f036d62c085c/index.html

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

👀 View the workflow run that generated this build 👀

melvin-bot Bot assigned Guccio163 Aug 18, 2026

fix tests

f50dc68

Guccio163 marked this pull request as ready for review August 18, 2026 12:39

Guccio163 requested review from a team as code owners August 18, 2026 12:39

melvin-bot Bot requested review from ZhenjaHorbach and trjExpensify and removed request for a team August 18, 2026 12:39

melvin-bot Bot removed the request for review from a team August 18, 2026 12:39

ZhenjaHorbach mentioned this pull request Aug 18, 2026

Button - Composition over Configuration #83762

Open

MelvinBot mentioned this pull request Aug 18, 2026

Button migration batch 10: leftover files after census re-scan + BaseWidgetItem public API #98878

Open

5 tasks

trjExpensify removed their request for review August 18, 2026 14:27

Guccio163 added 2 commits August 19, 2026 11:45

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

a08d063

…-fork into Guccio163/button/afterBatchesCleanup

Replace BaseWidgetItem's buttonProps with a narrower buttonVariant prop

4a40774

Every real caller only ever spread buttonProps to set a single variant, so replace the generic Partial<ButtonProps> prop-spread with a typed buttonVariant prop instead.

MelvinBot mentioned this pull request Aug 20, 2026

Button wrappers: align legacy button-specific props (success/danger → variant) in ConfirmModal & FormAlertWithSubmitButton #99057

Open

6 tasks

ZhenjaHorbach approved these changes Aug 20, 2026

View reviewed changes

melvin-bot Bot requested a review from mountiny August 20, 2026 11:18

mountiny requested changes Aug 20, 2026

View reviewed changes

fix and simplify BookCallButton usage

823c0e9

ZhenjaHorbach approved these changes Aug 20, 2026

View reviewed changes

melvin-bot Bot requested a review from mountiny August 20, 2026 14:47

mountiny approved these changes Aug 20, 2026

View reviewed changes

mountiny merged commit 0714c20 into Expensify:main Aug 20, 2026
36 of 38 checks passed

Uh oh!

Conversation

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

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Aug 18, 2026

Uh oh!

melvin-bot Bot commented Aug 18, 2026

Uh oh!

Guccio163 commented Aug 18, 2026

Uh oh!

codecov Bot commented Aug 18, 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!

ZhenjaHorbach commented Aug 18, 2026

Uh oh!

trjExpensify commented Aug 18, 2026

Uh oh!

Guccio163 commented Aug 19, 2026

Uh oh!

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

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

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

Uh oh!

Uh oh!

Guccio163 commented Aug 20, 2026

Uh oh!

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

Uh oh!

Uh oh!

Guccio163 commented Aug 20, 2026

Uh oh!

ZhenjaHorbach commented Aug 20, 2026

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

shawnborton commented Aug 20, 2026

Uh oh!

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

Uh oh!

Uh oh!

Guccio163 commented Aug 20, 2026

Uh oh!

Guccio163 commented Aug 20, 2026

Uh oh!

shawnborton commented Aug 20, 2026

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

OSBotify commented Aug 20, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

Reviewers

Assignees

Guccio163 commented Aug 18, 2026 •

edited

Loading

codecov Bot commented Aug 18, 2026 •

edited by github-actions Bot

Loading

ZhenjaHorbach commented Aug 20, 2026 •

edited

Loading

ZhenjaHorbach commented Aug 20, 2026 •

edited

Loading

ZhenjaHorbach commented Aug 20, 2026 •

edited

Loading

ZhenjaHorbach commented Aug 20, 2026 •

edited

Loading

Guccio163 commented Aug 20, 2026 •

edited

Loading

ZhenjaHorbach commented Aug 20, 2026 •

edited

Loading

Guccio163 commented Aug 20, 2026 •

edited

Loading