Changing React Component element type feature

[mimarz]

Description

Figure out how to handle casting component element type.

Today we are just exposing and passing along the "native" styled-components prop as to be used for casting the underlying html element type.

Exposed on props in:

• Typography
• Button

It's also indirectly exposed to most of our other components due to use using spreading provided props inside our components.

Problem

This approach does not work if you wrap the component with styled() HOC, because the wrapped component looses its styling.

Possible solutions

1. Remove as prop on exposed components and encourage use of forwardedAs
2. New prop name for changing element type which is passed to as internally
   • Suggest naming this property is

Notes

@vnys explored a lot of possibilities in #707

[vnys]

In Web Components if you extend an existing element, you use is. For example if you create a lead-component that extends <p>, you would use that as <p is="lead-text">. So if we go for alternative 2, I suggest using is.

[vnys]

Come to think of it, I think that’s a better approach than forwardedAs – which seems a bit esoteric if you don’t know about styled components…

[mimarz]

In Web Components if you extend an existing element, you use is. For example if you create a lead-component that extends <p>, you would use that as <p is="lead-text">. So if we go for alternative 2, I suggest using is.

Agreed on is as prop name, was writing an example here and I used is :)