Use description list in field_container/1

Author: Flo0807

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",