Skip to content

fix: fix component styles for vaadin 25#110

Merged
paodb merged 2 commits intomasterfrom
vaadin-25-styles
Mar 5, 2026
Merged

fix: fix component styles for vaadin 25#110
paodb merged 2 commits intomasterfrom
vaadin-25-styles

Conversation

@javier-godoy
Copy link
Member

@javier-godoy javier-godoy commented Mar 3, 2026

Summary by CodeRabbit

  • New Features

    • Month Calendar now includes bundled theme styling for improved layout, selected-date and hover visuals.
  • Bug Fixes

    • Template rendering corrected so week-number toggling and theming apply reliably.
  • Refactor

    • Improved CSS fallbacks and explicit theme attribute handling for more consistent appearance.
  • Chores

    • Copyright years updated to 2026; demo artifact packaging adjusted to omit a specific class.

@coderabbitai
Copy link

coderabbitai bot commented Mar 3, 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: 65e0da81-6575-44e3-bb4e-03a615694396

📥 Commits

Reviewing files that changed from the base of the PR and between 12b94ee and ded8ac4.

📒 Files selected for processing (6)
  • src/main/java/com/flowingcode/addons/ycalendar/MonthCalendar.java
  • src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js
  • src/main/resources/META-INF/frontend/fc-inline-date-picker/fc-inline-date-picker.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/vaadin-month-calendar.css
  • src/test/resources/META-INF/frontend/styles/test_year-month-calendar.css
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js
  • src/main/resources/META-INF/frontend/fc-inline-date-picker/fc-inline-date-picker.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js

Walkthrough

Adds a static theme and CSS for the month calendar, fixes inline date-picker template and theme binding, updates copyright years, adds a test AppShellConfiguratorImpl (and excludes it from the demo JAR), and introduces vaadin-month-calendar.css.

Changes

Cohort / File(s) Summary
Build Configuration
pom.xml
Adds an exclusion in the demo-jar profile to omit AppShellConfiguratorImpl.class from the demo artifact.
Component Styling — Java
src/main/java/com/flowingcode/addons/ycalendar/MonthCalendar.java
Adds @CssImport(..., themeFor = "vaadin-month-calendar") and updates copyright year.
Component Styling — Frontend templates & mixin
src/main/resources/META-INF/frontend/fc-inline-date-picker/fc-inline-date-picker.js, src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js
Fixes malformed template closing, sets theme="fc-month-calendar" on the month-calendar element, and prefixes dynamic theme with fc-month-calendar.
Component Styling — CSS
src/main/resources/META-INF/frontend/fc-month-calendar/vaadin-month-calendar.css
Adds host-scoped CSS for fc-month-calendar (grid, selection, hover, pseudo-elements) to apply the static theme.
Runtime theming hook
src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js
When wrapping the month scroller, conditionally calls _set_theme("fc-month-calendar") if _set_theme exists before update flow.
Test Implementation
src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
Adds AppShellConfiguratorImpl implementing AppShellConfigurator that initializes DynamicTheme.LUMO when supported (class added; excluded from demo JAR).
Test Styling
src/test/resources/META-INF/frontend/styles/test_year-month-calendar.css
Updates holiday/weekend CSS to use fallbacks and introduces --background-color for holiday background; updates copyright years.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • mlopezFC
  • paodb
