Merge pull request #1570 from naymspace/feature/use-description-list

Use description list in `field_container/1`

Author: pehbehbeh

demo/test/demo_web/live/category_live_test.exs

@@ -52,8 +52,8 @@ defmodule DemoWeb.Live.CategoryLiveTest do
       conn
       |> visit(~p"/admin/categories/#{category.id}/show")
       |> assert_has("h1", text: "Category", exact: true)
-      |> assert_has("p", text: "Name", exact: true)
-      |> assert_has("p", text: category.name, exact: true)
+      |> assert_has("dt", text: "Name", exact: true)
+      |> assert_has("dd", text: category.name, exact: true)
     end
   end
 

demo/test/demo_web/live/tag_live_test.exs

@@ -52,9 +52,9 @@ defmodule DemoWeb.Live.TagLiveTest do
       conn
       |> visit(~p"/admin/tags/#{tag.id}/show")
       |> assert_has("h1", text: "Tag", exact: true)
-      |> assert_has("p", text: "Name", exact: true)
-      |> assert_has("p", text: "Inserted At", exact: true)
-      |> assert_has("p", text: tag.name, exact: true)
+      |> assert_has("dt", text: "Name", exact: true)
+      |> assert_has("dt", text: "Inserted At", exact: true)
+      |> assert_has("dd", text: tag.name, exact: true)
     end
   end
 

demo/test/demo_web/live/ticket_live_test.exs

@@ -35,10 +35,10 @@ defmodule DemoWeb.TicketLiveTest do
       conn
       |> visit(~p"/admin/tickets/#{ticket.id}/show")
       |> assert_has("h1", text: "Ticket", exact: true)
-      |> assert_has("p", text: "Subject", exact: true)
-      |> assert_has("p", text: "Body", exact: true)
-      |> assert_has("p", text: ticket.subject, exact: true)
-      |> assert_has("p", text: ticket.body, exact: true)
+      |> assert_has("dt", text: "Subject", exact: true)
+      |> assert_has("dt", text: "Body", exact: true)
+      |> assert_has("dd", text: ticket.subject, exact: true)
+      |> assert_has("dd", text: ticket.body, exact: true)
     end
   end
 end

guides/upgrading/v0.16.md

@@ -0,0 +1,17 @@
+# Upgrading to v0.16
+
+## Bump Your Deps
+
+Update Backpex to the latest version:
+
+```elixir
+defp deps do
+  [
+    {:backpex, "~> 0.16.0"}
+  ]
+end
+```
+
+## Component changes
+
+- `Backpex.HTML.Layout.field_container/1` now uses a `dl` element instead of a `div` element to better align with HTML semantics.

lib/backpex/html/layout.ex

@@ -500,7 +500,7 @@ defmodule Backpex.HTML.Layout do
   """
   @doc type: :component
 
-  attr :class, :string, default: "", doc: "extra classes to be added"
+  attr :class, :any, default: nil, doc: "extra classes to be added"
 
   slot :label, required: true do
     attr :align, :atom, values: [:top, :center, :bottom]
@@ -509,16 +509,22 @@ defmodule Backpex.HTML.Layout do
   slot :inner_block
 
   def field_container(assigns) do
+    assigns =
+      update(assigns, :label, fn
+        [label] -> label
+        _other -> raise ArgumentError, "Expected a single label slot, got: #{inspect(assigns.label)}"
+      end)
+
     ~H"""
-    <div class={"#{@class} flex flex-col items-stretch space-y-2 px-6 py-4 sm:flex-row sm:space-y-0 sm:py-3"}>
-      <div :for={label <- @label} class={"#{get_align_class(label[:align])} hyphens-auto break-words pr-2 sm:w-1/4"}>
+    <dl class={["flex flex-col items-stretch space-y-2 px-6 py-4 sm:flex-row sm:space-y-0 sm:py-3", @class]}>
+      <dt class={["hyphens-auto break-words pr-2 sm:w-1/4", get_align_class(@label[:align])]}>
         {render_slot(@label)}
-      </div>
+      </dt>
 
-      <div class="w-full sm:w-3/4">
+      <dd class="w-full sm:w-3/4">
         {render_slot(@inner_block)}
-      </div>
-    </div>
+      </dd>
+    </dl>
     """
   end
 

mix.exs

@@ -195,6 +195,7 @@ defmodule Backpex.MixProject do
       "guides/translations/translations.md",
 
       # Upgrade Guides
+      "guides/upgrading/v0.16.md",
       "guides/upgrading/v0.15.md",
       "guides/upgrading/v0.14.md",
       "guides/upgrading/v0.13.md",