v7.2 (Okt 2024)

FileUpload: UNSAFE-prefikset er fjernet. Hvis du bruker FileUpload må du erstatte alle instanser av "UNSAFE_FileUpload" med "FileUpload".

v7 (Sept 2024)

Sjekkliste for oppdatering:

Tooltip

Ved ordinær bruk vil nå elementet tooltip wrapper få aria-label med innholdet til Tooltip.

// React
<Tooltip content="Åpne inbox">
  <Button icon={<InboxIcon />}/>
</Tooltip>

// Output
<button aria-label="Åpne inbox">
  ...
</button>

Dette skiller seg fra tidligere da elementet bare ville fått aria-describedby når tooltip er åpen. Dette vil gjøre at feil bruk av tooltip på ikke-interaktive elementer fortsatt oppleves likt for ulike brukergrupper.

I de tilfellene du fortsatt ønsker at tooltip skal være en ekstra beskrivelse til innholdet, kan describesChild-prop brukes. Da vil en title bli satt når tooltip er lukket, og aria-describedby satt når åpen.

// React
<Tooltip describesChild content="Åpne inbox">
  <Button>
    Tekst her vil fotsatt bli lest av skjermleser
  </Button>
</Tooltip>

// Output
<button title="Åpne inbox">
  ...
</button>

Icons

Noen få ikoner fikk for 6 måneder siden oppdatert navn. Nå er duplikatene fjernet fra aksel-icons pakken

ErrorSummary

heading har nå en default verdi ("Du må rette disse feilene før du kan fortsette:"). Hvis du har brukt ErrorSummary uten heading, bør du sjekke at den nye overskriften passer inn i konteksten der komponenten er brukt.

Tailwind

Vi la til 'screens'-config i @navikt/ds-tailwind pakken. Dette vil endre verdien på brekkpunktene sm og 2xl til en annen verdi en Tailwind sin innebygde verdi.

// Native Tailwind config
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',

// Ny config
'sm': '480px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1440px',

I de fleste tilfeller vil dette ikke påvirke applikasjoner negativt da det bare er snakk om 160px på det mest brukte sm-brekkpunktet. Hvis du ønsker å oppdatere uten å manuelt sjekke at alt fortsatt fungerer med ny config, kan du overskrive din lokale Tailwind-config med

extend: {
  screens: {
    'sm': '640px',
    '2xl': '1536px',
  },
}

v6.14 (Aug 2024)

Combobox: onChange er endret til å motta den nye verdien som første og eneste parameter, i stedet for event. Med andre ord må onChange={(event) => setState(event.target.value)} endres til onChange={setState} eller tilsvarende. (Endringen er gjort utenom en major-version siden komponenten har UNSAFE-prefix.)

v6.0 (Feb 2024)

Fokuset til versjon 6 er å modernisere module-resolution, samt forberede løsningene våre til en fremtidig verden der RSC er standard.

"use client"

For mer informasjon kan du lese guide for Aksel + Nextjs.

Komponenter fra @navikt/ds-react og ikoner fra @navikt/aksel-icons setter nå "use client" selv. Komponentene regnes da som Client Components i Next.js, som gjør at brukere av Next.js "App Router" kan bruke dem rett ut av boksen. Et unntak til dette er komponenter med dot-notasjon som ikke fungerer i server-components. Se guide for Aksel + Nextjs for hvordan du løser dette.

Bundle size

En konsekvens av oppdateringen er at Next.js ikke klarer å tree-shake react- og ikonpakke riktig lengre. Dette er et kjent problem med Next.js, men kan løses ved å bruke optimizePackageImports. Obs! Dette vil kreve nextjs >= v13.5.

module.exports = {
  experimental: {
    optimizePackageImports: ["@navikt/ds-react", "@navikt/aksel-icons"]
  }
}

Uten dette skal endringen i praksis ikke kunne brekke noe, men eldre bundlere og rammeverk kan gi warnings.

Module resolution

React- og ikonpakke har fått oppdatert package entrypoints fra gammel module/main syntax til moderne exports. Exports ble introdusert i Node.js 14, så alle moderne bundlere og frameworks skal støtte dette. Oppdateringen av entrypoints gjør også at det ikke lengre er mulig å importere komponenter fra annen path enn @navikt/ds-react. Custom-import som @navikt/ds-react/cjs/button/Button.js vil ikke fungere.

Hvis du har brukt denne typen import for å hente ut funksjonalitet eller props og dette brekker nå, ta kontakt så undersøker vi nærmere.

ES modules

Pakkene har nå ekte ES modules (ESM)-støtte. Dette gjør at Astro node kan bruke dem uten problemer.

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
});

For at dette skulle være mulig har vi oppdatert major-versjon for 2 dependencies:

- clsx: ^1.2.1
+ clsx: ^2.1.0

- date-fns: ^2.30.0
+ date-fns: ^3.0.0

Hvis du bruker noen av disse i løsningen din, anbefaler vi å oppdatere til samme major-versjon. Du unngår da dobbel lasting av date-fns som raskt kan øke bundle-size med over 25 kB.

OverridableComponent

Vi har rullet tilbake en tidligere endring fordi den viste seg å tillate vilkårlige props på komponenter som bruker OverridableComponent, når man ikke brukte as-propen.

Endringen skulle gjøre det enklere å lage egene implementasjoner/wrapper-koponenter rundt Aksel-komponenter. Hvis dere har gjort dette og nå får type-feil, kan dere prøve en av disse variantene:

