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/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 🎉

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

Aksel@5.17.0

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)

Aksel@5.16.0

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)

Aksel@5.14

@navikt/ds-react

• Tag: Har nå innebygd støtte for ikoner (#2611)

• Table: Table.DataCell og Table.HeaderCell har nå textSize-prop for å justere font-size mellom 18px og 16px. (#2613)

Internt API-oppdateringer

• Oppdatert intern import/export av hooks og typer fra utils (#2618)
• Erstattet mergeRefs i useMemo med lokal useMergeRefs-hook (#2609)
• Komponenter respekterer nå e.preventDefault() riktig når event overskrives i komponent. (#2610)

@navikt/ds-css

• Tag: Har nå innebygd støtte for ikoner (#2611)

• Table: Checkbox nested i CheckboxGroup mister nå ikke padding (#2612)

Aksel@5.13

@navikt/ds-tokens

• Tokens: Ny token --a-text-width-max: 576px (#2572)

@navikt/ds-react

• Accordion.Item, Dropdown, ReadMore og Tooltip: Har en ny prop onOpenChange?: (open: boolean) => void; som forteller nå-state når open-state endrer seg. Dette vil være nyttig hvis man ikke bruker controlled-state, men fortsatt ønsker å vite om komponenten er open eller ikke (f.eks logging). (#2585)

• Controlled-state: Accordion.Item, Dropdown, ReadMore, Table.ExpandableRow og Tooltip har oppdatert intern håndtering av controlled state. Endringen skal ikke påvirke dagens API. (#2585)

• Page: Lagt til ny bakgrunnsfarge surface-subtle og ny maksbredde på Page.Block text (#2572)

@navikt/ds-css

• Page: Lagt til ny bakgrunnsfarge surface-subtle og ny maksbredde på Page.Block text (#2572)

Aksel@5.12

@navikt/ds-react

• MonthPicker: MonthCaption satt forrige/neste-knapper til disabled når de skulle være enabled. (#2601)

• Accessibility improvements to Radio and Checkbox component, so each label is only announced once with screen readers (#2562)

• 📝 Modal: Oppdatert JSDoc (#2567)

• Checkbox: Checkmark tilpasses fontsize != 16px bedre (#2563)

• Datepicker: Lukk-knapp i modal har nå type button for å unngå form-submition (#2568)

@navikt/ds-css

• ExpansionCard: Divider mellom header og innhold (#2566)

@navikt/aksel-stylelint

• Stylelint: Støtter nå stylelint v16 (#2591)

@navikt/aksel-icons

• Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke (#2538)

Aksel@5.11

@navikt/ds-css

• Chips: La til token for checkmark-circle (#2558)

• 🐛 Modal: Hindre at elementer med sr-only posisjoneres feil (#2541)

• 🐛 Textarea: Skru av autosize ved manuell resize (#2518)

• Page: La til md-bredde (768px) (#2510)

• Switch: Byttet success-farger med action når checked (#2511)

• ✨ Textarea: Mulighet for å sette resize-retning (#2494)

• ✨ Textarea: Eksperimentell støtte for automatisk scrollbar (#2457)

• ♿ Textarea: Forsinkelse ved live-opplesning av gjenstående tegn (#2502)

@navikt/ds-react

• Fix issue where clicking in Combobox.FilteredOptions after scrolling selected the wrong element (#2536)

• 🐛 Textarea: Skru av autosize ved manuell resize (#2518)

• 🐛 Popover: Ikke lukk ved klikk inni når parent er fokuserbar (#2521)

• Page: La til md-bredde (768px) (#2510)

• ⬆️ upgrade date-fns version & make it minor-version agnostic (#2514)

• Switch: Byttet success-farger med action npr checked (#2511)

• ✨ Textarea: Mulighet for å sette resize-retning (#2494)

• ✨ Textarea: Eksperimentell støtte for automatisk scrollbar (#2457)

• ♿ Textarea: Forsinkelse ved live-opplesning av gjenstående tegn (#2502)

@navikt/aksel-icons

• Ikoner: Nytt ikon PushPin (#2503)

Aksel@5.10

Ny komponent Page og Page.Block (#2456)

@navikt/ds-css

• 🐛 Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser (#2483)

• Primtives: CSS-import for primitives er nå mer spesifikk (#2469)

@navikt/ds-react

• Gjør lukknapp i Alert til type button (#2497)

• ♿ Textarea: Byttet fra aria-live til role=status på telleren for bedre semantikk (#2483)

• 🐛 Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser (#2483)

• ErrorSummary: Gjør det mulig å rendre ErrorSummary.Item conditionally (#2484)

• OverridableComponent: Fungerer nå bedre ved bruk av typeof (#2474)

• Table: Håndterer nå sjekk for interaktive elementer i ExpandableRow bedre (#2461)

@navikt/ds-tailwind

• typescript types for tailwind preset (#2486)

Aksel@5.9

@navikt/ds-react

• Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. (#2419)
• Datepicker/Monthpicker/Popover: Fjernet bubbleEscape-prop. (#2419)
• useDatepicker/useMonthPicker/useRangedpicker: Fjernet openOnFocus-prop, kan nå bare åpnes ved klikk på date-knapp i input. (#2419)
• Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. (#2419)
• Added useVirtualFocus hook - used in Combobox for now (#2394)

@navikt/ds-css

• Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. (#2419)
• Datepicker/Monthpicker/Popover: Fjernet bubbleEscape-prop. (#2419)
• useDatepicker/useMonthPicker/useRangedpicker: Fjernet openOnFocus-prop, kan nå bare åpnes ved klikk på date-knapp i input. (#2419)
• Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. (#2419)

Aksel@5.8

@navikt/ds-react

• Accordion: Fikset dom-validering ved bruk av div i button. (#2426)
• Modal: Bedre støtte for Tooltip i Modal (#2429)
• Modal: Støtte for å lukke ved klikk utenfor (#2386)
• Autocomplete in combobox will not change formatting of the letters while being typed, but will use the casing of the autocompleted word when selecting the option. (#2207)

@navikt/ds-css

• Modal: Bedre støtte for Tooltip i Modal (#2429)