vaadin/flow-and-components-documentation

Lumo badges doc has wrong @CssImport

Opened this issue · 2 comments

https://vaadin.com/docs/themes/lumo/badges.html has

To use the badge utility, you first need to import the style sheet into the correct style scope where you want to use it.

In server-side views (Java), import the JavaScript module using the @jsmodule annotation and then import the style sheet it defines by using the @CssImport annotation

@JsModule("@vaadin/vaadin-lumo-styles/badge.js")
// Here, we add the style sheet to the global scope
@CssImport(include = "lumo-badge")

However, @CssImport must have a value property, so the code will not compile.

Related to #1324

The workaround is to place an empty empty.css file into frontend/styles/empty.css, then use the following annotation: @CssImport(value = "./styles/empty.css", include = "lumo-badge").

Then you can place badges into your routes with the following Java code:

        Span badge1 = new Span("I'm a badge");
        badge1.getElement().setAttribute("theme", "badge primary success");
        add(badge1);

        Span badge2 = new Span("Error!");
        badge2.getElement().setAttribute("theme", "badge primary error");
        add(badge2);