const MyButton: OverridableComponent<ButtonProps, HTMLButtonElement> = 
(props: ButtonProps) => {
  return <Button {...props} />;
};

const MyButton = (props: ButtonProps) => {
  return <Button {...props} />;
};

DatePicker, MonthPicker

openOnFocus-prop er fjernet.

Chat

Propene backgroundColor og avatarBgColor er fjernet. Bruk variant som erstatning. Hvis disse ikke fungerer tilbys det tokens som kan overskrives.

npx @navikt/aksel codemod v6-chat

Modal

Prop-typene er gjort strengere for å gjøre det lettere å gjøre rett, primært for å unngå at onBeforeClose brukes når man egentlig burde brukt onClose.

Grid

Gammel Grid-komponent er fjernet. Alle klasser med .navds-grid-prefix er fjernet. Se HGrid for moderne grid-komponent.

ContentContainer

Se Page for ekvivalent komponent.

width="xl" er nærmeste bredde til ContentContainer

// Før
<ContentContainer>Innhold</ContentContainer>

// Etter
<Page>
  <Page.Block width="xl">
    Innhold
  </Page.Block>
</Page>

Table

SortState.direction har nå "none" tilgjengelig som gir lettere type-håndtering.

export interface SortState {
  orderBy: string;
  direction: "ascending" | "descending" | "none";
}

Search

Du vil nå få type-feil hvis du prøver å sette type. Internt i komponenten er type hardkodet til "search" og det har aldri vært mulig å endre dette med en prop.

<Search label="Søk" type="text" />
                    ~~~~
                 // Property 'type' does not exist on type...

Tokens

z-index

Fjernet --a-z-index-modal-token da systemet nå bruker native dialog-element. Dette vil også påvirke brukere av z-modal i tailwind.

Breakpoint

Nytt brekkpunkt for 1440px --a-breakpoint-2xl. Alle primitives støtter også nå 2xl-brekkpunkt for responsive props.

For brukere av tailwind-config vil dette si at screen er oppdatert. Dette vil overskrive default tailwind-config som er 1536px til å nå være 1440px.

"screen": {
  "sm": "480px",
  "md": "768px",
  "lg": "1024px",
  "xl": "1280px",
  "2xl": "1440px"
},

Action-farger

Som konsekvens ved oppdatering av action-farger brukt på ulike komponenter har flere komponenter fått nye tokens. Dette vil bare være en breaking-change hvis du manuelt har overstyrt disse gjennom komponent-tokens. For alle endringer kan man se github-diff.

+ --ac-button-secondary-hover-border: --a-border-action-hover
+ --ac-read-more-hover-text: --a-text-action-hover
+ --ac-stepper-hover-active: --a-text-action-hover
+ --ac-select-active-border: --a-border-action-selected
+ --ac-textfield-active-border: --a-border-action-selected
+ --ac-dropdown-item-hover-text: --a-text-action-hover

v5.0 (Aug 2023)

Modal er skrevet om til å bruke native dialog i stedet for react-modal. Prop appElement er også fjernet fra Provider da den ikke vil ha noen funksjon lengre.

React

CSS

v5.3.1

Klassene navds-guide__illustration, navds-guide__illustration--small og navds-guide__illustration--medium er fjernet.

v4.0 (Juli 2023)

Estimert migreringstid: ~5 minutter. Release-notes.

Dropdown, Timeline og InternalHeader (tidligere Header) er flyttet til @navikt/ds-react. Tilhørende styling er flyttet fra @navikt/ds-css-internal til @navikt/ds-css.

DatePicker og MonthPicker er også ute av Beta. Dette vil si at UNSAFE_-prefix er fjernet fra komponentene.

Migrering Internal til Core

// Codemods

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

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

Om du ikke ønsker å gjøre denne migreringen nå, vil disse pakkene fortsatt være tilgjengelig på versjon 3.x.x. Men for å få fremtidige oppdateringer anbefaler vi å oppdatere. Vi kan ikke garantere kompatibilitet mellom ds-css v4 og ds-css-internal v3 på sikt.

Migrering DatePicker/Monthpicker

// Codemod
npx @navikt/aksel codemod v4-date

// Før
import { 
  UNSAFE_DatePicker,
  UNSAFE_useDatepicker,  
  UNSAFE_useRangeDatepicker, 
  UNSAFE_MonthPicker, 
  UNSAFE_useMonthpicker 
} from "@navikt/ds-react";

// Etter
import { 
  DatePicker, 
  useDatepicker, 
  useRangeDatepicker, 
  MonthPicker, 
  useMonthpicker 
} from "@navikt/ds-react";

v3.0 (Mai 2023)

Release-notes

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.

v2.7: Ny ikonpakke

Vår nye ikonpakke, @navikt/aksel-icons, bruker samme API som den tidligere løsningen @navikt/ds-icons. For en enklere migrering kan du fortsatt benytte begge pakkene inntil du har fullført overgangen til den nye ikonpakken. Du kan lese mer om ikonpakken i blogginnlegget vårt eller besøke de nye ikonsidene.

De fleste ikonene vil være nesten identiske, men det kan forekomme noen visuelle justeringer. Derfor er det viktig å utføre en enkel sjekk for å sikre at alt stemmer under migreringen. Du kan også finne den gamle ikonoversikten for å sammenligne under migreringen.

