-
Notifications
You must be signed in to change notification settings - Fork 185
Add RTL support #235
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
Add RTL support #235
Conversation
- Add react-with-directions to detect RTL/LTR - Change how styles are passed to default child components e.g. DefaultHandle, DefaultProgressBar so they're properly RLT/LTR-ified - Change how handle position is calculated based on direction
ljharb
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, this is a great addition!
src/Slider.jsx
Outdated
| } | ||
| return ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL; | ||
| if (direction === DIRECTIONS.RTL) { | ||
| return 100 - (((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we pull the ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL out into its own variable?
majapw
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great, one small nit!
stories/ExampleSlider.jsx
Outdated
| }) | ||
| .add('RTL Custom Handle', () => { | ||
| function MyHandle({ | ||
| styles, css, style, handleRef, ...passProps |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
all these object keys should be in their own line, since the entire literal doesn’t fit on its own line.
react-with-directionto detect RTL/LTRe.g.
DefaultHandle,DefaultProgressBarso they're properlyRLT/LTR-ified
Also added new storybook examples, some tests, and a note in the docs.