Endring av label og description på komponenter

[JorgenMaristuen]

Vi ønsker å gjøre label og description mer enhetlig på tvers av alle komponenter, samt å forbedre tilgjengelighet og lesbarhet samtidig som nødvendig hierarki mellom teksttyper ivaretas.

I dag brukes det i disse tekstene ulik linjeavstand og tekststørrelser, som er noe som bør kunne forenkles. VI ønsker også å gå bort fra bruk av tekststilen Detail, som er 14px og dermed ikke UU-vennlig.

Svarer til #1881 og #1917

Lenke til Slack-tråd om description på radio og checkbox

[JorgenMaristuen]

Foreslår disse justeringene, etter testing på alle komponenter som bruker Label.

1. Samme tekststørrelse og linjeavstand på alle nivåer for både Label og Description (Medium: BodyShort Medium, Small: BodyShort Small).
2. Label er Semibold, farge: text-default.
3. Description er Regular, farge: text-default.
4. Descripton på nederste nivå (f.eks description til hver enkelt radio) er Regular, farge text-subtle.
5. Spacing under Label(+Description) settes til 8px.
6. Spacing mellom Label og Description settes til 2px.

Nåværende Label og Description (figma-prototype)
Forslag til ny Label og Description (figma-prototype)

[Trent-NAV]

@Trent-NAV På label og description generelt foreslår vi bare å skille disse ved å bruke semibold på Label og normal tekst på description (ikke noe endring av tekstfarge).

Punkt 3 hadde falt ut i posten her: "Description er Regular". Beklager om det skapte litt forvirring

Den er grei! 😀

[Trent-NAV]

I demoen så vises subtle description

[JorgenMaristuen]

I demoen så vises subtle description

Ja, men kun på nivå 2, der det er behov for description på et enkelt radiovalg eller checkboxvalg.
Description under labelen "Hva vil du informere NAV om?" har standard tekstfarge (text-default).

[Trent-NAV]

Jeg tenker på input description, altså den som er mutet i demoen. Jeg definerte teksten under øverste label som secondary label. Radio group for IF (Small) nå har label-small (16px) for øverste label og detail/default for description eller secondary label. For button label har den body/short/small (16px). Hvis man skal følge den samme strategien for button label description så bør vel den da være detail/default den også? Eller er det den du mener også burde være body/short/small (16px), altså likt med button label men vektes ulikt med text-subtle mot semi-bold?

[JorgenMaristuen]

Ja, forslaget er å gå bort fra å bruke tekststørrelse detail i Small-komponenter.
All tekst i Small-komponenter blir 16 px med linjeavstand 20 px.
All tekst i Medium-komponenter blir 18px med linjeavstand 24 px.
Øverste label blir semibold. "Button label description" blir text-subtle.