v2: Tokens oppdatering og Font-lasting (Nov 2022)

I versjon 2.0.0 har vi hatt fokus på tokens, semantiske farger og optimalisering av font-lasting.

Tokens

Målet for token-oppdateringen er å legge til rette for mer fart og flyt både i design og utviklingsfasen av løsninger. Vi har gjort en revisjon av semantikk og navngiving for tokens som vi håper vil gjøre det lettere å bruke dem aktivt i løsningene.

Codemod

Det er laget codemods for alle token-endringer i CSS, sass, less og js-format. Finner mer informasjon om disse i codemod-readme. For de fleste vil migreringen til nye tokens kunne gjøres på noen minutter.

For brukere av tailwind-pakken vår blir dette dessverre en litt mer manuell prosess. Ved migrering av tailwind-tokens brukt på aksel.nav.no tok denne prosessen ~15 minutter.

Breakpoints

For brukere av tailwind-pakken har nå ds-tailwind en screen-preset. Dette vil bare påvirke de som har brukt sm: størrelse som blir endret fra 686px (tailwind-default) -> 480px

Prefiks

Vi har valgt å gå bort fra --navds, --navds-global-color og --navds-semantic-color prefiksene. Alle tokens har nå prefiks --a.

// Før
--navds-global-color-blue-500: ...;
--navds-semantic-color-feedback-info-background: ...;
--navds-semantic-color-feedback-info-border: ...;
--navds-shadow-medium: ...;

// Etter
--a-blue-500: ...;
--a-surface-info-subtle: ...;
--a-border-info: ...;
--a-shadow-medium: ...;

Endringer

Utenom endring i prefikser, er det bare semantiske farger som er påvirket av endringer i navn. Vi anbefaler å ta i bruk codemod-løsningen for oppdateringen, men tailwind-brukere kan bruke oversikten under.

text-inverted -> text-on-inverted
text-muted -> text-subtle
text -> text-default
link -> text-action
link-visited -> text-visited
feedback-info-icon -> icon-info
feedback-info-border -> border-info
feedback-info-background -> surface-info-subtle
feedback-warning-background -> surface-warning-subtle
feedback-warning-icon -> icon-warning
feedback-warning-border -> border-warning
feedback-danger-border -> border-danger
feedback-danger-icon -> icon-danger
feedback-danger-background -> surface-danger-subtle
feedback-danger-text -> text-danger
feedback-success-border -> border-success
feedback-success-background -> surface-success-subtle
feedback-success-icon -> icon-success
interaction-danger-selected -> surface-danger-active
interaction-danger-hover -> surface-danger-hover
interaction-danger -> surface-danger
interaction-primary-hover-subtle -> surface-action-subtle-hover
interaction-primary-selected -> surface-action-selected
interaction-primary-hover -> surface-action-hover
interaction-primary -> surface-action
component-background-inverted -> surface-inverted
component-background-alternate -> surface-subtle
component-background-light -> surface-default
canvas-background-inverted -> surface-inverted
canvas-background-light -> bg-default
canvas-background -> bg-subtle
border -> border-strong
border-inverted -> border-on-inverted
border-muted -> border-default
divider -> border-divider
focus-inverted -> border-focus-on-inverted
focus -> border-focus

Obs!! border-divider har nå alpha-verdi! Kan derfor være lurt å dobbelsjekke at dette fortsatt ser riktig ut i din løsning hvis du tidligere brukte divider.

Komponent-tokens og overskriving av tokens

Vi har oppdatert hvordan vi håndterer komponent-spesifikke tokens. Du vil ikke lengre kunne bruke eks --navds-button-color-primary-text til å style din egen kode eller gjøre overskrivinger. Du kan lese mer om den nye løsningen i "Tokens i kode".

Instansene der du har brukt komponent-tokens for å style din egen kode, vil automatisk bli oppdatert til ny semantisk verdi med codemod.

For de som har overskrevet tokens vil dette ikke lengre fungere som før og vi ønsker at alle tar egne valg for hvordan de håndterer dette. Ved kjøring av codemod vil derfor alle instansene med overskrevet designsystem-token bli prefikset med --v2-migration slik at du selv kan gjøre en CTRL + F og oppdatere dem.

// Før
--navds-global-color-red-100: var(--navds-global-color-green-100);
--navds-global-color-blue-100: red;
color: var(--navds-global-color-red-100);
  
// Etter
--v2-migration__navds-global-color-red-100: var(--a-green-100);
--v2-migration__navds-global-color-blue-100: red;
color: var(--a-red-100);

Fonter

NAV har endelig en egen CDN løsning! Etter et supert initiativ fra frontend-platform har vi nå kunnet hoste våre egne font-filer. Ved oppdatering til v2 vil styling levert gjennom @navikt/ds-css gå fra 196kB til 96kB (uten gzip). I praktisk test med nextjs build ble css-bundle 78kB mindre!

For mange vil dette bare "funke", men er noen grep som må gjøres for å sikre at dette fungerer som ønsket for alle.

Oppdatere CSP (content security policy)

Hvis du har satt opp en CSP i løsningen din, kan det hende du må oppdatere den for å tillate lasting fra cdn.nav.no. Kan lese mer om font-src på mdn.

font-src 'self' https://cdn.nav.no

Preload

