EPMRPP-110044 || Add props to customize DateRange and DateRangeFormField components

[siarheirazuvalau]

Description

Added customization props to DateRangeFormField component to allow independent styling of start and end date pickers.

Changes

• Added four optional props to DateRangeFormField:

  • startPopperClassName - custom class for start date picker popper
  • startCalendarClassName - custom class for start date picker calendar
  • endPopperClassName - custom class for end date picker popper
  • endCalendarClassName - custom class for end date picker calendar

• Updated DateRange component to accept and pass these props to respective DatePicker instances

Props Details

All props are optional (default to empty string) and allow consumers to customize the appearance of individual date pickers independently.

PR Checklist

• Have you verified that the PR is pointing to the correct target branch? (develop for features/bugfixes, other if mentioned in the task)
• Have you verified that your branch is consistent with the target branch and has no conflicts? (if not, make a rebase under the target branch)
• Have you checked that everything works within the branch according to the task description and tested it locally?
• Have you run the linter (npm run lint) prior to submission? Enable the git hook on commit in your IDE to run it and format the code automatically.
• Have you run the tests locally and added/updated them if needed?
• Have you checked that app can be built (npm run build)?
• Have you checked that no new circular dependencies appreared with your changes? (the webpack plugin reports circular dependencies within the dev npm script)
• Have you made sure that all the necessary pipelines has been successfully completed?
• If the task requires translations to be updated, have you done this by running the manage:translations script?
• Have you added the link to the PR in the Jira ticket comments?

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch bugfix/EMRPP-110044-add-props-to-customize-DateRangeFormField

---

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

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.23%. Comparing base (2aa56e4) to head (82e557f).

Additional details and impacted files

@@                Coverage Diff                @@
##           feature/upcoming    #4769   +/-   ##
=================================================
  Coverage             67.23%   67.23%           
=================================================
  Files                    87       87           
  Lines                   946      946           
  Branches                139      139           
=================================================
  Hits                    636      636           
  Misses                  282      282           
  Partials                 28       28           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.