Febakke commented 2 years ago

Description

We should make our repeating group component more usable. The new design should be based on needs from the OED-project and styling issues with the existing component.

Design tasks:

[x] Create sketches of new design
[ ] Usertesting (OED case)

Figma sketches

https://www.figma.com/file/wnBveAG2ikUspFsQwM3GNE/Altinn-Studio-Apps?node-id=13550%3A8883

Figma Prototype

https://www.figma.com/proto/wnBveAG2ikUspFsQwM3GNE/Altinn-Studio-Apps?page-id=2090%3A6723&node-id=13550%3A8883&viewport=501%2C48%2C0.57&scaling=min-zoom&starting-point-node-id=13550%3A8883&show-proto-sidebar=1

Development tasks:

[x] Change the margin so that we use the whole width for the components inside the group. The visual group indicator should be outside the margin. ( ✅ Done in PR 7755)
[x] Save button. Change name and design. Should not look like the "next page".( ✅ Done in PR 7755)
[x] Better focus/active-indicator for edit-button. ( ✅ Done in PR 7755)
[x] Icons in buttons should be placed before the text, not after.( ✅ Done in PR 7755)
[x] #243
[ ] Delete-row-button should be moved out of the group and into the table. Should be visible next to the edit button. When this is done, the edit and delete buttons should show as icons only when screen is smaller than 768. #322
[ ] The focus/active-indicator for edit-button should stay activated when you edit inputs in the group.
[x] #321
[x] When there are no rows the table header should be hidden by default. It should only show the button or an open group. The table header will be visible when a row is added #323

jeevananthank commented 2 years ago

@mrosvik

focus/active-indicator for edit-button disappears once an input inside the group is focused
the delete/edit button is displayed with text in mobile view - expected only the icon as per design
expansion on margin has made nested group margin overlap on the main group

mrosvik commented 2 years ago

Thanks @jeevananthank !

I added the first two comments as new tasks in this issue. I hope a developer can look at the rest of the tasks in this issue. Showing only icon on mobile should not be done before the delete button is moved out of the group and into the row.
The last issue with nested groups is fixed in my PR 7755

jeevananthank commented 2 years ago

@mrosvik the fix for nested repeating groups is perfect on bigger screens as the attached screenshot. but still see issues with the mobile view on nested repeating group.