Add trailing visuals to the text field

[bsatarnejad]

What are you trying to accomplish?

Like leading visuals in a text-field, add trailing visuals to it. As explained here.

Screenshots

Closes #3218

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Like leading visuals in text field, we add a section for trailing visuals:

• Icon
• Text
• Label
• Counter

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5f4955c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[camertron]

Hey @bsatarnejad, were you planning on implementing the other kinds of trailing visuals we talked about in #3218 (comment) ?

[bsatarnejad]

Hey @bsatarnejad, were you planning on implementing the other kinds of trailing visuals we talked about in #3218 (comment) ?

Hi @camertron Yes of course.
The trailing icon has been successfully implemented, and the trailing text is currently being worked on. The remaining items will be addressed in due course.

[bsatarnejad]

Hi @camertron
As you mentioned here, four possible forms of trailing visual for an input text field are implemented: icon, label, text, and counter.

In the React implementation of this component, I noticed an issue: when there’s a long trailing text, it takes up all the available space, leaving no room for the input field itself.
https://github.com/user-attachments/assets/b33917c8-053c-404d-9bcb-374dc4b97cd4

The solution I’ve implemented for a long trailing text is to handle it by truncating it with ellipsis.
Therefore, I set the trailing text width to 25% of the parent container’s width, ensuring that the input field still has enough space. If the trailing text exceeds this width, it gets truncated with ellipsis.

I’d love to hear your thoughts on this solution!

[github-actions]

Uh oh! @bsatarnejad, the image you shared is missing helpful alt text. Check #3237 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[camertron]

Looking good 😄

[camertron]

Hmm, I like where you're going with this, but I have a few suggestions.

1. The truncation idea is cool 😎 I actually think that's better than what the React version does... although in React, you can pass in whatever custom component you want, so 🤷 . In any case, let's use Primer::Beta::Truncate for this.
2. I would prefer rendering to be done in the template.
3. Let's try to allow the caller to pass in system arguments to Label, Octicon, etc.
4. I don't think it makes sense to allow adding eg. both a label and a counter, so let's limit the trailing visuals to a single one... unless you have a use-case for multiple trailing visuals?

Here's a suggestion that incorporates all these ideas (see my other comment in the template as well)

Suggested change

	def trailing_visual_render
	visual = @input.trailing_visual
	return unless visual
	content = ActiveSupport::SafeBuffer.new # Use SafeBuffer for safe HTML concatenation
	# Render icon if specified
	content << render(Primer::Beta::Octicon.new(icon: visual[:icon], classes: "FormControl-input-trailingVisualIcon")) if visual[:icon]
	# Render label if specified
	content << render(Primer::Beta::Label.new(classes: "FormControl-input-trailingVisualLabel")) { visual[:label] } if visual[:label]
	# Render counter if specified
	content << render(Primer::Beta::Counter.new(count: visual[:counter], classes: "FormControl-input-trailingVisualCounter")) if visual[:counter]
	# Render text if specified
	content << content_tag(:span, visual[:text], class: "FormControl-input-trailingVisualText") if visual[:text]
	# Wrap in the trailing visual container
	content_tag(:span, content, class: "FormControl-input-trailingVisualWrap")
	end
	def trailing_visual_component
	return @trailing_visual_component if defined?(@trailing_visual_component)
	visual = @input.trailing_visual
	# Render icon if specified
	@trailing_visual_component = if (icon_arguments = visual[:icon])
	icon_arguments[:classes] = class_names(
	icon_arguments.delete(:classes),
	"FormControl-input-trailingVisualIcon"
	)
	Primer::Beta::Octicon.new(**icon_arguments)
	elsif (label_arguments = visual[:label])
	# Render label if specified
	label_arguments[:classes] = class_names(
	label_arguments.delete(:classes),
	"FormControl-input-trailingVisualLabel"
	)
	text = label_arguments.delete(:text)
	Primer::Beta::Label.new(**label_arguments).with_content(text)
	elsif (counter_arguments = visual[:counter])
	# Render counter if specified
	counter_arguments[:classes] = class_names(
	counter_arguments.delete(:classes),
	"FormControl-input-trailingVisualCounter"
	)
	Primer::Beta::Counter.new(**counter_arguments))
	elsif (truncate_arguments = visual[:text])
	# Render text if specified
	text = truncate_arguments.delete(:text)
	Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
	end
	end

[camertron]

This is meant to be combined with my suggestion that introduces the trailing_visual_component method:

Suggested change

	<% if @input.trailing_visual %>
	<%= trailing_visual_render %>
	<% end %>
	<% if (component = @input.trailing_visual_component) %>
	<div class="FormControl-input-trailingVisualWrap">
	<%= render(component) %>
	</div>
	<% end %>