Feature/typography #832
Feature/typography #832
Conversation
🦋 Changeset detectedLatest commit: c7169ae The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
✅ Deploy Preview for obos-grunnmuren ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Jeg syns ikke det føles så godt å måtte skrive <H1 {...args}>Grunnmuren</H1>
<Body>Grunnmuren er designsystemet til OBOS.</Body>
<H2 {...args}>Typografi</H2>
<Body>
Typografi defineres av både tailwind-klasser og react-komponenter.
</Body>Jeg heller mot <h1 {...args}>Grunnmuren</h1>
<p class="body">Grunnmuren er designsystemet til OBOS.</p>
<h2 {...args}>Typografi</h2>
<p class="body">
Typografi defineres av både tailwind-klasser og react-komponenter.
</p>eller noe sånt i stedet, ass. |
Skjønner! Jeg liker den første bedre jeg, jeg syns det ser ryddigere ut (etter en liten opprydding). Men fordelen med å implementere både React-komponenter og komponent-klasser er at man som konsument kan velge da? Var litt teit av meg å ha med Det er vel for så vidt egentlig ikke noe i veien for å bruke samme API (bruke en Men ja, høres ut som vi kan vente litt med React-komponentene for nå. Vi kan vel spørre i #grunnmuren-design-system? |
|
Et annet argument for å implementere det som react-komponenter er jo at konsumenten ikke trenger å forholde seg til å velge riktig HTML-tag ift. semantikk. Det syns i hvert fall jeg er en veldig god ting, siden grunnmuren skal gjøre det enklere å lage løsninger som er universelt utformet. |
There was a problem hiding this comment.
Jeg er litt usikker på om det bør bare være body eller description, eller om det skal prefixes. Tenker det blir enklere når det er ordentlig dokumentasjon på alt dette og ikke bare i storybook så går greit for min del pr nå. Det som blir vanskelig er å få alle utviklerne til å huske at dette finnes, men kanskje ikke et så stort problem akkurat nå
Co-authored-by: Aulon Mujaj <4094284+aulonm@users.noreply.github.com>
|
Er det planer om å legge inn |
Ja @aulonm, det er den som heter |
packages/tailwind/tailwind-base.cjs
Outdated
| '.heading-xl': { | ||
| [headingXl]: {}, | ||
| }, | ||
| '.heading-l': { | ||
| [headingL]: {}, | ||
| }, | ||
| '.heading-m': { | ||
| [headingM]: {}, | ||
| }, | ||
| '.h2': { | ||
| [h2]: {}, | ||
| '.heading-s': { | ||
| [headingS]: {}, |
There was a problem hiding this comment.
vi må fortsatt beholde .h1 til .h4 her, men markere de som deprecated. Ellers vil alle appene se helt feil ut når de oppgraderer til ny versjon.
Tenker at vi kan fjerne .h1 etc. når vi går bort fra canary.
There was a problem hiding this comment.
Vet ikke om det var sånn her du mente med deprecate de, men er eneste måten jeg kunne se for meg 🤷♂️
Komponenter for typografi
Implementerer komponent-klasser i tailwind for typografi:
BylineFootnoteEtter at Kristian konkludert med at
BylineogFootnotenok ikke kommer til å brukes, utgår de inntil videre.Størrelser og line-height
Det er satt
line-heightirem, vi kunne også ha brukt unitless numbers. Men de ville gjort tallene lenger i mange tilfeller, siden nesten ingen fontstørrelser er i nærheten av å være delbare med16px(base font-size). Dessuten måtte vi i så fall regnet omremfra Figma til et tall som tilsvarer det samme for hverline-height, som ville tatt en del ekstra tid.Det er satt
1remfont-size på de som skal ha det, selv om det som default vil arves fra<body/>. Dette er for å gjøre det mer eksplisitt, og likt for alle klassene/elementene. Samt gjøre det enklere å justere font-størrelsen i fremtiden, uten at man må skrive om template literals osv.Prose
For å slippe å duplisere styling i både komponent-klassene og prose, er de fleste verdier dratt ut i et eget objekt
typography.For
blockquotei prose er det gjort noen overrides av default styling som kommer fra tailwind-pluginen. Fant ingen annen måte å gjøre det på, så hvis noen har et forslag til hvordan det kan gjøres bedre er det helt supert.TODO
Det som gjenstår her nå er å få inn riktig font for headings og quote i
blockquote. Det blir en egen PR.TBD
Vi har blitt enige om at om vi venter med å implementere typografi som React-komponenter. For å se an om det er behov for det. Og i så fall ta en grundig vurdering på hvordan det API-et skal se ut.
Eksempler
Med klasser
Med prose