[No QA] Avatar component decomposition - #95050
roryabraham merged 22 commits into
Conversation
|
@codex review |
|
Codex Review: Didn't find any major issues. Delightful! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
jmusial
changed the title
|
@codex review |
|
Codex Review: Didn't find any major issues. Delightful! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
jmusial
changed the title
|
@codex review |
|
Codex Review: Didn't find any major issues. Breezy! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
| /** Renders a user or workspace avatar depending on the `type` prop. | ||
| * This wrapper exists for backward compatibility. If possible use WorkspaceAvatar and UserAvatar directly. | ||
| */ | ||
| function Avatar({ |
There was a problem hiding this comment.
I presume we'll have a follow-up PR to update the callsites to use the correct level-two components directly? i.e: consuming components will use UserAvatar and WorkspaceAvatar directly, and we'll get rid of this wrapper/barrel entirely, right?
|
checking now |
abdulrahuman5196
left a comment
abdulrahuman5196
left a comment
There was a problem hiding this comment.
@jmusial I had only minor comments in the code. Seems most comments are already addressed.
Other than that,
Why is the PR marked as No QA since this has obviously changed the code path of the Avatar component? And without the migration PRs if this moves to staging it needs QA runthrough. If we have different QA plan please mention it in PR.
And the Author's checklist only have screen recordings of mac, we should check in all platforms.
| const letterAvatar = parseLetterAvatarURL(resolvedSource); | ||
| if (letterAvatar) { | ||
| return ( | ||
| <AvatarContainer |
There was a problem hiding this comment.
Nit: the parent
<AvatarContainer
containerStyles={containerStyles}
testID={testID}
>
code is duplicated couple of times. If possible we should think of avoiding it.
There was a problem hiding this comment.
In theory we could, but with each Avatar primitive having slightly different logic I think this is more readable (avoiding conditionals in the code or pushing it into primitives)
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
|
|
||
| type UserLetterAvatarProps = AvatarPrimitivesCommonProps & { |
There was a problem hiding this comment.
The component name is AvatarLetter but why do we name its props UserLetterAvatarProps? which is little odd.
@abdulrahuman5196 No QA because it's a refactor not changing any user facing behaviour, which is also reflected in test steps. Just checking if avatars display the same as on prod. Same reason for just recording web. If you feel like more reboust test steps & recordings are needed let me know I can add them |
I think adding QA would be good to check on avatars, regardless the code is good. I will start to check on different platforms and approve in couple of hours if no issues are found. |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-07-27.at.1.15.54.AM.movAndroid: mWeb ChromeScreen.Recording.2026-07-27.at.1.17.35.AM.moviOS: HybridAppScreen.Recording.2026-07-27.at.12.57.13.AM.moviOS: mWeb SafariScreen.Recording.2026-07-27.at.12.50.15.AM.movMacOS: Chrome / SafariScreen.Recording.2026-07-27.at.12.45.23.AM.mov |
abdulrahuman5196
left a comment
abdulrahuman5196
left a comment
There was a problem hiding this comment.
Changes looks good and works well. Reviewers checklist is also complete.
All yours. @roryabraham
🎀 👀 🎀
C+ Reviewed
|
🚧 roryabraham has triggered a test Expensify/App build. You can view the workflow run here. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.4.45-0 🚀
|
Help site review — no changes requiredI reviewed the changes in this PR against Expensify's help site content under Conclusion: No help site updates are required. Why:
Since the help site documents product behavior and this PR changes none, there is nothing to add or update in @jmusial, no linked help site PR was created because this refactor doesn't change any documented, user-facing behavior. If you believe a specific article should still be updated (e.g. the change surfaces differently than expected), let me know which article and behavior and I'll draft it. |
|
🚀 Deployed to production by https://github.com/marcaaron in version: 9.4.45-14 🚀
Bundle Size Analysis (Sentry): |
6 participants
Explanation of Change
This PR decomposes the monolithic
Avatarcomponent into focusedUserAvatar,WorkspaceAvatar, constructed fromimage,icon, andinitialsavatar primitives while preserving the existing public API.It also keeps
Avatarsource resolution and load-error handling in dedicated hooks, making the rendering paths easier to understand, test, and extend.Fixed Issues
$ #95597
PROPOSAL:
Tests
Pure refactor, should be unnoticable to user.
Offline tests
N/A
QA Steps
N/A
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)Avatar, 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.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
MacOS: Chrome / Safari
Screen.Recording.2026-07-09.at.13.41.52.mov