Skip to content

feat(text): add Text component with typography role variants - #594

Open
wemra3 wants to merge 5 commits into
mainfrom
feat/text-component
Open

wemra3 wants to merge 5 commits into
mainfrom
feat/text-component

Conversation

@wemra3

@wemra3 wemra3 commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

Motivation

#572 added typography role tokens. This PR adds a Text component on top of them (tailor-inc/platform-planning#1580). variant sets the look, and the render prop sets the element, so the heading level no longer decides the text size. No existing component changes.

Where this fits

  1. feat(theme): add typography role tokens #572 (merged): role tokens and text-<role> utilities.
  2. This PR: Text for application code. Role names are type-checked. A misspelled utility such as text-label-mdd produces no CSS and no error.
  3. Next PR: AppShell's own components use the roles. This is where the visible benefit appears. It mostly changes the classes on elements the components already render, so it uses the utilities more than Text.

Design Decision

  • variant holds the role. It is not called role, because role is an ARIA attribute. render sets the element, as in Button.
  • Default elements: heading roles render h2, body roles render p, and label and code roles render span. All headings share one default, so the size does not suggest a level.
  • Color and modifiers such as leading-none stay in className. code-sm adds font-mono.
  • Text does not export a cva function such as textVariants. #1580 asked for a variants export, but the text-<role> utility already covers that use. It can be added later without a breaking change.
  • jsx-a11y/heading-has-content reports render={<h3 />} as an empty heading. The docs show an eslint-disable-next-line comment for this, instead of adding a second way to set the element, such as a level prop.

The reasons for each decision are in decisions/typography-roles.md.

Question for reviewers

The cream and bloom palettes set the line height and letter spacing of h1 to h6 outside any @layer, so these headings ignore leading-none. Should this rule move into a layer, or be removed, before the next PR applies the roles to headings?

🤖 Generated with Claude Code

Hiroki Uemura and others added 2 commits October 12, 2026 17:23
Text applies one of the ten typography roles with the variant prop. Heading
roles render h2, body roles render p, and label and code roles render span.
The render prop (Base UI) sets the element, such as the heading level. Color
and modifiers stay in className. Add a compile test that a consumer
leading-none, font-medium, or tracking class overrides a prefixed role.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Add the Text docs page with examples, mention Text in the Typography section
of the styling guide, add typography rules to the component design reference,
and record the Text decisions in decisions/typography-roles.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@wemra3 wemra3 self-assigned this Oct 12, 2026
@wemra3
wemra3 requested review from a team, IzumiSy and interacsean October 12, 2026 08:33
@github-actions

github-actions Bot commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

Code Metrics Report

main (95bc8f2) #594 (5da98aa) +/-
Coverage 88.7% 88.7% +0.0%
Test Execution Time 2m21s 2m26s +5s
Details
  |                     | main (95bc8f2) | #594 (5da98aa) |  +/-  |
  |---------------------|----------------|----------------|-------|
+ | Coverage            |          88.7% |          88.7% | +0.0% |
  |   Files             |            208 |            210 |    +2 |
  |   Lines             |           6285 |           6289 |    +4 |
+ |   Covered           |           5575 |           5579 |    +4 |
- | Test Execution Time |          2m21s |          2m26s |   +5s |

Code coverage of files in pull request scope (0.0% → 100.0%, patch 100.0%)

Files Coverage +/- Patch Coverage Status
packages/core/src/components/text/index.ts 0.0% 0.0% - added
packages/core/src/components/text/text.tsx 100.0% +100.0% 100.0% added
packages/core/src/index.ts 0.0% 0.0% - modified

Reported by octocov

Hiroki Uemura and others added 2 commits October 12, 2026 17:51
Treat variant={null} as body-md instead of rendering a p with no role.
Use eslint-disable comments, which ESLint and oxlint both read. Keep the
card title as h3 in the component design example, state that core
components do not use the roles yet, update the ADR header, show where
element-specific attributes go, and drop the ad-hoc overline example.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…dance

A role can already be applied with the text-<role> utility or with Text, so
textVariants stays internal. Generalize the docs lint note to the jsx-a11y
rules that check element content, and keep card titles as headings in the
Text docs and the styling guide pairing table.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant