Consistent checkboxes and radio buttons UI#87087
Consistent checkboxes and radio buttons UI#87087mhawryluk wants to merge 92 commits intoExpensify:mainfrom
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
…yle in RadioButton
…nents - Removed the `NEW_CHAT` constant from `src/CONST/index.ts`. - Cleaned up `radioButtonStyle` references in various components, replacing them with consistent styles. - Added `accessible` prop to `Checkbox` and `RadioButton` components for better screen reader support. - Updated several list item components to use `shouldShowRadioButton` instead of `shouldUseDefaultRightHandSideCheckmark` for clarity. - Removed unnecessary props and improved overall code readability across multiple files.
|
on it now |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-04-22.at.22.46.50.movAndroid: mWeb ChromeScreen.Recording.2026-04-22.at.22.34.49.moviOS: HybridAppScreen.Recording.2026-04-22.at.22.39.30.moviOS: mWeb SafariScreen.Recording.2026-04-22.at.22.33.09.movMacOS: Chrome / SafariScreen.Recording.2026-04-22.at.22.30.20.mov |
…places the removed RadioListItem
|
🚧 @grgia has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
QA regression suite requested @mhawryluk https://expensify.slack.com/archives/C09V78U42D8/p1776934666001219 |
Invoice - Hidden appears on participant list after selecting non-existing emailVersion Number: v9.3.61-3 PR:87087 Action Performed:Precondition:
Expected Result:Hidden will not appear on participant list. Actual Result:Hidden appears on participant list after selecting non-existing email. Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Expense - Non-functional radio button on details selection step when reviewing duplicatesVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:Radio button should not appear on expense details selection step since it never shows the selection. Actual Result:Radio button appears on expense details selection step when it never shows the selection. Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Expense - Hidden and self DM are both selected after selecting self DMVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:Hidden will not appear after selecting self DM. Actual Result:Hidden and self DM are both selected after selecting self DM. Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Copilot - Radio button never marks copilot as selectedVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:Radio button should mark the user as selected. Actual Result:Radio button never marks copilot as selected. Workaround:Unknown Platforms:
Screenshots/VideosBug7136619_1776949696502.4.mp4 |
Copilot - New radio button is not applied in account switcherIf you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! Version Number: v9.3.61-3 PR:87087 Action Performed:Precondition:
Expected Result:The new radio button will be applied in account switcher. Actual Result:The new radio button is not applied in account switcher. Workaround:Unknown Platforms:
Screenshots/Videos
|
Bank - "Please select an option to proceed" does not have left marginVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:"Please select an option to proceed" will have left margin. Actual Result:"Please select an option to proceed" does not have left margin. Workaround:Unknown Platforms:
Screenshots/Videos
Bug7136632_1776950409799.6.mp4 |
Bank - Radio button in Industry classification code list is never markedVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:The radio button in Industry classification code list should be functional, or it should stay hidden because it never appears marked. Actual Result:The radio button in Industry classification code list is never marked. Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Workspace Plan - Workspace is created with a default control plan typeVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:The default plan type should be Collect Actual Result:The default plan type for the second workspace is Control Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Expensify Card - Edit spend rules button is not responsiveVersion Number: v9.3.61-3 PR:87087 Action Performed:Precondition:
Expected Result:Edit spend rules button should be responsive. Actual Result:Edit spend rules button is not responsive. Workaround:Unknown Platforms:
Screenshots/VideosBug7136674_1776954885320.8.mp4 |
Workspace - Selected member is highlighted when focused with keyboardVersion Number: 9.3.61-3 PR:87087 Action Performed:
Expected Result:Focused selections should not be highlighted again Actual Result:Using keyboard arrow focus on selected member and observe the member is highlighted Workaround:Unknown Platforms:
Screenshots/VideosBug7136643_1776951719343.bandicam_2026-04-23_16-30-55-266.mp4 |
Track Expense - Hidden user is displayed after choosing Submit it to someoneVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:Info message to submit an expense should be displayed in RHP after selecting "Submit it to someone" option. Actual Result:A selected hidden user is displayed in RHP when selecting the "Submit it to someone" option. Workaround:Unknown Platforms:
Screenshots/VideosBug7136699_1776956996332.ExpensifyHiddenOnRHP.mp4 |
Radio button displayed but not selected when sharing imagesVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:The radio button should either be properly selected or not displayed at all on the share-to-Expensify screen after selecting user Actual Result:A radio button is displayed but not selected. Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Company cards - All cards dropdown list is scrollableVersion Number: v9.3.61-3 PR:87087 Action Performed:Precondition:
Expected Result:All cards dropdown list should not be scrollable, similar to staging and production. Actual Result:All cards dropdown list is scrollable. Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |
Company cards - "American Express Corporate Cards" is truncatedVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:"American Express Corporate Cards" will not be truncated (or display long name in two lines). Actual Result:"American Express Corporate Cards" is truncated. Workaround:Unknown Platforms:
Screenshots/Videosbandicam.2026-04-23.20-02-11-034.mp4 |
grgia
left a comment
There was a problem hiding this comment.
@mhawryluk could you check the regression case for Disabled rows with checkboxes. I think the old behavior showed a (disabled) checkbox on disabled invite-list rows when multi-select was on.
Report field - Radio button is not marked, checkmark is shown next to radio buttonVersion Number: v9.3.61-3 PR:87087 Action Performed:Precondition:
Expected Result:Radio button will be marked as selected. Actual Result:Radio button is not marked as selected. Checkmark is shown next to the radio button. Workaround:Unknown Platforms:
Screenshots/Videoshttps://github.com/user-attachments/assets/a9f1e658-c684-44d4-add9-4f067e5600c7 |
Login - #admins room tasks are not displayed after sign inVersion Number: v9.3.61-3 PR:87087 Action Performed:
Expected Result:Tasks should be visible in #admins room Actual Result:Tasks don't appear in #admins room Workaround:Unknown Platforms:
Screenshots/VideosVideo.mp4 |



