Skip to content

fix(styles): add RTL support for date range edge & select styles #669

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Subash-Chand-Thakuri
Copy link

Types of changes

-> This PR is UI Styles Changes

What types of changes does your code introduce?
-> This PR adds RTL (Right-To-Left) support for date selection ranges and also corrects the direction of the Next and Previous buttons in the calendar UI.

Put an x in the boxes that apply

  • [x ] Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description

Improves compatibility for RTL languages by adjusting border-radius and positioning styles using :dir(rtl) and :dir(ltr) selectors for the date range selection visibility and preview hovering effect. Here are some of the evidences:

Before fixing:
image

After fixing:
image

Video:
https://www.loom.com/share/bafd166e3a9b45b58675b96f72668b0a?sid=3d85d4a3-c5a1-423c-9d30-1f140830c63e

Related Issue: #xxx
Fixes #668

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The selected react-date-range and hover are not working for "rtl".
2 participants