CODEWITHSUNDEEP
vaadinbadge
Carlos V.
Carlos V.

Reputation: 43

Badge styling seems not to be working on Vaadin 23

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

Upvotes: 3

Views: 874

Answers (2)

Joel Padamadan
Joel Padamadan

Reputation: 21

I am using Vaadin 14.10.1 and I was facing the same issue when I used a badge in my application. I was able to resolve this issue by creating a CSS file /frontend/styles/vaadin-badge.css from the style defined in GitHub (https://github.com/vaadin/vaadin-lumo-styles/blob/v1.6.1/badge.html) and adding the following annotation in the main class.

@JsModule("@vaadin/vaadin-lumo-styles/badge.js")
@CssImport(include = "lumo-badge", value = "./styles/vaadin-badge.css")

Upvotes: 0

jaksu
jaksu

Reputation: 11

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 {
}

Upvotes: 1

Related Questions