Implement tab design for options config for components

[nkylstad]

Description

See sketches in figma.

This issue covers setting up the new layout/view for codelists editing.

Out of scope

Making changes to the design/content of the different modes. That will be covered in separate issues.

### Tasks
- [ ] https://github.com/Altinn/altinn-studio/issues/13387

Note: accidentally created a separate issue in the tasklist for the tab view. Closed the issue, marking the task as complete, but this is the issue that is in the sprint, and have connected PR/code review to this issue.

[TomasEng]

Funksjonelt ser dette veldig bra ut! Men jeg vil gjerne utfordre designet litt, spesielt når det kommer til avstander. Jeg ser at dette i stor grad følger skissene, så jeg tar med @Annikenkbrathen i loopen.

Fanene går ikke ut til kantene

For det første tar ikke fanene hele bredden, slik de gjør for eksempel på datamodelleringssiden. Kodelister: Datamodellering:

Jeg mener at fanene burde gå helt ut til kanten for å gjøre designet mer helhetlig. Alternativt kunne fanene hatt sin egen boks, men jeg tror ikke det er nødvendig siden det ikke er noe annet i denne visningen som vi burde skille dem fra. Uansett hvilken av disse to løsningene vi eventuelt går for, vil begge gjøre det lettere å løse det neste problemet.

Knappene går ikke ut til kantene

Jeg ser også at innholdet i fanepanelene blir plassert enda lengre borte fra kanten:

Andre steder hvor vi har denne typen lister går den blå bakgrunnen helt ut til kanten når brukeren holder musen over: Ideen med StudioPropertyButton-komponenten var at padding-en på sidene skulle være tilstrekkelig for å få en tilfredsstillende avstand mellom innholdet og kantene, slik at vi kunne oppnå denne effekten.

For stor avstand i bunnen

Avstanden i bunnen er større enn det som er normen: Jeg mener --fds-spacing-5 blir mer riktig her. Det er i hvert fall det vi har i tekstseksjonen over.

Inkonsistente tekststørrelser

Noen av tekstene, f.eks. på fanene, ser større ut enn øvrige tekster. Mangler vi size='small'?

[nkylstad]

Funksjonelt ser dette veldig bra ut! Men jeg vil gjerne utfordre designet litt, spesielt når det kommer til avstander. Jeg ser at dette i stor grad følger skissene, så jeg tar med @Annikenkbrathen i loopen.

Fanene går ikke ut til kantene

For det første tar ikke fanene hele bredden, slik de gjør for eksempel på datamodelleringssiden. Kodelister: Datamodellering:

Jeg mener at fanene burde gå helt ut til kanten for å gjøre designet mer helhetlig. Alternativt kunne fanene hatt sin egen boks, men jeg tror ikke det er nødvendig siden det ikke er noe annet i denne visningen som vi burde skille dem fra. Uansett hvilken av disse to løsningene vi eventuelt går for, vil begge gjøre det lettere å løse det neste problemet.

Her fulgte jeg skissene, men ser poenget ditt. Forskjellen mellom denne tab-visningen og den på datamodell-siden er at denne ligger inne i en Accordion, mens den på datamodell-siden ligger på "root". Men jeg vet ikke om det egentlig har noe å si.

Et alternativ her hadde vært å flytte "Valg for kodelister" opp til å ligge under komponent-ID, og alltid synlig, for flervalgskomponenter. Da slipper vi å ha den inne i en accordion, og gjør den kanskje mer tilgjengelig for brukerne og. Med full bredde sånn som det er satt opp i dag:

Øverst på egenskaper-panelet, under komponentID:

Knappene går ikke ut til kantene

Jeg ser også at innholdet i fanepanelene blir plassert enda lengre borte fra kanten:

Andre steder hvor vi har denne typen lister går den blå bakgrunnen helt ut til kanten når brukeren holder musen over: Ideen med StudioPropertyButton-komponenten var at padding-en på sidene skulle være tilstrekkelig for å få en tilfredsstillende avstand mellom innholdet og kantene, slik at vi kunne oppnå denne effekten.

