LinkButton should render the label in a <span> element

Describe the bug The <LinkButton> renders the label in a <Text.Body> element, which defaults to <p>. This becomes problematic when the <LinkButton> is rendered within a paragraph text, as nested <p> are not valid.

To Reproduce

https://codesandbox.io/s/k06ln8z2xr

Expected behavior The <LinkButton> should render the label within a <span> element

[tdeekens]

Agreed. I would however also keep suggesting to have all Text.* components have an as prop which referes to the component used for rendering. It avoids us having to “break out” of being able to use the Text components in some cases only cause their wrapper is not “fitting”. The LinkButton would just render <Text.Body as="span">...</Text.Detail/>.

[emmenko]

Yes I agree. Even though I might seem to play the devil’s advocate here, I find the as prop also nicer to have.

I’m just asking those questions mainly to avoid us spending too much time dealing with migrations and to also take the chance to maybe evaluate how we can improve the API of the text components.

If we proceed with the “renaming”, to keep things simple I would maybe prefer to do it like:

• add the as prop, without deprecating anything else
• in the next major we deprecate the other props (e.g. elementType, isInline, etc)
• in the next major we remove the deprecate props

I think this way we don’t need anyone to “force” migrating the props when we introduce the as prop.

That’s my point of view.