Add trailing_visual_label to SegmentedControlItem (#2278)

Co-authored-by: Jon Rohan <[email protected]>

.changeset/twelve-forks-drive.md

@@ -0,0 +1,6 @@
+---
+"@primer/view-components": minor
+---
+
+Add optional with_trailing_visual_label slot to Primer::Alpha::SegmentedControl::Item. Filling the slot will add a Primer::Beta::Label to the right of the item.
+<!-- Changed components: Primer::Alpha::SegmentedControl -->

app/components/primer/alpha/segmented_control.pcss

@@ -152,6 +152,8 @@
   /* is .Button-withTooltip used anywhere? can't find use of it */
   & .Button--iconOnly,
   & .Button-withTooltip {
-    width: 100%;
+    width: 100% !important;
+    display: flex;
+    justify-content: center;
   }
 }

app/components/primer/alpha/segmented_control/item.html.erb

@@ -2,12 +2,5 @@
   "SegmentedControl-item",
   "SegmentedControl-item--selected": @selected
   ) %>" role="listitem" data-targets="segmented-control.items">
-  <% if @hide_labels %>
-    <%= render Primer::Beta::IconButton.new(icon: @icon, "aria-label": @label, **@system_arguments) %>
-  <% else %>
-    <%= render Primer::Beta::Button.new(**@system_arguments) do |button| %>
-      <% button.with_leading_visual_icon(icon: @icon) unless @icon.nil? %>
-      <%= @label %>
-    <% end %>
-  <% end %>
+  <%= render @button %>
 </li>

app/components/primer/alpha/segmented_control/item.rb

@@ -13,16 +13,50 @@ class Item < Primer::BaseComponent
         # @param selected [Boolean] Whether the item is selected
         # @param icon [Symbol] The icon to use
         # @param hide_labels [Symbol] Whether to only show the icon
-        def initialize(label:, selected: false, icon: nil, hide_labels: false, **system_arguments)
-          @icon = icon
-          @hide_labels = hide_labels
-          @label = label
+        def initialize(
+          label:,
+          selected: false,
+          icon: nil,
+          hide_labels: false,
+          **system_arguments
+        )
           @selected = selected
 
           @system_arguments = system_arguments
           @system_arguments[:"data-action"] = "click:segmented-control#select" if system_arguments[:href].nil?
           @system_arguments[:"aria-current"] = selected
           @system_arguments[:scheme] = :invisible
+
+          if hide_labels
+            @button = Primer::Beta::IconButton.new(
+              icon: icon,
+              "aria-label": label,
+              **@system_arguments
+            )
+          else
+            @button = Primer::Beta::Button.new(**@system_arguments)
+            @button.with_leading_visual_icon(icon: icon) if icon
+            @button.with_content(label)
+          end
+        end
+
+        # @!parse
+        #   # Optional trailing Label
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>'s `with_trailing_visual_label` slot.
+        #   renders_one(:trailing_visual_label)
+
+        # Optional trailing label.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>'s `with_trailing_visual_label` slot.
+        def with_trailing_visual_label(**system_arguments, &block)
+          @button.with_trailing_visual_label(**system_arguments, &block)
+        end
+
+        private
+
+        def before_render
+          content
         end
       end
     end

previews/primer/alpha/segmented_control_preview.rb

@@ -100,6 +100,41 @@ def icons_and_text_large
       end
       # @!endgroup
 
+      # @!group Trailing Label
+      # @label Size small
+      # @snapshot
+      def trailing_label_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :small)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size medium
+      # @snapshot
+      def trailing_label_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :medium)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size large
+      # @snapshot
+      def trailing_label_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+      # @!endgroup
+
       # @!group Icons only
       # @label Size small
       # @snapshot

test/components/primer/alpha/segmented_control_test.rb

@@ -32,6 +32,18 @@ def test_renders_icons_and_text
         end
       end
 
+      def test_renders_trailing_label
+        render_preview(:trailing_label_width_medium)
+
+        assert_selector("segmented-control ul.SegmentedControl") do
+          assert_selector("button.Button", count: 2) do
+            assert_selector(".Button-visual.Button-trailingVisual") do
+              assert_selector(".Label", text: "-8%")
+            end
+          end
+        end
+      end
+
       def test_renders_icons_only
         render_preview(:icon_only_medium)