UI Components
Dropdowns alpha

Standard Dropdown

Example ⚡


<UISelectChildren
  value={myvalue}
  onSelect={this.handleSelect}>
  <UISelectChildren.Option 
    value='100'>
    <div>100 rows</div>
  </UISelectChildren.Option>
  <UISelectChildren.Option
    value='200'>
    <div>200 rows</div>
  </UISelectChildren.Option>
</UISelectChildren>

Usage

The Standard Dropdown should only be used when the resulting activity after selecting an item from the dropdown does not cause an action (e.x. Show X rows).

Backstory

The reason why there are two primary types of dropdowns deals with setting user expectations. If a user does not know that clicking on something will cause an action, they could be confused, leading to a poor user experience. From a visuals point of view, this button is sigificatnly lighter weight than the actionable button in order to direct the users eye to primary actions, while not distracting them.

Natural Language Dropdown

Example


where <UIDropdownSentence default='steward' data={}/> is me

Usage

The natural language dropdown should only be used when...

  1. The dropdown is displayed inline as part of a sentence
  2. The dropdown is not at the end of a sentence
  3. Selecting an item from the dropdown does not cause an action (similar to Standard Dropdown)

The copy of the dropdown should be short and sweet.

Backstory

Visually, putting a caret inline by default makes the display look cluttered, and takes away from the illusion that a user is crafting a natural sentence, not filling out a form.

Changelog

  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • July 19, 2016 - Removed Action Menu, and moved it to the new Menus page and updated code snippets and added example images as placeholders