• Type: Technical Task
    • Status: Closed
    • Priority: Minor
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Documents & Media
    • Labels:
    • 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



      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


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



      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.


      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**



      Discussion Document


          Issue Links



              • Votes:
                0 Vote for this issue
                0 Start watching this issue


                • Created:
                  Days since last comment:
                  1 year, 14 weeks, 4 days ago


                  Version Package