feat(fuselage): add Text for font scales and text colours

Merged
JU
4d ago
+284-1

Proposed changes (including videos or screenshots)

ARCH-2592
Adds Text to Fuselage. It sets text in one of the design system's font scales (fontScale) and text or status colours (color), and can cut it with an ellipsis (truncate). It renders a plain element: a div, or what is names (p, h2, label, span…). It takes no Box styling props.

This is the first step of moving screens off raw Box (#43056). About 350 of the raw Boxes in apps/meteor/client/views only set typography, and Text replaces them.

  • Text.styles.scss builds the variations from the existing font-scale mixin and font/status-font tokens. It repeats the rcx-box--full reset (no margin or padding, sans family, tabular numbers), so swapping <Box fontScale='p2'> for <Text fontScale='p2'> renders the same pixels.
  • Like other Fuselage components, Text takes no outer spacing. It also ignores a surrounding <Margins>, which only reaches Box. docs/frontend/layout.md says so, and lists Text in its container table.
  • Stories cover every font scale, colour, truncation and semantic elements. Their visual-regression baselines are included.

Visual regression: every existing Fuselage story matches its committed baseline, except Media/AudioPlayer and Inputs/Slider Play Example. Those two capture a moving time or value and don't render Text.

Issue(s)

Sibling of ARCH-2568 (spacing scale). Builds on #42974 (Fuselage components take no styling props).

Steps to test or reproduce

  • Storybook: Data Display › Text.
  • yarn workspace @rocket.chat/fuselage jest src/components/Text

Further comments

The screen migration that uses Text is stacked on this pull request.

🤖 Generated with Claude Code