search

RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

Mj.dual range slider #1148

Closed micahjones13 closed 1 year ago

micahjones13 commented 1 year ago

Brief Description

Adds dual-range capabilities to our rux-slider. Refactors some of the markup and styles in order to be simpler and better match design.

New Props

JIRA Link

https://rocketcom.atlassian.net/browse/ASTRO-6206

Related Issue

https://github.com/RocketCommunicationsInc/astro/discussions/1073

General Notes

Currently, the bar between the thumbs in dual-range is not clickable/intractable. This is pending some more design research and could be changed in the future, but we left it out to prevent having to make a breaking change if the research says it shouldn't be clicked.

Motivation and Context

Adds dual-range variant to slider. Dual-range has been an ask from clients.

Issues and Limitations

Dual range by default can have the thumbs swap over each other, and this can create instances where min-val is higher than value. A ticket has been made for this, but it is non-blocking for MVP.

Types of changes

Checklist

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: c832fe6850b6419de468e8fe2570fb4d085cb6c9

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 1 year ago

Deploy Preview for astro-stencil ready!

Name Link
Latest commit c832fe6850b6419de468e8fe2570fb4d085cb6c9
Latest deploy log https://app.netlify.com/sites/astro-stencil/deploys/64b5620a4d48fa000855ad9d
Deploy Preview https://deploy-preview-1148--astro-stencil.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 year ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit c832fe6850b6419de468e8fe2570fb4d085cb6c9
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/64b5620a1ae2ae0007aee2c2
Deploy Preview https://deploy-preview-1148--astro-preview.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

micahjones13 commented 1 year ago

Looks great! Needs the test for the strict prop and for clicking right of the right thumb, then it looks good to go!

I can't for the life of me get the click to work in testing for moving the right thumb. Using the same method as I did to move the left thumb, but as soon as position y gets over 20 it breaks. I tried force: true but still no luck. If anyone has better ideas, plz let me know

FMorrison87 commented 1 year ago

I was testing programmatically updating the minVal and value prop and I noticed that the way the thumbs are set in the test file is with an attribute called max-val. Since this is not a prop when I update the component using the minVal and value props I get reflection on the min-val attribute, but the max-val attribute does not reflect the new value. Should it?

micahjones13 commented 1 year ago

I was testing programmatically updating the minVal and value prop and I noticed that the way the thumbs are set in the test file is with an attribute called max-val. Since this is not a prop when I update the component using the minVal and value props I get reflection on the min-val attribute, but the max-val attribute does not reflect the new value. Should it?

ah great catch, that's a vestige of the first implementation. I'll fix that right now. Thank you!!