Add icon label to icon and text hover label

[agjohnson]

One pattern I've wanted in a few places -- the project search dropdown, the project listing view, etc -- is an icon label that expands out to a full icon/text label. This is not a native FUI element.

This could be pure CSS I feel, but if that feels hard, this might be easiest as a web component.

In an unhovered state, the label would be the equivalent of:

<div class="ui icon green circular label">
  <i class="fas fa-check icon"></i>
</div>

In a hovered state, the label would expand to the equivalent of:

<div class="ui green circular label">
  <i class="fas fa-check icon"></i>
  Active
</div>

It's probably possible to do this with pure CSS, though might get pretty deep into CSS to achieve this. It might be possible to make this a web component too, and simply add the text/class on hover. Either way there should be a nice transition on the size change.