Feature: Button asChild / Link asChild

[thomasdigby]

This PR changes how the Link and Button components handle polymorphism. Instead of using as="a"/as="button" internally or externally, we can now use asChild and render the required element as children. This pattern helps with a bunch of typescript issues and retains the composability of styling and logic that we had previously. We use the Radix Slot component internally to merge any style, className, ref, onClick props, so we can compose Link with any child component.

I've also added logic for some useful (necessary?) attributes in the Link component if the href is not relative. This logic is currently handled by our "middleware" design-system components in atom-core, but they will eventually be removed so I moved it here. We lose the ability to do this with our Button components however, as we delegate responsibility for rendering the element to the user, so we can't repeat the same logic in Button. I think this is an ok compromise as the logic is not complex at all and the number of non-relative href "button"s we render is minimal.

There are ~100 instances of Link and Button components that will need to be updated in atom-core, but it should be a fairly simple migration. I have avoided updating ActionIcon with this logic as we're looking at deprecating the component soon, but I could look to update Tile if we like this approach.

<Button asChild css={{ mb: '$2' }}>
  <a href="https://google.com">Click here</a>
</Button>

// will render

<a href="https://google.com" class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv c-fkUJsw-ijkLxnS-css">
  Click here
</a>

<Link asChild>
  <button onClick={() => console.log('yolo')}>Click here</button>
</Link>

// will render

<button class="c-fucOQC c-fucOQC-gvmVBy-size-md c-fucOQC-fmPQHp-noCapsize-true">
  Click here
</button>

With this pattern we get nicely merged css props, valid types and autocomplete on the child and parent, and composed onClick methods as expected

<Button
  asChild
  css={{ bg: 'red' }}
  onClick={() => console.log('bonjour')}
>
  <Box
    as="a"
    href="/yolo"
    css={{ bg: 'yellow' }}
    onClick={() => console.log('hello')}
  >
    Click me
  </Box>
</Button>

[Marcdup1]

Very cool 😎

[andoulla]

I don't understand how the loader will work if we are using the asChild option?

[thomasdigby]

Closing this PR while we look into alternative options for improving our polymorphism