:  Omer.Glazer (Unlicensed)

Description

A tag (or ‘Label’) is a keyword or term assigned to a piece of information (such as a page, database record or a file).

Basic Flows

Tagging a singel item

Assigning one or more tags at once

If the tags list is nested, checking that checkbox once, will select all the list tags, checking the checkbox once again will unselect all the list tags.

Types

The system will come with a set of out of the box default tags (Top-down taxonomies), In addition you can enable users to create new tags (Bottom-up taxonomies).

Tag selector without manage tags	Tag selector with manage tags	Nested list

Usage & Behaviour

General guidelines

• The tags selector appears within a popover (missing from popup types)

• Tags may be added to an entire page content or to a particular piece of information within a page such as tables records, list item and more.

• You may enable users to create new and manage tags (Bottom-up taxonomies) or not.

• You may set the selector tags list as nested under ‘All’ item or leave it as a flat list.

• Tagging system:

  • Tags may be personal (per each user) or shared within an organisation.

• Tags should be used when 

  • You want to let the user categorised an item and make it easier to find it.

  • The content on is possibly mapped into one or multiple categories.

  • You want to let users organize their contributed data themselves.User conducts “item/s triage” to determine and mark: Relevancy, Grouping, Importance, Categorisation, Affiliation, Reporting.

Structure

• The pattern is composed of:

  • Add tag action

  • Tags chips

  • Tags selector

    • Search field

    • Nested / flat checkbox list

    • ‘Apply’ button

    • Manage tags (Optional)

    • Create new tag (Optional)

Placement and Positioning

• Tags chips may be placed within detail panes, table cells and cards.

• It’s recommended to spread out the tags chips as much as possible, in order to present out-front the different classifications.

• In case the tags space is limited, several bags will be merged together.

Tags Placement	Image
Tags are spread out tags
Last tags are merges
All tags are merges

Internal Logic

Assigned tags chips as well as selector checkbox list will be sorted alphabetic

States

Search

• Typing in the search field will activate a live search

• By default the ‘Search’ field is in focus.

• Once user starts typing a search term, the action will on the bottom of the dialog box will change, to quickly create a new tag of the entered input.

Removing tags

User can remove tags from ‘Edit tags’ dialog box, a quicker way to remove a tag is by hovering a tag label, then clicking the 'X' remove icon that has appeared.

Managing tags

• Creating (defining) and managing bottom-up taxonomies tags, may be included or not in the tagging feature.

  • Creating and managing bottom-up taxonomies tags may be an autorotation granted by rule.

Creating a new tag

• By default the field is in focus, user will add his new tag and click ‘Create’.

• The popup will close, add the new tag will already be assigned to entity.

Managing tags

• Tags appear in a table, with Tag name, Indication of the tag is enabled or not, count of tagged items and actions.

• User can Enable (enable to tag with) each tag (System and custom)

Edit a tag name.

Only custom tags may be edited.

Remove tag

Only custom tags may be deleted.

Deleting a tag will not delete the records it’s assigned to.

Filtering by tags

Types 

Usage & Behaviour

• Use when the content on is possibly mapped into multiple categories and does not necessarily only fit into one hierarchical category.

• Use when you want users to contribute data and let them organize their contributed data themselves.

General guidelines

Structure

‘Edit tags’ popover :

• popover includes a search field, tags list and actions at the button.

• The list first shows the preselected tags in alphabetical order, followed by the the rest of available tags also alphabetical.

• Once user selects/ unselects one or more item, the button actions will be replaced with an ‘Apply’ button.

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. YouUse this >>	<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>