eui
eui copied to clipboard
[Emotion] Convert range sliders
Summary
Note this PR goes to a feature branch.
The main goal of this PR is to convert all the range styles to emotion. But other updates were also made:
- Emotion conversion - All the styles were converted and should be working
- Levels - Now the levels are on top of the track. In this PR I'm not focused on matching the final design but just placing the levels in the right position (same position of the track).
- Compressed - The new compressed size doesn't change the track and level size. But it makes inputs smaller and tick marks closer to the track.
Follow-up PR
The follow-up PR will be more focused on making the levels look like the following image:
Checklist
- [x] Checked in both light and dark modes
- [ ] Checked in mobile
- [x] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked Code Sandbox works for any docs examples
- [x] Added or updated jest and cypress tests
- [ ] Checked for breaking changes and labeled appropriately
- [x] Checked for accessibility including keyboard-only and screenreader modes
- [ ] Updated the Figma library counterpart
- [ ] A changelog entry exists and is marked appropriately
jenkins test this
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/
@thompsongl the PR is ready for review. It is going to a feature branch. All the main changes are described in the PR summary.
Thoughts on the design here? Should this also change?
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/
Thoughts on the design here? Should this also change?
Yes, it seems that I forgot to position the levels when there are no tick marks.
But it is now fixed.
I also fixed the regression on the color stop styling. 👍🏽
jenkins test this
Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/