[email protected]

@navikt/ds-react

Ny komponent Skeleton ✨

Skeleton brukes til å gi brukeren en midlertidig visuell tilbakemelding mens innholdet lastes eller behandles. Den er en enkel og minimalistisk versjon av det faktiske innholdet som skal vises.

Chips er oppdatert 🎉

• Toggle Chips har nå varianter: neutral og action
• Toggle Chips har nå en ny prop: checkmark som slår av/på checkmark ved selected-state

Accordion er oppdatert 🎉

• Ny prop indent som lar deg slå/på left-padding i Accordion.Content

Description-felter er oppdatert for skjema

Alle skjemakomponenter sitt description-felt bruker nå text-subtle(grayalpha-700). Vi håper dette kan være med å skape litt bedre hierarki og visuelt skille mellom label og description.

JSdoc

Alle komponenter støtter nå JSdoc for dokumentasjon 📝

@navikt/ds-tokens

CSS og token-pakke inneholder nå tokens for datavisualisering ✨
Dokumentasjon

  background-color: var(--a-data-surface-1-subtle);
  border-color: var(--a-data-1-border);

Fargeendringer

• text-subtle og icon-subtle er justert til å begge bruke grayalpha-700. Subtle-tekst vil nå være litt mer tydelig og lesbar.

[email protected]

Internal er flyttet inn i core! ds-react-internal og ds-css-internal vil ikke lengre bli forvaltet og kode er flyttet inn i ds-react og ds-css

Datepicker er også endelig ute av beta!

@navikt/ds-react

• Dropdown, Timeline og Header er flyttet inn i core.
• Header er renamet til InternalHeader

  // React
  npx @navikt/aksel codemod v4-internal-react

• Datepicker og Monthpicker har ikke lengre UNSAFE_-prefix

  npx @navikt/aksel codemod v4-date

@navikt/ds-css

• CSS for dropdown, timeline og header er flyttet inn i core
• Alle navdsi-prefikser er endret til navds
• 🐛 Fikset spesificity-problem mellom dropdown og popover
• --ac-header-token er renamet til --ac-internalheader

  // CSS
  npx @navikt/aksel codemod v4-internal-css

Tips: Sett opp stylelint med pakken vår, så plukkes feil i CSS-en under migreringen opp

Legacy-pakker

Følgende pakker har fått sin siste versjon og vil ikke lengre bli oppdatert. Siste versjon er 3.4.2

• @navikt/ds-react-internal
• @navikt/ds-css-internal
• @navikt/ds-icons
• @navikt/ds-codemods

[email protected]

Stylelint config!

Aksel har nå en egen stylelint-config! Dokumentasjon
Regler:

• aksel/design-token-exists
• aksel/design-token-no-global-override
• aksel/design-token-no-component-reference
• aksel/no-internal-tokens
• aksel/no-class-override
• aksel/no-deprecated-classes

yarn add -D @navikt/aksel-stylelint stylelint

"stylelint": {
  "extends": [
    "@navikt/aksel-stylelint/recommended"
  ],
}

@navikt/ds-react

🎉 Ny tag-variant 'moderate'

[email protected]

@navikt/ds-react-internal

Oppdatert interaksjon for popover på Timeline.Period og Timeline.Pin 🎉 Popover dukker nå opp på hover og lukkes/åpnes med Enter.

• Nye eksempler med bruk av aria-controls
• Timeline bruker nå sin egen Popover-implementasjon. Gjenbruker ikke <Popover /> sin styling.

@navikt/ds-react

@floating-ui/react er oppdatert til v0.24. Internt API i Popover og Tooltip er oppdatert for å støtte dette.

[email protected]

@navikt/ds-react

🐛 Fikset size-håndtering i <Search />. Kan nå bruke prop htmlSize for manuell breddestyring.

[email protected]

@navikt/ds-react

• Fikset small-variant av Datepicker.Input.
• Datepicker.Input er refaktorert og har nå nytt design.
• CopyButton har nå en xsmall-variant. xsmall-varianter er ment for brukt i tabeller.

@navikt/aksel-icons

Nye ikoner 🎉
✨ FileParagraph
✨ FilePlus

[email protected]

@navikt/ds-react

🎉 Ny komponent <CopyButton />

import { CopyButton } from "@navikt/ds-react";
<CopyButton copyText="3.14" />

@navikt/ds-react-internal

⚠️ <CopyToClipboard /> er nå satt som deprecated. Den vil fortsatt fungere, men vi anbefaler å migrere. Man kan bruke codemod for dette.

npx @navikt/aksel codemod v3-copybutton

[email protected]

Komponenter bruker nå vår nye ikonpakke internt og Accordion er oppdatert til å ha chevron venstrestilt.

Oppdateringen vil ikke brekke noe i de fleste løsninger!
Hvis du har manuelt overskrevet styling for Stepper.Step, HelpText eller Accordion bør du sjekke om disse fortsatt fungerer som ønsket.

Accordion

Komponent er oppdatert til å ha chevron left-aligned. Dette vil kunne brekke løsninger der det er kodet inn illustrasjoner. Vi anbefaler å bruke ExpansionCard der det er mulig for disse tilfellene.

• Deler av Accordion-CSS er refaktorert. ⚠️ Dette vil kunne brekke overskrevne stiler.
• Neutral-variant
• Tilbys nå bare i monokrom
• Nye size-props for heading og paddings

Skjema

Alle "descriptions" brukt i skjemakomponenter har bumpet font-size fra 16px til 18px default. I tillegg er "sub"-descriptions (under checkbox, radio eller switch) nå subtle

Ikoner

Komponenter bruker nå ikoner fra @navikt/aksel-icons.

Bivirkninger av ikonendring

• @navikt/ds-icons er fjernet som dependency fra react-pakkene våre. ⚠️ Dette vil kunne brekke import av ikoner hvis du ikke har lagt til
• @navikt/ds-icons i dependencies.
• Helptekst bruker nå custom ikon. ⚠️ Dette vil kunne brekke overskrevne stiler.
• Stepper bruker samme checkmark som checkbox. ⚠️ Dette vil kunne brekke overskrevne stiler.
• Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
• Alert bruker samme ikonstørrelse uansett size
• Chips har justert intern padding/ikonstørrelser
• Select har fått justert padding rundt ikon
• Switch bruker samme checkmark som checkbox, er nå avrundet
• ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
• Tabs bruker default text-default

[email protected]

@navikt/ds-react-internal

Timeline bruker nå default norsk locale for date-formatering

@navikt/aksel-icons

✨ Nye ikoner

• 🎉 BulletList
• 🎉 NumberList
• 🔥 List

[email protected]

@navikt/ds-react

ExpansionCard støtter nå aria-labelledby