fix(message-parser): remove TODO and apply color token in attachment …

[akashogz]

Description

Fixes missing text color token in the Field component used in message attachments.

Previously, the {value} element was rendered without being explicitly wrapped in a Fuselage component with a color token. This could lead to inconsistent text rendering across themes (e.g., dark mode).

This PR:

• Removes the outdated TODO comment
• Wraps {value} inside a <Box> component
• Applies a proper Fuselage color token (color="default") to ensure theme consistency

---

Testing

• Verified UI rendering in both light and dark modes
• Confirmed {value} is wrapped with a Fuselage <Box> and uses token-based color (via DevTools)
• Tested with different value types (string, JSX, null) to ensure no layout or runtime issues

---

Before / After

Before:

// TODO: description missing color token
const Field = ({ title, value, ...props }: FieldProps) => (
	<Box mb={4} pi={4} width='full' flexBasis={100} flexShrink={0} color='default' {...props}>
		<Box fontScale='p2m'>{title}</Box>
		{value}
	</Box>
);

After:

const Field = ({ title, value, ...props }: FieldProps) => (
	<Box mb={4} pi={4} width='full' flexBasis={100} flexShrink={0} color='default' {...props}>
		<Box fontScale='p2m' color='hint'>{title}</Box>
		<Box fontScale='p1m' color='default'>
			{value}
		</Box>
	</Box>
);

---

📝 Notes

• No functional changes; this is a UI consistency and design system compliance fix
• Follows existing Fuselage styling patterns used across Rocket.Chat

Summary by CodeRabbit

• Style
  • Enhanced visual styling of message attachment fields with improved typography hierarchy and color differentiation for better readability and visual organization.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[CLAassistant]

All committers have signed the CLA.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f7bd5b2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cubic-dev-ai]

No issues found across 1 file

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 62bcdee5-ecf0-498f-9b5b-35773d02bba8

📥 Commits

Reviewing files that changed from the base of the PR and between 4235cd9 and f7bd5b2.

📒 Files selected for processing (1)

• apps/meteor/client/components/message/content/attachments/default/Field.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/components/message/content/attachments/default/Field.tsx

🧠 Learnings (3)

📓 Common learnings

Learnt from: aleksandernsilva
Repo: RocketChat/Rocket.Chat PR: 36974
File: apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx:124-129
Timestamp: 2025-09-18T17:32:33.969Z
Learning: The ARIA mismatch issue in MessageForm's template field (where FieldError id used templateId instead of messageFormId) was addressed in PR `#36972` through refactoring the template field into a separate TemplateField component, which uses consistent templateFieldId for both aria-describedby and FieldError id.

📚 Learning: 2026-01-17T01:51:47.764Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38219
File: packages/core-typings/src/cloud/Announcement.ts:5-6
Timestamp: 2026-01-17T01:51:47.764Z
Learning: In packages/core-typings/src/cloud/Announcement.ts, the AnnouncementSchema.createdBy field intentionally overrides IBannerSchema.createdBy (object with _id and optional username) with a string enum ['cloud', 'system'] to match existing runtime behavior. This is documented as technical debt with a FIXME comment at apps/meteor/app/cloud/server/functions/syncWorkspace/handleCommsSync.ts:53 and should not be flagged as an error until the runtime behavior is corrected.

Applied to files:

• apps/meteor/client/components/message/content/attachments/default/Field.tsx

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

• apps/meteor/client/components/message/content/attachments/default/Field.tsx

🔇 Additional comments (1)

apps/meteor/client/components/message/content/attachments/default/Field.tsx (1)

12-15: LGTM! Proper application of Fuselage design tokens.

The explicit Box wrappers with color tokens (color='hint' for title, color='default' for value) and font scales ensure consistent theme-based rendering across light and dark modes. This follows Fuselage patterns and achieves the PR's objective of improving design-system compliance.

---

Walkthrough

The Field component in the message attachments module is refactored to apply explicit styling to the title and value elements. The title is now rendered within a Box with fontScale='p2m' and color='hint', while value is wrapped in a Box with fontScale='p1m' and color='default'.

Changes

Cohort / File(s)	Summary
Styling Updates apps/meteor/client/components/message/content/attachments/default/Field.tsx	Enhanced visual hierarchy by adding explicit font scaling and color props to title and value elements through Box wrapper components.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

type: chore

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: removing a TODO comment and applying color tokens to the Field component in attachment handling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}