New behaviour in List component

[Albertlarsen]

We need some new behaviors for List component that is described in https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/DDS---Core-Components?node-id=6632%3A25291. Implement the relevant behaviours. It should be able to choose if the component is going to have hover effect and not.

This issue is only about making these follwing behaviours:

• Default
• Hover
• Focus
• Hover warning
• Strikethrough

[olemartinorg]

From the looks of it, these 'lists' in figma optionally has multiple columns, and such they would map to what we colloquially call a 'table'. Which is already implemented, albeit with a slightly different design. See here for an example.

Please expand on what exactly is needed from the figma sketches and is not implemented already. Should we perhaps support multiple visual variants? If so, we should probably describe when to use which.

Also relevant:

• Table component #39
• Table component #129

[Albertlarsen]

@olemartinorg I don't understand what you mean. What does Table have to do with the List component?

[olemartinorg]

The list component you linked in figma looks suspiciously like a table, so I believe there to be overlapping functionality between them. I would suggest looking into that overlap, and consider if a new list component really should be implemented, or if the table component could be extended to more easily allow for the features required in this list component.

FYI, the table component here is an external contribution made to support the so-called List component in app-frontend-react. It is overlapping, not only in functionality, but also in naming.

From what I can tell by glancing at the figma sketches, it looks like the list component we're talking about here is a HTML table, which allows for some icons and right-aligned text inside some cells, and has some functionality where if you click on a row, some content appears below that row in what looks like a <tr><td colspan="X">content</td></tr> (where X is the number of columns in the table above). That could easily be added as a feature to the existing table component, IMO.

[Albertlarsen]

@olemartinorg Yeah those things you meantion you have to talk to @hannekristin about, as she has made the design in figma. To make sure we're on the same page I just want to mention that this issue is really just about creating an extended behaviour to the current List component in the Design System.

Regarding if this should really be the same component or 2 components. I at least see one problem with merging the 2 components. F.ex that html distinguishes between tables(< table >, < tr > and < th >) and lists(< ul > and < li >). I guess you can debate that a list is just an table without structure(but in authorization we need a component like that) but at least html has distinguished this to be 2 completely different html elements.

I'm not negative to create a component a bit like _InputWrapper that can be used by both Table and List to gain the behavior described in this issue though.

List component was made before Table component and I don't really have to do anything with the architecture of Table and the thought process behind ignoring List component. List component was merged into the Design System 4th August and it seems like the work on Table component was started Sept 23.

[Albertlarsen]

@olemartinorg Also I'm wondering why they are calling it a List component in List component in app-frontend-react when it really is a Table?

[olemartinorg]

Thank you, this explains a lot! IMO, I still think the more advanced use-cases i see in the List component in Figma looks more like a table. I didn't see any specifics here, only a link to figma and a one-liner about implementing some behaviour I interpreted as "the rest of it", so forgive me if this issue only meant to describe hover- and selection-effects.

As for the naming of Table -> List, the naming was chosen because the use-case is "choose this item from a list", and it more closely resembles a dropdown or radio group in functionality. Also, historically, Table is a tainted term in our heads because of #107 which describes functionality that spans both this aforementioned List component, and repeating groups (which now also uses the Table component from the design system under the hood). The dreamed-up Table component which was wanted in #107 has thus been split into 3 parts (the List component, a Grid component and further improvements to the existing repeating groups). Read more about the history here.

[Albertlarsen]

@olemartinorg Why does it look more like a table to you? 😊

[olemartinorg]

Screenshot from figma of a list example:

The Table component:

So, because there are:

• Rows
• Columns
• Cells

In both of these, I am of the impression they can (and should) be represented using the table abstraction.

[Albertlarsen]

Yes for that use case we could maybe just use a table without a header. You have to discuss those UX cases further with @hannekristin 😊