🚥 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 PR title 'fix: fix component styles for vaadin 25' accurately reflects the main objective of the changeset, which involves updating CSS styling integration, theme bindings, and creating new styling rules across multiple components to support Vaadin 25.
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 (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch vaadin-25-styles

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.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 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/main/resources/META-INF/frontend/fc-inline-date-picker/fc-inline-date-picker.js`:
- Around line 88-90: In the render template the opening tag <fc-month-calendar
...> is closed with the wrong tag </fc-year-month-field>, breaking DOM
rendering; locate the template (render method) where fc-month-calendar is used
with .month="${this.displayDate}" and `@date-selected`="${this.__onDateSelected}"
and replace the mismatched closing tag </fc-year-month-field> with the correct
closing tag </fc-month-calendar> so the element pair is consistent (also verify
.showWeekNumbers binding remains on the fc-month-calendar element).

In
`@src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js`:
- Around line 120-123: The static theme="fc-month-calendar" is being overridden
by theme$="[[theme]]" when the binding evaluates (so an empty theme clears
required base class); replace the two separate attributes with a single compound
binding that preserves the base theme and appends any inherited value (e.g.
remove theme="fc-month-calendar" and change theme$ usage to a compound binding
such as theme$="fc-month-calendar [[theme]]" or use a computed binding like
theme$="[[computeTheme(theme)]]" with a computeTheme(theme) helper that returns
"fc-month-calendar" + (theme ? " " + theme : "") to ensure the base class always
remains present).

In
`@src/main/resources/META-INF/frontend/fc-month-calendar/vaadin-month-calendar.css`:
- Around line 30-31: Replace the chained simple :not() pseudo-classes with a
single complex :not() containing the three exclusions to satisfy
selector-not-notation: "complex"; specifically update the selector that targets
[part~='date'] (the rule using :not(:empty), :not([part~='disabled']),
:not([part~='selected']) on hover::before) to use one :not(...) that lists
:empty, [part~='disabled'], and [part~='selected'] so stylelint no longer flags
the rule.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d83d70d and ed6e83c.

📒 Files selected for processing (7)
  • pom.xml
  • src/main/java/com/flowingcode/addons/ycalendar/MonthCalendar.java
  • src/main/resources/META-INF/frontend/fc-inline-date-picker/fc-inline-date-picker.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/vaadin-month-calendar.css
  • src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
  • src/test/resources/META-INF/frontend/styles/test_year-month-calendar.css

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js (1)

120-122: Redundant static theme attribute.

The compound binding theme$="fc-month-calendar [[theme]]" on line 120 already includes the base theme. The static theme="fc-month-calendar" on line 122 is redundant since Polymer's attribute binding (theme$=) will override the static attribute when evaluated.

♻️ Proposed cleanup
              theme$="fc-month-calendar [[theme]]"
              on-key-down="_onKeyDown"
-              theme="fc-month-calendar"
            >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js`
around lines 120 - 122, Remove the redundant static attribute by deleting
theme="fc-month-calendar" from the element so the compound binding
theme$="fc-month-calendar [[theme]]" is the single source of truth; update any
tests or usages that might check for the static attribute and ensure the
component continues to rely on the theme$ binding (refer to the
theme$="fc-month-calendar [[theme]]" binding and the on-key-down handler
_onKeyDown in month-calendar-mixin.js to locate the element).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js`:
- Around line 120-122: Remove the redundant static attribute by deleting
theme="fc-month-calendar" from the element so the compound binding
theme$="fc-month-calendar [[theme]]" is the single source of truth; update any
tests or usages that might check for the static attribute and ensure the
component continues to rely on the theme$ binding (refer to the
theme$="fc-month-calendar [[theme]]" binding and the on-key-down handler
_onKeyDown in month-calendar-mixin.js to locate the element).

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ed6e83c and a34dcdd.

📒 Files selected for processing (5)
  • src/main/java/com/flowingcode/addons/ycalendar/MonthCalendar.java
  • src/main/resources/META-INF/frontend/fc-inline-date-picker/fc-inline-date-picker.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/month-calendar-mixin.js
  • src/main/resources/META-INF/frontend/fc-month-calendar/vaadin-month-calendar.css
  • src/test/resources/META-INF/frontend/styles/test_year-month-calendar.css
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/main/java/com/flowingcode/addons/ycalendar/MonthCalendar.java

@sonarqubecloud
Copy link

sonarqubecloud bot commented Mar 4, 2026

@javier-godoy javier-godoy marked this pull request as ready for review March 4, 2026 20:25
@paodb paodb merged commit 9a88f78 into master Mar 5, 2026
5 checks passed
@github-project-automation github-project-automation bot moved this from To Do to Pending release in Flowing Code Addons Mar 5, 2026
@paodb paodb deleted the vaadin-25-styles branch March 5, 2026 14:24
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