Add coloured labels to report statuses in New Expensify by lorretheboy · Pull Request #71751 · Expensify/App

lorretheboy · 2025-10-02T09:42:27Z

Explanation of Change

Fixed Issues

$ #71549
PROPOSAL: #71549 (comment)

Tests

Prerequisite: User has several reports with different statuses

Go to ND
Go to Reports --> Chats
Verify that there is a status badge in expense message card
Go to Reports
Verify that there is a status badge for every report preview
Click to view report details
Verify that there is a status badge in report header
Verify that status badge's color is updated correctly after changing them from white to dark

Verify that no errors appear in the JS console

Offline tests

QA Steps

Same as Tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

ANDROID.mov

Android: mWeb Chrome

WEBSITE.ANDROID.mov

iOS: Native

IOS.mov

iOS: mWeb Safari

WEBSITE.IOS.mov

MacOS: Chrome / Safari

WEBSITE.mov

MacOS: Desktop

DESKTOP.mov

codecov · 2025-10-02T09:54:51Z

Codecov Report

❌ Patch coverage is 26.66667% with 22 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/libs/ReportUtils.ts	23.52%	13 Missing ⚠️
src/components/ParentNavigationSubtitle.tsx	0.00%	8 Missing ⚠️
src/components/AvatarWithDisplayName.tsx	0.00%	1 Missing ⚠️

Files with missing lines	Coverage Δ
...ReportPreview/MoneyRequestReportPreviewContent.tsx	`58.18% <100.00%> (+0.60%)`	⬆️
src/styles/index.ts	`45.35% <ø> (ø)`
src/styles/theme/themes/dark.ts	`100.00% <ø> (ø)`
src/styles/theme/themes/light.ts	`100.00% <ø> (ø)`
src/components/AvatarWithDisplayName.tsx	`1.96% <0.00%> (-0.04%)`	⬇️
src/components/ParentNavigationSubtitle.tsx	`7.14% <0.00%> (-0.55%)`	⬇️
src/libs/ReportUtils.ts	`73.69% <23.52%> (-0.23%)`	⬇️

... and 6 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

melvin-bot · 2025-10-03T17:38:17Z

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

dannymcclain · 2025-10-03T17:45:10Z

@Expensify/design I think with the introduction of these colored badges we should ditch any of the icons associated with status (check for paid & thumbs up for approved). What do you all think?

shawnborton · 2025-10-04T08:54:13Z

I totally agree with that - let's kill them.

dubielzyk-expensify · 2025-10-05T23:48:49Z

Yeah agree. Looks funky with them.

shawnborton · 2025-10-06T07:46:52Z

@lorretheboy can you please make those changes and then we can spin up some test builds for further testing? Thanks!

lorretheboy · 2025-10-06T07:48:15Z

Sure @shawnborton

lorretheboy · 2025-10-06T16:21:46Z

@suneox I have updated the code to address new requirements. Could u please help review again? Thx

github-actions · 2025-10-06T16:36:40Z

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

dannymcclain · 2025-10-06T19:33:36Z

🤔 the text looks quite small—can you double check that it's using our micro size?

dubielzyk-expensify · 2025-10-07T01:22:18Z

Agree with that. Feels very small

shawnborton · 2025-10-07T07:07:13Z

Yup, looks like the font size is wrong. Let's fix that and then we can spin up a new test build.

lorretheboy · 2025-10-07T08:12:29Z

Hi team, please correct me in case I miss understand anything. As far as I see in the design, we set font size is 11px and the badge height is 16px. So that the badge and the text next to it has the same height

However, in some small screen, to make the badge and the text next to it has the same height we have to reduce the size of the text as well as the badge height. Can we agree that we have to reduce the size in cases that screen size is small?

Besides, I agree that the the font size I am using here fontSizeXSmall which has the range from 8px to 12px doesn't work well. I will try to find the better range for it

Thanks

shawnborton · 2025-10-07T08:14:02Z

I think we want to use the exact same height and font size for the badge at all screen sizes. Please refer to the mocks we provided on the issue for size guidance.

