Skip to content

Aksel @6.0.0
Compare
Choose a tag to compare
@KenAJoh KenAJoh released this 21 Feb 09:10
· 768 commits to main since this release
@navikt/[email protected]
bea55aa
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

Hva er nytt?

Etter ~70 minor og patch versjoner er neste major-versjon 6 publisert 🎉
Fokuset til versjon 6 var å modernisere module-resolution og forbereder løsningene våre til en fremtidig verden der RSC er standard. React og ikonpakke er også oppdatert til å bruke moderne “package entrypoints”, som vil hjelpe rammeverk å importere riktig kode, og editorer med bedre autocomplete.

Strengere typer

For å gjøre det lettere å gjøre rett når man lager komplekse grensesnitt vil vi fremover bli strengere med hvordan prop-typer er definert. Et praktisk eksempel er endringene for Modal i v6 der vi nå gir feil hvis man bruker open, men ikke også har en onClose.

Alle komponenter og ikoner har nå “use client” 🎉

Bruker du Nextjs App Router kan du nå importere direkte fra @navikt/ds-react og @navikt/aksel-icons i server-components :star-struck:

OBS! Endringen brekker native treeshaking i Nextjs

Dette er et kjent problem, og vi tracker noen issues på dette: vercel/next.js#60246, vercel/next.js#44039, vercel/next.js#12557.

For nå kan det løses ved å bruke optimizePackageImports . Minsteversjon av nextjs som støtter dette er 13.5.

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@navikt/ds-react", "@navikt/aksel-icons"]
  }
}

https://vercel.com/blog/how-we-optimized-package-imports-in-next-js#new-solution-optimizepackageimports

ES modules

Pakkene våre støtter nå “ekte” ESM-resolution, som har fikset over 280 problemer i hvordan react-pakken vår var eksportert:
Før: https://publint.dev/@navikt/[email protected]
Etter: https://publint.dev/@navikt/[email protected]

Endringen gjør også at Astro integrasjon med node fungerer rett ut av boksen 🎉

https://docs.astro.build/en/guides/integrations-guide/node/

Tokens

Vi har fått tilbakemelding på at brekkpunktene våre ikke tilbydde en tilstrekkelig rekkevidde i dag. Vi har nå lagt til en ny bredde 2xl for 1440px. Alle primitives er oppdatert til å også kunne bruke denne med key 2xl.

Action-farger

Vi ryddet opp i noe ulogisk bruk av farge-tokens og har fått på plass noen tokens som manglet.

  • border.action.hover
  • text.action.hover
  • icon.action.hover

Oppdateringen vil påvirke hvordan spesielt hover og selected-state vises på følgende komponenter:

Button, CopyButton, Dropdown, Combobox, ConfirmationPanel, Radio, Checkbox, Search, Select, TextField, Textarea, Helptext, LinkPanel, Link, ReadMore, Stepper og Tabs.

Dependencies

For å unngå duplikate dependencies i build-bundle vil det være lurt å oppdatere lokale dependencies til å matche (hvis man brukere disse lokalt selv da).

- clsx: ^1.2.1
+ clsx: ^2.1.0

- date-fns: ^2.30.0
+ date-fns: ^3.0.0

For detaljer finner du som vanlig alt som må oppdateres under “v6” 👇
https://aksel.nav.no/grunnleggende/kode/migrering#eadaf0dc706f

Assets 2
Loading