Badge styling seems not to be working on Vaadin 23

Question

moved from Vaadin 22 to 23 and badge styling seems not be working as expected.

Loading resources pretty much the same way:

@JsModule("@vaadin/vaadin-lumo-styles/badge.js")
@CssImport(include = "lumo-badge", value = "./styles/empty.css")
public class SomeClass...
...
envBadge.getElement().getThemeList().add("badge success");

@vaadin/vaadin-lumo-styles/badge.js do exists in node_modules dir...

Any idea? According to documentation, it seems right, as in version 22...

Thanks

Answer 1

I had same problem. @JsModule("@vaadin/vaadin-lumo-styles/badge.js") and @CssImport(include = "lumo-badge", value = "./styles/empty.css") annotations worked fine with latest 22 version but after upgrading to 23 version, badge styles stop working. But I manage to resolve issue. I removed those annotations from my Badge class, created frontend/themes/common-theme/theme.json file with content

{
  "lumoImports": ["badge"]
}

and finally I added @Theme("common-theme") into my app configurator

@Theme("common-theme")
public class AppConfigurator implements AppShellConfigurator {
}