Skip to content

Conversation

@desig9stein
Copy link
Contributor

@desig9stein desig9stein commented Oct 27, 2025

Closes IgniteUI/igniteui-webcomponents#1858

Required packages to test
theming: IgniteUI/igniteui-theming#489
web-components: IgniteUI/igniteui-webcomponents#1899

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

desig9stein and others added 4 commits October 30, 2025 11:33
…ines

- Adjust date selection, hover, and focus styles.
- Add support for range previews and various states specific to Fluent theme.
- Refactor styles to accommodate Fluent theme-specific variants.
@desig9stein desig9stein marked this pull request as ready for review November 6, 2025 15:24
@SisIvanova SisIvanova added the 💥 status: in-test PRs currently being tested label Nov 11, 2025
Copy link
Collaborator

@SisIvanova SisIvanova left a comment

Choose a reason for hiding this comment

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

All Themes (except Indigo)

  • Week number border - missing in WC and present in Angular

All Themes (except Bootstrap)

  • Range selection - hover special date - different colors in WC and Angular

Material Theme

  • Disabled dates - missing border in WC and present in Angular

Bootstrap Theme

  • Missing year/month selected box-shadow in Angular idle state
  • Range selection - differences in special dates colors
  • Dates in range selection border - missing in Angular and present in WC

Fluent Theme

  • Range selection - start date border - different colors in WC and Angular
  • Range selection - start date background discrepancy when the first date is special
  • Range selection - hover special date - different colors in WC and Angular

@didimmova
Copy link
Contributor

  • in a range selection, the special date on focus uses date-special-range-foreground for angular, I suppose it should be using date-special-range-focus-foreground
  • disabled current date in a range selection is styled differently

Fluent theme:

  • border radius of the range selection background doesn’t fit with the border of the range selection for angular


Indigo theme:

  • Date special in a range selection acts differently in angular and wc, the wc one is not using the right variables
  • On hover, the date-special’s border radius doesn’t fit correctly for angular
  • Border radius issues for date-special in range selection also
Screenshot 2025-11-17 at 9 52 13

Angular:
Screenshot 2025-11-17 at 9 58 23
Screenshot 2025-11-17 at 9 58 32

WC:
Screenshot 2025-11-17 at 10 00 12
Screenshot 2025-11-17 at 9 59 59

Screenshot 2025-11-17 at 10 06 28 Screenshot 2025-11-17 at 10 17 53 Screenshot 2025-11-17 at 10 19 20
Screen.Recording.2025-11-17.at.10.22.54.mov

Copy link
Collaborator

@SisIvanova SisIvanova left a comment

Choose a reason for hiding this comment

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

Material Theme - date current special & disabled - different foreground in Angular and WC
Screenshot 2025-11-17 at 3 12 32 PM

Copy link
Collaborator

@SisIvanova SisIvanova left a comment

Choose a reason for hiding this comment

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

Bootstrap theme - range selection - special dates different colors on focus
Screenshot 2025-11-18 at 9 57 45 AM

@didimmova
Copy link
Contributor

didimmova commented Nov 18, 2025

  • Angular Calendar has focus+hover styles for months/years view, WC Calendar doesn’t

Fluent theme:

Screenshot 2025-11-18 at 18 24 55 Screenshot 2025-11-18 at 18 24 12
Screen.Recording.2025-11-18.at.18.21.16.mov
Screen.Recording.2025-11-18.at.18.20.09.mov
Screenshot 2025-11-18 at 18 19 57

Indigo theme:

  • Special dates in a range selection get different borders on focus
Screenshot 2025-11-18 at 18 35 40 Screenshot 2025-11-18 at 18 35 09

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Unable to correctly style calendar using Sass themes from theming package

4 participants