search

aurelia / ux

A user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.
MIT License
368 stars 55 forks source link

A dropdown component #307

Closed MaximBalaganskiy closed 4 years ago

MaximBalaganskiy commented 4 years ago

I've got a dropdown component which works similar to lookup. It has also got default styles for items but not limited to them and can display random content.

I know this component is already being worked on. Is it worth submitting a PR?

bigopon commented 4 years ago

I'm interested in this component, as it's quite a common scenario and normally is quite all by itself. Would love to see it.

cc @EisenbergEffect

MaximBalaganskiy commented 4 years ago

Live demo https://gist.dumber.app/?gist=fbbfc92df36576847d6886dd051d1ceb

MaximBalaganskiy commented 4 years ago

The component calculates the best dropdown position. Bottom and right are preferred ones, top and left are selected when dropdown dimensions don't fit AND there is more space on the other side of the trigger.

bigopon commented 4 years ago

This looks nice. Is the positioning service insufficient to handle the requirement of this component? cc @ben-girardet

MaximBalaganskiy commented 4 years ago

As far as I understood, the service does not limit the dimensions of an element to fit in window. Am I right?

swalters commented 4 years ago

It's a component I would use but I question the name. Maybe it's my window's background showing, but I always think of a dropdown component displaying a list of values and letting the user choose one.

This is more like a popup to me.

MaximBalaganskiy commented 4 years ago

I'm not insisting on the name :)

ben-girardet commented 4 years ago

As far as I understood, the service does not limit the dimensions of an element to fit in window. Am I right?

You're right @MaximBalaganskiy but the plan is to add this in the service. It would make lots of sense to use the positioning service for such a component.

I can help with that if necessary, only it will be in two weeks or so as I have some personal things going on right now. Let me know if I can help ;-)

MaximBalaganskiy commented 4 years ago

I'll probably leave that service to you guys, don't feel comfortable modifying it.

MaximBalaganskiy commented 4 years ago

What do we do with the dropdown/popup?

bigopon commented 4 years ago

Let's add it in. For the service, maybe this component can get it first, and will join the list of components that use the positioning service. More motivation for @ben-girardet to enhance it.

swalters commented 4 years ago

I have a couple of questions around the naming of this component. It's not my intention to bog down your work (which I'm sure this is). I just want to easily explain to someone which component to use when. This component is so flexible because of the use of \<slot> that it can be used for many scenarios.

  1. Could this component be made to popup on the left, right, top, or bottom of a target?
  2. Is there anything in this component that demands an item be chosen from the popup?
  3. How is this component different than a menu component (and even the name 'menu' is too limiting IMO) ? https://vuematerial.io/components/menu

Some other names I have seen: Popover - https://material-ui.com/components/popover/ https://getbootstrap.com/docs/4.0/components/popovers/

And to really geek out: https://uxdesign.cc/pop-up-popover-or-popper-a-quick-look-into-ui-terms-cb4114fca2a

@EisenbergEffect do you want to weigh in on naming?

MaximBalaganskiy commented 4 years ago
  1. The component "prefers" bottom-left position. Switching to top and right only if there is not enough space to fit the content AND there is more space on the other side. Max width and height are set to fit into window.
  2. The popup is closed on any click which reaches the window, unless autoclose is false
  3. The main difference is auto positioning, hence missing "directions" and "sizes" api.

Size can be controlled by setting the content size. I'm, personally, fine with popup - it reflects the intent.