Migrate to native Vaadin Badge component

README.md

@@ -19,10 +19,11 @@ 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
 
-[Online demo here](http://addonsv24.flowingcode.com/badge-list)
+[Online demo here](http://addonsv25.flowingcode.com/badge-list)
 
 ## Download release
 

pom.xml

@@ -4,21 +4,21 @@
 
 	<groupId>com.flowingcode.vaadin.addons</groupId>
 	<artifactId>badge-list-addon</artifactId>
-	<version>1.2.1-SNAPSHOT</version>
+	<version>2.0.0-SNAPSHOT</version>
 	<name>Badge List Add-on</name>
 	<description>Badge List Add-on for Vaadin Flow</description>
 	<url>https://www.flowingcode.com/en/open-source/</url>
 
 	<properties>
-        <vaadin.version>24.1.6</vaadin.version>
+        <vaadin.version>25.1.1</vaadin.version>
         <selenium.version>4.10.0</selenium.version>
-		<maven.compiler.source>17</maven.compiler.source>
-		<maven.compiler.target>17</maven.compiler.target>
+		<maven.compiler.source>21</maven.compiler.source>
+		<maven.compiler.target>21</maven.compiler.target>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.26</jetty.version>
-		<flowingcode.commons.demo.version>5.1.0</flowingcode.commons.demo.version>
+		<flowingcode.commons.demo.version>5.2.0</flowingcode.commons.demo.version>
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 
@@ -113,6 +113,11 @@
 			<artifactId>vaadin-core</artifactId>
 			<optional>true</optional>
 		</dependency>
+		<dependency>
+			<groupId>com.vaadin</groupId>
+			<artifactId>vaadin-dev</artifactId>
+			<optional>true</optional>
+		</dependency>
 		<dependency>
 			<groupId>org.slf4j</groupId>
 			<artifactId>slf4j-simple</artifactId>
@@ -135,10 +140,9 @@
 			<scope>test</scope>
 		</dependency>
 		<dependency>
-			<groupId>javax.servlet</groupId>
-			<artifactId>javax.servlet-api</artifactId>
-			<version>3.1.0</version>
-			<type>jar</type>
+			<groupId>jakarta.servlet</groupId>
+			<artifactId>jakarta.servlet-api</artifactId>
+			<version>6.1.0</version>
 			<scope>test</scope>
 		</dependency>
 		<dependency>
@@ -494,29 +498,6 @@
         	    	</build>
 	        </profile>
 
-		<profile>
-			<id>v25</id>
-			<properties>
-				<maven.compiler.source>21</maven.compiler.source>
-				<maven.compiler.target>21</maven.compiler.target>
-				<vaadin.version>25.0.2</vaadin.version>
-				<jetty.version>11.0.26</jetty.version>
-			</properties>		
-			<dependencies>
-                <dependency>
-                    <groupId>com.vaadin</groupId>
-                    <artifactId>vaadin-dev</artifactId>
-                    <optional>true</optional>
-                </dependency>
-                <dependency>
-                    <groupId>jakarta.servlet</groupId>
-                    <artifactId>jakarta.servlet-api</artifactId>
-                    <version>6.1.0</version>
-                    <scope>test</scope>
-                </dependency>
-            </dependencies>
-		</profile>
-
 	</profiles>
 
 </project>

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.
@@ -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 {
 

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.
@@ -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,26 +52,32 @@
   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);
     }
 
     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,29 @@
       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;
+    }
+
+    :host([data-application-theme="lumo"]) [part="overflow-badge"] vaadin-icon {
+      width: 1em;
+      height: 1em;
+    }
+
     :host(:not([has-label])) [part='label']{
       display:none;
     }
@@ -129,6 +160,10 @@
     this.theme = theme;
   }
 
+  private get _isAura(): boolean {
+    return this.getAttribute('data-application-theme') === 'aura';
+  }
+
   /**
    * Override getter from `ResizeMixin` to observe parent.
    *
@@ -216,25 +251,35 @@
       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);
+        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 });
     });
   }
 
   render() {
+    const icon = this._isAura ? 'vaadin:plus' : 'lumo:plus';
     return html`
       <div part="label">
           <label for="container">${this.label}</label>
       </div>
       <div part="container" class="container" id="container">
    	    <slot name="badges"></slot>
         <vaadin-context-menu open-on="click" .items=${this.overflowItems}>
-        	<span part="overflow-badge" theme="badge ${this.theme}" class="overflow-badge" hidden>
-            <vaadin-icon icon="lumo:plus" style="padding: var(--lumo-space-xs)"></vaadin-icon>
+          <vaadin-badge part="overflow-badge" theme="${ifDefined(this.theme ?? undefined)}" hidden>
+            <vaadin-icon icon="${icon}" slot="icon"></vaadin-icon>
             ${this.hiddenCount}
-          </span>
-      	</vaadin-context-menu>        
+          </vaadin-badge>
+        </vaadin-context-menu>
       </div>
     `;
   }