DropDown Specification

DropDown

Allows the user to choose a single option from a list. The list itself can be anything.

The dropdown element uses the Toggle box properties.

As an user I want to

select a value from a dropdown list.
have remembered the last selected item or have a preselected one.
know the current state of the dropdown is active, disabled, readonly or in focus.
have an indicator that points that I can select a value from a list.
have a default selection already made.(empty one, a default one, or the first one in the list)
change the selected values indefinitely.
have or not animations on dropdown open.
have dropdown opening positions that are meaningful and dependent on my needs.
have separators in the dropdown list, so that I have the items organized depening on my needs.
have to access the dropdown using just keyboard.
be able to choose values from the dropdown using keyboard and loop selection. e.g. Based on the alphabetical order of items a B keypress selects the first item that starts with a B.

On following B keypresses after reaching the last item that starts with a B, the selection loops back to the first

when opened, attempt to vertically align the currently selected menu item with the list item. The currently selected menu item is highlighted. Positions:

/Users/sbozalieva/Desktop/Screen Shot 2018-02-08 at 12.48.15.png

Dev.

to be able to implement the dropdown to any kind of anchor.
to have the open the dropdown within the viewport.
set max(min) width of the dropdown.
set max height, and if it is exeeded a vertical scroll schould appear.
to have verticall scroll if the dropwdown reaches a viewport edge.
to save the last selected item, or pre-select an item.
be able to select from different animations or disable all animation for the dropdown opening, so that the interaction is meaningful.
default opening positions (Top start, Top end, Bottom start, Bottom end)
be able to customize the opening position by anrchor margins (Top, Bottom, Left, Right) in pixels.
to add a separator in the dropdown items so that I can organize them better.