Migrate to native Vaadin Badge component#40
Merged
javier-godoy merged 17 commits intomasterfrom Apr 15, 2026
Merged
Conversation
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.
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 54 minutes and 5 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (19)
WalkthroughReplaces the add-on's custom Badge implementation with Vaadin's native Badge (requires Vaadin 25.1+), removes the custom Badge class and CSS, updates the frontend component to use ThemeDetectionMixin and vaadin-badge, enables the experimental badge feature flag, bumps project to 2.0.0-SNAPSHOT and Java target to 21, and updates demos and test resources accordingly. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Member
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. 🤖 Generated with Claude Code |
javier-godoy
requested changes
Apr 9, 2026
Member
javier-godoy
left a comment
javier-godoy
left a comment
There was a problem hiding this comment.
Three issues in fc-badge-list.ts worth addressing before merge.
github-project-automation
bot
moved this from To Do
to In Progress
in Flowing Code Addons
javier-godoy
requested changes
Apr 13, 2026
Member
javier-godoy
left a comment
javier-godoy
left a comment
There was a problem hiding this comment.
LGTM. Please squash WIP commits
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.
|
Member
Author
Done @javier-godoy |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts (1)
31-35: Align_overflowBadgetype with the rendered<vaadin-badge>element.
_overflowBadgeis typed asHTMLDivElementbut now references a<vaadin-badge>custom element. Change toHTMLElementfor correct type checking.♻️ Proposed fix
- _overflowBadge!: HTMLDivElement + _overflowBadge!: HTMLElementAlso applies to: 283-287
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts` around lines 31 - 35, The _overflowBadge property in the BadgeList class is incorrectly typed as HTMLDivElement while the template renders a <vaadin-badge> custom element; update the declaration of _overflowBadge to use a more appropriate type (HTMLElement) and adjust any other similar declarations in this file (e.g., the other _overflowBadge declaration later in the file) so type checking matches the rendered vaadin-badge element; locate the property by name (_overflowBadge) within the BadgeList class and change its type annotation from HTMLDivElement to HTMLElement.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/test/resources/META-INF/frontend/styles/fc-badge-list.css`:
- Line 1: The CSS header uses a nonstandard opener "/*-" which triggers
Stylelint's comment-whitespace-inside rule; replace the opener with a standard
CSS block comment opener "/*" at the start of the header in
src/test/resources/META-INF/frontend/styles/fc-badge-list.css so the comment
conforms to Stylelint rules and no other comment content needs changing.
---
Nitpick comments:
In `@src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts`:
- Around line 31-35: The _overflowBadge property in the BadgeList class is
incorrectly typed as HTMLDivElement while the template renders a <vaadin-badge>
custom element; update the declaration of _overflowBadge to use a more
appropriate type (HTMLElement) and adjust any other similar declarations in this
file (e.g., the other _overflowBadge declaration later in the file) so type
checking matches the rendered vaadin-badge element; locate the property by name
(_overflowBadge) within the BadgeList class and change its type annotation from
HTMLDivElement to HTMLElement.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 662883c8-f375-4721-8bca-afd3ff3ed33a
📒 Files selected for processing (13)
README.mdsrc/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.javasrc/main/resources/META-INF/resources/frontend/src/fc-badge-list.tssrc/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/Person.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.javasrc/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.javasrc/test/resources/META-INF/frontend/styles/fc-badge-list.css
✅ Files skipped from review due to trivial changes (10)
- 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/BadgeListDemo.java
- src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java
- src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java
- src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java
- src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java
- README.md
- src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java
- src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java
| @@ -1,4 +1,23 @@ | |||
| /* FOR VAADIN 25 */ | |||
| /*- | |||
There was a problem hiding this comment.
Fix header comment opener to satisfy Stylelint.
/*- triggers comment-whitespace-inside; use a standard CSS block comment opener.
🧹 Proposed fix
-/*-
+/*📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /*- | |
| /* |
🧰 Tools
🪛 Stylelint (17.7.0)
[error] 1-1: Expected whitespace after "/*" (comment-whitespace-inside)
(comment-whitespace-inside)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/test/resources/META-INF/frontend/styles/fc-badge-list.css` at line 1, The
CSS header uses a nonstandard opener "/*-" which triggers Stylelint's
comment-whitespace-inside rule; replace the opener with a standard CSS block
comment opener "/*" at the start of the header in
src/test/resources/META-INF/frontend/styles/fc-badge-list.css so the comment
conforms to Stylelint rules and no other comment content needs changing.
javier-godoy
approved these changes
Apr 15, 2026
github-project-automation
bot
moved this from In Progress
to Pending release
in Flowing Code Addons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #34
Summary by CodeRabbit
New Features
Refactor
Chores