Explanation of Change
This is a second attempt at bringing consistency to selection lists checkboxes and radio buttons after the the first PR was reverted: #83799
Now all multiple selection lists get square checkboxes, while single selection lists show the radio buttons with new styles. Initially focused items should not be highlighted like they are when they're hovered/ focused with the keyboard.
Apart from the visual consistency, this PR also aims to refactor the related code. It introduces a unified SelectionButton component that renders as either a checkbox or radio button based on a role prop, replacing several different selection indicators. Checkbox and RadioButton are now thin wrappers around it. For SelectionLists selection button rendering has been moved in new into SelectableListItem wrapper accepting a selectionButtonPosition prop, so most individual list item components (and BaseListItem) no longer implement their own selection UI.
Key changes:
Fixed Issues
$ #74938
PROPOSAL: N/A
Tests
Simplified testing cases to test one example of each kind:
Bugs that caused the recent revert
Full testing cases:
Single selection list
For each of the following pages verify:
Reports
Workspace
Overview
Members
Reports
Accounting - QBO
Accounting - QBD
Accounting - Xero
Accounting - NetSuite
Accounting - Sage Intacct
Categories
Tags
Taxes
Workflows
Rules
Distance rates
Expensify cards
Company cards
Per diem
Account
Profile
Subscription
Wallet
Expense rules
Preferences
Security
FAB
Create expense
Create report > choose workspace
Start chat
Chat
Tracked expense
Workspace expense
create task > assignee
task > assignee
room chat
Expense report > details > export (workspace must have an accounting connection; I only managed to access it via url: r/<reportID>/details/export/intacct)
Transaction Merge
Add unreported expense to report
Onboarding
Search router (the top right magnifying glass icon)
Multi selection
For each of the following pages verify:
Reports
Workspace
FAB
Onboarding
No selection button
Offline tests
N/A
QA Steps
Same as tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Nagranie.z.ekranu.2026-04-21.o.15.56.43.mov