[FEAT] Link component render as anchor html tag

[dehmirandac2]

Is your feature request related to a problem? Please describe.
The Link component renders as a button HTML tag so we don't have an option to use it as an anchor. When we want to use the Link component to work as a link (open an external URL, for example) we have to implement a logic like this:

const handleClick = () => {
   window.location.replace('http://www.google.com');
}

<Button.Link onClick={handleClick}>Open external url</Button.Link>

Describe the solution you'd like
The idea is that we have the Link component rendering as an anchor and its attributes (href, target, etc). This way we can use the component as closes as a link component should be. Example:

<Button.Link href="http://www.google.com" target="blank">Open external url</Button.Link>

Describe alternatives you've considered

First alternative

An option to add this functionality without adding a breaking change is adding rendering the button as an anchor only if the href props is present. Something like this:

// How to use the tagName prop in the Button.Link
const Button = ({ href, ...otherProps }) => {
  if (href) {
     return <a href={href} {...otheProps}  />;
  }
  return <button {...otherProps} />;
};


// How to use it
<Button.Link href="http://www.google.com" target="blank">Open external url</Button.Link>

Reference using styled-components "as"

This way we can keep the default behavior as a button HTML tag. You can check the Material UI do something like this

Second alternative

Create a new component to the Link as an anchor and do not change the Button.Link component

// new component
<Link href="http://www.google.com" target="blank">Open external url</Link>

// old component (not changed) 
<Button.Link onClick={() => console.log('click')}>button</Button.Link>

Additional context
You can check how Material UI creates the Link component here

[ricardomalan]

Hi @dehmirandac2, I was looking at the project and I believe there was a mistake in creating the Button.Link, it was created as styled.button and it would actually be styled.a, because then it would receive the props of a link, like: href, target, rel ...

StyledButton Before - packages > yoga > src > Button > web > StyledButton.jsx

StyledButton After - packages > yoga > src > Button > web > StyledButton.jsx

WDYT?

[mmartinsoliv]

Solved with this PR