suneox · 2025-10-08T19:22:21Z

+        },
+
+        reportStatusText: {
+            fontSize: variables.fontSizeXSmall,


We have to update the style based on the design and confirmation from the design team.

Suggested change

fontSize: variables.fontSizeXSmall,

fontSize: variables.fontSizeSmall,

lineHeight: variables.lineHeightSmall

shawnborton · 2025-10-08T19:23:17Z

Yeah, let's keep the momentum up on this one please. Thanks!

dannymcclain · 2025-10-10T13:03:02Z

I’d be fine just using 16px for the line height to match the container.

Same - I think for this specific component it's ok to just set the line-height to whatever makes the component work best.

lorretheboy · 2025-10-10T13:05:54Z

Thanks for the confirmation

I have updated the line height @suneox Please help review it again

shawnborton · 2025-10-10T15:13:10Z

Thanks! I will run test builds again but let's get it into final review.

github-actions · 2025-10-10T15:13:53Z

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

github-actions · 2025-10-10T16:03:20Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/71751/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/71751/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/71751/NewExpensify.dmg	https://71751.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

dannymcclain · 2025-10-10T17:17:17Z

Builds are looking good to me 👍

suneox · 2025-10-10T17:52:48Z

I'm not sure if this is a Safari 26.0.1 issue — it’s still not vertically centered on my device. The only fix that works for me is either removing the line height or setting it to an odd value close to the font size.

Screen.Recording.2025-10-11.at.00.27.48.mov

However, since the current change has been verified and works on almost all devices with the existing value so we can go ahead with it.

suneox · 2025-10-10T18:01:00Z

+        reportStatusText: {
+            fontSize: variables.fontSizeSmall,
+            fontWeight: FontUtils.fontWeight.normal,
+            lineHeight: 16,


Please resolve the conflicts and use variables

Suggested change

lineHeight: 16,

lineHeight: variables.lineHeightSmall,

@lorretheboy We can remove the line height in this case, as confirmed

@suneox I have fixed it. Please check again

dannymcclain · 2025-10-10T18:03:52Z

I'm not sure if this is a Safari 26.0.1 issue — it’s still not vertically centered on my device. The only fix that works for me is either removing the line height or setting it to an odd value close to the font size.

Dang, just tested in Safari and I do see the same thing as you. Removing the line-height altogether seems to fix it like you mentioned, and also doesn't seem to cause any issues in other browsers. @Expensify/design do you think we should live with the Safari discrepancy or try just straight up removing the line-height entirely?

shawnborton · 2025-10-11T08:07:32Z

Hmm yeah, just tried playing around with it too and I can't seem to make it work with the line height. I would be down to just remove the line height here since that seems to fix things.

github-actions · 2025-10-13T06:27:33Z

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

github-actions · 2025-10-13T06:58:27Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/71751/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/71751/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/71751/NewExpensify.dmg	https://71751.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

shawnborton · 2025-10-13T07:07:31Z

Seems to work well in Safari for me now. Let's get this into final review please!

lakchote · 2025-10-13T15:54:01Z

Proceeding with the merge since it works well in Safari now

OSBotify · 2025-10-13T16:06:00Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

shawnborton · 2025-10-13T16:08:21Z

cc @puneetlath - let's make sure we communicate this internally before it goes live?

puneetlath · 2025-10-13T16:15:38Z

Sounds good. @kadiealexander can you please help with that?

OSBotify · 2025-10-13T21:20:33Z

🚀 Deployed to staging by https://github.com/lakchote in version: 9.2.30-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

kadiealexander · 2025-10-13T23:09:35Z

Posted an update here!

OSBotify · 2025-10-14T17:34:59Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.2.30-6 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

feat: add coloured labels to report status

10f68d9

melvin-bot Bot assigned lorretheboy Oct 2, 2025

lorretheboy added 2 commits October 4, 2025 00:25

Merge branch 'main' of https://github.com/Expensify/App into feat/71549

c03ce35

fix: styles

cbfeb3a

lorretheboy marked this pull request as ready for review October 3, 2025 17:38

lorretheboy requested review from a team as code owners October 3, 2025 17:38

melvin-bot Bot requested review from suneox and removed request for a team October 3, 2025 17:38

lorretheboy mentioned this pull request Oct 3, 2025

[Due for payment 2025-10-21] [CFI] Add coloured labels to report statuses in New Expensify #71549

Closed

Merge branch 'main' of https://github.com/Expensify/App into feat/71549

464c242

fix: new requirements

a53b591

This comment has been minimized.

Sign in to view

suneox reviewed Oct 8, 2025

View reviewed changes

fix: resolve conflicts

43ccd32

fix: lineHeight

01ab738

suneox reviewed Oct 10, 2025

View reviewed changes

chore: resolve conflicts

f966b30

suneox approved these changes Oct 13, 2025

View reviewed changes

melvin-bot Bot requested a review from lakchote October 13, 2025 15:23

lakchote approved these changes Oct 13, 2025

View reviewed changes

lakchote merged commit f0baf7d into Expensify:main Oct 13, 2025
23 checks passed

OSBotify mentioned this pull request Oct 13, 2025

Deploy Checklist: New Expensify 2025-10-13 #72503

Closed

92 tasks

jponikarchuk mentioned this pull request Oct 14, 2025

[Due for payment 2026-01-13] [$500] Reports - Status badge in expense message card sometimes disappear #72547

Closed

8 tasks

mountiny mentioned this pull request Oct 15, 2025

[Due for Payment 4th Dec] Android & iOS - Expense - Report subtitle "From #report in workspace" is aligned to the left #72636

Closed

8 tasks

bernhardoj mentioned this pull request Oct 15, 2025

[Due for payment 2025-11-03] [$125] Web - Report - Report sub-header is cut off if username is long #72654

Closed

8 tasks

	fontSize: variables.fontSizeXSmall,
	fontSize: variables.fontSizeSmall,
	lineHeight: variables.lineHeightSmall

Uh oh!

Conversation

lorretheboy commented Oct 2, 2025 • 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!

codecov Bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented Oct 3, 2025

Uh oh!

dannymcclain commented Oct 3, 2025

Uh oh!

shawnborton commented Oct 4, 2025

Uh oh!

dubielzyk-expensify commented Oct 5, 2025

Uh oh!

shawnborton commented Oct 6, 2025

Uh oh!

lorretheboy commented Oct 6, 2025

Uh oh!

lorretheboy commented Oct 6, 2025

Uh oh!

github-actions Bot commented Oct 6, 2025

Uh oh!

This comment has been minimized.

dannymcclain commented Oct 6, 2025

Uh oh!

dubielzyk-expensify commented Oct 7, 2025

Uh oh!

shawnborton commented Oct 7, 2025

Uh oh!

lorretheboy commented Oct 7, 2025

Uh oh!

shawnborton commented Oct 7, 2025

Uh oh!

suneox Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

shawnborton commented Oct 8, 2025

Uh oh!

dannymcclain commented Oct 10, 2025

Uh oh!

lorretheboy commented Oct 10, 2025

Uh oh!

shawnborton commented Oct 10, 2025

Uh oh!

github-actions Bot commented Oct 10, 2025

Uh oh!

github-actions Bot commented Oct 10, 2025

Uh oh!

dannymcclain commented Oct 10, 2025

Uh oh!

suneox commented Oct 10, 2025

Uh oh!

suneox Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

suneox Oct 12, 2025

Choose a reason for hiding this comment

Uh oh!

lorretheboy Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

dannymcclain commented Oct 10, 2025

Uh oh!

shawnborton commented Oct 11, 2025

Uh oh!

github-actions Bot commented Oct 13, 2025

Uh oh!

github-actions Bot commented Oct 13, 2025

Uh oh!

shawnborton commented Oct 13, 2025

lorretheboy commented Oct 2, 2025 •

edited

Loading

codecov Bot commented Oct 2, 2025 •

edited

Loading