Broken Truncate and/or Broken Anchor Underline styling

[vankhoawin]

Requested from: #818 (comment)

See Sandbox for minimal reproduction: https://codesandbox.io/s/broken-truncateanchor-underline-styling-2b34z?file=/src/Form.tsx

Truncating an Anchor breaks the underline styling. This is visible on the Paste website as well:

As you can see in the Sandbox, I tried fixing this by adding some custom flex styling but this also removes the ellipsis from the Anchor.

[vankhoawin]

and it's not necessarily the underline that affects me, but without the underline the content appears to be misaligned (note the callback links on the right):

[SiTaggart]

Thanks @vnguyen94, We'll investigate this further and get back to you.

[TheSisb]

It's not terribly clear and we should make the docs a bit better. Truncate adds a span to the DOM, and if you put a span inside an anchor element, the underline won't inherit. Therefore you should wrap the Anchor with the Truncate component.

Your third example looks fine when I remove the inline-style {{display: "flex"}}:

Did I understand correctly?

[vankhoawin]

That did the trick, I swear I tried that combo 😅 Great looks like it works as expected, just that the example in doc is flipped as you mentioned. Thank you!