Skip to content

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 :)

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