refactor: screens set typography with Text instead of Box

Merged
JU
3d ago
+342-332

Proposed changes (including videos or screenshots)

ARCH-2592
Stacked on #43158. Review that one first; this diff shows only the screen changes.

121 <Box> elements in 83 screens under apps/meteor/client/views set only fontScale, a text colour or truncation. They now use <Text>. The change is mechanical:

  • withTruncatedText becomes truncate.
  • Box colour values with a font- prefix (font-secondary-info) become their token name (secondary-info).
  • is and DOM attributes stay as they were.

Boxes that also set a margin, padding or flex props are left out. They belong to the area-by-area migrations, where the parent becomes a Stack with a gap.

WorkspaceCardSection is left on Box on purpose. Its cards space it with <Margins blockEnd={24}>, which Text ignores, so it moves with the admin area instead.

The raw layout limit in ci-code-check.yml drops from 1268 to 1146.

Visual regression, before (develop) and after, no drift:

  • Storybook: 29 of 29 stories that render migrated files are identical: NotAuthorizedPage, CannedResponse, ClassificationBanner, ManageLicenseModal, the DescriptionList instances modal, SettingsSection, RoomMembers. Three more time out on both sides.
  • Running app: 20 of 20 screenshots are identical. They cover the admin pages (rooms, users, new user, users in role, settings, subscription, workspace, analytic reports, feature preview, presence service), the directory, search, real-time monitoring, the not-authorized page, the emoji picker, the edit-room panel, and the pin-message and video-conference modals.
  • Not captured locally: spots behind EE license modules (audit, device management, engagement dashboard, ABAC, canned responses, outbound messages, Outlook calendar, read receipts), states that need data such as livechat rooms, uploads or integrations, and skeleton or error states.

Issue(s)

Part of the screen layout migration (#43056).

Steps to test or reproduce

  • node scripts/scan-raw-layout.mjs --max 1146
  • Open a few of the touched screens (for example Administration › Rooms, › Workspace › Instances, a room's Edit panel) and compare them with develop.

Further comments

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Text labels, headings, descriptions, and status messages now display more consistently across account settings, administration, audit logs, search, the marketplace, omnichannel tools, and room views.
    • Long names and values are truncated in several tables and panels to better fit their available space.
  • Chores
    • Updated the code-check scan’s accepted findings threshold.