search

pagopa / io-app

IO, l'app dei servizi pubblici
https://io.italia.it
European Union Public License 1.2
567 stars 98 forks source link

chore(Cross): [IOAPPX-287] Improve current visual hierarchy in the `MessageMarkdown` component #5712

Closed dmnplb closed 3 weeks ago

dmnplb commented 3 weeks ago

Short description

This PR improves the current visual hierarchy in the MessageMarkdown component, because we got the paradoxical case where the main message title was smaller than the first heading level contained in the message.

List of changes proposed in this pull request

Preview

Before After
Simulator Screenshot - iPhone 14 Pro - 2024-04-22 at 11 41 11 Simulator Screenshot - iPhone 14 Pro - 2024-04-22 at 11 40 49

Line height stress test

How to test

  1. Open MarkdownPlayground in your IDE
  2. Replace LegacyMarkdown with MessageMarkdown
  3. Go to the MarkdownPlayground (Developer Section) in the app launched locally
pagopa-github-bot commented 3 weeks ago

Affected stories

Generated by :no_entry_sign: dangerJS against 17f016377b4ddb0d98c8e27e0189db366e8a00a1

dmnplb commented 3 weeks ago

Why do H4 and H6 elements have the uppercase modifier?

It's a way to distinguish these typographic styles from others. The use of small cap headline styles is quite common.

Also, is it right to have an increasing line-height upon decreasing H-element importance (i.e., why do we want a 1.35 line-height for an H6 when an H1 has a 1.1 line-height)?

Line heights generally have an inverse relationship: as the size increases, the line height should decrease, and vice versa. It's a "rule" we inherited from the way our eyes work.