Custom dropdowns

[jrubenoff]

Breaking this out from dobtco/screendoor-v2#888.

Desired Outcome

• Create a UI component that can effectively replace the select for inputs with:
  • Many answer options
  • Long answer options that cannot be truncated
• Allow for at least two levels of information hierarchy.
• Make a dropdown control that's usable and performant on mobile devices.

[jrubenoff]

Proposed solution

These are dropdowns with nested levels. When the user clicks the "Response for..." option, the second level slides in. They can either select a field label or go back to the top level.

I'm not wild about what happens to the dropdown button after they select a field, but it's a balance between keeping the button at a reasonable size and showing enough text that the user knows what it refers to.

[ajb]

Cool, this is an interesting pattern.

I'm assuming this is truncated after two lines? If so, how do you plan to achieve that?

I'm not wild about what happens to the dropdown button after they select a field, but it's a balance between keeping the button at a reasonable size and showing enough text that the user knows what it refers to.

I'm not entirely sure what you mean by this, can you show me? I have a guess.

[jrubenoff]

what happens to the dropdown button after they select a field

Referring to this:

Ah, forgot to mention truncation. We can achieve it via max-height and the ellipses mixin. It might also make sense to do some server-side truncation to keep the DOM from getting too big, especially since you can duplicate this field for advanced search to add more queries.

[jrubenoff]

@ajb, are you good with this? Do you want me to finish coding this before we begin advanced search?

[ajb]

Yeah, sorry, didn't mean to leave you hanging or anything. This is all :+1:.

[ajb]

As for the order, I suspect that it doesn't really matter either way. Advanced search development won't be held up by the non-existence of this UI component.

[jrubenoff]

On Friday, I realized that a dual-pane popover is not going to look good whatsoever, because scrollbars exist.

Here's the new expanded state.

Will code this up within the next few days. I'm curious how performant the scrolling will be on a phone if you're ProPublica and have forty long questions in your project. Maybe anyone else on the team with a smartphone could test when it's built.