Jøkul 6.0

6.0 er ute i beta, og vi ønsker gjerne tilbakmeldinger på endringene. Følg med på endringene i endringsloggen. Ta den i bruk ved å bruke pnpm add @fremtind/jokul@next.

Mål med denne versjonen

Etter å ha lagt grunnsteinene for distributørtilpasning i vår bestemte vi oss for at versjon 6 av Jøkul skulle handle om opprydning og standardisering.

Dette har vi snakket om å gjøre lenge, men det har blitt nedprioritert fordi vi har slitt med å velge riktig omfang for oppgaven. Vi valgte til slutt et utvalg skjema-relaterte komponenter der vi ser vi har mest å vinne på å refaktorere dem.

Vi satte oss et mål om at skjemakomponentene våre skulle opp på et akseptabelt nivå, og dette skulle vi måle med tre ønskede resultater: færre linjer kode, mer dokumentasjon og at komponentene våre er nærmere internett-standarder.

Combobox

Combobox er fjernet. Bruk Select med multiple-proppen for å oppnå samme resultat.

Select og DateInput

Disse komponentene er gjort om til å legge seg nærmere native oppførsel og utseende. De skal derfor fungere mer forutsigbart og bedre med tredjepartsverktøy som for eksempel React Hook Form.

Select

• Brukeroppelvelse
  • Nedtrekkslisten tar nå hele skjermen på mobil.
  • label og description vises nå i modalen på mobil.
• API
  • Endret navn på prop: defaultPrompt heter nå placeholder
  • Endret type: searchable er nå boolsk
  • Ny prop: multiple gjør det mulig for en bruker å velge flere enn ett valg i nedtrekkslisten
  • Ny prop: filterFunction gjør det mulig å endre oppførselen i filteret når du viser søkefeltet
  • Ny prop: onSearch gjør det mulig å utføre handlinger når input i søkefeltet endrer seg
  • Ny prop: ValuePair tar nå imot media. Dette er bare støttet i Select.

DateInput

• Brukeropplevelse
  • En bruker kan nå endre hvert segment i en dato med tastaturet.
  • Kalenderen tar nå hele skjermen på mobil.
  • Label og description vises nå i modalen på mobil.
• API
  • Nytt navn på komponenten: DatePicker heter nå DateInput.
  • Endret type: value tar nå inn streng eller tall.
  • Endret navn på prop: disableBeforeDate heter nå min, og tar inn en streng eller tall.
  • Endret navn på prop: disableAfterDate heter nå max, og tar inn en streng eller tall.
  • Fjernet prop: defaultShow
  • Fjernet prop: formatInput
  • Fjernet prop: placeholder
  • Ny hjelpefunksjon: toValidInputValue konverterer en streng til gyldig input-verdi.
  • Ny hjelpefunksjon: toNorwegianDateFormat formatterer datoer til norsk format.
  • Fjernede hjelpefunksjoner: WRONG_FORMAT, OUTSIDE_LOWER_BOUND, OUTSIDE_UPPER_BOUND

Flex

Flex styres ikke lenger av klasser, men av variabler satt inline. Dette bør gjøre det enklere å lese DOM-en.

• API
  • Endret prop: gap settes ikke lenger som standard.
  • Endret prop: wrap settes ikke lenger som standard.
  • Endret type: wrap er nå boolsk i tillegg til å ta inn strengverdier tilsvarende flexbox-API-et.
  • Fjernede props: layout, textAlign, center.