[email protected]

@navikt/ds-css

• Increased padding size for contentBlockPadding on the Page primitive to 4 rem to reflect docs/Figma (#2876)
• Fixed Combobox small sizing to align with other form fields (#2801)

@navikt/ds-react

• 🐛 Modal: Fix issue where polyfill-classname was not applied when using SSR (Next.js) (#2954)
• Combobox: Improved performance when parsing 1k or more options. (#2937)
• Stepper: Removed unsafe_index prop. (#2926)
• Added options row-reverse and column-reverse to direction prop on Stack. (#2876)

@navikt/aksel-icons

• Icons: New icons for geometric shapes (#2927)

[email protected]

New component <FormProgress /> 🎉

Documentation

@navikt/ds-react

• Stepper.Step: Set aria-current to step instead of true (#2920)

@navikt/ds-css

• HGrid: refactored CSS. (#2917)

[email protected]

New component <ProgressBar /> 🎉

Documentation

@navikt/ds-react

• Combobox: Remove 'Ingen søketreff' when custom options allowed (#2895)
• Datepicker, MonthPicker: Rekkefølgen på årstall i Select er reversert slik at siste år er øverst. Dette er endret for å være bedre tilpasset ekspertsystemer der de mest relevante årene ble vist lengst unna musepeker ved klikk. (#2882)

@navikt/ds-css

• Checkbox, Radio: Erstatter :focus-visible med :focus for bedre UX brukt sammen med ErrorSummary. (#2893)
• 💄 tweak CSS for timeline pins. (#2889)

[email protected]

Ny komponent FormSummary 🎉

Dokumentasjon

FormSummary brukes til å vise en oppsummering av et utfylt skjema før brukeren sender det inn.

@navikt/ds-react

• ✨ Ny komponent FormSummary (#2802)
• Combobox: Prevents "Enter" while Combobox is focused from submitting form. (#2861)

@navikt/ds-css

• ✨ Ny komponent FormSummary (#2802)

@navikt/aksel

• Aksel CLI: Fjernet deprecated komponenter fra css oversikt. (#2860)

[email protected]

@navikt/ds-react

• Tabs: Ny prop lazy som rendrer innhold i TabPanel selv når panel er skjult (har fortsatt display:none) (#2621).
• ToggleGroup: Erstattet bruk av dependency @radix-ui/react-toggle-group med egen implementasjon. (#2620)
• Tabs: La til ny prop fill som lar Tabs.Tab-elementer strekke seg over tilgjengelig bredde. (#2621). Demo.
• Tabs: Erstattet bruk av dependency @radix-ui/react-tabs med egen implementasjon. (#2621)
• DatePicker/MonthPicker: Valgte datoer får nå aria-pressed for å bedre indikere valg for skjermleser. (#2838)
• DatePicker/MonthPicker: required-prop stoppet ikke de-select av allerede valgt dato. (#2838)
• ToggleGroup: La til ny prop fill som strekker ToggleGroup til å ta opp all tilgjengelig bredde. (#2620). Demo.
• FileUpload.Item: 💥 Endret API og støtte for å sette ID på knappen (#2824)

navikt/ds-css

• FileUpload: Item-illustrasjon har nå border-radius: 9999px (#2834)

Aksel @6.3.0

@navikt/ds-react

• Allow Combobox options as objects to support separate display text and value (#2716)

Ny komponent FileUpload 🎉

https://aksel.nav.no/komponenter/core/fileupload

Håndterer opplasting av filer, Dropzone og fil-visning (#2504)

Aksel @6.1.0

@navikt/ds-react

• Modal: Ikke opphev scroll lock ved lukking av nesta modal
• 🏷️ Fikset typer for modal
• Oppdatert exports av komponenter for å støtte nextjs app router

Dokumentasjon for bruk av nextjs med Aksel

Aksel @6.0.0

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:

• https://react.dev/reference/react/use-client
• https://nextjs.org/docs/app/building-your-application/rendering/server-components

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

[email protected]

Versjon 5.17.0

@navikt/ds-css

• Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows (#2680)

@navikt/ds-react

• Eksponer variabelen "role" i Search-komponenten (#2667)

[email protected]

Versjon: 5.16

@navikt/ds-css, @navikt/ds-react

• ✨ Combobox: Mulighet for å begrense hvor mange valg bruker kan ta (#2260)

@navikt/ds-tailwind

• Tailwind: La til ny maxWidth for text (#2652)

@navikt/aksel-icons

• Ikoner: Nytt ikon LocationPin ✨ (#2672)

Versjon: 5.15

@navikt/ds-react

• HelpText: HelpText-state ble ikke riktig oppdatert ved klikk (#2643)

@navikt/aksel-icons

• Ikoner: Synket ikoner med Figma. Lagt til nytt ikon FigureChild (#2629)