fix preview issues and set a class for text so it can be truncated wh…

…en it is too long

app/components/primer/alpha/text_field.pcss

@@ -266,15 +266,8 @@
     color: var(--fgColor-muted);
     pointer-events: none;
     &:has( .FormControl-input-trailingVisualText) {
-      width: auto;
       max-width: 25%;
       padding-left: var(--base-size-8);
-
-      & .FormControl-input-trailingVisualText {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
     }
   }
   /* TODO: replace with new Button component */

app/lib/primer/forms/dsl/text_field_input.rb

@@ -18,7 +18,7 @@ def initialize(name:, label:, **system_arguments)
 
           @show_clear_button = system_arguments.delete(:show_clear_button)
           @leading_visual = system_arguments.delete(:leading_visual)
-          @trailing_visual = build_trailing_visual(system_arguments.delete(:trailing_visual))
+          @trailing_visual = system_arguments.delete(:trailing_visual)
           @leading_spinner = !!system_arguments.delete(:leading_spinner)
           @clear_button_id = system_arguments.delete(:clear_button_id)
           @inset = system_arguments.delete(:inset)
@@ -55,17 +55,6 @@ def leading_visual?
           !!@leading_visual
         end
 
-        def build_trailing_visual(trailing_visual)
-          return nil unless trailing_visual
-
-          icon = trailing_visual[:icon]
-          text = trailing_visual[:text]
-          counter = trailing_visual[:counter]
-          label = trailing_visual[:label]
-
-          { icon: icon, text: text, counter: counter, label: label }.compact
-        end
-
         def to_component
           TextField.new(input: self)
         end

app/lib/primer/forms/text_field.html.erb

@@ -17,9 +17,9 @@
         <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
       </button>
     <% end %>
-    <% if (component = @input.trailing_visual_component) %>
+    <% if @input.trailing_visual %>
       <div class="FormControl-input-trailingVisualWrap">
-        <%= render(component) %>
+        <%= render(trailing_visual_component) %>
       </div>
     <% end %>
   <% end %>

app/lib/primer/forms/text_field.rb

@@ -67,15 +67,17 @@ def trailing_visual_component
             "FormControl-input-trailingVisualCounter"
           )
 
-          Primer::Beta::Counter.new(**counter_arguments))
+          Primer::Beta::Counter.new(**counter_arguments)
         elsif (truncate_arguments = visual[:text])
           # Render text if specified
+          truncate_arguments[:classes] = class_names(
+            truncate_arguments.delete(:classes),
+            "FormControl-input-trailingVisualText"
+          )
           text = truncate_arguments.delete(:text)
           Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
         end
       end
-
-
     end
   end
 end

previews/primer/alpha/text_field_preview.rb

@@ -175,25 +175,31 @@ def monospace
       # @label With trailing icon
       # @snapshot
       def with_trailing_icon
-        render(Primer::Alpha::TextField.new(trailing_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing text
       # @snapshot
       def with_trailing_text
-        render(Primer::Alpha::TextField.new( trailing_visual: { text: "minute" }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new( trailing_visual: { text: { text: "minute" } }, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With trailing long text
+      # @snapshot
+      def with_trailing_long_text
+        render(Primer::Alpha::TextField.new( trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing counter
       # @snapshot
       def with_trailing_counter
-        render(Primer::Alpha::TextField.new( trailing_visual: { counter: 5 }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new( trailing_visual: { counter: { counter: 5 } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing label
       # @snapshot
       def with_trailing_label
-        render(Primer::Alpha::TextField.new( trailing_visual: { label: "Hello" }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new( trailing_visual: { label: { text: "Hello" } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With leading visual