Vi setter font-display: swap, som tilsier at en fallback-font vil bli lastet når man ikke får tak i ønsket font raskt nok. For å unngå FOUT anbefaler vi at man legger til en link-tag med preload i document-head. Kan lese mer om dette i denne web-dev demoen.

<link
  rel="preload"
  href="https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Vi har også valgt å bruke den oppdaterte versjonen av Source Sans Pro, som nå heter Source Sans 3. I kode importeres den fortsatt som font-family:"Source Sans Pro" slik at den fortsatt er bakoverkompatibel, og ikke vil være noe man trenger å oppdatere selv.

Beta til v1

Designsystemet er endelig ute av Beta! Og med det kommer det noen breaking changes som vi forklarer litt her.

Samversjonering

Med v1-release er alle pakkene samversjonerte. Dette vil si alle pakker har samme versjon, uansett om siste release kun endret på én av pakkene. Bruker du ds-css v1.1.0, bør du også bruke ds-react v1.1.0.

Codemod

Breaking changes er kjedelige, noe vi er veldig klare over. Vi har derfor prøvd oss på en codemod-pakke (@navikt/ds-codemod) som kan gjøre migrering til nyere versjoner litt lettere. Noen breaking changes i komponenter vil du kunne fikse via @navikt/ds-codemod, andre må gjøres selv. Vi anbefaler å sjekke alle komponenter som berører deg fra listen under. Du finner en codemod README på Github, i Designsystemet-repoet.

Breaking changes

Accordion og ReadMore (❌ ikke codemod)

renderContentWhenClosed-prop er fjernet fra begge komponentene. Normal oppførsel er nå alltid å ha innholdet i dom-en. Dette vil la f.eks. Google indeksere innholdet bedre, og det er en bedre uu-praksis fordi react-collapse hadde noen uu-bugs. Vi har ikke laget noen codemods for dette og anbefaler alle å dobbelsjekke at alt funker som forventet når du gjør denne endringen.

Komponentene bruker heller ikke pakken "react-collapse" lengre. Dette vil bare påvirke deg om du manuelt overskriver styling på klassene ReactCollapse--collapse og ReactCollapse--content.

Button (❌ ikke codemod)

Nye props

Bruk av ikoner i knapp er nå endret, så alle som i dag bruker ikoner i <Button /> må oppdatere koden sin. Endingen er gjort for å ha mer kontroll på rendring av ikon og plasseringen i selve knappen.

// Før
<Button>
  Send
  <Ikon />
</Button>

// Etter
<Button icon={<Ikon />} iconPosition="right">
  Send
</Button>

Tabs (✅ codemod)

SpeechBubble heter nå Chat (🟡 delvis codemod, se under)

SpeechBubble og SpeechBubble.Bubble endrer navn til Chat og Chat.Bubble. Codemod tar seg av renamingen.

Pagination (✅ codemod)

Komponenten var tidligere bare tilpasset interne-flater og brøt vår egen konvensjon på sizing da medium bare var 32x32px. Vi har derfor forslkjøvet sizing-skalaen og lagt til en versjon tilpasset eksterne flater.

På grunn av hvordan flyttingen av sizing-skalaen fungerer er det ikke mulig å kjøre codemod flere ganger uten at størrelsen blir nedjustert hver gang. Derfor blir det automatisk satt en prop data-version="v1" som codemoden bruker som filter. Denne kan beholdes eller fjernes etter migrering ettersom hva man ønsker.

Popover/Helptext (❌ ikke codemod)

Vi har migrert til et nytt "floating"-api og bruker ikke "react-popper" eller "popperjs" lenger. For deg som bruker vil dette forhåpentligvis ikke ha noen uventede effekter, men placement auto, auto-start og auto-end er ikke lengre tilgjengelig. Vi fant ingen som eksplisitt hadde satt dette, så vi laget ikke en codemod for dette.

CopyToClipboard (❌ ikke codemod)

iconPlacement-prop er renamet til iconPosition. Har nå samme navn som eks Button og Tabs.Tab. Vi har fokusert på codemods til core-pakken og har ikke laget en codemod til denne

ConfirmationPanel (❌ ikke codemod)

Ref er flyttet fra wrapper (div) til checkbox (input). Vil bare påvirke brukere av ref-prop

StepIndicator blir Stepper (❌ ikke codemod)

Se mer info under Deprecation

Deprecation

I systemet vårt har vi nå flere komponenter som ble laget og lagt til i designsystemet med fokus på hurtighet heller enn langsiktighet. Fordi vi setter et større fokus på stabilitet ønsker vi samtidig å avvikle forvalting av noen komponenter.

Vi kan f.eks. velge å avvikle forvaltning av komponenten når vi erstatter en komponent med en annen, når en komponent ikke har blitt oppdatert på lenge eller når komponenten fremdeles er i beta/er ustabil. Vi håper å gjøre migreringen lettest mulig.

MicroCard

Denne komponenten blir i dag brukt på nav.no sine sidemaler, men med et nyere og mer oppdatert design. Etterhvert håper vi at vi kan gjøre det lettere å ta i bruk kompoentene brukt på sidemalene, men for nå ønsker vi ikke å forvalte utdaterte komponenter som dette i koden vår.

Legger ved lenke til koden hvis man vil kopiere den inn i lokalt prosjekt: Css og React (overridablecomponent kan her erstattes med en <a>-tag eller tilsvarende)

PageHeader

Avvikles av samme grunn som MicroCard

Lenke til koden her: Css og React.

Menu

