Primer Alpha::ToggleSwitch custom status label support (#3659)

Author: bsatarnejad

.changeset/spotty-birds-cough.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add custom label support for ToggleSwitch on/off states

app/components/primer/alpha/toggle_switch.html.erb

@@ -4,8 +4,8 @@
     <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
   </span>
   <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
-    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
-    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content(@on_label)) %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content(@off_label)) %>
   <% end %>
 
   <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@button_arguments)) do %>

app/components/primer/alpha/toggle_switch.rb

@@ -29,6 +29,17 @@ class ToggleSwitch < Primer::Component
       # @param turbo [Boolean] Whether or not to request a turbo stream and render the response as such.
       # @param autofocus [Boolean] Whether switch should be autofocused when rendered.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param on_label [String] Custom label to show when the switch is ON.
+      #   Defaults to On.
+      #   Only customize this label if it makes the toggle’s state more meaningful
+      #   in its specific context. For example, for a "Show images" setting,
+      #   you might use "Hide" when the switch is ON.
+      # @param off_label [String] Custom label to show when the switch is OFF.
+      #   Defaults to ("Off").
+      #   Only customize this label if it makes the toggle’s state more meaningful
+      #   in its specific context. For example, for a "Show images" setting,
+      #   you might use "Show" when the switch is OFF.
+
       def initialize(
         src: nil,
         csrf_token: nil,
@@ -38,6 +49,8 @@ def initialize(
         status_label_position: STATUS_LABEL_POSITION_DEFAULT,
         turbo: false,
         autofocus: nil,
+        on_label: nil,
+        off_label: nil,
         **system_arguments
       )
         @src = src
@@ -70,6 +83,9 @@ def initialize(
         @button_arguments[:autofocus] = true if autofocus
 
         @system_arguments[:src] = @src if @src
+
+        @on_label  = on_label  || "On"
+        @off_label = off_label || "Off"
       end
 
       def on?

previews/primer/alpha/toggle_switch_preview.rb

@@ -67,5 +67,9 @@ def with_autofocus
         render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, autofocus: true))
       end
     end
+
+    def with_custom_status_label
+      render Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, on_label: "Enabled", off_label: "Disabled")
+    end
   end
 end