[email protected]

Nytt siden v4.1.0

• 🐛 Fikset bruk av text-subtle på skjemaelementer #2049
• 🐛 Datepicker og Monthpicker lukker nå popover ved escape #2052
• 🐛 OverridableComponent omitter nå 'as'. Kan nå brukes rett ut av boksen med styled-components og Next/link #2051
• To nye ikoner ChevronRightLast og ChevronLeftFirst #2047
• 🎨 Helptext har nå en prop forwrapperClassName, bedre maksbredde for padding mot sider #2056
• 🐛 Timeline.Period fungerer nå ved testing i JSdom 42b5af6

Søk

#2062

Aksel.nav.no har oppdatert søket sitt 🔎 Vi har valgt å teste en løsning mer lignende "command-line" med raskere respons og mer "search as you go". Målet er å gjøre søket til en effektiv måte å navigere på Aksel og et reelt alternativ til å navigere gjennom strukturen manuelt.
Vi har også gjort noen forbedringer til hvordan vi utfører spørringer, slik at resultatene også nå vil være mer relevante og sende deg til det relevante innholdet du fikk søketreff på.

[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