Avvikles av samme grunn som MicroCard

Lenke til koden her: Css og React.

StepIndicator

Komponenten erstattes med Stepper som finnes i både horisontal og vertikal versjon. På grunn av API-endring i hva activeElement er, har vi valgt å ikke lage en codemod for denne. Endringene du som utvikler og bruker av kompontenten må gjøre er:

Divider

@navikt/ds-react-internal sin <Divider /> komponent heter nå <Dropdown.Menu.Divider />.

Misc

For å forminske "bloating" har vi kvittet oss med flere unødvendige dependencies. Vi håper det vil bli lettere å ta i bruk Designsystemet for de som f.eks bruker skypack eller lignende verktøy. Vi har en del å gå på for å optimalisere pakkene, men er et steg i riktig retning.

Noen av endringene kan påvirke løsningen deres hvis dere ikke selv har lagt til imports, men bruker dem via ds-react pakken. Dette anbefaler vi ikke, men antar yarn/npm eller build-step sier ifra hvis dette er tilfellet.

Endringer i dependencies:

nav-frontend pakker

Vi har valgt å ikke støtte nav-frontend pakkene fremover og håper de fleste vil velge å bruke de nye løsningene våre for fremtidige prosjekt eller refaktoreringer.

For deg som vil oppdatere prosjektet ditt til det nye designsystemet vil det dessverre kunne bli en del arbeid basert på hvor mye av det gamle du har brukt. En god start er å ta en titt på "kom i gang som utvikler"-artikkelen som forklarer hvordan de nye løsningene tas i bruk.

Noen tekniske fordeler med bruk av de nye løsningene for deg som utvikler er

Generelle API-endringer

De fleste komponentene har fått oppdatert API-et sitt. Ved oppdaterting fra gammel til ny komponent kan det være lurt å ta en titt på props-seksjonene da eksemplene under ikke vil dekke alle endringene.

Størrelser

I nav-frontend brukte flere komponenter propnavnene type, kompakt og mini for diverse padding/margin/typo endringer. I de nye pakkene vil størrelser settes konsekvent med size. size="small" er ofte ment for interne flater og vi spesielt for interaktive komponenter anbefaler vi å bruke size="medium".

Varianter

For komponenter med visuelle varianter ble type ofte brukt. Nå vil vi prøve å konsekvent bruke variant for disse tilfellene.

Skjemaelementer

RadioGroup og CheckboxGroup kan nå selv styre checked-state for input-elementene med value og tilhørende onChange-prop. Du trenger da ikke lengre å sette checked true/false på hvert av Checkbox/Radio-elementene med tilhørende logikk.

feil + feilId er endret til error + errorId for alle skjemaelementer. Error id settes også nå på aria-describedby ovenfor aria-errormessage, da sistnevnte ikke har så god skjermleserstøtte.

Alertstripe (✅ Alert)

// Før
<Alertstripe type="info" />
<Alertstripe type="suksess" />
<Alertstripe type="advarsel" />
<Alertstripe type="feil" />
<Alertstripe form="inline" />
<Alertstripe size="2rem" />

// Etter
<Alert variant="info" />
<Alert variant="success" />
<Alert variant="warning" />
<Alert variant="error" />
<Alert inline />
<Alert size="medium" /> / <Alert size="small" />

Bekreftcheckbokspanel (✅ ConfirmationPanel)

inputProps er fjernet, "rest"-props blir nå satt direkte på input-elementet i ConfirmationPanel

// Før
<BekreftCheckboksPanel
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
  label="Ja, jeg samtykker"
  feil="Du må bekrefte..."
>
  ...
</BekreftCheckboksPanel>

// Etter
<ConfirmationPanel
  checked={isChecked}
  onChange={() => setIsChecked(!checked)}
  label="Ja, jeg samtykker"
  error="Du må bekrefte..."
>
  ...
</ConfirmationPanel>

Checkbokspanelgruppe ❌

Vi har valgt å ikke ta med CheckboksPanel og CheckboksPanelGruppe inn i nye løsninger.

Checkboks (✅ Checkbox)

State kan lettere håndteres med hjelp av onChange og value i CheckboxGroup nå.

// Før
<CheckboxGruppe
  legend="Hvor vil du sitte?"
  feil="Feil..."
  feilId="123"
>
  <Checkbox label={"Bakerst"} />
  <Checkbox label={"Midten"} />
  <Checkbox label={"Fremst"} />
</CheckboxGruppe>


// Etter
<CheckboxGroup
  legend="Hvor vil du sitte?"
  onChange={(val: any[]) => handleChange(val)}
  error="Feil..."
  errorId="123"
>
  <Checkbox value="Bakerst">Bakerst</Checkbox>
  <Checkbox value="Midterst">Midterst</Checkbox>
  <Checkbox value="Fremst">Fremst</Checkbox>
</CheckboxGroup>

Chevron ❌

Chevron er nå et ikon i @navikt/ds-icons-pakken. Finner variantene i ikonsøket vårt under "chevron".

Ekspanderbartpanel (🟡 Accordion)

Accordion er ment som erstattning for Ekspanderbartpanel. Bruk og funksjonalitet er litt endret på, så anbefaler å referer til dokumentasjonen når du migrerer.

Vi er klar over at Accordion ikke dekker helt den samme bruken som Ekspanderbartpanel og har det på todo-lista å få sett på det.

// Før
<Ekspanderbartpanel tittel="Info om X">
  ...
