From b7691857e45f10dc40243bb9b27ab1e7207f7042 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Fri, 9 Jan 2026 10:55:59 -0300 Subject: [PATCH 1/6] ci: upgrade v25 profile to Vaadin 25.0.2 --- pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pom.xml b/pom.xml index f13ea15..a166c9b 100644 --- a/pom.xml +++ b/pom.xml @@ -498,7 +498,7 @@ 21 21 - 25.0.0-beta2 + 25.0.2 11.0.26 From 339d26a69d478628455c31efec0b4bc9273ae8b6 Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Fri, 9 Jan 2026 10:57:21 -0300 Subject: [PATCH 2/6] ci: add vaadin-dev dependency to v25 profile --- pom.xml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/pom.xml b/pom.xml index a166c9b..cfee9ac 100644 --- a/pom.xml +++ b/pom.xml @@ -501,6 +501,13 @@ 25.0.2 11.0.26 + + + com.vaadin + vaadin-dev + true + + From bb6b897800d4bcf8de70c62325d6ae83d12c27af Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Fri, 9 Jan 2026 14:09:59 -0300 Subject: [PATCH 3/6] refactor: replace badge styles import to use badge.css directly Update needed to make the component compatible with Vaadin 24 & Vaadin 25. --- .../vaadin/addons/badgelist/BadgeList.java | 3 +- .../resources/frontend/src/fc-badge-list.ts | 4 +- .../resources/frontend/styles/badge.css | 187 ++++++++++++++++++ 3 files changed, 191 insertions(+), 3 deletions(-) create mode 100644 src/main/resources/META-INF/resources/frontend/styles/badge.css 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 a66d963..3b4ee3d 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java +++ b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java @@ -24,6 +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.dependency.JsModule; import java.util.ArrayList; import java.util.List; @@ -34,8 +35,8 @@ * @author Paola De Bartolo / Flowing Code */ @SuppressWarnings("serial") -@JsModule("@vaadin/vaadin-lumo-styles/badge-global.js") @JsModule("./src/fc-badge-list.ts") +@CssImport("./styles/badge.css") @Tag("fc-badge-list") public class BadgeList extends Component implements HasTheme, HasSize, HasLabel { 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 e831b5d..847b6dc 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,7 +20,7 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js'; import '@vaadin/context-menu'; import type { ContextMenuItem } from '@vaadin/context-menu'; -import { badge } from '@vaadin/vaadin-lumo-styles/badge.js'; +import badgeStylesContent from '../styles/badge.css?inline'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import { css, html, LitElement } from 'lit'; import { customElement, property, query, queryAssignedNodes, state } from 'lit/decorators.js'; @@ -50,7 +50,7 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { private overflowItems: ContextMenuItem[] = []; static styles = [ - badge.styleSheet, + badgeStylesContent, css` :host { diff --git a/src/main/resources/META-INF/resources/frontend/styles/badge.css b/src/main/resources/META-INF/resources/frontend/styles/badge.css new file mode 100644 index 0000000..a0f9839 --- /dev/null +++ b/src/main/resources/META-INF/resources/frontend/styles/badge.css @@ -0,0 +1,187 @@ +/*- + * #%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 3e4cd6f70994553c9f1a8813a8f13e1dfe3f697e Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Fri, 9 Jan 2026 14:21:23 -0300 Subject: [PATCH 4/6] feat(demo): add AppShellConfiguratorImpl for Vaadin 25 compatibility --- pom.xml | 1 + .../addons/AppShellConfiguratorImpl.java | 28 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java diff --git a/pom.xml b/pom.xml index cfee9ac..fa81b79 100644 --- a/pom.xml +++ b/pom.xml @@ -470,6 +470,7 @@ **/it/* **/DemoView.class **/DemoLayout.class + **/AppShellConfiguratorImpl.class diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java new file mode 100644 index 0000000..d6dc5f0 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java @@ -0,0 +1,28 @@ +/*- + * #%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% + */ +package com.flowingcode.vaadin.addons; + +import com.vaadin.flow.component.page.AppShellConfigurator; +import com.vaadin.flow.theme.Theme; + +@Theme +public class AppShellConfiguratorImpl implements AppShellConfigurator { + +} From 82dca8df0c327b713d46a8ccd0b632c7ee535c6b Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 15 Jan 2026 11:18:50 -0300 Subject: [PATCH 5/6] fix(demo): update styles in StyledBadgesDemo for V25 compatibility --- .../addons/badgelist/StyledBadgesDemo.java | 17 +++++++---- .../frontend/styles/fc-badge-list.css | 8 ++++++ .../styles/styled-badges-demo-v25.css | 28 +++++++++++++++++++ 3 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 src/test/resources/META-INF/frontend/styles/fc-badge-list.css create 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/StyledBadgesDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java index 01aa594..6ceffb2 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java @@ -32,19 +32,27 @@ import java.util.List; @DemoSource -// #if vaadin eq 0 +//#if vaadin eq 0 @DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css", caption = "styled-badges-demo.css") -// #endif +@DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css", + caption = "styled-badges-demo-v25.css") +@DemoSource(value = "/src/test/resources/META-INF/frontend/styles/fc-badge-list.css", + caption = "fc-badge-list.css") +//#endif @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 @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)); @@ -101,7 +109,6 @@ public StyledBadgesDemo() { // #endif // show-source add(layout3); // end-block - } // #if vaadin eq 0 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 new file mode 100644 index 0000000..098194b --- /dev/null +++ b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css @@ -0,0 +1,8 @@ +/* FOR VAADIN 25 */ +/* for hidden badges in the overflow badge */ +.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-v25.css b/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css new file mode 100644 index 0000000..c211522 --- /dev/null +++ b/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css @@ -0,0 +1,28 @@ +/*- + * #%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 From 80baf4f6adc411e9916a793885f3b1552350f12f Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 15 Jan 2026 11:26:33 -0300 Subject: [PATCH 6/6] build: update version to 1.2.0-SNPASHOT Version update indicating component updates for Vaadin 24 & Vaadin 25 support. --- pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pom.xml b/pom.xml index fa81b79..5f90fc6 100644 --- a/pom.xml +++ b/pom.xml @@ -4,7 +4,7 @@ com.flowingcode.vaadin.addons badge-list-addon - 1.1.2-SNAPSHOT + 1.2.0-SNAPSHOT Badge List Add-on Badge List Add-on for Vaadin Flow https://www.flowingcode.com/en/open-source/