Default, colored tags

Hey there!

As you know I'm splitting the xdocFooter revamp into 8 sub-proposals , this being the 3rd one (see proposals 1, 2).

This proposal is tackling the idea of having colored tags (or default tags). 

Goal

The idea of colored tags would be to have another level to normal tags.

While normal tags should categorize the page in the eco-system of knowledge based on the page's content (normal tags = extreme summarization), colored tags could be at a higher/lower level and categorize the page...

1. based on its actionability (how is that page used? who will it be useful to in the future?)
2. based on the information's life cycle (creation or collection, processing, dissemination, use, storage, and disposition, to include destruction and deletion)

Why default tags?

They should be default tags in the sense that, once configured, they are configured globally with specific colors and labels. This standardizes the way people organize pages making it actually useful to use tags.

 Look (isolated)

Any default tag will get another class on top of the .tag class. Example, the #done tag makes use of the .success-tag (named like to stay cohesive with the success box). Its tooltip message stays cohesive with its meaning.

Note: the x will be an actual icon that will match in color the text of the tag

MVP requirements

Ideally we'd make these tags configurable, but I think, for efficiency purposes, that we could see what the initial feedback is on a fixed/ non-configurable set of default tags and then move from there. In the initial discussion of this whole revamp, I proposed a set of 4 tags corresponding in color to the 4 boxes we have (info box, success box, warning box & error box):

• #done - this tag would help put all done projects and tasks in the same place. These would be the pages that would be most likely to get archived or deleted each few years, making the process of cleaning up much easier.
• #in-progress - would make following on-going researches and projects much easier
• #to-improve - would make review from managers easier to see at a glimpse and problems in the context of a page easier to spot
• #to-update - would make keeping everything up to date and correct easier

In the MVP phase, these tags would be stackable and have the same behaviour as any other tag. They would just be colored and be suggested in the Add tag UI.

Full requirements

Ideally:

1. we'd have a new entry for Tags in the Global Administration > Look & Feel or in Search
2. you could set a maximum of 10 colored tags choosing from 10 tag looks (once you use a look/color, it shouldn't be available for the others)
3. you could set the tooltip for each tag
4. you'd have an inline preview of how every one of them would look like
5. include these tags in the search dropdown as suggestions for easy search

Semantic HTML

Regarding the HTML, I have a question on making it semantic.

First, I wanted to make nested buttons but learned quickly that's not very good.

Is it the right idea to implement this:

• have a div with a colored background that contains a link (the tag text) and a button (the x)
• if you hover on the div, it becomes darker
• if you hover on the x it gets a padded darker container around him (close to the idea of the like button revamp)

This idea was explored below.

Implementation & hover states

Hover on the tag text

Hover on the delete button

HTML for tag

Ideally we wouldn't just type x, but use an icon.

CSS/LESS

Disclaimer: I'm pretty sure filter:brightness() is not ideal for dark themes, so a mixin might be needed for the hover states of everything.

Let me know what do you think about:

• the color of the delete icon:
  • should it be consistent(gray) despite the color of the tag
  • should it take the color of the text?
• the whole concept
• html & css