</Ekspanderbartpanel>
<Ekspanderbartpanel tittel="Info om Y">
  ...
</Ekspanderbartpanel>


// Etter
<Accordion>
  <Accordion.Item>
    <Accordion.Header>
      Info om X
    </Accordion.Header>
    <Accordion.Content>
      ...
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      Info om Y
    </Accordion.Header>
    <Accordion.Content>
      ...
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Etikett (✅ Tag)

// Før
<Etikett type="suksess">Suksess</Etikett>
<Etikett type="info">Info</Etikett>
<Etikett type="advarsel">Advarsel</Etikett>
<Etikett type="fokus">Fokus</Etikett>
<Etikett type="fokus" mini>Mini</Etikett>

// Etter
<Tag variant="success">Suksess</Tag>
<Tag variant="info">Info</Tag>
<Tag variant="error">Advarsel</Tag>
<Tag variant="warning">Fokus</Tag>
<Tag variant="warning" size="small">Mini</Tag>

Feiloppsummering (✅ ErrorSummary)

// Før
<Feiloppsummering
  tittel="For å gå videre må du rette opp følgende:"
  feil={[
    { skjemaelementId: "1", feilmelding: "Du må oppgi et navn" },
    { skjemaelementId: "2", feilmelding: "Du må oppgi en adresse" },
    { skjemaelementId: "3", feilmelding: "Du må oppgi et telefonnummer" }
  ]}
/>

// Etter
<ErrorSummary
  heading="For å gå videre må du rette opp følgende:"
>
  <ErrorSummary.Item href="#1">
    Du må oppgi et navn
  </ErrorSummary.Item>
  <ErrorSummary.Item href="#2">
    Du må oppgi en adresse
  </ErrorSummary.Item>
  <ErrorSummary.Item href="#3">
    Du må oppgi et telefonnummer
  </ErrorSummary.Item>
</ErrorSummary>

FnrInput ❌

Vi har ikke tatt denne med videre i pakkene våre. Kan bruk vår TextField-komponent og NAVs fnr-valideringspakke (github.com/navikt/fnrvalidator)

Hjelpetekst (✅ HelpText)

// Før
<Hjelpetekst>Innhold</Hjelpetekst>
<Hjelpetekst type="over">Innhold</Hjelpetekst>

// Etter
<HelpText title="title for ikon og hover">
  Innhold
</HelpText>
<HelpText title="title for ikon og hover" placement="top">
  Innhold
</HelpText>

Ikonknapper ❌

Vi har ikke lengre noen knapper med ikon-preset. Kan replikeres med hjelp av ikonpakken vår @navikt/ds-icons.

// Før
<Tilbakeknapp />
<Nesteknapp />
<Søkeknapp />
<Menyknapp />
<Hamburgerknapp />
<Systemerknapp />
<Xknapp />

// Etter
<Button variant="tertiary" icon={<Back />} >Tilbake</Button>
<Button variant="tertiary" icon={<Next />} iconPosition="right" >Neste</Button>
<Button variant="secondary" icon={<Search />} >Søk</Button>
<Button variant="secondary" icon={<Expand />} iconPosition="right">Meny</Button>
<Button variant="tertiary" icon={<Hamburger />} />
<Button variant="tertiary" icon={<SystemFilled />} />
<Button variant="tertiary" icon={<Close />} />

Input (✅ TextField)

Vi har ikke lengre en egen bredde-prop. Bruke heller native input-prop size eller styling.

// Før
<Input label="Har du noen tilbakemeldinger?" />
<Input label="Har du noen tilbakemeldinger?" mini/>

// Etter
<TextField label="Har du noen tilbakemeldinger?" />
<TextField label="Har du noen tilbakemeldinger?" size="small"/>

Knapp (✅ Button)

// Før
<Knapp>Normal</Knapp>
<Hovedknapp>Hoved</Hovedknapp>
<Fareknapp>Fare</Fareknapp>
<Flatknapp>Flat</Flatknapp>
<Knapp spinner>Spinner</Knapp>
<Knapp mini>Mini</Knapp>
<Knapp><Cog /><span>Normal</span></Knapp>
<Knapp><span>Normal</span><Cog /></Knapp>

// Etter
<Button variant="primary">Hoved</Button>
<Button variant="secondary">Normal</Button>
<Button variant="danger">Fare</Button>
<Button variant="tertiary">Flat</Button>
<Button loading>Spinner</Button>
<Button size="small">Mini</Button>
<Button icon={<Cog />}>Ikonknapp</Button>
<Button icon={<Cog />} iconPosition="right">Ikonknapp</Button>

Lenke (✅ Link)

// Før
Dette er en <Lenke href="#">tekstlenke</Lenke> i en setning.

// Etter
Dette er en <Link href="#">tekstlenke</Link> i en setning.

Lenkepanel (✅ LinkPanel)

// Før
<Lenkepanel href="#" border>
  Lenketekst
</Lenkepanel>

// Etter
<LinkPanel href="#" border>
  <LinkPanel.Title>
    Lenketekst
  </LinkPanel.Title>
</LinkPanel>

<LinkPanel href="#" border>
  <LinkPanel.Title>
    Arbeidssøker eller permittert
  </LinkPanel.Title>
  <LinkPanel.Description>
    Om jobb, registrering, CV, dagpenger og feriepenger av
    dagpenger
  </LinkPanel.Description>
