[Tasks] Improve input

[nmetulev]

Proposal: Improve input/form components used to set properties on a task

Description

The tasks component has several inputs that are usable by a user. Below are proposal on how they can be improved.

plan/folder picker

The plan/folder pickers currently use the native select control, but only when a task is created.

• [ ] Create a new input dropdown (or use a 3rd party dropdown) that can be styled with the fabric design language
• [ ] Enable changing folder on already created tasks

assigned person picker

the assigned person picker is an icon when no one is assigned, and the people when they are assigned. However, there are several ways this experience can be improved:

• [ ] Add hover and click states.
• [ ] Update the placeholder icon with an icon that better represents assigning people
• [ ] When there is only one person assigned, show the display name of the person
• [ ] Animate people picker when opening and closing

due date picker

The due date picker is an input control that is only available when a new task is created. It is also using the native date input control and it looks different across browsers - feels out of place with the rest of the component. Here are the proposed solutions:

• [ ] create new date picker component (or use a 3rd party date component) that can be styled with the fabric design language
• [ ] the date picker should be hidden until the user presses the assigned date field - the assigned date field should be nicely formatted and match the rest of the input fields
• [ ] add hover and click states
• [ ] add animation when opening and closing date picker
• [ ] enable changing assigned date even for existing tasks

task title

• [ ] pressing enter should create the task - now the + button needs to be pressed
• [ ] the title should be editable for already created tasks

"assigned to me" selector

• [ ] opening the plan selector should close the bucket selector if already open