Desktop/Mobile/Compact i Jøkul

[onordbo]

Det verserer er en del usikkerhet og misforståelser rundt hensikten med compact varianter i biblioteket, og vi burde syntetisere en felles forståelse av hvordan vi ønsker å forholde oss til det fremover, så det blir litt enklere å bruke. Hvordan skal vi tilnærme oss denne problemstillingen?

[onordbo]

Slik jeg ser det i dag så har vi en relativt logisk med to grep vi kan ta for å løse dagens utfordring:

1. Bygge om alle komponentene til å ha en "Mobile" variant, og gå helt vekk fra at "Compact" har noe som helst med mobil og responsivitet å gjøre
2. Lage en egen innstilling for "Compact" for de komponentene som trenger det, slik at informasjonstette systemer (Flyt, etc) også kan dra best mulig nytt av designsystemet

Thoughts?

[onordbo]

Tar gjerne litt innspill fra dere som jobber på Flyt og SAM her, og hvordan vi kan sørge for at Jøkul funker best mulig der også. (cc @AudunBerdal, @ivnai og @karimarkhus)

[Murstam]

Enig i det @onordbo. Et par spørsmål:

1. Noen compact-komponenter vil alle løsninger kunne ha behov for (knapper) og noen er det bare Flyt/Sam har behov for. Bruker vi samme typografiskala slik at vi kan lage én compactversjon?
2. Trenger vi compactversjon av mobilvariant? Trenger man f. eks en liten knapp på mobil også?

[onordbo]

Kanskje vi må bygge en egen typografiskala for compact-varianter, slik at vi får et tydelig skille mellom hva som gjelder hvor? Litt av problemet med dagens løsning var vel at noen ble forvirra over at skalaene ble blandet og skapte surr i nivåene?

[onordbo]

Behov: Vi behøver en etablert forståelse for hva compact har innebært tidligere og hva det skal innebære fremover.

(og compact burde være enhet-agnostisk?) cc @gbrownlee

• Kjerneteamet lager prinsipper og en beskrivelse for hvordan grunnkonseptet til Compact skal fungere

[onordbo]

Vi tok en gjennomgang av kjerneteamets første "take" på grunnkonseptet for Desktop/Mobile + Compact. Presentasjonen finner du her: https://www.figma.com/proto/H4FQDul32MmHRoMhEEW2zv/D%2FM-%2B-Compact?page-id=0%3A1&node-id=2%3A182&viewport=332%2C48%2C0.22&scaling=contain&hotspot-hints=0&hide-ui=1

cc @ivnai @karimarkhus

[onordbo]

https://www.figma.com/file/H4FQDul32MmHRoMhEEW2zv/D%2FM-%2B-Compact?node-id=0%3A1

[kristineSorensen]

For seOpp syns jeg det fungerer godt å bruke vanlige komponenter på mobil, men problemet er at det i figma ikke er mobil fontstørrelse i komponentene, men det er mobil fontstørrelse i compact komponentene. Her kan det lett oppstå forvirring på at compact = mobil. Det blir rart når man lager mobilskisser i Figma og bruer vanlige komponenter fordi de kun har desktop fontstørrelse i seg. Da må man evt gå inn og endre fontstørrelsene i komponenten og det ser jeg for meg ikke er helt ønskelig.

ellers så tenker jeg det er en lur ide å skrive litt om at hva compact er og hvordan det er tenkt å brukes i portalen

[piofinn]

Forslag fra min side:

1. Sørg for at konseptene mobile/desktop og compact/vanlig er frakoblet i Figma og kode
   a. La skriftstørrelse være avhengig av skjermstørrelse (med varianter i Figma)
   b. La kompakt være unntaksvise varianter av komponentene som får dem til å fungere bedre i informasjonstunge løsninger
2. La de informasjonstunge løsningene (SAM og Flyt?) Skisse på hvordan de vil at de kompakte variantene av komponenter skal være, evt. lage nye komponenter der det er behov.

[ivnai]

I Flyt så bruker vi desktop typografi og compact komponenter og i tillegg har vi laget flere "kun Flyt komponenter".
Kanskje mulig at minst en del av de Flyt-spesifikke komponenter og SAM-spesifikke (+ andre informasjonstette...) som har det samme funksjon blir til felles jøkul/kompakt komponent. Så skaper vi litt mer konsistens.

[onordbo]

Kjerneteamet workshoppet med Flyt og SAM for å avdekke behov for justeringer i Compact-variantene i Figma. Videre plan er å prøve ut et par endringer på noen få komponenter og samskape en systemtankegang for hva gjøre en komponent "compact"

[onordbo]

📣 Feedback wanted

Jeg ser at testbibliotketet har blitt brukt litt siden vi lanserte det. Hvordan har det gått? Funker det? Burde vi gjøre noen prinsipielle endringer?

cc @AudunBerdal @ivnai @karimarkhus

[ivnai]

Heio @onordbo. Funker veldig fint så far, bruker noe på de nye Flyt skissene, visuell utforskning for now. Vi er ikke veldig glade i den tunge sorte knappen i tabell, og tabellinjer er granitt (på desktop er de Svaberg). Knapp i tabella er en annen diskusjon så de interesserte må prate først. Testbib inneholder input felt; tror vi skal ha bruk for selekt også i samme dimensjon. Ser ut som tags kunne fungere bedre med desktop/small type på for oss.

[MonaHolm72]

compact komponentene oppleves veldige kompakte. noe mer luft rundt tekst? sjekk eksempel i copy branch