Details

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

      Description

      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

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Days since last comment:
                  32 weeks, 5 days ago

                  Packages

                  Version Package