Repository: woylie/doggo
Pull request #227 (2024-02-11 12:56:25)

add menu separators
contributes to #124 


Patch:
diff --git a/lib/doggo.ex b/lib/doggo.ex
index 0a11026..e2c5cc6 100644
--- a/lib/doggo.ex
+++ b/lib/doggo.ex
@@ -3451,6 +3451,8 @@ defmodule Doggo do
   <Doggo.menu label="Actions">
     <:item>Copy</:item>
     <:item>Paste</:item>
+    <:item role="separator"></:item>
+    <:item>Sort lines</:item>
   </Doggo.menu>
   ```
 
@@ -3501,7 +3503,16 @@ defmodule Doggo do
 
   attr :rest, :global, doc: "Any additional HTML attributes."
 
-  slot :item, required: true
+  slot :item, required: true do
+    attr :role, :string,
+      values: ["none", "separator"],
+      doc: """
+      Sets the role of the list item. If the item has a menu item, group, menu
+      item radio group or menu item checkbox as a child, use `"none"`. If you
+      want to render a visual separator, use `"separator"`. The default is
+      `"none"`.
+      """
+  end
 
   def menu(assigns) do
     ensure_label!(assigns, "Doggo.menu", "Dog Actions")
@@ -3514,8 +3525,10 @@ defmodule Doggo do
       aria-labelledby={@labelledby}
       {@rest}
     >
-      <li :for={item <- @item} role="none">
-        <%= render_slot(item) %>
+      <li :for={item <- @item} role={Map.get(item, :role, "none")}>
+        <%= if item[:role] != "separator" do %>
+          <%= render_slot(item) %>
+        <% end %>
       </li>
     </ul>
     """
@@ -3566,6 +3579,7 @@ defmodule Doggo do
         </:item>
       </Doggo.menu>
     </:item>
+    <:item role="separator"></:item>
     <:item>
       <Doggo.menu_item on_click={JS.dispatch("myapp:help")}>
         Help
@@ -3608,7 +3622,16 @@ defmodule Doggo do
 
   attr :rest, :global, doc: "Any additional HTML attributes."
 
-  slot :item, required: true
+  slot :item, required: true do
+    attr :role, :string,
+      values: ["none", "separator"],
+      doc: """
+      Sets the role of the list item. If the item has a menu item, group, menu
+      item radio group or menu item checkbox as a child, use `"none"`. If you
+      want to render a visual separator, use `"separator"`. The default is
+      `"none"`.
+      """
+  end
 
   def menu_bar(assigns) do
     ensure_label!(assigns, "Doggo.menu_bar", "Dog Actions")
@@ -3621,8 +3644,10 @@ defmodule Doggo do
       aria-labelledby={@labelledby}
       {@rest}
     >
-      <li :for={item <- @item} role="none">
-        <%= render_slot(item) %>
+      <li :for={item <- @item} role={Map.get(item, :role, "none")}>
+        <%= if item[:role] != "separator" do %>
+          <%= render_slot(item) %>
+        <% end %>
       </li>
     </ul>
     """


Test patch:
diff --git a/test/doggo_test.exs b/test/doggo_test.exs
index 7cbe7ad..6236704 100644
--- a/test/doggo_test.exs
+++ b/test/doggo_test.exs
@@ -3709,6 +3709,21 @@ defmodule DoggoTest do
       assert text(li) == "A"
     end
 
+    test "with separator" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.menu label="Dog actions">
+          <:item role="separator">A</:item>
+        </Doggo.menu>
+        """)
+
+      assert li = find_one(html, "ul > li")
+      assert attribute(li, "role") == "separator"
+      assert text(li) == ""
+    end
+
     test "with labelledby" do
       assigns = %{}
 
@@ -3786,7 +3801,7 @@ defmodule DoggoTest do
     end
   end
 
-  describe "menubar/1" do
+  describe "menu_bar/1" do
     test "default" do
       assigns = %{}
 
@@ -3806,6 +3821,21 @@ defmodule DoggoTest do
       assert text(li) == "A"
     end
 
+    test "with separator" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.menu_bar label="Dog actions">
+          <:item role="separator">A</:item>
+        </Doggo.menu_bar>
+        """)
+
+      assert li = find_one(html, "ul > li")
+      assert attribute(li, "role") == "separator"
+      assert text(li) == ""
+    end
+
     test "with labelledby" do
       assigns = %{}