eui icon indicating copy to clipboard operation
eui copied to clipboard

[Emotion] Convert range sliders

Open elizabetdev opened this issue 3 years ago • 6 comments
trafficstars

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.
range-sliders-before-after@2x

Follow-up PR

The follow-up PR will be more focused on making the levels look like the following image:

Levels (revision 2)@2x

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

elizabetdev avatar Aug 09 '22 14:08 elizabetdev

jenkins test this

chandlerprall avatar Sep 07 '22 15:09 chandlerprall

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 12 '22 19:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 14 '22 15:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 15 '22 10:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 15 '22 14:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 21 '22 17:09 kibanamachine

@thompsongl the PR is ready for review. It is going to a feature branch. All the main changes are described in the PR summary.

elizabetdev avatar Sep 22 '22 11:09 elizabetdev

Thoughts on the design here? Should this also change?

Screen Shot 2022-09-22 at 12 00 43 PM

thompsongl avatar Sep 22 '22 17:09 thompsongl

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 22 '22 18:09 kibanamachine

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.

Screenshot 2022-09-22 at 19 13 16

But it is now fixed.

Screenshot 2022-09-22 at 20 12 36

I also fixed the regression on the color stop styling. 👍🏽

elizabetdev avatar Sep 22 '22 19:09 elizabetdev

jenkins test this

elizabetdev avatar Sep 23 '22 14:09 elizabetdev

Preview documentation changes for this PR: https://eui.elastic.co/pr_6116/

kibanamachine avatar Sep 23 '22 15:09 kibanamachine