Jepp, kommer fra paddingen i tab-komponenten. Er for så vidt enig her, skjermbildet over viser og med oppdatert padding (fjernet på sidene) for tabs.

For stor avstand i bunnen

Avstanden i bunnen er større enn det som er normen: Jeg mener --fds-spacing-5 blir mer riktig her. Det er i hvert fall det vi har i tekstseksjonen over.

Ja, også fra kombinasjonen tabs + accordion. Fjerner den ene paddingen i bunn sånn at det ikke blir dobbelt opp.

Inkonsistente tekststørrelser

Noen av tekstene, f.eks. på fanene, ser større ut enn øvrige tekster. Mangler vi size='small'?

Jepp, godt observert!

[TomasEng]

Et alternativ her hadde vært å flytte "Valg for kodelister" opp til å ligge under komponent-ID, og alltid synlig, for flervalgskomponenter. Da slipper vi å ha den inne i en accordion, og gjør den kanskje mer tilgjengelig for brukerne og.

Dette forslaget likte jeg! Da unngår vi også problemet med at den ligger sammen med tekst, som jeg mener burde være for seg selv.

[Annikenkbrathen]

Ja, her har vi bare fulgt paddingen til designsystemet, så vi må gjerne utfordre det! vi tilpasser de jo vårt bruk og legger det i storybook, så det er ikke noen grunn til at de ikke skal gå ut i kantene. Enig at det ble mer ryddig og vi får i tillegg bedre plass! Da slipper vi også kanskje ha innboksinger noen steder hvor vi har de ti dag også.

Også enig med Nina!👏🏻 Vi hadde et møte i forbindelse med kodelister hvor vi snakket om å flytte alt viktig innhold utenfor accordianen, for at brukeren enklere skal få en oversikt over hva som må/bør legges inn for at komponenten skal fungere optimalt.

Da var det foreslått:

• id
• Ledetekst
• datamodellknytning
• og det som må legges inn for å vise hovedoppgaven/innholet til kompontenen (bilde, alternativer, osv)

[nkylstad]

Hva tenker vi at vi gjør med denne PR'en nå da? Mitt forslag:

• Beholde tab-løsning enn så lenge, men med oppdatert spacing sånn at tab'ene går ut til kanten
• Beholde options i tekst der den ligger foreløpig, altså ikke gjøre noen endringer der, før vi har bestemt oss for hvordan vi vil løse alternativer ref. diskusjon/forslag på Slack. Sånn at vi ikke gjør den veldig synlig for å så endre på den igjen om kort tid.

Så lager vi et issue på å flytte "viktig" konfig ut til å alltid være synlig sammen med komoponent-ID, hvor vi tar alle de konfig'ene beskrevet over.

[Annikenkbrathen]

Enig! "Viktig" konfigurasjon konseptet bør vi kanskje også teste litt Lagde et issue på det!

[TomasEng]

Nå synes jeg det ser mye bedre ut, men det er fortsatt noen tekster som er større enn resten. Jeg vet ikke om det er meningen, men jeg synes det skurrer litt.

For øvrig er vel "kodelistefil" ett ord uten bindestrek.

[TomasEng]

Dette er en digresjon, men jeg mener at det er flere grafikkmessige utfordringer med denne fanekomponenten. Jeg har opprettet en sak for Designsystemet med noen forslag til endringer.

[nkylstad]

Nå synes jeg det ser mye bedre ut, men det er fortsatt noen tekster som er større enn resten. Jeg vet ikke om det er meningen, men jeg synes det skurrer litt. For øvrig er vel "kodelistefil" ett ord uten bindestrek.

Derp. Jeg har oppdatert tekstene du påpekte nå med size='small'. Godt observert! Resultat:

[TomasEng]

Vet ikke hvorfor, men i dev får jeg bare den gamle visningen selv om jeg har rullet ut denne nå. Men jeg kjørte det opp lokalt og der ser det veldig bra ut!

[nkylstad]

Intro course docs updated in linked PR.