Februar 2022

Det har skjedd en hel del i Jøkul i februar! Noen høydepunkter:

• Figma-biblioteket har fått en stor overhaling med:
  • ny onboarding
  • interaktive komponenter
  • én komponent per side
  • alfabetisk sortering av komponenter i biblioteket
  • labels til skjemafelter er nå bare varianter, ikke egne komponenter
• Nytt design på skjemakomponenter
• Ny majorversjon av core: oppdaterte breakpoints, og dropping av støtte for Internet Explorer
• Ny komponent: Brødsmulesti
• Card har blitt helt ny
• MessageBox har fått en forceCompact-prop
• Formateringsfunksjoner og maskering av inputfelter
• Unicode-tegnet ZERO_WIDTH_SPACE har blitt lagt til i constants-util. Bruk det til ordbryting!
• Bloggen har fått RSS
• I toppmenyen her i portalen har sidetitler blitt til lenker (de var knapper), som betyr at du lettere kan åpne i nye faner
• Select har fått støtte for custom søk

Figma

Etter en storopprydding har Figma-biblioteket blitt en del mer oversiktlig. Hver komponent har sin egen page, sortert alfabetisk. Det gjør det raskere å finne fram til oversikten over variants, siden du ikke trenger å gjette på hvilken kategori en Link hører til. Den er på Link-siden, ferdig.

Forresten, om du savner labels til skjemaer så finner en variant av skjemafeltene som har den.

Klikk for å se større

Det har også kommet en onboarding med de viktigste tingene du trenger å vite for å bruke og endre Figma-biblioteket. Sjekk Introduction om du ikke har lest den allerede.

Nytt design på skjemakomponenter

Skjemafelter med valideringsfeil har fått et nytt design, hvor en viktig del er at vi har en tydelig visuell indikator som ikke er en farge. Valideringsfeil vises nå sammen med en varseltrekant, og selve skjemafeltet fylles med feilfargen vår.

Klikk for å se større

Du kan teste et skjema med det nye designet her i portalen, eller se komponentdokumentasjonen til de forskjellige skjemakomponentene våre.

Ny majorversjon av core

Du finner de tekniske detaljene i migrasjonsguiden på GitHub.

Oppdaterte breakpoints

Vi ble enige om nye verdier for breakpoints i Jøkul i fjor høst. I februar ble de oppdatert i kode! Du finner de nye breakpointsene på siden om responsivt design.

Droppet støtte for IE11

Som varslet i november har Jøkul fjernet gammel kode som utelukkende var for å støtte Internet Explorer 11. Ingen av Fremtind sine løsninger støtter den nettleseren lenger, så da kunne vi ta en vårrengjøring i koden.

Breadcrumb

Basert på et førsteutkast fra BM-teamet og justert litt underveis, Breadcrumb er nå tilgjengelig i Jøkul.

Card

En flott gruppe Fremtindere har jobbet lenge og grundig med Card, og i februar ble det lansert helt nye kort. Det er delt inn i tre typer:

1. Navikasjonskort
2. Oppgavekort
3. Infokort

Ta en titt på de ulike variantene og bruken av dem i Figma eller i komponentdokumentasjonen.

MessageBox

MessageBox har hatt en kompaktvariant i Figma lenge, men den har manglet i kode. Nå er den her!

Formateringsfunksjoner og maskering

En ny pakke har blitt lansert med en samling formateringsfunksjoner som du kan bruke når du skal vise avstander, valuta, telefon-, kort-, fødsels- eller kontonummer.

Flere av disse formateringsfunksjonene gjør seg også fint til maskering av skjemafelter. Om du bruker versjon 7 av react-hook-form er det noen ferdiglagede støttefunksjoner i biblioteket som gjør det enkelt å ta i bruk.

Klikk for å se større

Portalen

Om du er en av de som aldri helt ga slipp på RSS, eller en av de som nylig (gjen)oppdaget denne fantasiske teknologien – denne er for deg:

Jøkul-bloggen har endelig fått en RSS-feed!

Du skal kunne peke RSS-leseren din på jokul.fremtind.no, men hvis du trenger en direktelenke til feeden så er den jokul.fremtind.no/blog/rss.xml.

via GIPHY

Custom søk i Select

Select har fått utvided sin searchable prop til å kunne ta en funksjon som filtrer en string eller et ValuePair mot en string. Dette kan brukes til å for eksempel søke etter organisasjonsnummer i en select som egentlig bare vise navn på bedrifter.

Bugfikser

• Fjernet unødvendige marginer i ExpandButton (#2737)
• Fikset visning av årstall i utvidet datovelger (#2707)
• Unødvendig alt-tekst leses ikke lenger opp for ikoner (#2679)
• TextArea har fått flere bugfikser (#2634, #2717, #2721, #2751, #2752)
• Select kan styres med value-prop (#2589)
• Klikk på tekstfelt i søkbar Select lukker ikke menyen lenger (#2400)

Takk

Takk til alle bidragsytere, både på GitHub og i Figma!

• BjorneOmaFremtind
• hjellek
• JoMs
• kennidenni
• Murstam
• SercanSercan