Hopp til innhold

Mars 2022

William Killerud

2022.03.25

Her er høydepunktene fra Jøkul i mars:

  • Ny komponent: Footer
  • Knapper har varianter med pil på venstre eller høyre side
  • Ekspanderbar tabellrad har fått et forbedret design
  • Tabelloverskrifter kan alignes mot høyre
  • Overskrifter i SummaryTable har blitt mer fleksible
  • Formatering av telefonnummer kan inkludere landkode
  • DatePicker annonserer for skjermlesere når man går til et nytt år
  • Sercan blogget om Mixpanel og kompleksitet i designsystemer
  • En del husarbeid for utviklere:
    • Tabellkomponenter kan ta i mot en React ref
    • Forbedret ytelse i flere hooks
    • useAnimatedHeight kan brukes helt uten egen CSS
    • Core eksporterer nå easinger og timinger som TypeScript
    • @include motion; kan brukes uten parametere
    • Feedback-komponenten med smileys får React keys

Ellers skjer det mye jobbing i kjerneteamet med forbedringer "under panseret" både i Figma og i Sass-kode. Der gjenstår det fremdeles en del, men watch this space 👀

Footeren fra Fremtind fungerer som avsender av de respektive nettsidene og applikasjonene. Footer brukes når det kreves tilleggsinformasjon om opphavsrett, kontaktinformasjon, lenker til andre sider eller lignende.

Knapper med piler

Et vanlig mønster er å bruke knapper med piler til navigasjon i skjemaflyter med flere steg. De ulike Buttons har fått nye varianter med pil på høyre og venstre side. Om du for eksempel har knapper med teksene Forrige og Neste kan du vurdere å legge på disse pilene. Stakseth og kennidenni ordnet denne varianten i Figma og i kode.

Forbedringer i Table

JoMs og Murstam har jobbet med et forbedret design for ekspanderbare tabellrader på mobil. Det er ikke lenger noen border før det ekspanderte innholdet, og ekspanderknappen har blitt plassert til høyre. Målet er at det ekspanderte innholdet skal kunne virke mer som en del av den ekspanderte raden, i stedet for en egen rad.

JoMs fikset en align-prop på TableHeader, så overskriften kan justeres mot høyre hvis kolonnen er det. Han ordnet også at tabellkomponenter kan motta en ref hvis du trenger det.

Formatering av telefonnummer med landkode

JoMs slår til igjen. Du kan nå legge til en landkode når du formaterer telefonnummere.

const formatted = formatTelefonnummer("81549300", {
    countryCode: "47",
});
// "+47 815 49 300"

DatePicker annonserer nytt år

Ved årsskiftet ble det lagt merke til at DatePicker ikke annonserte for skjermlesere når man hadde flyttet seg fra 2022 til 2021. Man kunne anta at man hadde flyttet seg til desember 2021, men nå slipper man å anta. DatePicker er endret så skjermlesere annonserer årstallet én gang når man bytter kalenderår.

SummaryTable med skjult overskrift

Vi fortsetter med skjermlesere. Mikail har ordnet så SummaryTable sine overskrifter kan være ReactNodes, ikke bare string. Med andre ord kan man sende inn for eksempel en <span className="jkl-sr-only"> dersom man trenger å skjule overskrifter visuelt, men beholde de for skjermlesere.

Husarbeid for utviklere

Forbedringer i hooks

Flere hooks har fått forbedret ytelse. useScreen og useBrowserPreferences bruker nå andre lyttere enn tidligere for å beregne typen skjerm (liten, medium, stor, XL) og brukerens ønsker for fargetema og redusert bevegelse. Det burde gi betydelig færre re-renders ute i apper ved endring av skjermstørrelse.

Hvis du bruker useAnimatedHeight kan du nå bruke den helt uten egen CSS for å styre synlighet. Hooken ordner alt selv.

Diverse bugfikser

HenrikHermansen fikset en bug i Feedback hvor smileys ikke fikk en React key. Han fikset også så typedefinisjoner blir eksportert fra @fremtind/jkl-image-react på riktig måte.

BjorneOmaFremtind og wkillerud avdekket og fikset enda flere bugs i TextArea i starten av mars.

Checkboxer som har en egen ID fikk en regresjon som gjorde at de ikke fungerte, og ble fikset igjen.

JoMs forbedret koden for å parse tall, som har blitt litt strengere med hva den godtar.

Takk

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

  • HenrikHermansen
  • BjorneOmaFremtind
  • kennidenni
  • Stakseth
  • JoMs
  • Murstam
  • SercanSercan
  • Mikaila94

En stor takk også til alle som er med på designsystemforum!