add button_classes to CoreComponents (#6089)

* add new link_button core component

Buttons and Links must not be nested inside each other, otherwise there
are accessibility issues. A previous PR did not fix the problem, but just
inverted the problem.

Adds a link that is styled like a button.

Fixes #5770.
Relates to: #5820

* button_classes/0

Author: SteffenDE

installer/templates/phx_web/components/core_components.ex

@@ -163,20 +163,25 @@ defmodule <%= @web_namespace %>.CoreComponents do
 
   def button(assigns) do
     ~H"""
-    <button
-      type={@type}
-      class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
-        @class
-      ]}
-      {@rest}
-    >
+    <button type={@type} class={[button_classes(), @class]} {@rest}>
       {render_slot(@inner_block)}
     </button>
     """
   end
 
+  @doc """
+  Returns the default button classes.
+
+  ## Examples
+
+      <.link class={button_classes()} href={~p"/items/new"}>
+        New Item
+      </.link>
+  """
+  def button_classes do
+    "inline-block phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80"
+  end
+
   @doc """
   Renders an input with label and error messages.
 

priv/templates/phx.gen.html/index.html.heex

@@ -1,11 +1,9 @@
 <.header>
   Listing <%= schema.human_plural %>
   <:actions>
-    <.button phx-click={JS.dispatch("click", to: {:inner, "a"})}>
-      <.link href={~p"<%= schema.route_prefix %>/new"}>
-        New <%= schema.human_singular %>
-      </.link>
-    </.button>
+    <.link class={button_classes()} href={~p"<%= schema.route_prefix %>/new"}>
+      New <%= schema.human_singular %>
+    </.link>
   </:actions>
 </.header>
 

priv/templates/phx.gen.html/show.html.heex

@@ -2,11 +2,9 @@
   <%= schema.human_singular %> {@<%= schema.singular %>.id}
   <:subtitle>This is a <%= schema.singular %> record from your database.</:subtitle>
   <:actions>
-    <.button phx-click={JS.dispatch("click", to: {:inner, "a"})}>
-      <.link href={~p"<%= schema.route_prefix %>/#{@<%= schema.singular %>}/edit"}>
-        Edit <%= schema.singular %>
-      </.link>
-    </.button>
+    <.link class={button_classes()} href={~p"<%= schema.route_prefix %>/#{@<%= schema.singular %>}/edit"}>
+      Edit <%= schema.singular %>
+    </.link>
   </:actions>
 </.header>
 

priv/templates/phx.gen.live/core_components.ex

@@ -163,20 +163,25 @@ defmodule <%= @web_namespace %>.CoreComponents do
 
   def button(assigns) do
     ~H"""
-    <button
-      type={@type}
-      class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
-        @class
-      ]}
-      {@rest}
-    >
+    <button type={@type} class={[button_classes(), @class]} {@rest}>
       {render_slot(@inner_block)}
     </button>
     """
   end
 
+  @doc """
+  Returns the default button classes.
+
+  ## Examples
+
+      <.link class={button_classes()} href={~p"/items/new"}>
+        New Item
+      </.link>
+  """
+  def button_classes do
+    "inline-block phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80"
+  end
+
   @doc """
   Renders an input with label and error messages.
 

priv/templates/phx.gen.live/index.ex

@@ -9,11 +9,9 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
     <.header>
       Listing <%= schema.human_plural %>
       <:actions>
-        <.button phx-click={JS.dispatch("click", to: {:inner, "a"})}>
-          <.link navigate={~p"<%= schema.route_prefix %>/new"}>
-            New <%= schema.human_singular %>
-          </.link>
-        </.button>
+        <.link class={button_classes()} navigate={~p"<%= schema.route_prefix %>/new"}>
+          New <%= schema.human_singular %>
+        </.link>
       </:actions>
     </.header>
 

priv/templates/phx.gen.live/show.ex

@@ -10,11 +10,9 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
       <%= schema.human_singular %> {@<%= schema.singular %>.<%= schema.opts[:primary_key] || :id %>}
       <:subtitle>This is a <%= schema.singular %> record from your database.</:subtitle>
       <:actions>
-        <.button phx-click={JS.dispatch("click", to: {:inner, "a"})}>
-          <.link navigate={~p"<%= schema.route_prefix %>/#{@<%= schema.singular %>}/edit?return_to=show"}>
-            Edit <%= schema.singular %>
-          </.link>
-        </.button>
+        <.link class={button_classes()} navigate={~p"<%= schema.route_prefix %>/#{@<%= schema.singular %>}/edit?return_to=show"}>
+          Edit <%= schema.singular %>
+        </.link>
       </:actions>
     </.header>