From 74a186ad286786758e070d8fe6d93b6caaf139fc Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 26 Mar 2026 18:56:15 -0300 Subject: [PATCH 01/17] build: enable badgeComponent preview feature flag --- src/main/resources/vaadin-featureflags.properties | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/main/resources/vaadin-featureflags.properties diff --git a/src/main/resources/vaadin-featureflags.properties b/src/main/resources/vaadin-featureflags.properties new file mode 100644 index 0000000..9e57137 --- /dev/null +++ b/src/main/resources/vaadin-featureflags.properties @@ -0,0 +1 @@ +com.vaadin.experimental.badgeComponent=true From 6d7154792477ab07fa541d3de694a5df492791fb Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 26 Mar 2026 18:58:04 -0300 Subject: [PATCH 02/17] build!: upgrade to Vaadin 25.1.1 and Java 21 Drop the v25 profile and promote its settings to the base build. Replace javax.servlet-api with jakarta.servlet-api 6.1.0 and add vaadin-dev dependency required for development mode in Vaadin 25. --- pom.xml | 43 ++++++++++++------------------------------- 1 file changed, 12 insertions(+), 31 deletions(-) diff --git a/pom.xml b/pom.xml index 71cdbc7..d258e40 100644 --- a/pom.xml +++ b/pom.xml @@ -4,16 +4,16 @@ com.flowingcode.vaadin.addons badge-list-addon - 1.2.1-SNAPSHOT + 2.0.0-SNAPSHOT Badge List Add-on Badge List Add-on for Vaadin Flow https://www.flowingcode.com/en/open-source/ - 24.1.6 + 25.1.1 4.10.0 - 17 - 17 + 21 + 21 UTF-8 UTF-8 ${project.basedir}/drivers @@ -113,6 +113,11 @@ vaadin-core true + + com.vaadin + vaadin-dev + true + org.slf4j slf4j-simple @@ -135,10 +140,9 @@ test - javax.servlet - javax.servlet-api - 3.1.0 - jar + jakarta.servlet + jakarta.servlet-api + 6.1.0 test @@ -494,29 +498,6 @@ - - v25 - - 21 - 21 - 25.0.2 - 11.0.26 - - - - com.vaadin - vaadin-dev - true - - - jakarta.servlet - jakarta.servlet-api - 6.1.0 - test - - - - From 71d2b2e3ad7ecc6129c0f97a018dcd4cc78ea2f7 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Mon, 30 Mar 2026 15:48:16 -0300 Subject: [PATCH 03/17] remove!: remove custom Badge class --- .../vaadin/addons/badgelist/Badge.java | 71 ------------------- 1 file changed, 71 deletions(-) delete mode 100644 src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java deleted file mode 100644 index a9fea38..0000000 --- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java +++ /dev/null @@ -1,71 +0,0 @@ -/*- - * #%L - * Badge List Add-on - * %% - * Copyright (C) 2023 - 2024 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ -package com.flowingcode.vaadin.addons.badgelist; - -import com.vaadin.flow.component.Component; -import com.vaadin.flow.component.html.Span; - -/** Component representing a badge object. */ -public class Badge extends Span { - - /** Creates a new empty badge. */ - public Badge() { - super(); - this.addThemeName("badge"); - } - - /** - * Creates a new badge with the given text. - * - * @param text the badge's text - */ - public Badge(String text) { - this(); - setText(text); - } - - /** - * Creates a new badge with the given child components. - * - * @param components the badge's components - */ - public Badge(Component... components) { - this(); - add(components); - } - - /** - * Adds a theme name to this component. - * - * @param themeName the theme name to add - */ - public void addThemeName(String themeName) { - this.getElement().getThemeList().add(themeName); - } - - /** - * Removes a theme name from this component. - * - * @param themeName the theme name to remove - */ - public void removeThemeName(String themeName) { - this.getElement().getThemeList().remove(themeName); - } -} From 3bdd3b834c4a265cfed9fbd65fccd1c430e34b92 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Mon, 30 Mar 2026 16:08:50 -0300 Subject: [PATCH 04/17] feat!: update BadgeList to use native Badge class Replace the removed custom Badge class with the native Vaadin Badge. Remove the @CssImport for badge.css since vaadin-badge manages its own styles via shadow DOM. --- .../com/flowingcode/vaadin/addons/badgelist/BadgeList.java | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java index 3b4ee3d..6d7cd05 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java +++ b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java @@ -24,7 +24,7 @@ import com.vaadin.flow.component.HasSize; import com.vaadin.flow.component.HasTheme; import com.vaadin.flow.component.Tag; -import com.vaadin.flow.component.dependency.CssImport; +import com.vaadin.flow.component.badge.Badge; import com.vaadin.flow.component.dependency.JsModule; import java.util.ArrayList; import java.util.List; @@ -36,7 +36,6 @@ */ @SuppressWarnings("serial") @JsModule("./src/fc-badge-list.ts") -@CssImport("./styles/badge.css") @Tag("fc-badge-list") public class BadgeList extends Component implements HasTheme, HasSize, HasLabel { From fb50cb82a92137b9d84238f4f6686b31d9df62d1 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 26 Mar 2026 19:19:46 -0300 Subject: [PATCH 05/17] remove!: remove custom badge CSS Badge styles are now managed by vaadin-badge's own shadow DOM. --- .../resources/frontend/styles/badge.css | 187 ------------------ 1 file changed, 187 deletions(-) delete mode 100644 src/main/resources/META-INF/resources/frontend/styles/badge.css diff --git a/src/main/resources/META-INF/resources/frontend/styles/badge.css b/src/main/resources/META-INF/resources/frontend/styles/badge.css deleted file mode 100644 index a0f9839..0000000 --- a/src/main/resources/META-INF/resources/frontend/styles/badge.css +++ /dev/null @@ -1,187 +0,0 @@ -/*- - * #%L - * Badge List Add-on - * %% - * Copyright (C) 2023 - 2026 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ - -/** - * @license - * Copyright (c) 2017 - 2026 Vaadin Ltd. - * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ - */ -[theme~='badge'] { - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4); - color: var(--lumo-primary-text-color); - background-color: var(--lumo-primary-color-10pct); - border-radius: var(--lumo-border-radius-s); - font-family: var(--lumo-font-family); - font-size: var(--lumo-font-size-s); - line-height: 1; - font-weight: 500; - text-transform: initial; - letter-spacing: initial; - min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em); - flex-shrink: 0; -} - -/* Ensure proper vertical alignment */ -[theme~='badge']::before { - display: inline-block; - content: '\2003'; - width: 0; -} - -[theme~='badge'][theme~='small'] { - font-size: var(--lumo-font-size-xxs); - line-height: 1; -} - -/* Colors */ - -[theme~='badge'][theme~='success'] { - color: var(--lumo-success-text-color); - background-color: var(--lumo-success-color-10pct); -} - -[theme~='badge'][theme~='error'] { - color: var(--lumo-error-text-color); - background-color: var(--lumo-error-color-10pct); -} - -[theme~='badge'][theme~='warning'] { - color: var(--lumo-warning-text-color); - background-color: var(--lumo-warning-color-10pct); -} - -[theme~='badge'][theme~='contrast'] { - color: var(--lumo-contrast-80pct); - background-color: var(--lumo-contrast-5pct); -} - -/* Primary */ - -[theme~='badge'][theme~='primary'] { - color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-primary-color); -} - -[theme~='badge'][theme~='success'][theme~='primary'] { - color: var(--lumo-success-contrast-color); - background-color: var(--lumo-success-color); -} - -[theme~='badge'][theme~='error'][theme~='primary'] { - color: var(--lumo-error-contrast-color); - background-color: var(--lumo-error-color); -} - -[theme~='badge'][theme~='warning'][theme~='primary'] { - color: var(--lumo-warning-contrast-color); - background-color: var(--lumo-warning-color); -} - -[theme~='badge'][theme~='contrast'][theme~='primary'] { - color: var(--lumo-base-color); - background-color: var(--lumo-contrast); -} - -/* Links */ - -[theme~='badge'][href]:hover { - text-decoration: none; -} - -/* Icon */ - -[theme~='badge']>vaadin-icon { - margin: -0.25em 0; -} - -[theme~='badge']>vaadin-icon:first-child { - margin-left: -0.375em; -} - -[theme~='badge']>vaadin-icon:last-child { - margin-right: -0.375em; -} - -vaadin-icon[theme~='badge'][icon] { - min-width: 0; - padding: 0; - font-size: 1rem; - width: var(--lumo-icon-size-m); - height: var(--lumo-icon-size-m); -} - -vaadin-icon[theme~='badge'][icon][theme~='small'] { - width: var(--lumo-icon-size-s); - height: var(--lumo-icon-size-s); -} - -/* Empty */ - -[theme~='badge']:not([icon]):empty { - min-width: 0; - width: 1em; - height: 1em; - padding: 0; - border-radius: 50%; - background-color: var(--lumo-primary-color); -} - -[theme~='badge'][theme~='small']:not([icon]):empty { - width: 0.75em; - height: 0.75em; -} - -[theme~='badge'][theme~='contrast']:not([icon]):empty { - background-color: var(--lumo-contrast); -} - -[theme~='badge'][theme~='success']:not([icon]):empty { - background-color: var(--lumo-success-color); -} - -[theme~='badge'][theme~='error']:not([icon]):empty { - background-color: var(--lumo-error-color); -} - -[theme~='badge'][theme~='warning']:not([icon]):empty { - background-color: var(--lumo-warning-color); -} - -/* Pill */ - -[theme~='badge'][theme~='pill'] { - --lumo-border-radius-s: 1em; -} - -/* RTL specific styles */ - -[dir='rtl'][theme~='badge'] vaadin-icon:first-child { - margin-right: -0.375em; - margin-left: 0; -} - -[dir='rtl'][theme~='badge'] vaadin-icon:last-child { - margin-left: -0.375em; - margin-right: 0; -} \ No newline at end of file From 4cd6b3288ec67c48cedda39ac11cbef8c8564099 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Mon, 30 Mar 2026 16:11:53 -0300 Subject: [PATCH 06/17] refactor: update fc-badge-list web component for vaadin-badge --- .../resources/frontend/src/fc-badge-list.ts | 43 +++++++++++++------ 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts index 424cefa..70034d4 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts @@ -20,13 +20,15 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js'; import '@vaadin/context-menu'; import type { ContextMenuItem } from '@vaadin/context-menu'; -import badgeStylesContent from '../styles/badge.css?inline'; +import '@vaadin/badge'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -import { css, html, LitElement, unsafeCSS } from 'lit'; +import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-detection-mixin.js'; +import { css, html, LitElement } from 'lit'; import { customElement, property, query, queryAssignedNodes, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; @customElement('fc-badge-list') -export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { +export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(LitElement))) { @query('[part~="overflow-badge"]') _overflowBadge!: HTMLDivElement @@ -50,13 +52,19 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { private overflowItems: ContextMenuItem[] = []; static styles = [ - unsafeCSS(badgeStylesContent), - css` - + css` + :host { + --badge-list-badges-margin: 0 0.25rem; + --badge-list-label-color: currentColor; + --badge-list-label-font-weight: 500; + --badge-list-label-font-size: 0.875rem; + --badge-list-label-margin-left: 0; + } + + :host([data-application-theme="lumo"]) { --badge-list-badges-margin: 0 calc(var(--lumo-space-s) / 2); --badge-list-label-color: var(--lumo-secondary-text-color); - --badge-list-label-font-weight: 500; --badge-list-label-font-size: var(--lumo-font-size-s); --badge-list-label-margin-left: calc(var(--lumo-border-radius-m) / 4); } @@ -64,12 +72,12 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { vaadin-context-menu { line-height: 0; } - - [part="container"] ::slotted(span[theme~="badge"]) { + + [part="container"] ::slotted(vaadin-badge) { margin: var(--badge-list-badges-margin); } - [part="container"] ::slotted(span[theme~="badge"]:first-child) { + [part="container"] ::slotted(vaadin-badge:first-child) { margin-left: 0; } @@ -89,6 +97,11 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { margin: var(--badge-list-badges-margin); } + [part="overflow-badge"] vaadin-icon { + width: 1em; + height: 1em; + } + :host(:not([has-label])) [part='label']{ display:none; } @@ -223,6 +236,8 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { } render() { + const isAura = this.getAttribute('data-application-theme') === 'aura'; + const icon = isAura ? 'vaadin:plus' : 'lumo:plus'; return html`
@@ -230,11 +245,11 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
- - + +
`; } From a9003d9551622b89198f81a2a7a7ae0abf047b8a Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 26 Mar 2026 19:23:49 -0300 Subject: [PATCH 07/17] refactor(demo): update demos for native Vaadin Badge --- .../addons/badgelist/BadgeListDemo.java | 1 + .../addons/badgelist/ReadOnlyBinderDemo.java | 1 + .../addons/badgelist/StyledBadgesDemo.java | 30 +++++++------------ .../frontend/styles/fc-badge-list.css | 1 - .../styles/styled-badges-demo-v25.css | 28 ----------------- .../frontend/styles/styled-badges-demo.css | 5 ++-- 6 files changed, 16 insertions(+), 50 deletions(-) delete mode 100644 src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java index a778c72..1343bbc 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java @@ -20,6 +20,7 @@ package com.flowingcode.vaadin.addons.badgelist; import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.badge.Badge; import com.vaadin.flow.component.grid.Grid; import com.vaadin.flow.router.PageTitle; import com.vaadin.flow.router.Route; diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java index 13ff8ca..ef03abb 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java @@ -20,6 +20,7 @@ package com.flowingcode.vaadin.addons.badgelist; import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.badge.Badge; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.combobox.MultiSelectComboBox; import com.vaadin.flow.component.html.Div; diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java index 0d33104..c9f7b5f 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java @@ -21,9 +21,10 @@ import com.flowingcode.vaadin.addons.demo.DemoSource; import com.flowingcode.vaadin.addons.demo.SourceCodeViewer; +import com.vaadin.flow.component.badge.Badge; +import com.vaadin.flow.component.badge.BadgeVariant; import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.html.Div; -import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.icon.Icon; import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.router.PageTitle; @@ -32,31 +33,23 @@ import java.util.List; @DemoSource -//#if vaadin eq 0 @DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css", - caption = "styled-badges-demo.css", condition = "vaadin eq 24") -@DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css", - caption = "styled-badges-demo.css", condition = "vaadin ge 25") + caption = "styled-badges-demo.css") @DemoSource(value = "/src/test/resources/META-INF/frontend/styles/fc-badge-list.css", - caption = "fc-badge-list.css", condition = "vaadin ge 25") -//#endif + caption = "fc-badge-list.css") @PageTitle("Styled Badges Demo") @SuppressWarnings("serial") -//#if vaadin eq 24 -@CssImport("./styles/styled-badges-demo.css") -//#else @CssImport(value = "./styles/fc-badge-list.css", themeFor = "fc-badge-list") -@CssImport("./styles/styled-badges-demo-v25.css") -//#endif +@CssImport("./styles/styled-badges-demo.css") @Route(value = "badge-list/styled", layout = BadgeListDemoView.class) public class StyledBadgesDemo extends BaseBadgeListDemo { public StyledBadgesDemo() { - // begin-block example1 + // begin-block example1 List badges1 = new ArrayList<>(); for (int i = 0; i < 8; i++) { Badge badge = new Badge("BADGE" + (i + 1)); - badge.addThemeName("error primary"); + badge.addThemeVariants(BadgeVariant.ERROR); badges1.add(badge); } BadgeList badgeList1 = new BadgeList(badges1); @@ -94,8 +87,9 @@ public StyledBadgesDemo() { // begin-block example3 List badges3 = new ArrayList<>(); for (int i = 0; i < 12; i++) { - Badge badge = new Badge(createIcon(VaadinIcon.CHECK), new Span("BADGE" + (i + 1))); - badge.addThemeName("success"); + Badge badge = new Badge("BADGE" + (i + 1)); + badge.setIcon(createIcon(VaadinIcon.CHECK)); + badge.addThemeVariants(BadgeVariant.SUCCESS); badges3.add(badge); } BadgeList badgeList3 = new BadgeList(badges3); @@ -113,9 +107,7 @@ public StyledBadgesDemo() { // #if vaadin eq 0 private Icon createIcon(VaadinIcon vaadinIcon) { - Icon icon = vaadinIcon.create(); - icon.getStyle().set("padding", "var(--lumo-space-xs"); - return icon; + return vaadinIcon.create(); } // #endif } diff --git a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css index 098194b..608204e 100644 --- a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css +++ b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css @@ -1,4 +1,3 @@ -/* FOR VAADIN 25 */ /* for hidden badges in the overflow badge */ .custom-styled-badge { background-color: lightgreen; diff --git a/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css b/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css deleted file mode 100644 index c211522..0000000 --- a/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css +++ /dev/null @@ -1,28 +0,0 @@ -/*- - * #%L - * Badge List Add-on - * %% - * Copyright (C) 2023 - 2026 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ - -fc-badge-list.styled-badges-second-example::part(overflow-badge), fc-badge-list .custom-styled-badge { - background-color: lightgreen; - color: green; - border: 1px green dashed; - border-radius: 0; -} - - \ No newline at end of file diff --git a/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css b/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css index 0fd8fd5..c211522 100644 --- a/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css +++ b/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css @@ -18,10 +18,11 @@ * #L% */ -fc-badge-list.styled-badges-second-example::part(overflow-badge), .custom-styled-badge { - background-color: lightgreen; +fc-badge-list.styled-badges-second-example::part(overflow-badge), fc-badge-list .custom-styled-badge { + background-color: lightgreen; color: green; border: 1px green dashed; border-radius: 0; } + \ No newline at end of file From 5425027ff9b68a105efe781e9d11f153380060fb Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 26 Mar 2026 20:38:03 -0300 Subject: [PATCH 08/17] build(demo): upgrade commons-demo to 5.2.0 --- pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pom.xml b/pom.xml index d258e40..04909dc 100644 --- a/pom.xml +++ b/pom.xml @@ -18,7 +18,7 @@ UTF-8 ${project.basedir}/drivers 11.0.26 - 5.1.0 + 5.2.0 true From 77313da5f9180774796ea2d167521fd3e82ee37c Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 26 Mar 2026 20:38:26 -0300 Subject: [PATCH 09/17] feat(demo): add support for dynamic theme switching --- .../vaadin/addons/AppShellConfiguratorImpl.java | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java index d6dc5f0..e9d468b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java +++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java @@ -19,10 +19,17 @@ */ package com.flowingcode.vaadin.addons; +import com.flowingcode.vaadin.addons.demo.DynamicTheme; import com.vaadin.flow.component.page.AppShellConfigurator; -import com.vaadin.flow.theme.Theme; +import com.vaadin.flow.server.AppShellSettings; -@Theme public class AppShellConfiguratorImpl implements AppShellConfigurator { + @Override + public void configurePage(AppShellSettings settings) { + if (DynamicTheme.isFeatureSupported()) { + DynamicTheme.LUMO.initialize(settings); + } + } + } From 22d79adf4f295f6941f5584ef3d980e5c971fb2e Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Mon, 30 Mar 2026 16:12:07 -0300 Subject: [PATCH 10/17] fix: adjust overflow badge icon size per theme Use 0.75em as the default icon size for base and Aura themes, and 1em for Lumo where the larger size fits the badge proportions. --- .../META-INF/resources/frontend/src/fc-badge-list.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts index 70034d4..a8aa8ce 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts @@ -98,6 +98,11 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit } [part="overflow-badge"] vaadin-icon { + width: 0.75em; + height: 0.75em; + } + + :host([data-application-theme="lumo"]) [part="overflow-badge"] vaadin-icon { width: 1em; height: 1em; } From ca892bc9b35901ed7b39ed559955689ece235abd Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Mon, 30 Mar 2026 17:34:49 -0300 Subject: [PATCH 11/17] fix(demo): use fallback value for font size in title span --- .../META-INF/frontend/styles/badge-list-demo-styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css b/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css index 4cca076..0d2c3f6 100644 --- a/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css +++ b/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css @@ -24,7 +24,7 @@ } .badge-list-container .title-span { - font-size: var(--lumo-font-size-l); + font-size: var(--lumo-font-size-l, 1.125rem); font-weight: 600; display: block; padding: 5px 0 10px 0; From 8422e4bf76a028dc6a5bdbfa682a1426eab247ff Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Wed, 1 Apr 2026 16:28:00 -0300 Subject: [PATCH 12/17] refactor: extract _isAura getter to encapsulate theme detection --- .../META-INF/resources/frontend/src/fc-badge-list.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts index a8aa8ce..866e253 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts @@ -51,6 +51,13 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit @state() private overflowItems: ContextMenuItem[] = []; + @property({ attribute: 'data-application-theme' }) + _applicationTheme: string | null = null; + + private get _isAura(): boolean { + return this._applicationTheme === 'aura'; + } + static styles = [ css` @@ -241,8 +248,7 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit } render() { - const isAura = this.getAttribute('data-application-theme') === 'aura'; - const icon = isAura ? 'vaadin:plus' : 'lumo:plus'; + const icon = this._isAura ? 'vaadin:plus' : 'lumo:plus'; return html`
From 180919149ec3ae5932fa801ba2fd9dbd9a082b01 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Wed, 1 Apr 2026 16:28:36 -0300 Subject: [PATCH 13/17] fix: apply Aura theme styles to overflow and hidden badges --- .../resources/frontend/src/fc-badge-list.ts | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts index 866e253..f413ee4 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts @@ -104,6 +104,19 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit margin: var(--badge-list-badges-margin); } + :host([data-application-theme="aura"]) [part="overflow-badge"] { + color: var(--vaadin-badge-text-color, var(--aura-accent-text-color)); + background: var(--vaadin-badge-background, var(--aura-accent-surface) padding-box); + border-color: var(--vaadin-badge-border-color, var(--aura-accent-border-color)); + font-size: var(--vaadin-badge-font-size, var(--aura-font-size-s)); + --aura-surface-level: 1; + } + + :host([data-application-theme="aura"]) [part="overflow-badge"]:is([theme~='filled'], [theme~='dot']) { + background: var(--aura-accent-color); + color: var(--aura-accent-contrast-color); + } + [part="overflow-badge"] vaadin-icon { width: 0.75em; height: 0.75em; @@ -237,10 +250,22 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit const hiddenBadges = Array.from(this.querySelectorAll('[slot="badges"][hidden]')); this.overflowItems = []; hiddenBadges.forEach(hiddenBadge => { - const copy = hiddenBadge.cloneNode(true); + const copy = hiddenBadge.cloneNode(true) as HTMLElement; copy.removeAttribute("slot"); copy.removeAttribute("hidden"); copy.style.margin = '5px'; + // Copy computed host styles so clones render correctly inside the overlay. + if (this._isAura) { + const computed = getComputedStyle(hiddenBadge as HTMLElement); + copy.style.color = computed.color; + copy.style.backgroundColor = computed.backgroundColor; + copy.style.backgroundClip = computed.backgroundClip; + copy.style.borderTopColor = computed.borderTopColor; + copy.style.borderRightColor = computed.borderRightColor; + copy.style.borderBottomColor = computed.borderBottomColor; + copy.style.borderLeftColor = computed.borderLeftColor; + copy.style.fontSize = computed.fontSize; + } const item = document.createElement('div'); item.appendChild(copy); this.overflowItems.push({ component: item }); From 8684ca2975c57168e6a2e07bf1964d377404e220 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Wed, 1 Apr 2026 17:05:25 -0300 Subject: [PATCH 14/17] docs(readme): update supported versions --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e5d9e8b..1807f0f 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Responsive badge list component. ## Supported versions Supported versions: Vaadin 24-25 (add-on version 1.x) +Supported versions: Vaadin 25.1+ (add-on version 2.x) ## Online demo From 273b2b2f98ccc5c87842580eea9b5b592b25b530 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Wed, 1 Apr 2026 17:06:11 -0300 Subject: [PATCH 15/17] docs(readme): update demo url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1807f0f..ba1cb31 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ Supported versions: Vaadin 25.1+ (add-on version 2.x) ## Online demo -[Online demo here](http://addonsv24.flowingcode.com/badge-list) +[Online demo here](http://addonsv25.flowingcode.com/badge-list) ## Download release From 0af3334e47479eee98e8e2ac2cbd4e090402dcae Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Wed, 1 Apr 2026 17:06:41 -0300 Subject: [PATCH 16/17] chore: remove unused import --- .../flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java | 1 - 1 file changed, 1 deletion(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java index ef03abb..6b66040 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java @@ -24,7 +24,6 @@ import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.combobox.MultiSelectComboBox; import com.vaadin.flow.component.html.Div; -import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; From 803871148c125950ae82608f3ad53d0f4cc31aca Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Wed, 1 Apr 2026 17:07:16 -0300 Subject: [PATCH 17/17] chore: update license headers --- .../vaadin/addons/badgelist/BadgeList.java | 2 +- .../resources/frontend/src/fc-badge-list.ts | 6 +++--- .../addons/badgelist/BadgeListDemo.java | 2 +- .../addons/badgelist/BadgeListDemoView.java | 2 +- .../addons/badgelist/BaseBadgeListDemo.java | 2 +- .../vaadin/addons/badgelist/DemoView.java | 2 +- .../vaadin/addons/badgelist/Person.java | 2 +- .../addons/badgelist/ReadOnlyBinderDemo.java | 2 +- .../vaadin/addons/badgelist/TestData.java | 2 +- .../addons/badgelist/it/AbstractViewTest.java | 2 +- .../vaadin/addons/badgelist/it/ViewIT.java | 2 +- .../frontend/styles/fc-badge-list.css | 20 +++++++++++++++++++ 12 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java index 6d7cd05..4714b4f 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java +++ b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts index f413ee4..175845b 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -250,13 +250,13 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit const hiddenBadges = Array.from(this.querySelectorAll('[slot="badges"][hidden]')); this.overflowItems = []; hiddenBadges.forEach(hiddenBadge => { - const copy = hiddenBadge.cloneNode(true) as HTMLElement; + const copy = hiddenBadge.cloneNode(true); copy.removeAttribute("slot"); copy.removeAttribute("hidden"); copy.style.margin = '5px'; // Copy computed host styles so clones render correctly inside the overlay. if (this._isAura) { - const computed = getComputedStyle(hiddenBadge as HTMLElement); + const computed = getComputedStyle(hiddenBadge); copy.style.color = computed.color; copy.style.backgroundColor = computed.backgroundColor; copy.style.backgroundClip = computed.backgroundClip; diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java index 1343bbc..7ddf7ab 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java index 1560058..9682761 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java index 941f975..a568e43 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java index c1b812d..217d523 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java index f4ca609..38f388e 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java index 6b66040..31ff4ad 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java index dd90c93..63590dc 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java index ec65558..7d9e058 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java index 40b525b..c278273 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css index 608204e..6422c87 100644 --- a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css +++ b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css @@ -1,3 +1,23 @@ +/*- + * #%L + * Badge List Add-on + * %% + * Copyright (C) 2023 - 2026 Flowing Code + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * #L% + */ + /* for hidden badges in the overflow badge */ .custom-styled-badge { background-color: lightgreen;