Event Listem Item, state improvements

[LukasGrafUX]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Suggestion / feature request

Hey team,

we work a lot with the event list item. We identified some issues when working with a transparent indicator, so I gathered the improvement requests from the teams:

Filled variant, Disabled state:
Default state and disabled state are identical when the indicator is transparent. A clear separation through backgorund color change or opaciity change would be great.

Filled & Outline variant, selected state:
With a transparent indicator, the border indicating the selected state does not have a left-border. Which looks a bit odd. A border on all sides of the component would help a lot (also if the component has a colored indicator).

A screenshot attached with the examples. Thank you :)

[kathrinschalber]

Thanks for the feedback! Generally, we will take your improvements into account for a new, quite flexible list component that we are working on right now.

As a temporary workaround, here's 2 tips:

1. For disabled state, set all nested interactive elements to disabled (e.g. the icon button)
2. For disabled+filled issue, you could change its variant to be outline - it should make it more obvious if its missing hover + focus is not enough
3. For selected state, use color-dynamic for the indicator on the left