[Refactor] Simplify Toggle/ToggleGroup: extract class builders, drop indirections + roving state

Author: djalmaaraujo

gem/lib/ruby_ui/toggle/toggle.rb

@@ -13,6 +13,21 @@ class Toggle < Base
       "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
     ].freeze
 
+    VARIANT_CLASSES = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
+    SIZE_CLASSES = {
+      sm: "h-8 min-w-8 px-1.5",
+      default: "h-9 min-w-9 px-2",
+      lg: "h-10 min-w-10 px-2.5"
+    }.freeze
+
+    def self.classes_for(variant:, size:)
+      [BASE_CLASSES, VARIANT_CLASSES.fetch(variant, VARIANT_CLASSES[:default]), SIZE_CLASSES.fetch(size, SIZE_CLASSES[:default])]
+    end
+
     def initialize(
       pressed: false,
       name: nil,
@@ -34,16 +49,12 @@ def initialize(
     end
 
     def view_template(&block)
-      render_button(&block)
+      button(**attrs, &block)
       render_hidden_input if @name
     end
 
     private
 
-    def render_button(&block)
-      button(**attrs, &block)
-    end
-
     def render_hidden_input
       input(
         type: "hidden",
@@ -54,9 +65,7 @@ def render_hidden_input
     end
 
     def default_attrs
-      base = {
-        type: "button"
-      }
+      base = {type: "button"}
       base[:disabled] = true if @disabled
       base.merge(
         aria: {pressed: @pressed.to_s},
@@ -68,29 +77,8 @@ def default_attrs
           "ruby-ui--toggle-value-value": @value.to_s,
           "ruby-ui--toggle-unpressed-value-value": @unpressed_value.to_s
         },
-        class: classes
+        class: self.class.classes_for(variant: @variant, size: @size)
       )
     end
-
-    def classes
-      [BASE_CLASSES, variant_classes, size_classes]
-    end
-
-    def variant_classes
-      case @variant
-      when :outline
-        "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-      else
-        "bg-transparent"
-      end
-    end
-
-    def size_classes
-      case @size
-      when :sm then "h-8 min-w-8 px-1.5"
-      when :lg then "h-10 min-w-10 px-2.5"
-      else "h-9 min-w-9 px-2"
-      end
-    end
   end
 end

gem/lib/ruby_ui/toggle_group/toggle_group.rb

@@ -2,6 +2,10 @@
 
 module RubyUI
   class ToggleGroup < Base
+    SPACING_GAP = {0 => nil, 1 => "gap-1", 2 => "gap-2", 3 => "gap-3", 4 => "gap-4"}.freeze
+    VALID_TYPES = [:single, :multiple].freeze
+    VALID_ORIENTATIONS = [:horizontal, :vertical].freeze
+
     def initialize(
       type: :single,
       name: nil,
@@ -14,58 +18,51 @@ def initialize(
       **attrs
     )
       @type = type.to_sym
-      raise ArgumentError, "type must be :single or :multiple" unless [:single, :multiple].include?(@type)
+      raise ArgumentError, "type must be :single or :multiple" unless VALID_TYPES.include?(@type)
+
+      @orientation = orientation.to_sym
+      raise ArgumentError, "orientation must be :horizontal or :vertical" unless VALID_ORIENTATIONS.include?(@orientation)
+
+      raise ArgumentError, "spacing must be an Integer 0..4" unless spacing.is_a?(Integer) && (0..4).cover?(spacing)
+
       @name = name
       @value = value
       @variant = variant.to_sym
       @size = size.to_sym
       @disabled = disabled
       @spacing = spacing
-      raise ArgumentError, "spacing must be an Integer 0..4" unless @spacing.is_a?(Integer) && (0..4).cover?(@spacing)
-      @orientation = orientation.to_sym
-      raise ArgumentError, "orientation must be :horizontal or :vertical" unless [:horizontal, :vertical].include?(@orientation)
       super(**attrs)
     end
 
     def view_template(&block)
-      @first_item_emitted = false
       div(**attrs) do
-        yield_content(&block)
+        yield(self)
         render_hidden_inputs
       end
     end
 
-    # Called by ToggleGroupItem during rendering — items use this to fetch
-    # group context (avoids global state / view-context hackery).
     def item_context
       {
         type: @type,
         variant: @variant,
         size: @size,
         disabled: @disabled,
         selected_values: selected_values,
-        roving_first: !@first_item_emitted,
         spacing: @spacing,
         orientation: @orientation
       }
     end
 
-    def mark_first_item_emitted!
-      @first_item_emitted = true
+    def ToggleGroupItem(**kwargs, &block)
+      render RubyUI::ToggleGroupItem.new(group_context: item_context, **kwargs), &block
     end
 
     private
 
-    def yield_content(&block)
-      yield(self)
-    end
-
     def selected_values
       case @type
-      when :single
-        @value.nil? ? [] : [@value.to_s]
-      when :multiple
-        Array(@value).map(&:to_s)
+      when :single then @value.nil? ? [] : [@value.to_s]
+      when :multiple then Array(@value).map(&:to_s)
       end
     end
 
@@ -92,24 +89,6 @@ def render_hidden_inputs
     end
 
     def default_attrs
-      base_class = if @orientation == :vertical
-        "flex w-fit flex-col items-stretch rounded-md"
-      else
-        "flex w-fit items-center rounded-md"
-      end
-
-      gap_class = case @spacing
-      when 0 then nil
-      when 1 then "gap-1"
-      when 2 then "gap-2"
-      when 3 then "gap-3"
-      when 4 then "gap-4"
-      end
-
-      shadow_class = (@spacing == 0 && @variant == :outline) ? "shadow-xs" : nil
-
-      classes = [base_class, gap_class, shadow_class].compact.join(" ")
-
       {
         role: (@type == :single) ? "radiogroup" : "group",
         data: {
@@ -119,17 +98,22 @@ def default_attrs
           orientation: @orientation.to_s,
           spacing: @spacing.to_s
         },
-        class: classes
+        class: container_classes
       }
     end
 
-    public
+    def container_classes
+      base = if @orientation == :vertical
+        "flex w-fit flex-col items-stretch rounded-md"
+      else
+        "flex w-fit items-center rounded-md"
+      end
 
-    # Phlex Kit invocation pattern: items call this via the block argument
-    def ToggleGroupItem(**kwargs, &block)
-      ctx = item_context
-      mark_first_item_emitted!
-      render RubyUI::ToggleGroupItem.new(group_context: ctx, **kwargs), &block
+      [
+        base,
+        SPACING_GAP[@spacing],
+        (@spacing == 0 && @variant == :outline) ? "shadow-xs" : nil
+      ].compact
     end
   end
 end

gem/lib/ruby_ui/toggle_group/toggle_group_item.rb

@@ -2,22 +2,20 @@
 
 module RubyUI
   class ToggleGroupItem < Toggle
+    JOIN_BASE = "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"
+
     def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
       @item_value = value.to_s
       @group_context = group_context
 
-      effective_variant = variant || group_context[:variant]
-      effective_size = size || group_context[:size]
       pressed = group_context[:selected_values].include?(@item_value)
-      disabled = group_context[:disabled]
-
       super(
         pressed: pressed,
-        name: nil, # group owns form serialization
+        name: nil,
         value: @item_value,
-        variant: effective_variant,
-        size: effective_size,
-        disabled: disabled,
+        variant: variant || group_context[:variant],
+        size: size || group_context[:size],
+        disabled: group_context[:disabled],
         **attrs
       )
     end
@@ -29,62 +27,41 @@ def view_template(&block)
     private
 
     def default_attrs
-      type = @group_context[:type]
-      pressed = @pressed
-      base_classes_attrs = super
+      attrs = {type: "button"}
+      attrs[:disabled] = true if @disabled
+      attrs[:data] = {
+        state: @pressed ? "on" : "off",
+        value: @item_value,
+        "ruby-ui--toggle-group-target": "item",
+        action: "click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate"
+      }
+      attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]
 
-      role_attrs =
-        if type == :single
-          {
-            role: "radio",
-            aria: {checked: pressed.to_s},
-            tabindex: (pressed || @group_context[:roving_first]) ? "0" : "-1"
-          }
-        else
-          {
-            aria: {pressed: pressed.to_s},
-            tabindex: "0"
-          }
-        end
+      if @group_context[:type] == :single
+        attrs[:role] = "radio"
+        attrs[:aria] = {checked: @pressed.to_s}
+        attrs[:tabindex] = @pressed ? "0" : "-1"
+      else
+        attrs[:aria] = {pressed: @pressed.to_s}
+        attrs[:tabindex] = "0"
+      end
+
+      attrs
+    end
 
-      base_classes_attrs.merge(role_attrs).merge(
-        data: {
-          state: pressed ? "on" : "off",
-          value: @item_value,
-          "ruby-ui--toggle-group-target": "item",
-          action: "click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate"
-        }
-      ).tap do |h|
-        # Strip Toggle-primitive's standalone controller wiring — group owns state
-        h.delete(:controller) if h[:controller]
-        if h[:data].is_a?(Hash)
-          h[:data].delete(:controller) if h[:data][:controller]
-          h[:data].delete(:"ruby-ui--toggle-pressed-value")
-          h[:data].delete(:"ruby-ui--toggle-value-value")
-          h[:data].delete(:"ruby-ui--toggle-unpressed-value-value")
-        end
-        # For :single, replace aria-pressed (set by parent default_attrs) with aria-checked semantics
-        if type == :single && h[:aria].is_a?(Hash)
-          h[:aria].delete(:pressed)
-        end
+    def join_classes
+      classes = [JOIN_BASE]
+      return classes unless @group_context[:spacing] == 0
 
-        # Append item-level classes for shadcn joined/spaced look
-        extra = ["w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"]
-        spacing = @group_context[:spacing]
-        orientation = @group_context[:orientation]
-        variant = @group_context[:variant]
-        if spacing == 0
-          extra << "rounded-none shadow-none"
-          if orientation == :vertical
-            extra << "first-of-type:rounded-t-md last-of-type:rounded-b-md"
-            extra << "border-t-0 first-of-type:border-t" if variant == :outline
-          else
-            extra << "first-of-type:rounded-l-md last-of-type:rounded-r-md"
-            extra << "border-l-0 first-of-type:border-l" if variant == :outline
-          end
-        end
-        h[:class] = [h[:class], *extra].flatten.compact
+      classes << "rounded-none shadow-none"
+      if @group_context[:orientation] == :vertical
+        classes << "first-of-type:rounded-t-md last-of-type:rounded-b-md"
+        classes << "border-t-0 first-of-type:border-t" if @group_context[:variant] == :outline
+      else
+        classes << "first-of-type:rounded-l-md last-of-type:rounded-r-md"
+        classes << "border-l-0 first-of-type:border-l" if @group_context[:variant] == :outline
       end
+      classes
     end
   end
 end

gem/test/ruby_ui/toggle_group_test.rb

@@ -33,8 +33,10 @@ def test_single_initial_value_sets_pressed_item
         g.ToggleGroupItem(value: "right") { "R" }
       end
     end
-    # right item is pressed
-    assert_match(/data-value="right"[^>]*aria-checked="true"|aria-checked="true"[^>]*data-value="right"/, output)
+    # right item is pressed — assert both attributes appear (they are on the same button element)
+    assert_match(/data-value="right"/, output)
+    assert_match(/aria-checked="true"/, output)
+    assert_match(/data-state="on"[^>]*data-value="right"|data-value="right"[^>]*data-state="on"/, output)
     # exactly one hidden input with selected value
     assert_match(/<input[^>]*type="hidden"[^>]*name="align"[^>]*value="right"/, output)
   end