Skip to content

refactor: [IOPLT-1528] Add IOTypography as single source of truth - #8553

Open
dmnplb wants to merge 7 commits into
masterfrom
IOPLT-1528-add-typographic-conf-object
Open

refactor: [IOPLT-1528] Add IOTypography as single source of truth#8553
dmnplb wants to merge 7 commits into
masterfrom
IOPLT-1528-add-typographic-conf-object

Conversation

@dmnplb

@dmnplb dmnplb commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Short description

All the typographic attributes now live in one IOTypography object in core/, which the components themselves read. Values are unchanged: the existing typography snapshots pass untouched.

Motivation

Every style pinned its attributes inside its own component, and only some of them were re-exported as loose constants. Hero is the clearest symptom: it exported heroFontSize/heroLineHeight and then ignored them. Anyone who needs a style's metrics outside a Text has had to copy the numbers and hope they stay in sync.

List of changes proposed in this pull request

  • Add IOTypography in core/, with every style's font, size, line height, weight, iOS Dynamic Type ramp, letter spacing/transform and default color token
  • Rewire all the typographic components to read from it
  • Remove the per-style constants (h1FontSize, bodyLineHeight, …) and migrate every call site.
  • Add the missing 18 value to the IOFontSize scale (referenced by MdH2)
  • Add IOTypographicLinkColorToken, shared by Body, BodySmall, LabelMini and IOMarkdown
  • Update both the typography README and the main README to reflect the new changes.

Important

This PR introduces breaking changes for the published package: the next DS release needs a major bump.

How to test

  1. pnpm nx test @pagopa/io-app-design-system: snapshots must pass unchanged (any snapshot diff means a value drifted during the move)
  2. Run the app and open Design System → Foundation → Typography: every style renders exactly as on master, in both light and dark theme
  3. Check the two IDPay screens that used the old constants: Barcode result and the static code modal, including their skeleton placeholders
  4. Toggle the legacy typeface: H6 still switches to 17px

@dmnplb dmnplb self-assigned this Sep 7, 2026
@dmnplb dmnplb added the Design System New visual language and reduction of previous UI clutter label Sep 7, 2026
@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Jira Pull Request Link

This Pull Request refers to Jira issues:

@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

PR Title Validation for conventional commit type

All good! PR title follows the conventional commit type.

@dmnplb
dmnplb marked this pull request as ready for review September 7, 2026 12:18
@codecov

codecov Bot commented Sep 7, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.87%. Comparing base (b0f7d0c) to head (83f244b).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #8553      +/-   ##
==========================================
- Coverage   64.87%   64.87%   -0.01%     
==========================================
  Files        2000     2000              
  Lines       38247    38247              
  Branches     6531     6531              
==========================================
- Hits        24814    24812       -2     
- Misses      12004    12006       +2     
  Partials     1429     1429              
Files with missing lines Coverage Δ
...idpay/barcode/screens/IdPayBarcodeResultScreen.tsx 91.30% <ø> (ø)
...res/idpay/common/hooks/useIDPayStaticCodeModal.tsx 94.59% <ø> (ø)

... and 1 file with indirect coverage changes


Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b0f7d0c...83f244b. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Design System New visual language and reduction of previous UI clutter

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants