Add user pill components for approval workflows and attendees#86105
Closed
Add user pill components for approval workflows and attendees#86105
Conversation
Replace plain text user names with avatar + name pill components in: - Approval workflow section (members list and approver rows) - Expense attendee display in MoneyRequestView Adds UserPill and UserPills reusable components with +N more overflow indicator and tooltip for hidden users. Co-authored-by: Nyoman Jyotisa <nyomanjyotisa@users.noreply.github.com>
Contributor
Author
|
I created this PR from an upstream branch since I don't have push access to your fork. To take ownership of this branch and be able to push updates, run: Then you can close this PR and open a new one from your fork. |
Contributor
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/it.ts b/src/languages/it.ts
index 05355d88..6caa1b7c 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -345,7 +345,7 @@ const translations: TranslationDeepObject<typeof en> = {
letsStart: `Iniziamo`,
showMore: 'Mostra di più',
showLess: 'Mostra meno',
- plusMore: ({count}: {count: number}) => `+${count} altri`,
+ plusMore: ({count}: {count: number}) => `+${count} in più`,
merchant: 'Esercente',
change: 'Modifica',
category: 'Categoria',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 0be1f00a..e312d60f 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -345,7 +345,7 @@ const translations: TranslationDeepObject<typeof en> = {
letsStart: `はじめましょう`,
showMore: 'さらに表示',
showLess: '表示を減らす',
- plusMore: ({count}: {count: number}) => `+${count}件`,
+ plusMore: ({count}: {count: number}) => `他 ${count} 件`,
merchant: '加盟店',
change: '変更',
category: 'カテゴリ',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 014d3135..8b195929 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -345,7 +345,7 @@ const translations: TranslationDeepObject<typeof en> = {
letsStart: `开始吧`,
showMore: '显示更多',
showLess: '收起',
- plusMore: ({count}: {count: number}) => `+${count}个`,
+ plusMore: ({count}: {count: number}) => `还有 +${count} 项`,
merchant: '商户',
change: '更改',
category: '类别',
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
Contributor
|
🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
Contributor
|
Sorry I accidentally ran the builds here. Can we close this? |
Contributor
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
Member
|
@MelvinBot Please close this PR |
Contributor
Author
|
Closing this PR as requested by |
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
4 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
Improves readability of approval workflow rows and expense attendee lists by replacing plain comma-separated text with avatar + name pill components.
Changes:
UserPillcomponent that renders a small avatar next to a user's display name in a styled pillUserPillscontainer that displays pills for visible users and a "+X more" overflow indicator with tooltip showing hidden user namesApprovalWorkflowSectionto render members as pills (preserving "Everyone" plain text for default workflows) and approver rows with actual user avatars instead of generic iconsMoneyRequestViewattendee display to use pill components viatitleComponentprop instead of plain texttitleplusMoretranslation key across all 10 supported languagesuserPill,userPillsContainer,userPillMore, etc.) near existing workflow stylesThe "+X more" indicator uses the existing
Tooltipcomponent (which is a no-op on mobile/native, where tapping the row opens the full details RHP).Fixed Issues
$ #84985
PROPOSAL: #84985 (comment)
Tests
Offline tests
QA Steps
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
Screenshots/Videosundefined