BUGFIX: Use full height in selectbox preview element

[Sebobo]

If the secondary or tertiary label is not set the preview element wouldn’t cover the whole selectbox which will then show a graphical glitch. This problem currently surfaces when using a custom data source as then the PreviewOption is used since Neos 7.3 to allow the display of custom icons. This is not a problem when the secondary or tertiary label is set for the component because it will stretch the preview high enough.

What I did

Introduce a class to unset the reduced line-height if the secondary and tertiary label are not set. Then the 40px line-height of the parent element will be used and therefore the box filled.

How to verify it

Use a select box editor with a custom data source.

Before:

After:

[Sebobo]

Tried to fix it with flex box, but that caused more issues...

[patricekaufmann]

I have checked out your branch but I would say it's note quite fixed yet. The original style for the height is line-height: calc(40px - 10px). However inherit leads to the active label being too large and the list elements being too small. Setting line-height: calc(40px - 10px) would fix both of those issues:

inherit:

https://user-images.githubusercontent.com/41791606/178217564-0c7d0343-98d8-44e1-9da7-0bf11a3c8e0c.mp4

line-height: calc(40px - 10px):

https://user-images.githubusercontent.com/41791606/178217631-846e24b6-e2dc-4480-8157-cb0d83e3399c.mp4

Would it be easier to set the 20px line-height condtionally and leave it as it is otherwise?

The background hover bug mentioned in #3136 is still present on this branch, as the background style overrules the hover rule defined prior to that. It's just a small detail but adds quite a lot of usability when selecting an element in a larger list:

[Sebobo]

@patricekaufmann thx for the hint. I adjusted the code and also fixed the missing prop forwarding for additional labels.