Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Dropdown component #388

Closed
miroslavstastny opened this issue Oct 23, 2018 · 8 comments
Closed

Dropdown component #388

miroslavstastny opened this issue Oct 23, 2018 · 8 comments
Assignees
@silviuaavram
Labels
⚙️ enhancement New feature or request vsts Paired with ticket in vsts

Comments

@miroslavstastny
Copy link
Member

miroslavstastny commented Oct 23, 2018 •
edited by silviuaavram
Loading

Add basic implementation for Dropdown component.

image

API

For now, use an API similar to SUIR (example):

<Dropdown multiple search items={[ ... ]} />

Based on prototype in #334:

Since we only support "search" and "multiple", make these required for now.
Dropdown will only include the Input and associated List (menu), no buttons, field label, etc.

Separate active items from selected:

  • active means the item is in input box as an active value
  • selected means the item is highlighted in the menu

More keyboard handlers:

  • click to open
  • esc to close

API Proposal

className

Additional classes.

fluid

Boolean to make it stretch as much as container allows.

items

Shorthand to provide items in the dropdown. Similar to providing ListItems as shorthand inside list.
screen shot 2018-10-25 at 11 16 27

label

Shorthand to provide a label before the dropdown.
screen shot 2018-10-25 at 11 16 48

multiple

Boolean to provide multi-selection functionality. Will add the active shorthands as Labels before the Input, each with 'X' icon for removal.
screen shot 2018-10-25 at 11 17 33

onChange

Callback provided to allow user to handle change. Invoked with the props and also with the active option(s), which can be either the shorthand for the active item, or the shorthand collection for the active items.

onInput

Callback provided to allow user to handle input change in the edit text. Only makes sense if dropdown is a search. Invoked with both the props and the new value of the text in the input.

placeholder

Text to act as placeholder, optional, in case the dropdown is a search (with text field). Makes sense only if dropdown is a search.
screen shot 2018-10-25 at 11 17 40

search

Boolean to make the dropdown able to search through the options, with autosuggestions. If false, the search input will be replaced by trigger button.

styles

Styles that are applied on top of the default ones.

variables

Variables that are applied on top of the default ones.
@silviuaavram silviuaavram self-assigned this Oct 23, 2018
@pkumarie2011 pkumarie2011 added the vsts Paired with ticket in vsts label Oct 23, 2018
@levithomason levithomason added the ⚙️ enhancement New feature or request label Oct 24, 2018
@levithomason
Copy link
Member

Linking the PR: #334

This was referenced Oct 24, 2018
Closed
Closed
@silviuaavram silviuaavram reopened this Oct 25, 2018
@silviuaavram
Copy link
Collaborator

silviuaavram commented Oct 25, 2018 •
edited
Loading

Linking the deployed container with the People Picker prototype: https://stardustacc2.z13.web.core.windows.net/

@jurokapsiar
Copy link
Contributor

onAddItem and onRemoveItem callbacks might be handy besides onSelect

@bmdalex bmdalex mentioned this issue Oct 26, 2018
Closed
@levithomason
Copy link
Member

  • onInput should be onSearchChange
  • label will be removed and a FormField would be used to add a label instead

@silviuaavram silviuaavram mentioned this issue Nov 2, 2018
Merged
@silviuaavram
Copy link
Collaborator

Linking PR #422

Will also update API in the issue description.

@silviuaavram
Copy link
Collaborator

The API has been changed slightly and you can view it in the Docs for the component

@silviuaavram
Copy link
Collaborator 

defaultSearchQuery: PropTypes.string, OK
defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), OK
fluid: PropTypes.bool, OK
getA11yStatusMessage: PropTypes.func, To Object getA11yStatusMessage
getA11ySelectedMessage: PropTypes.func, -=-
getA11yRemovedMessage: PropTypes.func, -=-
getA11yRemoveItemMessage: PropTypes.func, -=-
items: PropTypes.arrayOf(PropTypes.object), Remove interface, add component shorthand.
itemToString: PropTypes.func, OK
multiple: PropTypes.bool, OK
noResultsMessage: PropTypes.string, OK
onCloseIconClick: PropTypes.func, Rename onActionClick
onCloseIconKeyDown: PropTypes.func, Rename onActionKeyDown
onDropdownChange: PropTypes.func, Rename onChange, pass null event, inform client, issue DS.
onInputBlur: PropTypes.func, OK for now
onInputFocus: PropTypes.func, OK for now
onInputKeyDown: PropTypes.func, OK for now
onLabelClick: PropTypes.func, Go to Shorthand. Removed.
onSearchQueryChange: PropTypes.func, OK
placeholder: PropTypes.string, OK
search: PropTypes.bool, OK
searchQuery: PropTypes.string, OK
toggleButton: PropTypes.bool, change to toggle, it will be Shorthand. false: nothing. undefined: default, shorthand: merge.
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), OK

@silviuaavram silviuaavram mentioned this issue Dec 5, 2018
Closed
21 tasks
@silviuaavram
Copy link
Collaborator

Implemented in #422. Closing.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@silviuaavram silviuaavram

Labels
⚙️ enhancement New feature or request vsts Paired with ticket in vsts
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@levithomason @miroslavstastny @silviuaavram @jurokapsiar @pkumarie2011