Add a label to toggle buttons to match odyssey labels more easily

Author: coladarci

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2025-11-07]
+
+### Added
+- Added optional `label` attribute to `odyssey_toggle_button` and `odyssey_toggle_button_input` components
+  - When a label is provided, the toggle button is automatically wrapped in a fieldset with proper label styling
+  - Follows the same pattern as Phoenix core input components for consistency
+  - Maintains 100% backward compatibility - existing usage without labels continues to work unchanged
+  - Works seamlessly with both standalone and form-integrated usage
+
 ## [2025-11-04]
 
 ### Added

README.md

@@ -189,6 +189,7 @@ In your `assets/css/app.css` file, add the Odyssey assets to your Tailwind sourc
 @source "../css";
 @source "../js";
 @source "../../lib/your_app_web";
+@import "../../deps/peek_app_sdk/assets/odyssey/odyssey_web_components.css";
 @source "../../deps/peek_app_sdk/assets";  /* Add this line */
 ```
 

demo/lib/demo_web/live/odyssey_showcase_live.ex

@@ -23,6 +23,7 @@ defmodule DemoWeb.OdysseyShowcaseLive do
       |> assign(:toggle_selection, "Minutes")
       |> assign(:icon_toggle_selection, "Minutes")
       |> assign(:status_selection, "Active")
+      |> assign(:size_selection, "Medium")
       |> assign(:channel_selection, :email)
       |> assign(:form_data, form_data)
       |> assign(:form, to_form(form_data, as: "form"))
@@ -72,6 +73,12 @@ defmodule DemoWeb.OdysseyShowcaseLive do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("change_size", %{"value" => option}, socket) do
+    socket = assign(socket, :size_selection, option)
+    {:noreply, socket}
+  end
+
   @impl true
   def handle_event("change_channel", %{"value" => option}, socket) do
     socket = assign(socket, :channel_selection, option)
@@ -199,6 +206,17 @@ defmodule DemoWeb.OdysseyShowcaseLive do
               <p class="text-sm text-gray-600 mt-2">Selected: <strong>{@status_selection}</strong></p>
             </div>
 
+            <div>
+              <h3 class="text-lg font-medium mb-2">Toggle Button with Label</h3>
+              <.odyssey_toggle_button
+                options={["Small", "Medium", "Large"]}
+                selected={@size_selection}
+                on_change="change_size"
+                label="Size"
+              />
+              <p class="text-sm text-gray-600 mt-2">Selected: <strong>{@size_selection}</strong></p>
+            </div>
+
             <div>
               <h3 class="text-lg font-medium mb-2">Toggle Buttons with Icons</h3>
               <.odyssey_toggle_button

lib/peek_app_sdk/ui/odyssey/toggle_button.ex

@@ -47,6 +47,7 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButton do
   attr(:selected, :string, required: false, doc: "the currently selected option (not needed when using field)")
   attr(:on_change, :string, required: false, doc: "event name to fire on change (not needed when using field)")
   attr(:field, Phoenix.HTML.FormField, required: false, doc: "optional form field for automatic form integration")
+  attr(:label, :string, required: false, doc: "optional label to wrap the toggle button in a fieldset")
   attr(:phx_target, :any, required: false, doc: "optional phx-target for LiveComponent integration")
   attr(:rest, :global)
 
@@ -66,8 +67,27 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButton do
 
   # Standalone mode - regular component without form integration
   def odyssey_toggle_button(assigns) do
-    assigns = assign_new(assigns, :phx_target, fn -> nil end)
+    assigns =
+      assigns
+      |> assign_new(:phx_target, fn -> nil end)
+      |> assign_new(:label, fn -> nil end)
+
+    ~H"""
+    <%= if @label do %>
+      <fieldset class="fieldset mb-2">
+        <label>
+          <span class="label mb-1">{@label}</span>
+          <.do_odyssey_toggle_button {assigns} />
+        </label>
+      </fieldset>
+    <% else %>
+      <.do_odyssey_toggle_button {assigns} />
+    <% end %>
+    """
+  end
 
+  # Private function component for the button group to avoid duplication
+  defp do_odyssey_toggle_button(assigns) do
     ~H"""
     <div class="inline-flex rounded-lg" role="group">
       <button

lib/peek_app_sdk/ui/odyssey/toggle_button_input_component.ex

@@ -69,6 +69,7 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButtonInputComponent do
         selected={@selected}
         on_change="odyssey_toggle_button_change"
         phx_target={@myself}
+        label={assigns[:label]}
         {@rest}
       />
     </div>

test/peek_app_sdk/ui/odyssey_test.exs

@@ -127,5 +127,59 @@ defmodule PeekAppSDK.UI.OdysseyTest do
       # The Hours button should have the selected styling
       assert html =~ "bg-gray-50 text-blue-600"
     end
+
+    test "renders without fieldset when no label is provided" do
+      html =
+        render_component(&PeekAppSDK.UI.Odyssey.odyssey_toggle_button/1, %{
+          options: ["Minutes", "Hours", "Days"],
+          selected: "Minutes",
+          on_change: "change_time_unit"
+        })
+
+      refute html =~ "<fieldset"
+      refute html =~ "class=\"fieldset mb-2\""
+      assert html =~ "class=\"inline-flex rounded-lg\""
+    end
+
+    test "renders with fieldset and label when label is provided" do
+      html =
+        render_component(&PeekAppSDK.UI.Odyssey.odyssey_toggle_button/1, %{
+          options: ["Minutes", "Hours", "Days"],
+          selected: "Minutes",
+          on_change: "change_time_unit",
+          label: "Time Unit"
+        })
+
+      assert html =~ "<fieldset"
+      assert html =~ "class=\"fieldset mb-2\""
+      assert html =~ "<label>"
+      assert html =~ "<span class=\"label mb-1\">Time Unit</span>"
+      assert html =~ "class=\"inline-flex rounded-lg\""
+    end
+
+    test "form integration passes through label to toggle_button component" do
+      form_data = %{"channel" => :email}
+      form = to_form(form_data, as: "form")
+
+      html =
+        render_component(&PeekAppSDK.UI.Odyssey.odyssey_toggle_button/1, %{
+          field: form[:channel],
+          label: "Communication Channel",
+          options: [
+            %{label: "Email", value: :email},
+            %{label: "Text Message", value: :sms}
+          ]
+        })
+
+      assert html =~ "<fieldset"
+      assert html =~ "class=\"fieldset mb-2\""
+      assert html =~ "<label>"
+      assert html =~ "<span class=\"label mb-1\">Communication Channel</span>"
+      assert html =~ "Email"
+      assert html =~ "Text Message"
+      # Should have hidden input for form integration
+      assert html =~ ~r/type="hidden"/
+      assert html =~ ~r/name="form\[channel\]"/
+    end
   end
 end