Add icon label to icon and text hover label

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.

Begin by examining the project search dropdown and project listing view, the locations named for this pattern, and compare their existing FUI labels. Define the collapsed icon-only and hovered icon-plus-text states, including a smooth size transition, then verify the behavior in each relevant view.