1. Make sure each dropdown opens when clicked.
  2. The panel that shows up should be positioned precisely below and to the left edge of the parent dropdown.
  3. The panel that shows up should float over the rest of the page.
  4. Each dropdown should have equal width.

ListDropdown

  1. ListDropdown should close when any of the dropdown items is clicked. Clicked item's model should be logged in console.
  2. ListDropdown should close when clicked beyond the dropdown like page body or other elements.

Long label

  1. Make sure that the label is truncated and followed by "...".
  2. Dropdown button "triangle" should be placed after "...".
  3. Text should not wrap to the next line.

Notes:

listDropdownCollection.add(
	new window.Model( {
		label: '2.5em',
		style: 'font-size: 2.5em'
	} )
);

Toolbar Dropdown

  1. Play with buttons[ n ].isOn to control buttonDropdown active icon.
  2. Play with buttons[ n ].isEnabled to control buttonDropdown disabled state (all buttons must be set to false).
  3. Play with toolbarDropdown.toolbarView.isVertical to control buttonDropdown vertical/horizontal alignment.

SplitButton Dropdown

Menu Dropdown

Empty

Dropdown with ListView

Dropdown with ListView (and groups)

Long label (truncated)

Dropdown with ToolbarView

SplitButton Dropdown

Menu Dropdown