[RAC] Implementation of swapping thumbs in the slider
Closes [#3387], [#6408]
Context
At the moment, the Slider implementation does not allow thumbs to pass through each other (the Slider is in strict mode, as it were). However, many libraries allow you to do this (more information about this is written here #6408).
This PR implements the ability for thumbs to pass through each other. In order to enable this additional feature, you need to pass a new allowSwap prop to the Slider.
In addition, this PR fixes the bug when the sliders got stuck in each other ([#3387], [#6408])
✅ Pull Request Checklist:
- [x] Included link to corresponding React Spectrum GitHub Issue.
- [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [x] Filled out test instructions.
- [x] Updated documentation (if it already exists for this component).
- [x] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
Testing default behavior (no swap) with multiple thumbs
http://localhost:9003/?path=/story/slider-hooks--4-stacked-thumbs-with-disabled-swap&strict=true
With mouse
https://github.com/adobe/react-spectrum/assets/57824881/9b9a28d8-1a5a-4e3b-826d-962d6c022da2
WIth arrows
https://github.com/adobe/react-spectrum/assets/57824881/c059ca32-3a44-42c2-94f4-cddc8969b7bd
With keys
https://github.com/adobe/react-spectrum/assets/57824881/d4ee50f1-1e46-4a97-8e89-f0fd8f4fe483
Testing the swap of thumbs
http://localhost:9003/?path=/story/slider-hooks--4-stacked-thumbs-with-enabled-swap&providerSwitcher-express=false&strict=true
With mouse
https://github.com/adobe/react-spectrum/assets/57824881/450918a0-3e95-4d24-bee7-a67d7fa382b7
With arrows
https://github.com/adobe/react-spectrum/assets/57824881/c818f92d-df64-440f-97d8-539115bb1c76
With keys
https://github.com/adobe/react-spectrum/assets/57824881/380be6b2-1a07-4add-890f-b3bb2dfbffb1
🧢 Your Project:
N/A