Tabell + liste: Oppdatering

[Steinop]

Oppdatere design og lage basis Figmakomponent for tabellcelle + labels for Dark og Light mode - Normal og Kompakt.

Knyttes opp mot issue #913 med tanke på mobile flater.

[Steinop]

Etter flere iterasjoner og innspill vedr liste og tabell-komponent

Liste/tabell-komponentene er nå justert slik at tekst går helt ut til høyre/venstre kant. På den måten bruker vi ikke opp real estate på mobile flater.

Labels har fått samme fontstørrelse som innhold slik at vi er minimalistiske i forhold til antall komponenter. Prøver også å lande på én komponentstørrelse for normal/desktop og én for compact - hvis det lar seg gjøre. Uansett er både normal og kompakt er bygget opp slik er det lagt inn en 8px spacer over tekstfeltet i komponenten. Det betyr at man i prinsippet kan justere komponenten i høyden (ihht spacingskalaen) hvis det er behov for mer eller mindre luft i underkant av teksten.

Etter forrige Designsystemforum var det stemning for å høydejustere teksten i liste/tabellcellen tilsvarende SDG (til en viss grad) har gjort i årsrapporten. Har testet ut ulike høyder på cellene. Foretrekker selv versjonene med mest space (Alternativ C) fordi konseptet er tydeligst der.

Hvordan synes dere dette fungerer i eksemplene fra BM og Flyt @CamillaDahlstroem og @Murstam ?

Se Figma: https://www.figma.com/file/TkbB9ANfejDSjB2u4u1OEuqM/J%C3%B8kul-komponenter-byggesone?node-id=14512%3A0

Videre er planen å bruke samme komponent i både lister og tabeller. I tabeller, som trenger å kunne sammenlignes og vurderes i både X og Y -aksen, bruker vi horisontal space mellom cellene for å tydeligere markere den vertikale aksen. Ser for meg at vi bruker 16 eller 8 pixel space. Tester det nærmere når vi har avklart listekomponenten.

[Steinop]

Liste/tabellkomponent er ferdig oppdatert i Figma biblioteket og klar til utvikling: Normal: https://www.figma.com/file/Wh8Gfnesn25shH31sKyIaT/J%C3%B8kul-bibliotek?node-id=4296%3A0 Compact: https://www.figma.com/file/Wh8Gfnesn25shH31sKyIaT/J%C3%B8kul-bibliotek?node-id=4302%3A92

Komponentene består av følgende normal- og kompaktversjoner i både light og dark mode:

1. Labelcelle (bold tekst)
2. Innholdscelle - "normalstate"
3. Innholdscelle - hoverstate. Disse er laget i venstrejustert versjon for tekstinput og alternativ høyrejustert siffer-versjon for tall-input

Komponentene kan brukes med tekst over flere linjer men pass på å ivareta samme spacing mellom tekst og bunnstrek som i default komponent.

Focus state: I listeform legges en blå ramme rundt en gruppe horisontalt stablede innholdsceller som vist her: https://www.figma.com/file/Wh8Gfnesn25shH31sKyIaT/J%C3%B8kul-bibliotek?node-id=4302%3A3982

Mobil liste: For lister er det flere muligheter mht tilpasning av komponenten avhengig av hvor mye plass man har horisontalt. I de fleste tilfeller vil det være naturlig å bryte opp labels og innholdsceller som vist i eksemplene her: https://www.figma.com/file/Wh8Gfnesn25shH31sKyIaT/J%C3%B8kul-bibliotek?node-id=4302%3A4603 https://www.figma.com/file/Wh8Gfnesn25shH31sKyIaT/J%C3%B8kul-bibliotek?node-id=4317%3A8389

I eksempelet er komponenten benyttet med en viss overlapp. Prinsippet er basert på linjehøyden til tekst/label (Body for Normal og Small for Kompakt) med 24 px space for Normal og 16 px space for Kompakt.

Tabeller: Den samme komponenten benyttes som utgangspunkt når man skal bygge tabeller. Pr nå er dette et lite brukt pattern i Fremtinds løsninger og må trolig utforskes mer i et reelt case/prosjekt. For å understreke kolonner og vertikal leseretning (i tillegg til horisontal) legges det inn 16 px space mellom kolonnene for Normal/Desktop komponenter og 8 px space for Kompakt.

Tabeller består normalt av en X og en Y-akse slik at rader ikke kan brytes opp og stables vertikalt på mindre flater slik vi kan på mobil. Har visualisert en retning for hvordan dette kan løses under komponentpagen for "Tabellister" i Jøkul Bibliotek.

Animert prototyping: Komponenten er forberedt for animert prototyping slik at man kan animere mellom states. Når du skal animere states er det viktig at navngivningen på normal state og hoverstate er lik mellom framene. Dvs at hvis komponenten heter "Tabelliste_Compact" og hoverstate i neste frame er navngitt "Tabelliste_Hover_Compact" må begge endres til samme navn. F. eks "a"

(På sikt bør vi lage tabelltemplates og gode eksempler med autolayout som brukerne kan benytte som utgangspunkt.)

[Steinop]

@frisol97 eller @joms: Hvem av dere føler dere kallet til å ta dette ærefulle oppdraget over til oh glorious code? (Trenger en jeg kan assigne oppdraget til …)

[Steinop]

Det ble oppdaget en feil på mobileksempelet i biblioteket som følge av at teksten nylig ble sentrert i tabellcellen. Komponenten var også lite stablevennlig for mobil bruk. Har derfor laget en egen liste/egenskapskomponent for tilfeller der rader og kolonner er lite hensiktsmessig. Denne stables vertikalt og inneholder felt for tittel og verdi. 

Komponenten eksisterer kun som kompakt-versjon fordi den er ment for små skjermer.

Det er videre laget templates med autolayout i light og dark versjon. Disse er foreløpig lokalisert under komponenten i biblioteket til vi finner et sted å samle "organismene"

[wkillerud]

Vi tar med innsikten fra denne inn i prosessen med tabelldesign og utvikling nå i høst. Refererte til issuet i #2333.