The page at https://vaadin.com/docs/v23/components/badge says to add "badge" to "lumoImports". However, Material theme doesn't allow for custom themes and therefore there's no theme.json file.
Expected outcome
Either badges should work out-of-the-box, or there should be a documentation on how to add badges to the Material theme.
Minimal reproducible example
public class Badge extends Span implements HasTheme {
public Badge() {
setId(getClass().getSimpleName());
getThemeNames().add("badge");
}
public Badge(@NotNull Component... components) {
this();
add(components);
}
public Badge(@NotNull String text) {
this();
setText(text);
}
/**
* Adds theme variants to the component.
*
* @param variants
* theme variants to add
*/
@NotNull
public Badge addThemeVariants(@NotNull BadgeVariant... variants) {
getThemeNames()
.addAll(Stream.of(variants).map(BadgeVariant::getVariantName)
.collect(Collectors.toList()));
return this;
}
/**
* Removes theme variants from the component.
*
* @param variants
* theme variants to remove
*/
public void removeThemeVariants(@NotNull BadgeVariant... variants) {
getThemeNames().removeAll(
Stream.of(variants).map(BadgeVariant::getVariantName)
.collect(Collectors.toList()));
}
/**
* Set the badge color to a custom color. See the FreightCheckinGrid class for an example on how to use this; see CLG-105 for screenshots.
* @param color for example "red" or "#b9b9b9".
* @return this.
*/
@NotNull
public Badge setCustomColor(@Nullable String color) {
getStyle().set("background-color", color);
return this;
}
}
public enum BadgeVariant {
PRIMARY("primary"), SUCCESS("success"), ERROR("error"), CONTRAST("contrast"), PILL("pill"), SMALL("small");
@NotNull
private final String theme;
BadgeVariant(@NotNull String theme) {
this.theme = theme;
}
@NotNull
public String getVariantName() {
return theme;
}
}
Description
Related to https://github.com/vaadin/web-components/issues/5379
The page at https://vaadin.com/docs/v23/components/badge says to add
"badge"
to"lumoImports"
. However, Material theme doesn't allow for custom themes and therefore there's notheme.json
file.Expected outcome
Either badges should work out-of-the-box, or there should be a documentation on how to add badges to the Material theme.
Minimal reproducible example
should work out-of-the-box, but currently renders a span without any formatting.
Steps to reproduce
Paste the above to skeleton starter
Environment
Vaadin version(s): 23.3.7+
Browsers
No response