Repository: woylie/doggo
Pull request #204 (2024-01-11 21:00:48)

remove button link role
- remove role from button_link, add class
- improve documentation for button components



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7da362a..09fb167 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
 - Use `section` instead of `article` in `Doggo.modal/1`.
 - Use `button` for close button in `Doggo.modal/1`.
 - Add `dismissable` attribute to `Doggo.modal/1`.
+- Remove `role` from `button_link/1`, add `class`.
 - Depend on `phoenix_storybook ~> 0.6.0`.
 
 ## [0.4.0] - 2023-12-31
diff --git a/lib/doggo.ex b/lib/doggo.ex
index 16d2b11..4b0fc73 100644
--- a/lib/doggo.ex
+++ b/lib/doggo.ex
@@ -706,7 +706,15 @@ defmodule Doggo do
   @doc """
   Renders a button.
 
-  See also `button_link/1` and `toggle_button/1`.
+  Use this component when you need to perform an action that doesn't involve
+  navigating to a different page, such as submitting a form, confirming an
+  action, or deleting an item.
+
+  If you need to navigate to a different page or a specific section on the
+  current page and want to style the link like a button, use `button_link/1`
+  instead. To
+
+  See also `button_link/1`, `toggle_button/1`, and `disclosure_button/1`.
 
   ## Examples
 
@@ -760,6 +768,13 @@ defmodule Doggo do
   @doc """
   Renders a link (`<a>`) that has the role and style of a button.
 
+  Use this component when you need to style a link to a different page or a
+  specific section within the same page as a button.
+
+  To perform an action on the same page, including toggles and revealing/hiding
+  elements, you should always use a real button instead. See `button/1`,
+  `toggle_button/1`, and `disclosure_button/1`.
+
   ## Examples
 
   ```heex
@@ -770,7 +785,7 @@ defmodule Doggo do
     variant={:primary}
     shape={:pill}>
     Submit
-  </Doggo.button>
+  </Doggo.button_link>
   ```
   """
   @doc type: :component
@@ -787,6 +802,10 @@ defmodule Doggo do
     the `"is-disabled"` class.
     """
 
+  attr :class, :any,
+    default: [],
+    doc: "Additional CSS classes. Can be a string or a list of strings."
+
   attr :rest, :global,
     include: [
       # HTML attributes
@@ -810,14 +829,16 @@ defmodule Doggo do
   def button_link(assigns) do
     ~H"""
     <.link
-      role="button"
-      class={[
-        variant_class(@variant),
-        size_class(@size),
-        shape_class(@shape),
-        fill_class(@fill),
-        @disabled && "is-disabled"
-      ]}
+      class={
+        [
+          "button",
+          variant_class(@variant),
+          size_class(@size),
+          shape_class(@shape),
+          fill_class(@fill),
+          @disabled && "is-disabled"
+        ] ++ List.wrap(@class)
+      }
       {@rest}
     >
       <%= render_slot(@inner_block) %>
@@ -1200,7 +1221,11 @@ defmodule Doggo do
   @doc """
   Renders a button that toggles the visibility of another element.
 
-  For a button that toggles other states, use `toggle_button/1` instead.
+  Use this component to reveal or hide additional content, such as in
+  collapsible sections or dropdown menus.
+
+  For a button that toggles other states, use `toggle_button/1` instead. See
+  also `button/1` and `button_link/1`.
 
   > #### In Development {: .warning}
   >
@@ -4438,6 +4463,11 @@ defmodule Doggo do
   @doc """
   Renders a button that toggles a state.
 
+  Use this component to switch a feature or setting on or off, for example to
+  toggle dark mode or mute/unmute sound.
+
+  See also `button/1`, `button_link/1`, and `disclosure_button/1`.
+
   ## Examples
 
   With a boolean assign `@muted` and an event name:


Test patch:
diff --git a/test/doggo_test.exs b/test/doggo_test.exs
index 34aee6f..f5daec2 100644
--- a/test/doggo_test.exs
+++ b/test/doggo_test.exs
@@ -1160,8 +1160,8 @@ defmodule DoggoTest do
         """)
 
       a = find_one(html, "a:root")
-      assert attribute(a, "role") == "button"
-      assert attribute(a, "class") == "is-primary is-normal is-solid"
+      assert attribute(a, "role") == nil
+      assert attribute(a, "class") == "button is-primary is-normal is-solid"
       assert attribute(a, "href") == "/confirm"
       assert text(a) == "Confirm"
     end
@@ -1175,7 +1175,7 @@ defmodule DoggoTest do
         """)
 
       assert attribute(html, "a:root", "class") ==
-               "is-primary is-normal is-solid is-disabled"
+               "button is-primary is-normal is-solid is-disabled"
     end
 
     test "with variant" do
@@ -1186,7 +1186,8 @@ defmodule DoggoTest do
         <Doggo.button_link variant={:info}>Confirm</Doggo.button_link>
         """)
 
-      assert attribute(html, "a:root", "class") == "is-info is-normal is-solid"
+      assert attribute(html, "a:root", "class") ==
+               "button is-info is-normal is-solid"
     end
 
     test "with size" do
@@ -1198,7 +1199,7 @@ defmodule DoggoTest do
         """)
 
       assert attribute(html, "a:root", "class") ==
-               "is-primary is-small is-solid"
+               "button is-primary is-small is-solid"
     end
 
     test "with shape" do
@@ -1210,7 +1211,7 @@ defmodule DoggoTest do
         """)
 
       assert attribute(html, "a:root", "class") ==
-               "is-primary is-normal is-pill is-solid"
+               "button is-primary is-normal is-pill is-solid"
     end
 
     test "with fill" do
@@ -1222,7 +1223,44 @@ defmodule DoggoTest do
         """)
 
       assert attribute(html, "a:root", "class") ==
-               "is-primary is-normal is-text"
+               "button is-primary is-normal is-text"
+    end
+
+    test "with additional class as string" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.button_link class="is-cute">Register</Doggo.button_link>
+        """)
+
+      assert attribute(html, ":root", "class") ==
+               "button is-primary is-normal is-solid is-cute"
+    end
+
+    test "with additional classes as list" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.button_link class={["is-cute", "is-petite"]}>
+          Register
+        </Doggo.button_link>
+        """)
+
+      assert attribute(html, ":root", "class") ==
+               "button is-primary is-normal is-solid is-cute is-petite"
+    end
+
+    test "with global attribute" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.button_link data-test="hello">Register</Doggo.button_link>
+        """)
+
+      assert attribute(html, ":root", "data-test") == "hello"
     end
   end