✨Overrideable component spike

[oddvernes]

resolves #2338 (perhaps)

This solution does seem to work with button, although you need to set as="a" explicitly, as just setting href, which converts it to an a internally, is not picked up by typescript so adding target attribute gets an error in that case.

This pr also fixes a bug i came across where height of button is 36px when as=button, 38px when other things due to different default box-sizing. So i added explicit box-sizing: border-box to force always 36px

[oddvernes]

Tested downstream on a create-react-app with react-router, doing this
<Button as={Link} to="/about">About</Button>
Now works, whereas before you got typescript error, failed to compile

[mimarz]

Tested downstream on a create-react-app with react-router, doing this <Button as={Link} to="/about">About</Button> Now works, whereas before you got typescript error, failed to compile

Awesome! Did you mean as="a" in this example?

[mimarz]

Wicked! Suggest we add a story and test for testing that the element is casted with some other props specific to the casted element?

Should we still call the casting prop as or something else? The name was primarily used because its what styled-components use 🤔

[oddvernes]

Awesome! Did you mean as="a" in this example?

No, react router has its own Link component with its own attributes like to. It gets transformed into a normal a with href in the html output. But the point is typescript recognizes this and anything else you throw at it now

[mimarz]

Awesome! Did you mean as="a" in this example?

No, react router has its own Link component with its own attributes like to. It gets transformed into a normal a with href in the html output. But the point is typescript recognizes this and anything else you throw at it now

høh, smart!

[mimarz]

LGTM 👍