Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Typography): add general .dnb-t helper classes and add typography props to Span #4235

Merged
merged 10 commits into from
Nov 21, 2024
Merged

feat(Typography): add general .dnb-t helper classes and add typography props to Span #4235

merged 10 commits into from
Nov 21, 2024

Conversation

snorrekim
Copy link
Contributor

@snorrekim snorrekim commented Nov 6, 2024 •
edited
Loading

  • Added CSS classes for basic typography. Prefix .dnb-t
  • Updated all component to use the new classes instead of .dnb-p classes
  • Added typography props to the <Span> component
  • Updated typography documentation to show the current theme's values

@vercel Vercel
Copy link

vercel bot commented Nov 6, 2024 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
eufemia ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 21, 2024 0:04am

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Nov 6, 2024 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@snorrekim snorrekim force-pushed the feat/span-typography branch from 54f663a to 97cb87f Compare November 18, 2024 17:06
@snorrekim snorrekim force-pushed the feat/span-typography branch from 9f1e491 to b82528f Compare November 19, 2024 15:39
@snorrekim snorrekim changed the title added typography to Span. Added universal typography base class '.dnb-t' feat(Span, Typography): added typography helper class '.dnb-t'. Added typography to Span element Nov 19, 2024
@snorrekim snorrekim marked this pull request as ready for review November 19, 2024 16:11
@snorrekim snorrekim requested a review from tujoworker November 19, 2024 16:11
@tujoworker tujoworker changed the title feat(Span, Typography): added typography helper class '.dnb-t'. Added typography to Span element feat(Typography): add general .dnb-t helper classes and add typography props to Span Nov 19, 2024
langz
langz approved these changes Nov 20, 2024
View reviewed changes
Copy link
Contributor

@langz langz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great 🥇
I've compared/tested the the docs which use this, deploy preview towards main and it looks exactly the same 🥳

I also tested it locally to see that old classes, .dnb-typo-regular, .dnb-typo-medium and .dnb-typo-bold, still work. And they do 😍

Other than my comments regarding changing dnd to dnb, I only have this comment that we could discuss, in regards to line vs lineHeight and __line vs __line-height.

langz
langz reviewed Nov 20, 2024
View reviewed changes
packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
type: `'underline'`,
status: 'optional',
},
slant: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious what does slant mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lean, tilt, bent. It's used in font lingo.

The problem is that the css property is "font-style" but we don't want to use the word "style" in a prop. But in essence, the font-style css property sets the slanting of the font. normal italic oblique oblique 40deg. So it's the best i could come up with.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Technically, in font lingo, "slanted" means the text is mechanically slanted, so the machine prints the regular character with the top gradually more to the right than the bottom. More like a projection. And "italic" means that the font is already designed slanted.

But in a CSS context italic it both. You can either define a specific font for italic, or it will be "slanted", as in, the "machine" (browser) "mechanically" (programatically) slants the regular font.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, underline and italic couldn't use the same prop name decoration as they aren't mutually exclusive, you should be able to have both at the same time.

@snorrekim snorrekim force-pushed the feat/span-typography branch from 73e6d56 to 808dda8 Compare November 20, 2024 13:10
@snorrekim snorrekim force-pushed the feat/span-typography branch from dbcfa07 to f426dc1 Compare November 21, 2024 09:41
@snorrekim snorrekim force-pushed the feat/span-typography branch from f426dc1 to ddfd55c Compare November 21, 2024 11:45
@snorrekim snorrekim merged commit 9dfe66d into main Nov 21, 2024
10 checks passed
@snorrekim snorrekim deleted the feat/span-typography branch November 21, 2024 13:42
tujoworker pushed a commit that referenced this pull request Nov 22, 2024
@semantic-release-bot
chore(release): 10.57.0 [skip ci]
0d3f60e 
## [10.57.0](v10.56.0...v10.57.0) (2024-11-22)

### 📝 Documentation

* **Field.Upload:** adds `asyncFileHandler` property ([#4288](#4288)) ([fb09758](fb09758))
* **Field.Upload:** adds asyncFileHandler property ([7ccdabd](7ccdabd))

### 🐛 Bug Fixes

* **Forms:** align Value.SummaryList when Value.* has no label ([#4311](#4311)) ([b6621c2](b6621c2))
* **Forms:** ensure fields inside composition share submit indicator ([#4309](#4309)) ([e726e20](e726e20))
* **Forms:** safeguard errorMessages to avoid infinite loops when not wrapped in useMemo ([#4305](#4305)) ([f14bacc](f14bacc))
* **Forms:** show indicator with async onBlurValidator call when `validateInitially` is used ([#4303](#4303)) ([c585491](c585491))
* **Icon:** ensure icon name is rendered as `data-testid` ([#4304](#4304)) ([235b823](235b823))

### ✨ Features

* **Card, Section:** add `outset` property for moderate layout breakout ([#4317](#4317)) ([6008d9a](6008d9a))
* **DrawerList, Dropdown, Autocomplete, Field.Selection, Field.ArraySelection:** disabled options ([#4154](#4154)) ([8786d5d](8786d5d))
* **Field.Upload:** adds support for async and sync fn in `fileHandler` ([#4294](#4294)) ([2cc816a](2cc816a))
* **Forms:** add `Form.Card` with different default appearance than Card (use `Form.Card` in forms instead of Card) ([#4318](#4318)) ([7bbc0ca](7bbc0ca))
* **Forms:** add `labelSrOnly` to Value.* components ([#4319](#4319)) ([46f68ae](46f68ae)), closes [#4311](#4311)
* **Forms:** deprecate `validator` in favor of `onChangeValidator` ([#4314](#4314)) ([5a06b2e](5a06b2e))
* **Typography:** add general `.dnb-t` helper classes and add typography props to Span ([#4235](#4235)) ([9dfe66d](9dfe66d))
@tujoworker
Copy link
Member

🎉 This PR is included in version 10.57.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

@langz langz langz approved these changes

@tujoworker tujoworker Awaiting requested review from tujoworker

Assignees
No one assigned
Labels
released
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@snorrekim @tujoworker @langz