Skip to content

feat: add named part in shadow DOM#19

Merged
paodb merged 8 commits intomasterfrom
feat-named-part
Feb 12, 2026
Merged

feat: add named part in shadow DOM#19
paodb merged 8 commits intomasterfrom
feat-named-part

Conversation

@javier-godoy
Copy link
Member

@javier-godoy javier-godoy commented Feb 11, 2026

Add a named part so that the component can be styled without injecting CSS into the shadow DOM.

Summary by CodeRabbit

  • Chores

    • Version bumped to 2.1.0-SNAPSHOT.
    • Vaadin framework dependency updated to 14.11.14.
    • Copyright headers updated to 2026.
  • Style

    • Enhanced alert component styling with part attributes for improved customization.
    • Added variant-based styling (boring and funny alert styles).
    • Improved button styling within alerts with level-specific colors.

@coderabbitai
Copy link

coderabbitai bot commented Feb 11, 2026

Walkthrough

The PR upgrades the project from 2.0.1-SNAPSHOT to 2.1.0-SNAPSHOT, updates Vaadin from 14.8.1 to 14.11.14, introduces shared versioning properties for dependencies, migrates CSS dependencies from deprecated StyleSheet to CssImport annotations, adds CSS part attributes for styling, consolidates CSS files, and updates copyright headers to 2026.

Changes

Cohort / File(s) Summary
Configuration & Gitignore
.gitignore, pom.xml
Adds build/output and frontend-generated file patterns to gitignore; updates project version to 2.1.0-SNAPSHOT, Vaadin to 14.11.14, introduces flowingcode.commons.demo.version property with profile-specific overrides.
Java Demo Classes
src/test/java/com/flowingcode/vaadin/addons/granitealert/GranitealertDemo.java, src/test/java/com/flowingcode/vaadin/addons/granitealert/GranitealertDemoView.java
Replaces deprecated @StyleSheet annotation with @CssImport pointing to demo-styles.css; adds @DemoSource annotation in GranitealertDemo; removes custom-granite-styles.css reference; updates copyright year.
Frontend Component & Styles
src/main/resources/META-INF/frontend/granite-alert/granite-alert.js, src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css, src/test/resources/META-INF/resources/frontend/styles/granitealert/custom-granite-styles.css
Adds Shadow DOM part="alert" attribute to granite-alert component; consolidates CSS by removing custom-granite-styles.css entirely and migrating its styling into demo-styles.css using new ::part(alert) selectors with level-based button color variants.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: adding a named part to the shadow DOM for external styling purposes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat-named-part

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments
src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css (1)

27-31: Remove vendor-prefixed linear-gradient values.

linear-gradient has been unprefixed in all major browsers for years. The -webkit-, -o-, and -moz- prefixes are unnecessary and flagged by Stylelint.

♻️ Suggested fix
 granite-alert-mixin.funny::part(alert) {
-    background: purple; 
-   	background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet);
-   	background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
-   	background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
-   	background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+    background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);

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.

❤️ Share

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

@sonarqubecloud
Copy link

@javier-godoy javier-godoy requested a review from paodb February 11, 2026 18:15
@javier-godoy javier-godoy marked this pull request as ready for review February 11, 2026 18:15
@paodb paodb merged commit 08db78b into master Feb 12, 2026
7 checks passed
@github-project-automation github-project-automation bot moved this from To Do to Pending release in Flowing Code Addons Feb 12, 2026
@paodb paodb deleted the feat-named-part branch February 12, 2026 17:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Pending release

Development

Successfully merging this pull request may close these issues.

2 participants