Theme-Variants (padding, spacing) not added to element on frontend

[probert94]

Description of the bug

We recently upgraded to Vaadin 22. Since then I noticed a few times, that some styles or missing on the client side, even if I set them on the server.
The first case was in the AppLayout. I am using an Avatar with a ContextMenu. In that ContextMenu I add a HorizontalLayout as some kind of header-component. There I noticed, that the HorizontalLayout does not accept the theme, so setSpacing(true) has no effect. I also tested this with Vaadin 14.8.1 which is also affected by this problem, the I tested with an older Vaadin version (14.6.7) and this version does not seem to be affected.

In some other cases I found, styles I set have been ignored. Then I tried to move the Style#set into onAttach and suddenly it worked. Unfortunately I was not able to reproduce this issue yet, but I hope that it is related to the other issue.
EDIT: this case was actually a bug in our code.

Expected behavior

Setting styles and other attributes on the server should also change them on the client.

Minimal reproducible example

1. Download a Vaadin starter. As we only modify the MainLayout, no other view is needed
2. Replace the code in the MainLayout with the following:

public class MainLayout extends AppLayout {

    public MainLayout() {
        setPrimarySection(Section.DRAWER);
        addToNavbar(true, createHeaderContent());
    }

    private static Component createHeaderContent() {
        DrawerToggle toggle = new DrawerToggle();
        toggle.addClassName("text-secondary");
        toggle.addThemeVariants(ButtonVariant.LUMO_CONTRAST);
        toggle.getElement().setAttribute("aria-label", "Menu toggle");

        H1 viewTitle = new H1();
        viewTitle.addClassNames("m-0", "text-l");

        Header header = new Header(toggle, viewTitle);
        header.addClassNames("bg-base", "border-b", "border-contrast-10", "box-border", "flex", "h-xl", "items-center",
                "w-full");
        Span space = new Span();
        space.getStyle().set("flex-grow", "1");
        Avatar avatar = new Avatar("JD");
        createAccountMenu(avatar);
        header.add(space, avatar);
        return header;
    }

    private static void createAccountMenu(Avatar avatar) {
        ContextMenu menu = new ContextMenu(avatar);
        menu.setOpenOnClick(true);
        HorizontalLayout hl = new HorizontalLayout();
        hl.setSpacing(true);
        hl.setPadding(true);
        hl.setAlignItems(FlexComponent.Alignment.CENTER);
        hl.add(new Avatar("JD"));
        VerticalLayout vlUserAndEmail = new VerticalLayout(
            new Span("John Doe"),
            new Span("[email protected]")
        );
        vlUserAndEmail.setSpacing(false);
        vlUserAndEmail.setPadding(false);
        hl.add(vlUserAndEmail);
        menu.add(hl);
        menu.addItem(new HorizontalLayout(VaadinIcon.POWER_OFF.create(), new Span("Logout")), e -> Notification.show("Logged out"));
    }
}

3. Start the application and open the account menu by clicking on the Avatar.

Note that there is no space between the Avatar and the user name inside the menu.

Versions

• Vaadin / Flow version: Tested with 22.0.2, 14.8.1
• Java version: 11
• OS version: Windows 10 x64

I also tested with Vaadin 14.6.7, that version does not seem to be affected.
The problem I cannot reproduce seems to occure only since Vaadin 22.0.2 since our live-system which is still running Vaadin 22.0.1 is not affected.

[probert94]

After some investigation, I found that the missing styles are not a bug in Vaadin but in our code. Thats why I was not able to reproduce it.
So the only problem left is that the spacing theme-variant is missing on the frontend.

[caalador]

This is a clear issue with the ContextMenu component that moves the contents to an overlay.

A clearer simpler test to see the actual difference that the HL spacing works, but disappears when using it in a ContextMenu:

    public HelloWorldView() {
        add(createCard());
        final Avatar jd = new Avatar("JD");
        ContextMenu menu = new ContextMenu(jd);
        menu.setOpenOnClick(true);
        menu.add(createCard());
        add(jd);
    }

    private HorizontalLayout createCard() {
        HorizontalLayout hl = new HorizontalLayout();
        hl.setSpacing(true);
        hl.setPadding(true);
        hl.setAlignItems(Alignment.CENTER);
        hl.add(new Avatar("JD"));
        VerticalLayout vlUserAndEmail = new VerticalLayout(
                new Span("John Doe"),
                new Span("[email protected]")
        );
        vlUserAndEmail.setSpacing(false);
        vlUserAndEmail.setPadding(false);
        hl.add(vlUserAndEmail);
        return hl;
    }

I'm moving this to the components repository.