Update group component UI to indicate what elements are within the group.

[FTLems]

Description

FT needs a better indication in the frontend on what elements belongs in the same group. Per today, this is only visible in repeating group.

Screenshots

Following screenshot is from Altinn 2.0:

Screenshot from Altinn 3.0:

(Note: Point 2.3 is not included in group 2.2, but is still aligned close to point 2.2.4, which makes it difficult to interpret that it is not in the same group.)

Considerations

Suggest that elements within a group have padding, or slightly different background color as in Altinn 2.0.

Ops requirements

Are there any requirements for monitoring? What is being built and what could go wrong?
Are there any requirements related to backup?

Acceptance criteria

Describe criteria here (i.e. What is allowed/not allowed (negative tesing), validations, error messages and warnings etc.)

Specification tasks

• Development tasks are defined

Development tasks

Add tasks here

Test

Add test cases here as checkboxes that are being tested as part of the changes.

Definition of done

Verify that this issue meets DoD (Only for project members) before closing.

• Documentation is updated (if relevant)
  • Technical documentation (docs.altinn.studio)
  • User documentation (altinn.github.io/docs)
• QA
• Manual test is complete (if relevant)
• Automated test is implemented (if relevant)
• All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

Design solution

If a group of input fields consists of a header, body text and input fields, the header and body text should be aligned and the input fields should be indented with a vertical line on the left side starting from the input fields. Conversely, in the case of groups within a group, the header, body text and input fields should be aligned with a vertical line on the left side starting from the header.

For input field components with a header, that are not created as part of groups, the input field is not indented with a vertical line to the left.

https://www.figma.com/file/Pvti3aRcOwH0k5Z7DrLznk/Arbeidsomr%C3%A5de%3A-Altinn-Studio-APPS?type=design&node-id=4639%3A103560&t=ni8ThCJyqL5s97BF-1

[olemartinorg]

Possibly relevant:

• New component: Grid #583
• Maybe a nifty design idea? https://docs.altinn.studio/app/development/ux/fields/grouping/panel/#add-element-from-separate-repeating-group (EDIT: Updated link)

[RonnyB71]

Options

• Should 2.3 be created as a group with a single field the get the layout/ux consistent?
• Can panel be used instead of a group?
• Should group have a way of showing the elements within a group?

[FinnurO]

La merke til denne fordi behovet kom opp i en annen app.

Linken @olemartinorg la inn er kanskje en duplikat av denne? https://docs.altinn.studio/app/development/ux/fields/grouping/panel/

Jeg tenker at panel burde passe til dette med kanskje et par justeringer;

1. introdusere en 4de variant; "Gruppe" for å skille fra Info, Warning og Error. Den kan f.eks da styre:
   a) fargebakgrunn slik at den skiller seg ut fra andre panel. Må bestå kontrastkrav i forhold til Wcag
   b) vurdere om bredden på panelet kun omslutter komponentene og ikke hele bredden. Da ville den også bli oppfattet som en gruppering.

Mye av det som FT meldte inn er vel mulig med panel group, info og uten bruk av ikon? Hvis man i tillegg bruker innergrid/labelgrid så er man vel kanskje der i forholdet til eksempelet fra Altinn 2?

Kan være denne kan vente; har vi sjekket med FT ? Det er 18 mnd siden de opprettet saken.

@FTLems ?

[FTLems]

Panel kan brukes ja, men syns det kan være forvirrende om man skal bruke et faktisk panel for warning/error og deretter bruke samme format for gruppering av spørsmål? Jeg er ikke noe UX-designer, men bare en tanke.
Har utviklet flere apper hvor vi da ikke har brukt gruppering av spørsmål i det hele tatt.

Så ja, denne kan vente 👍