Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Range :values in catalogue #12

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

davydog187
Copy link
Contributor

Following surface-ui/surface#355 this PR adds support for ranges as prop :values. Note that I'm not sure how to test this outside of writing an example component. Suggestions are welcome :)


cond do
values == [] -> []
prop.opts[:required] -> values
opts[:required] -> values
true -> [{"nil", "__NIL__"} | values]
end
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it's better to just return [] if :values is a range. This way we'll have a text input instead of a select. It would be weird to have a select with all values of a large range, e.g. 1..1000.

Another approach would be to check the number of values, something like using a select if the number of items Is <= 10 and leaving as a text input if it's > 10. WDYT?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its a good point @msaraiva. I had considered it but did not have a good solution, this seems like a reasonable approach. I would possibly make it 20-25 rather than 10 though. Sound good?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm ok with that. Just make sure you try it out to see if it doesn't affect usability badly. I mean, I'd rather type 16 myself than look for a 16 item in a 20-sized list :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea i'll see what the UX looks like. my thought was that 10 might be too small. Looking for that sweet spot 🍯

Copy link
Member

@msaraiva msaraiva Apr 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, we could have an editable select similar to https://vue-select.org/ or use a <input> + <datalist> instead of a <select>.

@davydog187
Copy link
Contributor Author

I'm gonna hold off on updates to this one until we get my other PR in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants