Migrate component styling to registerStyles for Vaadin 25 compatibility#7
Conversation
The refactor is needed for Vaadin 25 compatibility.
WalkthroughThis update bumps the package version to 2.1.0 and refactors the fc-custom-button component to adopt Vaadin's themable mixin for styling instead of Polymer template-based styles. Manifest entries are pruned, and copyright years are updated across relevant files. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 6✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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 |
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
34-41:⚠️ Potential issue | 🟠 MajorUpdate
@vaadin/dependencies from 24.x to 25.x* for Vaadin 25 compatibility.All
@vaadin/*packages are pinned to^24.4.0, but Vaadin 25 uses25.xversions (e.g.,@vaadin/button@25.0.4). Update the following dependencies in lines 35-39:
@vaadin/button:^24.4.0→^25.0.0@vaadin/dialog:^24.4.0→^25.0.0@vaadin/icon:^24.4.0→^25.0.0@vaadin/progress-bar:^24.4.0→^25.0.0@vaadin/vaadin-themable-mixin:^24.4.0→^25.0.0
🧹 Nitpick comments (1)
src/fc-custom-button.js (1)
23-37: Consider whether the:host([part='custom-button'])selector is necessary.The
:host([part='custom-button'])selector on line 24 only matches when thepartattribute is set on the host element. SinceregisterStylesalready scopes these styles exclusively tofc-custom-buttonelements, a plain:hostselector would suffice — unless you intend to have somefc-custom-buttoninstances withoutpart="custom-button"that should not receive these styles. If all instances should be styled, simplify to:host.♻️ Suggested simplification
registerStyles('fc-custom-button', css` - :host([part='custom-button']) { + :host { border-radius: 6px; box-shadow: 0 4px 9px `#00000024`;
This upgrade is needed to fix FlowingCode/WhatsappButton#21
As the upgrade is done in order to be able to support also Vaadin 25, the version was updated to 2.1.0.
Summary by CodeRabbit