</LinkPanel>

Lesmerpanel ❌

Vi har ikke tatt med denne komponenten inn i de nye pakkene, kan se om alternativene under fungerer som erstatning.

Lukknapp ❌

Se over på "Knapp".

Modal (✅ Modal)

Har nå en egen komponent Modal.Content som legger på en default-padding.

// Før
<>
  <Knapp onClick={() => openModal()}>Klikk for å åpne modal</Knapp>
  <Modal
      isOpen={this.state.modalIsOpen}
      onRequestClose={() => closeModal()}
      closeButton={true}
      contentLabel="Min modalrute"
  >
      <div style={{padding:'2rem 2.5rem'}}>Innhold her</div>
  </Modal>
</>

// Etter
<>
  <Button onClick={() => setOpen(true)}>Åpne modal</Button>
  <Modal
    open={openState}
    aria-label="Modal demo"
    onClose={() => setOpenState((x) => !x)}
  >
    <Modal.Content>
      ...
    </Modal.Content>
  </Modal>
</>

Panel (✅ Panel)

// Før
<Panel border>Et helt vanlig panel med innhold.</Panel>

// Etter
<Panel border>Et helt vanlig panel med innhold.</Panel>

Popover (✅ Popover)

Har nå en egen komponent Popover.Content som legger på en default-padding.

// Før
<>
  <Knapp onClick={(e) => this.togglePopover(e.currentTarget)}>Åpne popover</Knapp>
  <Popover
      ankerEl={this.state.anker}
      onRequestClose={() => this.setState({anker: undefined})}
  >
      <p style={{padding:'1rem'}}>
          Dette er en popover.
      </p>
  </Popover>
</>

// Etter
<>
  <Button
    ref={buttonRef}
    onClick={() => setOpenState(true)}
  >
    Åpne popover
  </Button>
  <Popover
    open={openState}
    onClose={() => setOpenState(false)}
    anchorEl={buttonRef.current}
  >
    <Popover.Content>Innhold her!</Popover.Content>
  </Popover>
</>

Radio (✅ Radio)

// Før
<RadioGruppe legend="Hvor vil du sitte?" feil="feilmelding">
  <Radio label={"Bakerst"} name="sitteplass" />
  <Radio label={"Midten"} name="sitteplass" />
  <Radio label={"Fremst"} name="sitteplass" />
</RadioGruppe>

// Etter
<RadioGroup
  legend="Velg din aldersgruppe."
  size="medium"
  onChange={(val: any) => handleChange(val)}
  error="feilmelding"
>
  <Radio value="10">10-20 år</Radio>
  <Radio value="20">21-45 år</Radio>
  <Radio value="40">46-80 år</Radio>
</RadioGroup>

RadioPanelGruppe ❌

Vi har valgt å ikke ta med RadioPanelGruppe inn i nye løsninger.

Select (✅ Select)

Se dokumentasjon for API-endringer.

Skjemagruppe (🟡 Fieldset)

Vi har en egen generell Fieldset-komponent i systemet, men har valgt å ikke dokumentere denne da den er mest ment for internt bruk.

Snakkeboble (✅ Chat)

// Før
<Snakkeboble topp="14.07.2017 kl. 10:12">
  Hei! Jeg lurer på en ting...
</Snakkeboble>

// Etter
<div>
  <Chat
    avatar="EVA"
    name="EVA"
    timestamp="01.01.21 14:00"
  >
    <Chat.Bubble>Hei! Mitt navn er Eva.</Chat.Bubble>
    <Chat.Bubble>Hva kan jeg hjelpe deg med?</Chat.Bubble>
  </Chat>
  <Chat
    avatar="NO"
    name="Ola Normann"
    timestamp="01.01.21 14:00"
    position="right"
  >
    <Chat.Bubble>Hei Eva.</Chat.Bubble>
    <Chat.Bubble>
      Hvor sjekker jeg statusen på foreldrepengersøknaden
      min?
    </Chat.Bubble>
  </Chat>
</div>

Spinner (✅ Loader)

// Før
<NavFrontendSpinner type="L"/>
<NavFrontendSpinner transparent/>

// Etter
<Loader
  variant="neutral"
  size="large"
  title="venter..."
  transparent
/>

Stegindikator (✅ Stepper)

// Før
<Stegindikator
  steg={[
    { label: "Start søknad" },
    { label: "Saksopplysninger", aktiv: true },
    { label: "Vedlegg" },
    { label: "Oppsummering" },
  ]}
  onChange={() => {}}
/>

// Etter
const [activeStep, setActiveStep] = useState(2)

return (
  <>
    <h2 id="stepper-heading">Søknadssteg</h2>
    <Stepper
      aria-labelledby="stepper-heading"
      activeStep={activeStep}
      onStepChange={(x) => setActiveStep(x)}
      orientation="horizontal"
    >
      <Stepper.Step href="#">Start søknad</Stepper.Step>
      <Stepper.Step href="#">Saksopplysninger</Stepper.Step>
      <Stepper.Step href="#">Vedlegg</Stepper.Step>
      <Stepper.Step href="#">Oppsummering</Stepper.Step>
    </Stepper>
  </>
)

Tabell (✅ Table)

Table er nå en egen react-komponent. Sjekk ut dokumentasjonen for å se hvordan du kan erstatte din tabell med en komponenten.

Tabs (✅ Tabs)

Tabs har nå fått tabpanel integrert i komponenten.

