Skip to content

Migrate to native Vaadin Badge component#40

Draft
paodb wants to merge 17 commits intomasterfrom
25.1
Draft

Migrate to native Vaadin Badge component#40
paodb wants to merge 17 commits intomasterfrom
25.1

Conversation

@paodb
Copy link
Copy Markdown
Member

@paodb paodb commented Apr 1, 2026

Summary

  • Updated component version to 2.0.0-SNAPSHOT
  • Upgraded to Vaadin 25.1.1 and Java 21
  • Removed the custom Badge class and CSS in favor of Vaadin's native com.vaadin.flow.component.badge.Badge
  • Updated the fc-badge-list web component to use vaadin-badge
  • Added ThemeDetectionMixin to now which theme is being used
  • Fixed Aura theme styling for the overflow badge (shadow DOM boundary workaround)
  • Fixed Aura theme styling for hidden badges rendered inside the context menu
  • Updated all demos to use the native Vaadin Badge API
  • Added dynamic theme switching support in the demo
  • Updated license headers

Closes #34

Summary by CodeRabbit

  • New Features

    • Added Aura theme support with enhanced styling and visual customizations
  • Refactor

    • Migrated from custom badge implementation to Vaadin's native badge component
    • Updated minimum requirements to Vaadin 25.1.1 and Java 21
  • Chores

    • Consolidated build toolchain by removing version-specific profiles
    • Updated documentation with version 2.x support information

paodb added 17 commits April 1, 2026 16:36
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.
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.
Badge styles are now managed by vaadin-badge's own shadow DOM.
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.
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Apr 1, 2026

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 1, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9e2b0822-a4ad-4fbf-b7b7-c034be190e4f

📥 Commits

Reviewing files that changed from the base of the PR and between a2e63ff and 458b5f7.

📒 Files selected for processing (22)
  • README.md
  • pom.xml
  • src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java
  • src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java
  • src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
  • src/main/resources/META-INF/resources/frontend/styles/badge.css
  • src/main/resources/vaadin-featureflags.properties
  • src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java
  • src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java
  • src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css
  • src/test/resources/META-INF/frontend/styles/fc-badge-list.css
  • src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css
  • src/test/resources/META-INF/frontend/styles/styled-badges-demo.css
💤 Files with no reviewable changes (3)
  • src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css
  • src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java
  • src/main/resources/META-INF/resources/frontend/styles/badge.css

Walkthrough

Migrates BadgeList add-on to Vaadin 25.1+ (v2.0.0) by replacing the custom Badge component with Vaadin's native Badge component. Removes custom Badge class and custom badge.css stylesheet, updates TypeScript component with ThemeDetectionMixin for theme awareness, enables the experimental badge component feature flag, upgrades Java target to version 21, and updates all demos to use the new Badge API.

Changes

Cohort / File(s) Summary
Version & Build Configuration
README.md, pom.xml
Bumped project version to 2.0.0, upgraded Vaadin from 24.1.6 to 25.1.1, Java compiler from 17 to 21, commons.demo from 5.1.0 to 5.2.0, replaced javax.servlet with jakarta.servlet:6.1.0, removed the v25 Maven profile, updated online demo URL.
Custom Badge Component Removal
src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java
Deleted entire Badge class that extended Span; removing public constructors and theme-management methods (addThemeName, removeThemeName).
BadgeList Core Migration
src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java, src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
Updated BadgeList to use com.vaadin.flow.component.badge.Badge instead of custom Badge, added ThemeDetectionMixin for theme awareness, replaced badge.css import with vaadin-badge component integration, refactored overflow rendering to use vaadin-badge overlay with dynamic icon selection (vaadin:plus for Aura, lumo:plus for Lumo), added Aura-specific computed style copying for overlay menu items.
Custom Styling Removal
src/main/resources/META-INF/resources/frontend/styles/badge.css
Deleted entire custom badge CSS stylesheet including base layout, color variants, size variants, and theme selectors.
Feature Flag & Test Infrastructure
src/main/resources/vaadin-featureflags.properties, src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
Enabled experimental com.vaadin.experimental.badgeComponent feature flag, replaced @Theme annotation with configurePage(AppShellSettings) method override for dynamic theme initialization.
Demo Updates
src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java, StyledBadgesDemo.java, ReadOnlyBinderDemo.java
Updated all demo files to import and use com.vaadin.flow.component.badge.Badge, replaced custom theme names with Badge API's theme variants (BadgeVariant.ERROR, BadgeVariant.SUCCESS), replaced icon-composition patterns with setIcon() method, removed Vaadin version conditionals from annotations.
Copyright Year Updates
BadgeListDemoView.java, BaseBadgeListDemo.java, DemoView.java, Person.java, TestData.java, AbstractViewTest.java, ViewIT.java
Updated copyright year ranges from 2023–2024 to 2023–2026; no functional code changes.
Test Resources & CSS
src/test/resources/META-INF/frontend/styles/*
Removed styled-badges-demo-v25.css, updated badge-list-demo-styles.css with fallback for --lumo-font-size-l, added Maven license header to fc-badge-list.css, narrowed .custom-styled-badge selector scope to fc-badge-list .custom-styled-badge in styled-badges-demo.css.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Suggested reviewers

  • mlopezFC
  • javier-godoy
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Migrate to native Vaadin Badge component' clearly and concisely summarizes the main change: replacing a custom Badge implementation with Vaadin's native Badge component.
Linked Issues check ✅ Passed The PR fully addresses issue #34 by replacing the custom Badge class with Vaadin 25.1's native Badge component, removing custom Badge CSS, updating BadgeList and fc-badge-list to use vaadin-badge, and migrating all demos to the native Badge API.
Out of Scope Changes check ✅ Passed The PR includes version bumps, Java 17→21 upgrade, javax→jakarta servlet migration, and license header updates. While broader than strictly necessary, these are reasonable infrastructure changes supporting the Badge migration and Vaadin 25.1 adoption.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 25.1

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Vaadin 25.1 introduces Badge component

1 participant