Releases: navikt/aksel
Aksel@6.10.0
Aksel@6.9.0
@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)
Aksel@6.8.0
Aksel@6.7.0
New component <ProgressBar /> 🎉
@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
Aksel@6.6.0
Ny komponent FormSummary 🎉
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)
Aksel@6.5.0
@navikt/ds-react
- Tabs: Ny prop
lazysom rendrer innhold i TabPanel selv når panel er skjult (har fortsatt display:none) (#2621). - ToggleGroup: Erstattet bruk av dependency
@radix-ui/react-toggle-groupmed egen implementasjon. (#2620) - Tabs: La til ny prop
fillsom lar Tabs.Tab-elementer strekke seg over tilgjengelig bredde. (#2621). Demo. - Tabs: Erstattet bruk av dependency
@radix-ui/react-tabsmed egen implementasjon. (#2621) - DatePicker/MonthPicker: Valgte datoer får nå
aria-pressedfor å bedre indikere valg for skjermleser. (#2838) - DatePicker/MonthPicker:
required-prop stoppet ikke de-select av allerede valgt dato. (#2838) - ToggleGroup: La til ny prop
fillsom 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
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"]
}
}
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/ds-react@5.11.4
Etter: https://publint.dev/@navikt/ds-react@6.0.0-alpha.7
Endringen gjør også at Astro integrasjon med node fungerer rett ut av boksen 🎉
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.0For detaljer finner du som vanlig alt som må oppdateres under “v6” 👇
https://aksel.nav.no/grunnleggende/kode/migrering#eadaf0dc706f