[UX] New categories input field

• Type: Technical Task
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Documents & Media
• Labels:
  • Jan_'19
• Epic/Theme:
  • DigitalAssetManagement
• Sprint: Col | Sprint 4 | Nov19 - Nov30, Col | Sprint 5 | Dec3 - Dec14, Col | Sprint 6 | Dec17 - Jan18, Col | Sprint 7 | Jan22 - Feb1, Col | Sprint 8 | Feb4 - Feb15, Col | Sprint 9 | Feb18 - Mar5, Col | Sprint10 | Mar6 - Mar15, Col | Sprint11 | Mar19 - Mar28, Col | Sprint 12 | Apr1 - Apr5

Goal

To improve bulk actions experience, we need to change the way we add or remove categories. The goal of this story is to implement a new categories input component based on the label input field component done by the Frontend Infrastructure team.

User Experience

Summary

• Add a label-input field
• Move current Select button
• Add autocomplete feature
• Apply category-label styles

Interaction

Autocomplete

While a user is typing, the system suggests existing categories without the user needing to type them in full.
The user must select a category from the suggested categories list or select one from the category modal selector.

The difference with the default autocomplete behavior for categories is users are not able to add a new category using comma or pressing enter key.

• If an existing category is typed and the user press key, the category label is added.
• If else an error is shown saying “#thetypedcategory category doesn’t exist" and the string typed remains in the input.

 

Category Modal Selector

When a user clicks “Select” the Category Modal Selector shows. The user selects one or more categories and when the user clicks "Add" the categories are added as labels in the label-input field.

Design

Apply the design and style rules defined by Lexicon with the following changes:

Category Labels

The style of the labels within has been changed to be more related to the current style of a category label in Portal.

• Label Background Color: Main Lighten 28% desat 5% - HEX: #6B6C7E**

 

Resources

Figma
Discussion Document