DropDown Specification

Dropdown Specification

Objectives

Allows the user to make a single/multiple selection from a list. The list itself consists of dropdown items. Тhe dropdown uses the Toggle Box properties.

2. User Stories

As a Developer I want to:

be able to implement the dropdown to any kind of anchor.
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.
have verticall scroll if the dropwdown reaches a viewport edge.
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, attempt to vertically align the currently selected anchor with the list item.)
be able to customize the opening position by anrchor margins (Top, Bottom, Left, Right) in pixels.
add a separator in the dropdown items so that I can organize them better.

As an End user I want to:

know the current state of the dropdown is active, disabled, readonly or in focus, so that I would I can interact with it.
select a value (multiple ? combo) from a dropdown list, so that I can make a choice.
have a default selection already made,(empty one, a custom one, or the first one in the list), so that I have an set example.
have a last selected item, so that I won't need to pre-scroll to find it.
change the selected values indefinitely, so that I can change my choice.
have or not animations on dropdown open, so that I have a meaningful interactions.
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 different templates in the dropdown items, so that I have the items depening on my needs:
- title
- checkbox and title
- title and right or left aligned icon (nested menus)
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.