react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

[RAC] Implementation of swapping thumbs in the slider

Open novsource opened this issue 1 year ago • 0 comments

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

novsource avatar Jun 12 '24 14:06 novsource