refactor: add theme attribute to context menu to allow to scope styles

[paodb]

Close #18

This will also fix FlowingCode/BadgeList#28.

Summary by CodeRabbit

• Style
  • Updated context menu styling for improved visual consistency in the Day of Week Selector component.
  • Reorganized CSS styling structure for better maintainability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR scopes the vaadin-context-menu CSS styling rules to the DayOfWeekSelector component by relocating styling from a global stylesheet to a dedicated CSS file with a scoped theme attribute, preventing unintended styling of context menus in other components.

Changes

Cohort / File(s)	Summary
DayOfWeekSelector Java Annotation src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java	Added @CssImport annotation for vaadin-context-menu-list-box.css with themeFor = "vaadin-context-menu-list-box" to link scoped stylesheet; updated copyright year to 2023 - 2026
Frontend CSS Reorganization src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css, src/main/resources/META-INF/frontend/styles/vaadin-context-menu-list-box.css	Removed context-menu item spacing rules from main stylesheet; introduced new dedicated CSS file with host selector targeting fc-day-of-week-selector-context-menu theme, preserving original padding, display, and gap properties
Frontend TypeScript Theme Binding src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts	Added theme="fc-day-of-week-selector-context-menu" attribute to context menu element in render template; updated copyright year to 2023 - 2026

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• fix: add day buttons spacing #16: Related context-menu styling and theme attribute changes applied to the same component
• Add overflow button when component is too narrow #14: Related frontend integration modifications involving context-menu overflow handling and vaadin-context-menu list-box styling

Suggested reviewers

• javier-godoy

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a theme attribute to the context menu to scope styles, which is the primary objective of the PR.
Linked Issues check	✅ Passed	The PR successfully addresses issue #18 by adding theme-scoped CSS rules and issue #28 by preventing style leakage from DayOfWeekSelector affecting other components.
Out of Scope Changes check	✅ Passed	All changes directly support the objective of scoping context-menu CSS: theme attribute addition, new CSS file, CSS import annotation, and copyright year updates are all in-scope.
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

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01522ff and 58cd036.

📒 Files selected for processing (4)

• src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java
• src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css
• src/main/resources/META-INF/frontend/styles/vaadin-context-menu-list-box.css
• src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts

🔇 Additional comments (4)

src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css (1)

1-56: LGTM!

The removal of the global vaadin-context-menu-overlay vaadin-context-menu-list-box::part(items) styles is correct. These styles are now properly scoped in the new vaadin-context-menu-list-box.css file, which addresses the cross-component style leakage issue described in the linked issues.

src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java (1)

48-49: LGTM!

The @CssImport annotation with themeFor = "vaadin-context-menu-list-box" correctly scopes the CSS to the list-box component. This works in conjunction with the theme attribute set in the TypeScript template to ensure styles only apply to this component's context menu.

src/main/resources/META-INF/frontend/styles/vaadin-context-menu-list-box.css (1)

21-25: LGTM!

The scoped CSS implementation is well-designed:

• The :host([theme~='fc-day-of-week-selector-context-menu']) selector correctly scopes styles to only context menus with this specific theme attribute
• Using ~= allows the theme to coexist with other theme values
• The CSS variable with fallback var(--fc-days-of-week-selector-button-space, var(--lumo-space-m)) enables customization while providing sensible defaults

src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts (1)

222-222: LGTM!

The theme="fc-day-of-week-selector-context-menu" attribute correctly identifies this context menu instance. Vaadin's context-menu propagates theme attributes to its internal components (overlay, list-box), allowing the scoped CSS in vaadin-context-menu-list-box.css to match via the :host([theme~='fc-day-of-week-selector-context-menu']) selector.

Please verify the context menu styling is correctly applied when the component renders. This can be confirmed in the browser dev tools by checking that:

1. The vaadin-context-menu-list-box inside the overlay has the theme="fc-day-of-week-selector-context-menu" attribute
2. The [part="items"] element has the expected inline-flex display and gap styling

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud