feat!: rework latest typography styles into polymorphic Text component - #1152
Conversation
438db49 to
957f289
Compare
pawelgrimm
changed the title
fe534c0 to
4c4e703
Compare
pawelgrimm
changed the title
Text component
|
@pedroalves0 I made some small changes since we've worked on this, namely:
|
|
doistbot
left a comment
doistbot
left a comment
There was a problem hiding this comment.
This PR reworks the typography system into a polymorphic Text component with named variants, merging Heading and Display into Text, and adding line-heights and Display variants from the design mocks.
Few things worth tightening:
- The new typography scale hardcodes font sizes, line heights, letter-spacing, and weights as raw values instead of
--reactist-*design tokens. Several of these duplicate existing tokens (e.g.14px=--reactist-font-size-body,13px=--reactist-font-size-copy,700=--reactist-font-weight-strong), and new values like the display sizes and line heights should be defined as tokens (either indesign-tokens.cssor component-local:root) so consumers can theme the scale.
I also included a few optional follow-up notes in the details below.
Optional follow-up notes (5)
src/text/text.stories.tsx:8: The full variant list is rebuilt from
displayVariants,headingVariants, andbodyVariantsin three places (here,text.test.tsx:9, andtext.test.tsx:36). Export a single combinedtextVariantsarray fromtext.tsxand consume it in both files so the variant set stays a single source of truth.isHeadingVariantand thedisplayflag (line 102) re-derive variant categories by matching string prefixes ('heading-','display-') even thoughheadingVariants/displayVariantsalready define those categories. That splits the categorization across three places. Prefer membership checks against the arrays (e.g., aSetbuilt from each array) so the arrays stay the single source of truth.text-underline-positiononly affects underlines, so it's dead on.decoration-strikethrough, andtext-decoration-skip-inkis duplicated between the two rules. Droptext-underline-positionfrom the strikethrough rule (or move the shared declarations into a common rule) so it doesn't imply an effect it doesn't have.decorationis applied independently ofvariant(decoration ? styles['decoration-' + decoration] : null), so the variant dimension adds no regression signal — every case asserts the samedecoration-<x>class. One test per decoration (plus the existing footnote-1 uppercase+decoration case) covers this behavior.@ts-expect-erroronly matters totsc(type-check), which Jest's transform ignores, andexpect(invalidCase).toBeDefined()always passes. The uppercase restriction is a compile-time contract enforced bynpm run type-check, not by this test. Delete it or leave the guard to the type checker.
pedroalves0
left a comment
pedroalves0
left a comment
There was a problem hiding this comment.
Looks good! The change from <Heading /> to just <Text /> might take some time for us to get used to, but we can always iterate on this implementation if needed 🚀
ef0c996 to
7e6e3dd
Compare
Text now covers the full typography scale with a single variant prop: display-*, heading-*, subheader, body, callout, caption, and footnote styles from the Figma reference. Heading variants render the matching heading element and all other variants render a div; use render to override the element. BREAKING CHANGE: Text no longer accepts size, weight, or as props. Pick a variant instead, and use render for custom elements.
BREAKING CHANGE: Heading is removed. Use Text with a heading variant,
e.g. <Heading level={2}> becomes <Text variant="heading-2">, which
renders an h2. Use render to decouple semantics from the visual style.
Move the SF web font stack to design-tokens.css and use literal font weights in the variant classes, matching their literal px sizes. Removes the module-local :root tokens whose 'medium' (500) collided with the canonical --reactist-font-weight-medium (600).
Inline getTextClassName into Text — its options-object API was a fossil of the deleted typography layer with a single caller. Replace heading element string-building with a plain lookup map.
7e6e3dd to
1d938fa
Compare
|
🎉 This PR is included in version 37.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
3 participants
Short description
We are reworking our typography components in a couple of ways:
<Text>API to accept avariantalong withrender, to specify the component to render<Heading>into<Text>'svariantsMappings
<Text>Bold subtitle and copy text use the nearest named variant and change from 700 to 600 weight. Other
Text mappings preserve size and weight.
<Heading>The 24px/700 mapping changes to 26px/700. The 16px/700 mapping changes to 16px/600. Other Heading
mappings preserve size and weight.
Demo
(left: Figma; right: Storybook)
References
PR Checklist