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 3af5aaafa154e23b9aa3f75f42648c46da5c1aeb 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..b890c2e 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 2ad6183fbfac204c4166ff06645ed35f000a7275 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 93f6ca93824e043307327d1707d51f65302138ff 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 8b76a7e7bb03ec9a793da8ab935d8aa143f7e86c 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 44f8a37cb42ec96b50efe000cdbc28184010eb69 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 b890c2e..f5de470 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 029cc85aa0e0fb8a71f881df7fe065f20c27cf2a 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 239d554d8c599535dbe7714b7f301420dc7f444a 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 | 7 +++++-- 1 file changed, 5 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 f5de470..eb62589 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 @@ -147,6 +147,10 @@ export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(Lit this.theme = theme; } + private get _isAura(): boolean { + return this.getAttribute('data-application-theme') === 'aura'; + } + /** * Override getter from `ResizeMixin` to observe parent. * @@ -241,8 +245,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 6762d7a16c2db0167a4fd332789461c7ac1578bb 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 | 24 ++++++++++++++++++- 1 file changed, 23 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 eb62589..76a8162 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 @@ -97,6 +97,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; @@ -234,10 +247,19 @@ 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.borderColor = computed.borderTopColor; + copy.style.fontSize = computed.fontSize; + } const item = document.createElement('div'); item.appendChild(copy); this.overflowItems.push({ component: item }); From 4427314c17a68df126060500a5e7433da3591100 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 22b88847b1783666e94fecd1ced8f9f94e795cff 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 f14cb3c81efd30d8348b7791e9e4f3bcfcf55e30 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 458b5f70ac88b6c005b59a35cab1cbc3f3ba0408 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 76a8162..93ded4d 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. @@ -247,13 +247,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;