Fixes #981 - adding a link for the labels in individual issue page

[deepthivenkat]

r? @miketaylr

[miketaylr]

Functionally, this is great!

I think we need to tweak the design though,

Default:

Hover:

We can override the opacity 0.7 that's getting inherited, I think it would be better as 1. And probably the underline can just be white instead of black.

Can you also add an Intern test to this PR, so we don't break this in a refactor at some point in the future?

[magsout]

@deepthivenkat good 👍

But I think, you can keep the default className and replace <span> by the <a> like :

<a 
  href="/issues?q=label:<%= label.remoteName %>"
  class="wc-Label wc-Label--badge js-Label" 
  data-remotename="<%= label.remoteName %>"
  title="Labels : <%= label.name %>"
  style="background-color:#<%=label.color%>"
>
  <%= label.name %>
</a>

We need to add text-decoration: none in wc-Label

[miketaylr]

@deepthivenkat ping

[deepthivenkat]

@miketaylr @magsout I have to make the underline color as white. This is normally done by adding text-decoration-color property which is deprecated.

Instead I have made use of border-bottom-color property for hover event.

[miketaylr]

This is normally done by adding text-decoration-color property which is deprecated.

So it turns out this isn't deprecated, but is only supported in Firefox and Safari (with a prefix).

[deepthivenkat]

Attaching a gif to show the css changes

r? @magsout

[miketaylr]

I don't think we want the labels to change size when they're hovered over, it's sort of jarring.

Also the gray and yellow text doesn't look very good (it's hard for me to read).

[deepthivenkat]

@miketaylr how about now?

[miketaylr]

Much better! Why are we changing the text color from white to gray?

[deepthivenkat]

Now?

[deepthivenkat]

@miketaylr Grey was the default color. The CSS property used for font color:

color: inherit

[miketaylr]

@miketaylr Grey was the default color. The CSS property used for font color:

Ah, gotcha. This looks better to me -- let's let @magsout review. :)

[deepthivenkat]

Oki!

[miketaylr]

Ah, I'm sorry -- I goofed here. We intentionally changed the color from white in #1094. >___<

[deepthivenkat]

No problem! changed it back to grey

[magsout]

@miketaylr @deepthivenkat

I think previous style is better:

http://cl.ly/170o3B2Y4122

Hover with opacity is much better IHMO.

I have remove, border and decrease font-size:

.wc-Labels {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    border-color: transparent;
    opacity: .7;
    text-decoration: none;
    color: inherit;
    margin-left: .5em;
    padding: 0.2em;
    border-radius: 4px;
}

[miketaylr]

@magsout agreed, seems nicer.

[miketaylr]

Let's go ahead and merge this, thanks @deepthivenkat!