Skip to content
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

Merged
merged 5 commits into from Aug 1, 2019

Conversation

@rcourtie
Copy link

commented Jul 30, 2019

  • Add react-with-direction 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

Also added new storybook examples, some tests, and a note in the docs.

Rodolphe Courtier added some commits Jun 28, 2019

Rodolphe Courtier
Add RTL support
- 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

@rcourtie rcourtie changed the title Rodo add rtl support Add RTL support Jul 30, 2019

@ljharb
Copy link
Collaborator

left a comment

Thanks, this is a great addition!

Show resolved Hide resolved src/DefaultHandle.jsx
Show resolved Hide resolved src/DefaultProgressBar.jsx
if (orientation === VERTICAL) {
return ((y - sliderBox.top) / sliderBox.height) * PERCENT_FULL;
}
return ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL;
if (direction === DIRECTIONS.RTL) {
return 100 - (((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL);

This comment has been minimized.

Copy link
@majapw

majapw Aug 1, 2019

Contributor

Can we pull the ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL out into its own variable?

@majapw

majapw approved these changes Aug 1, 2019

Copy link
Contributor

left a comment

Looks great, one small nit!

})
.add('RTL Custom Handle', () => {
function MyHandle({
styles, css, style, handleRef, ...passProps

This comment has been minimized.

Copy link
@ljharb

ljharb Aug 1, 2019

Collaborator

all these object keys should be in their own line, since the entire literal doesn’t fit on its own line.

Show resolved Hide resolved src/DefaultHandle.jsx
@ljharb

ljharb approved these changes Aug 1, 2019

@majapw majapw merged commit 9e877ad into airbnb:master Aug 1, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.