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,10 +67,47 @@ 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"""
-    <div class="inline-flex rounded-lg" role="group">
+    <fieldset :if={@label} class="fieldset mb-2">
+      <label>
+        <span class="label mb-1">{@label}</span>
+        <div class="inline-flex rounded-lg" role="group">
+          <button
+            :for={{option, index} <- Enum.with_index(@options)}
+            type="button"
+            value={to_string(option_value(option))}
+            phx-click={@on_change}
+            phx-target={@phx_target}
+            class={
+              [
+                "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors border border-gray-200",
+                # Rounded corners only on first and last buttons
+                index == 0 && "rounded-l-lg",
+                index == length(@options) - 1 && "rounded-r-lg",
+                # Remove left border on all buttons except the first to avoid double borders
+                index > 0 && "-ml-px",
+                to_string(@selected) == to_string(option_value(option)) &&
+                  "bg-gray-50 text-blue-600 z-10 relative",
+                to_string(@selected) != to_string(option_value(option)) &&
+                  "bg-white text-gray-600 hover:text-gray-900 cursor-pointer"
+              ]
+            }
+            {@rest}
+          >
+            <%= if option_icon(option) do %>
+              <.odyssey_icon name={option_icon(option)} class="size-4" />
+            <% end %>
+            {option_text(option)}
+          </button>
+        </div>
+      </label>
+    </fieldset>
+    <div :if={!@label} class="inline-flex rounded-lg" role="group">
       <button
         :for={{option, index} <- Enum.with_index(@options)}
         type="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