fix: Trailing underlined space in anchor with display: inline

[m-akinc]

🐛 Bug Report

We would like to render an anchor with display: inline (like the default for <a>) so that it wraps properly when embedded in a block of text. If we do so, we see an underlined space at the end of our anchor text.

The template for the FAST anchor includes whitespace between the closing tag of the default slot and the closing tag of the enclosing <a> element. This collapses to a single space when rendered, but when styled with an underline (typical for an anchor) and the inline display mode, the space is visibly underlined.

💻 Repro or Code Sample

1. Go to the Anchor component in the FAST component explorer.
2. Set Appearance to hypertext
3. Use the browser dev tools to edit the html: a. add text before and after the <fast-anchor> element b. set display: inline on the <fast-anchor> element

🤔 Expected Behavior

Underline should end at the last character of the anchor text.

😯 Current Behavior

The space after the anchor text is underlined.

💁 Possible Solution

Remove all formatting whitespace after the default slot in the Anchor template.

🔦 Context

We are creating a design system including the anchor component, and we want to style it so that it can be embedded within a block of text and wraps properly (requires setting display: inline).

[m-akinc]

There can actually be space at the beginning as well, due to whitespace in/around the startSlotTemplate.

[janechu]

Unfortunately @microsoft/fast-components has been deprecated for some time.