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 👀
Footer
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!