[UX] Improve tags/labels system

[andersonjeccel]

Q	A
Bug fix? (use the a.b branch)	[❌]
New feature/enhancement? (use the a.x branch)	[✅]
Deprecations?	[❌]
BC breaks? (use the c.x branch)	[❌]
Automated tests included?	[❌]
Related user documentation PR URL	mautic/mautic-documentation#...
Related developer documentation PR URL	mautic/developer-documentation#...
Issue(s) addressed	Fixes #13158

Description:

This PR adds a set of new tags/label styles for devs to use while building new features.
It also changes some labels to avoid primary, warning and success being used where they are inadequate.
These tags have hover effect to improve user experience.
Aiming to provide consistency, I also added an operational tag to be triggered when .has-click-event is being used. This way, clickable tags will have a darker border color to indicate for users that they're interactive.

(company score was just the number, no styles before)

chosen (library) now follow a standard, which indicates these labels are selectable/in the context of filtering options

Steps to test this PR:

1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
2. Go to Companies > Create > Back to the list > See
3. Go to Emails > Create one, save and close > See how it appears on the table
4. Go to Contacts > Create > Save & Close > Scroll down to Filters > Add one

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 61.39%. Comparing base (4f420ab) to head (419e14e).

❗ Current head 419e14e differs from pull request most recent head e351b1f. Consider uploading reports for the commit e351b1f to get more accurate results

Additional details and impacted files

@@             Coverage Diff              @@
##                5.x   #13689      +/-   ##
============================================
- Coverage     61.50%   61.39%   -0.12%     
+ Complexity    34068    34024      -44     
============================================
  Files          2241     2238       -3     
  Lines        101852   101686     -166     
============================================
- Hits          62645    62430     -215     
- Misses        39207    39256      +49     

see 33 files with indirect coverage changes

[RCheesley]

Thanks for the suggestion on the rounding of corners more uniformly. I'm on the fence as to whether rounding is preferential to squared corners, but putting that to the side, some general points I noticed:

I think these should be centre aligned instead of left? In both Contact and Companies list view.

Also on contact profiles in the tabs:

Also, the tag text seems a bit misaligned with the closing cross icon? (May have always been like this but I notice it more with the rounding)

I noticed that form results still seem to use the old style:

Also landing pages is the same:

I found this random blob of colour which I first noticed in points triggers (which I found represented the contact colour) quite confusing, as it was almost like it was meant to be a label (given its shape) but there was no text. Maybe this shouldn't be rounded? I feel the same about the Categories list, given there's no column header in either view it's a bit ... weird?

[andersonjeccel]

Tasks

• Check why text alignment is present only on dev environment
• Check which classes and libraries have been used in contact profile
• Change Results from xs buttons to operational tags for Forms, Landing pages, Segments and other relevant listings
• Check additional classes used to represent entity color
• Standardize elements and classes used for entity colors on all tables (Twig templates)
• Make sure entity colors are easily distinguished/probably a perfect circle

[kuzmany]

Points in contacts table seems for me inconsistent align with header (agains to Company score)

[andersonjeccel]

The .css files received a lot of lines when I ran grunt compile-less
So, aiming to make your code review easier, I'd recommend to check these changed LESS files

Also added these labels for imports list

[LordRembo]

@andersonjeccel There's some tests failing in app/bundles/LeadBundle/Tests/Controller/ListControllerFunctionalTest.php. testSegmentCount tests the Segments overview for the presence of contacts but looks like it's not finding any labels at all:

        $content = $crawler->filter('a.col-count')->filter('a[data-id="'.$id.'"]')->html();

Maybe check if you removed anycol-count classes or changed that data-id.

[andersonjeccel]

@LordRembo Thanks!
I removed one col-count by mistake, it should be fixed now ✅

[shinde-rahul]

The view contact # is distorted on the company listing page.

The rest looks good.