// Før
<Tabs
    tabs={[
        {"label": "Første"},
        {"label": "Andre"},
        {"label": "Tredje"}
    ]}
    onChange={() => {}}
/>
<Panel border style={{borderTop:0, borderTopLeftRadius: 0, borderTopRightRadius: 0}}>
    Innhold her.
</Panel>

// Etter
<Tabs
  defaultValue="logg"
  size="medium"
  iconPosition="left"
>
  <Tabs.List>
    <Tabs.Tab
      value="logg"
      label="Logg"
      icon={<Historic title="historielogg" />}
    />
    <Tabs.Tab
      value="inbox"
      label="Inbox"
      icon={<Email title="inbox" />}
    />
    <Tabs.Tab
      value="sendt"
      label="Sendt"
      icon={<Send title="sendt" />}
    />
  </Tabs.List>
  <Tabs.Panel
    value="logg"
    className="h-24 w-full bg-gray-50 p-8"
  >
    TabPanel for Logg-tab
  </Tabs.Panel>
  <Tabs.Panel
    value="inbox"
    className="h-24 w-full bg-gray-50 p-8"
  >
    TabPanel for Inbox-tab
  </Tabs.Panel>
  <Tabs.Panel
    value="sendt"
    className="h-24  w-full bg-gray-50 p-8"
  >
    TabPanel for Sendt-tab
  </Tabs.Panel>
</Tabs>

Tekstomrade ❌

Vi har ikke denne komponenten med inn i de nye pakkene. Du kan finne parser-pakken ble brukt for denne løsningen på github.

Textarea (✅ Textarea)

// Før
<TextareaControlled label="Textarea-label" />

// Etter
<Textarea
  label="Har du noen tilbakemeldinger?"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

ToggleGruppe/ToggleKnapp (🟡 ToggleGroup)

// Før
<ToggleGruppe
  defaultToggles={[
    { children: "Mandag", pressed: true },
    { children: "Tirsdag" },
    { children: "Onsdag" },
  ]}
/>

// Etter
<ToggleGroup
  onChange={(x) => setValue(x)}
  value={value}
>
  <ToggleGroup.Item value="mandag">Mandag</ToggleGroup.Item>
  <ToggleGroup.Item value="tirsdagst">Tirsdag</ToggleGroup.Item>
  <ToggleGroup.Item value="onsdag">Onsdag</ToggleGroup.Item>
</ToggleGroup>

Veileder ❌

Vi har ikke denne komponenten med i de ny pakkene. Som erstatter tenker vi GuidePanel nevnt under.

Veilederpanel (✅ GuidePanel)

// Før
<Veilederpanel svg={<Illustrasjon />} >
Saksbehandlingstiden varierer fra kommune til kommune.
  Hvis det går mer enn X måneder siden du søkte, skal du få
  brev om at saksbehandlingstiden er forlenget.
</Veilederpanel>
<Veilederpanel svg={<Illustrasjon />} type="plakat">
Saksbehandlingstiden varierer fra kommune til kommune.
  Hvis det går mer enn X måneder siden du søkte, skal du få
  brev om at saksbehandlingstiden er forlenget.
</Veilederpanel>

// Etter
<GuidePanel>
  Saksbehandlingstiden varierer fra kommune til kommune.
  Hvis det går mer enn X måneder siden du søkte, skal du få
  brev om at saksbehandlingstiden er forlenget.
</GuidePanel>
<GuidePanel poster>
  Saksbehandlingstiden varierer fra kommune til kommune.
  Hvis det går mer enn X måneder siden du søkte, skal du få
  brev om at saksbehandlingstiden er forlenget.
</GuidePanel>

nav-frontend-typografi til V1

Ikke alle typografikomponentene i @navikt/ds-react er én-til-én med de i nav-frontend-typografi, så så vi foreslår at du spør en designer om du er usikker på hvilken komponent du skal velge. Du kan også spørre en av oss i Designsystemet (#designsystemet i Slack).

Tekststørrelse og heading-nivå

Overskrifters tekststørrelse er nå uavhengig av heading-nivået. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din nettside, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men <Sidetittel> opplevdes som for stor.

En direkte oversettelse fra gamle til nye komponenter, hvor man bevarer størrelsene, ser sånn ut:

// Før
<Sidetittel>
<Innholdstittel>
<Systemtittel>
<Undertittel>

// Etter
<Heading size="xlarge">
<Heading size="large">
<Heading size="medium">
<Heading size="small">

// Sett level uavhengig av size

<Heading size="xlarge" level="3">
<Heading size="large" level="1">

Brødtekst

De nye komponentene for brødtekst heter <BodyLong> og <BodyShort>. Altså blir <Normaltekst> i stedet til <BodyLong>/<BodyShort>.

<BodyLong> er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I situasjoner der teksten med fordel kan være mer kompakt skal <BodyShort> brukes, for den har en lavere linjehøyde.

Ny brødtekst-størrelse er 18px. Om du bygger/vedlikeholder grensesnitt med kompakt design (les; interne flater) og ønsker å fortsette å bruke 16px brødtekst, så kan du bruke <BodyLong size="small"> og <BodyShort size="small">.

Andre typografikomponenter

// Før
<Ingress>
<Element>
<Undertekst>
<Feilmelding>
<UndertekstBold> <- Deprecated

// Etter
<Ingress>
<Label>
<Detail>
<ErrorMessage>