Address dropdown improvement requests

[silviuaavram]

This summarizes all points mentioned in the comments untill 1/3/2019:

Code:

• rename DropdownLabel to DropdownSelectedItem and make changes as necessary (refactor(Dropdown): rename DropdownLabel to DropdownSelectedItem #725)
• improve semantics/description of DropdownLabel onClick prop, as it applies only on image/text click.
• refactor setA11yState to use Portal. Follow up with Roman on this.
• allow getA11ySelectionMessage, itemToString and items (possibly others) to accept React.Elements.
• refactor toggleButton, change the name, make it accept Shorthand.
• cleanup getA11yStatusMessage and A11yStatusMessageOptions once updated versions get released in Downshift.
• improve the attribute handling of the toggleButton, from Downshift or overrinding attributes better in Stardust.

Functionality:

• add clearable prop to replace the toggle icon and which will clear the selected value(s) (feat(Dropdown): add clearable prop #885)
• when Dropdown is closed, focused, has single selection and has selected value, Up/Down Arrows need to open the list at selection position -/+ 1.
• when Dropdown is closed, focused, has single selection and has selected value, click/Spacebar/Enter need to open the list at selected position.
• when Dropdown is open and has single selection, hitting character key needs to jump highlighted option to the one starting with that key. In case of multiple options, a list with options needs to be generated and looped over.
• when Dropdown is open, hitting End/Home should highlight last/first option.
• when Dropdown is closed and has multiple selection, Left/Right need to move focus between the selected options (to be defined if it should go through 'X' icons, label titles (which will be focusable with user defined action), or both).
• expose DropdownLabel render callback prop.
• have loader for async operations (feat(Dropdown): add loading prop #729)
• have toggleButton (toggleIndicator) to appear by default in the examples (feat(Dropdown): add loading prop #729)
• have aria-expanded on the triggerButton, if Dropdown is not a search.

Style: (#786)

• corner rounding, on combobox corners, when closed, and on combobox upper and listbox lower, when open.
• border bottom from or combobox div adds a strange rounding on the container border bottom, when it's focused.
• style a border around the options list.
• fix issue with list maxHeight. Follow up with Embedd team on this.

[bmdalex]

TODO from my side:

1. Create better styles by defining and using more variables rather than hardcoding styles:

https://github.com/stardust-ui/react/pull/422/files#diff-bf3c97918f9b89d2eda22d1f160ba5c2R1

2. Address remaining issues:

I apologize for the late review but I think there are quite a few of issues that need addressing. Please take a look at the comments and the following bugs I found from manual testing:

1. filtering does not work in the examples

I think we should implement some default filtering method for the dropdown items. TBD if this PR or next one, but please create an issue with follow-up items if we choose to go with the latter.

2. dropdown without search prop provided collapses the input if no option selected

3. clicking on ^ button does not close the dropdown

4. hovering on the dropdown list items changes the currently selected item for keyboard navigation

5. dropdown options need a border

6. scrollbar is translucent

7. weird small curly borders on the input

[kuzhelov]

Let me provide set of additional problems that were discovered.

Tab results in item being moved to dropdown's selected area

When TAB is pressed while focus is on the item from the dropdown list, the item becomes selected.Expected behavior, however, is that focus will just be passed to the next focusable item, without any item being added to the selected list.

This is, actually, one of the reasons why it is impossible to TAB to toggle button.

DropdownLabel component's name is confusing

Essentially, this is the name of Component that is used to display selected items. DropdownSelectedItem name would work better for that, as it will correctly deliver component's semantics

DropdownLabel - misleading onClick event handler name

There is an event handler in the DropdownLabel's API that is called onClick - while, essentially, it is called on label's icon click and, what is crucially important, is passing icon's props (not the props of DropdownLabel) as argument to the handler. To properly convey its behavior semantics, this prop should be rather named as onIconClick - with that client will expect to have icon's props in a handler.

Imperative DOM manipulation code instead of Portal component

Dropdown's setA11yState method's logic consists of imperative DOM manipulation - this should be replaced with declarative component-based approach, and we already have Portal component to achieve the same goals.

innerRef prop of DropdownSearchInput

This prop is named as ref, but is only able to properly handle ref callbacks (and not ref objects in addition). This is a huge source of potential client problems.

Shorthand value is treated as object

For the following props it is a shorthand value expected to be passed:

• getA11ySelectionMessage
• itemToString
• items

The problem is that all of them expect shorthand value to be an object - and, thus, unable to properly handle React.Elements being passed, so that the following innocent action from client will break the logic:

<Dropdown items={[
   <span>My item</span>
  <span>Another item</span>
]}>

[silviuaavram]

To be added: clearable prop that will create 'X' icon (in place of the dropdown) and will clear the selected value(s) in the dropdown.
Will need to identify use cases. Like how to handle both clearable and toggle. And maybe other cases as well.

[silviuaavram]

To be refactored: trigger button. Needs to support shorthand value in order for it to be customisable.

[jurokapsiar]

"Tab results in item being moved to dropdown's selected area" from @kuzhelov 's comment is intentional. This should not be changed.

[silviuaavram]

When !search && !multiple, dropdown is closed and there is already a value selected, Down/Up should focus value +/- 1 instead of 0 / size - 1. (intention is to fix from Downshift)
When letter key is pressed and dropdown is open, should focus on items starting with that key.
When Home/End key is pressed, first/last option should be highlighted.
Left and Right should go through the already selected options, in multiple selection mode.

Dropdown does not have focus style added when toggle button is focused. Need to fix this case.

[jurokapsiar]

Additional requirements - we will turn them into issues when defined:

1. Expose DropdownLabel onHover
2. Loader
3. List max height

[layershifter]

1. Strange naming for toggleButton

• it's not button at all
• it can be indicator (used in react-select or any other name)

2. toggleButton is not shorthand

There is no way to apply props to it 😿