feat: add high density typography scale #2646

cf-remylenoir · 2024-01-09T16:31:16Z

Purpose of PR

To support high-density in Forma 36 we need to adjust the font-size values for each typography component based on the current density.

Addition of the new tokens
- Font-size 👉 packages/forma-36-tokens/src/tokens/typography/font-size.js
- Line-height 👉 packages/forma-36-tokens/src/tokens/typography/line-height.js
Typography table
- Font-size 👉 https://forma-36-git-feat-high-density-typography-scale.colorfuldemo.com/tokens/typography#font-sizes (scroll down)
- Line-height 👉 https://forma-36-git-feat-high-density-typography-scale.colorfuldemo.com/tokens/typography#line-height

Ticket: https://contentful.atlassian.net/browse/CFCX-943

Header	Header
Caption
Heading
Paragraph
Section Heading
Subheading

PR Checklist

I have read the relevant readme.md file(s)
All commits follow our Git commit message convention
Tests are added/updated/not required
Tests are passing
Storybook stories are added/updated/not required
Usage notes are added/updated/not required
Has been tested based on Contentful's browser support
Doesn't contain any sensitive information

changeset-bot · 2024-01-09T16:31:19Z

🦋 Changeset detected

Latest commit: 221d970

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 33 packages

Name	Type
@contentful/f36-forms	Patch
@contentful/f36-tokens	Patch
@contentful/f36-typography	Patch
@contentful/f36-accordion	Patch
@contentful/f36-asset	Patch
@contentful/f36-autocomplete	Patch
@contentful/f36-badge	Patch
@contentful/f36-button	Patch
@contentful/f36-card	Patch
@contentful/f36-collapse	Patch
@contentful/f36-copybutton	Patch
@contentful/f36-core	Patch
@contentful/f36-datetime	Patch
@contentful/f36-datepicker	Patch
@contentful/f36-drag-handle	Patch
@contentful/f36-entity-list	Patch
@contentful/f36-empty-state	Patch
@contentful/f36-icon	Patch
@contentful/f36-list	Patch
@contentful/f36-menu	Patch
@contentful/f36-modal	Patch
@contentful/f36-note	Patch
@contentful/f36-notification	Patch
@contentful/f36-pagination	Patch
@contentful/f36-pill	Patch
@contentful/f36-popover	Patch
@contentful/f36-skeleton	Patch
@contentful/f36-spinner	Patch
@contentful/f36-table	Patch
@contentful/f36-tabs	Patch
@contentful/f36-text-link	Patch
@contentful/f36-tooltip	Patch
@contentful/f36-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2024-01-09T16:31:23Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Jan 12, 2024 1:54pm

github-actions · 2024-01-09T16:37:09Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	130.03 KB (+0.3% 🔺)	2.7 s (+0.3% 🔺)	72 ms (+50.14% 🔺)	2.7 s
Module	127.01 KB (+0.19% 🔺)	2.6 s (+0.19% 🔺)	72 ms (+54.45% 🔺)	2.7 s

cf-remylenoir · 2024-01-11T15:48:42Z

Will add a changeset once #2650 gets merged to get rid of the dependency warning.

stephanLeece · 2024-01-11T17:41:48Z

General Question: I see that line heights remain unchanged. Could this result in visual inconsistencies when used alongside other elements that include say, Text components, where line height is smaller in high density versions?

package-lock.json

stephanLeece

All looking good otherwise :)

damann · 2024-01-12T07:51:32Z

General Question: I see that line heights remain unchanged. Could this result in visual inconsistencies when used alongside other elements that include say, Text components, where line height is smaller in high density versions?

The line heights should change, too. My apologies, I didn't annotate this explicitly.

cf-remylenoir · 2024-01-12T08:52:10Z

General Question: I see that line heights remain unchanged. Could this result in visual inconsistencies when used alongside other elements that include say, Text components, where line height is smaller in high density versions?

The line heights should change, too. My apologies, I didn't annotate this explicitly.

All good, I will take care of adjusting the line-height too 👍

cf-remylenoir · 2024-01-12T13:01:30Z

