Remove invalid nested <button> inside <a> element in heex templates

[phoebe100]

Fixes #5770

[phoebe100]

I suggest this style since a very similar style is already used for the button-alike link "Get Started" in app.html.heex

[josevalim]

We should avoid using tailwind styles in generators. The home page is fine, because we discard it. Could we use <.button> only instead?

[SteffenDE]

In my projects I have a <.button link={%{patch: ...}} that then has a properly styled <.link inside. Maybe that's the way to go?

[phoebe100]

What about plain old link by simply using <.link> without any fancy style?
Buttons would always require javascript and some users might create their projects with --no-live flag.

Or the generators could produce different elements:

• mix phx.gen.live could use <.button> with phx-click only
• while mix phx.gen.html could stick to simple <.link> (which could still be styled/replaced further if CoreComponents gets some button-alike link component in the future)

[lifeiscontent]

👋🏻 new to Elixir & Phoenix, but the way the industry has been solving the (I need button styles for my link) problem is by using a prop called asChild in React. e.g. <Button asChild><a /></Button> where the <Button> would forward its props onto the a, is this something thats possible for Phoenix components? if yes, this might be a good solution to the problem.

[SteffenDE]

Closed via 1f4be18. Thank you!

[lifeiscontent]

@SteffenDE I've come up with an idea I think might be a good fit for phoenix defaults, in my own codebase I've created a link_button which is the exact same thing as button but just uses link under the hood instead. for all the styling I've abstracted the classes out into private helpers, if you think this might be a reasonable approach for phoenix defaults, I can open a PR. as the commit in 1f4be18 is still considered invalid HTML, you cannot nest interactive elements inside one another

[SteffenDE]

@lifeiscontent This sounds similar to what I proposed initially in #5820 (I added a link attribute to the button 89c76df, but another idea was a button_link). We ultimately decided against it because we didn't want to mirror the link component's API.

[lifeiscontent]

@SteffenDE the current solution is still producing invalid HTML though, you can't nest button -> a or a -> button and doing either may cause some bizarre bugs

[SteffenDE]

@lifeiscontent you‘re absolutely right and now I feel stupid 😃
I also somehow missed the part of your comment where you already mentioned the commit. I’m not sure why I thought only nesting the one way wasn’t valid, so back to square one…

[josevalim]

@SteffenDE should we revert this? Or this is an improvement anyway?

[SteffenDE]

No need to revert, it’s basically the same, but I plan to send a new PR

[lifeiscontent]

@SteffenDE maybe a little far out of an idea, but what if we prefixed all of the core components with core_* e.g. core_button core_link that way people would know they're getting styled things by the core_components.

this has some interesting growth benefits. e.g. if its <.link /> or <.button /> you know those are system integrations.

and if people want to completely overhaul their design systems, they can naturally graudate to something like app_*