Fix bug on slider when dragging in rtl mode

[roberttaylor426]

What:

Fix bug on slider when dragging in rtl mode. If you drag to the left, the slider animates to the right (and vice-versa). This broken behaviour can be observed on the examples page.

See also here and here.

Why:

Dragging on the carousel is broken for rtl pages.

How:

Rather than require a prop to be passed into the component, the Slider component detects whether the direction is rtl and inverts deltaX during drag accordingly.

Checklist:

• Documentation added/updated (N/A)
• Typescript definitions updated (N/A)
• Tests added and passing (Experiment page updated and verified - do we need automated tests for this behaviour?)
• Ready to be merged

[Conor-Hinchee]

Thanks for the PR!

So instead of passing a prop users will now need to wrap the entire Carousel Provider in a div with dir=RTL ?

[roberttaylor426]

Typically (99+% of cases?) I would expect dir to be set at the root html level. It's usually the whole page that's rtl, rather than a subset of it.

See here for example.

[roberttaylor426]

@Conor-Hinchee I'm happy to take your lead on a couple of points here.

It's possible the code doesn't need to be quite as defensive as it now is (I added the guards in the face of failing tests and runtime errors).

It's also possible there may be a better place to perform this rtl check.

What are your thoughts?

[roberttaylor426]

Hi @Conor-Hinchee, thanks for your work on this project.

Are you able to provide a rough timeline of when this PR might be reviewed, merged and released?

[tsi]

Hi guys, thank you for your work on this! Is this really fixed? it's seem to slide the wrong way on both the rtl example as well as on my local testing.

[tsi]

Actually, this comment was helpful.
Setting transform: scaleX(1); on the slider element fixes the swipe direction.