I understood what was happening for the Caption component line-height in the Storybook (the line-height seemed off and I thought Storybook's styling was overriding our CSS).

The Caption component tag is span (inline) and the DensityContainer tag is div (block).

The div inherits the line-height from the body and takes over the span because of the nature of the inline element, if we change the span to an inline-block or change the tag to a block element, it works fine.

div > span (inline)

div > p (<Caption as="p" .../> - block)

It is an implementation detail issue, not an issue introduced by this work.

packages/components/typography/src/SectionHeading/SectionHeading.tsx

stephanLeece

Lookin good! Just one lil comment. Changeset coming?

stephanLeece

Nice!

stephanLeece

Nice!

cf-remylenoir · 2024-01-23T13:33:45Z

I understood what was happening for the Caption component line-height in the Storybook (the line-height seemed off and I thought Storybook's styling was overriding our CSS).

The Caption component tag is span (inline) and the DensityContainer tag is div (block).

The div inherits the line-height from the body and takes over the span because of the nature of the inline element, if we change the span to an inline-block or change the tag to a block element, it works fine.

div > span (inline)

div > p (<Caption as="p" .../> - block)

It is an implementation detail issue, not an issue introduced by this work.

This was fixed as part of #2655

feat(tokens): add font-size-xs

928c6df

cf-remylenoir self-assigned this Jan 9, 2024

This comment was marked as outdated.

Sign in to view

vercel bot deployed to Preview January 9, 2024 16:38 View deployment

This comment was marked as outdated.

Sign in to view

cf-remylenoir marked this pull request as ready for review January 9, 2024 16:43

cf-remylenoir requested review from Lelith, damann and a team as code owners January 9, 2024 16:43

cf-remylenoir requested review from mshaaban0 and handekocabey86 January 9, 2024 16:43

vercel bot deployed to Preview January 9, 2024 16:50 View deployment

cf-remylenoir marked this pull request as draft January 10, 2024 09:54

cf-remylenoir changed the title ~~feat(tokens): add font-size-xs~~ feat: add high density typography scale Jan 10, 2024

feat(tokens): add high-density values

7b6c637

cf-remylenoir force-pushed the feat/high-density-typography-scale branch from cf51c74 to 7b6c637 Compare January 11, 2024 14:19

vercel bot deployed to Preview January 11, 2024 14:24 View deployment

Merge branch 'main' into feat/high-density-typography-scale

c5b4f32

vercel bot deployed to Preview January 11, 2024 14:31 View deployment

cf-remylenoir added 6 commits January 11, 2024 15:51

chore(typography): add dependency

17c1b8c

feat(heading): add high-density support

6f02f17

feat(paragraph): add high-density support

255cea1

feat(section-heading): add high-density support

ed5918f

feat(subheading): add high-density support

950f89f

feat(caption): add high-density support

19fb16c

vercel bot deployed to Preview January 11, 2024 15:46 View deployment

stephanLeece reviewed Jan 11, 2024

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

stephanLeece reviewed Jan 11, 2024

View reviewed changes

Merge branch 'main' into feat/high-density-typography-scale

1e0a647

vercel bot deployed to Preview January 12, 2024 08:53 View deployment

cf-remylenoir added 6 commits January 12, 2024 10:15

feat(tokens): add high-density values

cda8d99

feat(caption): add line-height high-density support

d9a4b3c

feat(heading): add line-height high-density support

1c1c7c7

feat(paragraph): add line-height high-density support

ef79fd5

feat(subheading): add line-height high-density support

4775455

chore(section-heading): update story

476812b

vercel bot deployed to Preview January 12, 2024 11:57 View deployment

cf-remylenoir requested a review from stephanLeece January 12, 2024 12:58

stephanLeece reviewed Jan 12, 2024

View reviewed changes

packages/components/typography/src/SectionHeading/SectionHeading.tsx Outdated Show resolved Hide resolved

stephanLeece reviewed Jan 12, 2024

View reviewed changes

cf-remylenoir and others added 3 commits January 12, 2024 14:25

feat(section-heading): add line-height high-density support

0f1c043

chore: add changelog

da138a3

chore: update changelog

65e1b5a

vercel bot deployed to Preview January 12, 2024 13:33 View deployment

stephanLeece approved these changes Jan 12, 2024

View reviewed changes

feat(forms): replace tokens with high-density ones

221d970

vercel bot deployed to Preview January 12, 2024 13:54 View deployment

stephanLeece approved these changes Jan 12, 2024

View reviewed changes

damann approved these changes Jan 12, 2024

View reviewed changes

cf-remylenoir merged commit f094b71 into main Jan 15, 2024
12 checks passed

cf-remylenoir deleted the feat/high-density-typography-scale branch January 15, 2024 09:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add high density typography scale #2646

feat: add high density typography scale #2646

cf-remylenoir commented Jan 9, 2024 •

edited

Loading

changeset-bot bot commented Jan 9, 2024 •

edited

Loading

vercel bot commented Jan 9, 2024 •

edited

Loading

This comment was marked as outdated.

github-actions bot commented Jan 9, 2024 •

edited

Loading

This comment was marked as outdated.

cf-remylenoir commented Jan 11, 2024

stephanLeece commented Jan 11, 2024

stephanLeece left a comment

damann commented Jan 12, 2024

cf-remylenoir commented Jan 12, 2024

cf-remylenoir commented Jan 12, 2024 •

edited

Loading

stephanLeece left a comment

stephanLeece left a comment

stephanLeece left a comment

cf-remylenoir commented Jan 23, 2024

feat: add high density typography scale #2646

feat: add high density typography scale #2646

Conversation

cf-remylenoir commented Jan 9, 2024 • edited Loading

Purpose of PR

PR Checklist

changeset-bot bot commented Jan 9, 2024 • edited Loading

🦋 Changeset detected

vercel bot commented Jan 9, 2024 • edited Loading

This comment was marked as outdated.

github-actions bot commented Jan 9, 2024 • edited Loading

size-limit report 📦

This comment was marked as outdated.

cf-remylenoir commented Jan 11, 2024

stephanLeece commented Jan 11, 2024

stephanLeece left a comment

Choose a reason for hiding this comment

damann commented Jan 12, 2024

cf-remylenoir commented Jan 12, 2024

cf-remylenoir commented Jan 12, 2024 • edited Loading

stephanLeece left a comment

Choose a reason for hiding this comment

stephanLeece left a comment

Choose a reason for hiding this comment

stephanLeece left a comment

Choose a reason for hiding this comment

cf-remylenoir commented Jan 23, 2024

cf-remylenoir commented Jan 9, 2024 •

edited

Loading

changeset-bot bot commented Jan 9, 2024 •

edited

Loading

vercel bot commented Jan 9, 2024 •

edited

Loading

github-actions bot commented Jan 9, 2024 •

edited

Loading

cf-remylenoir commented Jan 12, 2024 •

edited

Loading