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:
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.
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:
In a hovered state, the label would expand to the equivalent of:
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.