Consistent checkboxes and radio buttons in selection lists#87087
Draft
mhawryluk wants to merge 27 commits intoExpensify:mainfrom
Draft
Consistent checkboxes and radio buttons in selection lists#87087mhawryluk wants to merge 27 commits intoExpensify:mainfrom
mhawryluk wants to merge 27 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
This is a second attempt at bringing consistency to selection lists after the the first PR was reverted: #83799
Now all multiple selection lists get checkboxes, while single selection lists show the new radio buttons. Initially focused items should not be highlighted like they are when they're hovered/manually focused.
Fixed Issues
$ #74938
PROPOSAL: N/A
Tests
Single selection list
For each of the following pages verify:
Reports
Workspace
Overview
Members
Reports
Accounting - QBO
-Accounting - QBD
import > classes > displayed as
import > customers/projects > displayed as
export > preferred exporter
export > export date
export > export out-of-pocket expenses as > export as
export > export out-of-pocket expense as > account
export > export invoices to
export > export company card expenses as > export as
export > export company card expenses as > credit card account
Accounting - Xero
Accounting - NetSuite
Accounting - Sage Intacct
Categories
Tags
tag > approver
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
submit to someone > choose recipient
Workspace expense
create task > assignee
task > assignee
room chat
Onboarding
Multi selection
For each of the following pages verify:
Reports
Workspace
FAB
Onboarding
New chat item
Go to FAB → Start chat
Verify items has add to group button on right hand side
Select a few item by clicking add to group icon on each item
Verify selected items has square style checkmark on the right hand side and the checkmark is selected and checkmark has dimensions of 2020px
Verify each item which is not disabled is highlighted on mouse hover and the mouse cursor is of pointer style
Click next
Verify each item in members sections(except the owner) has square style checkmark on right hand side and the checkmark is selected and checkmark has dimensions of 2020px
Verify each item which is not disabled is highlighted on mouse hover and the mouse cursor is of pointer style
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