TextFields are missing the option for a trailing visual icon or text

[HDinger]

UseCase

As a user,
I want to see the unit of a value close to it, ideally inside the text field,
so that I can easily understand the value.

Problem

In the Primer docs, there is the option for trailing icons or trailing text inside text fields described:

Leading and trailing visuals are typically shown as an icon to reinforce the purpose of the input.

Icons are preferred, but you may also use a short piece of text in the leading or trailing visual slots when appropriate. For example, text may be used to show a unit such as "minutes", "$", or "%"

Unfortunately, the trailing_visual is not implemented yet.

[bsatarnejad]

Hi,

We are planning to implement the trailing_visual feature, particularly for text, as it's something we need. However, we’d like to understand your preferences for how trailing text should be displayed, especially when it’s long.

Here are some potential solutions we’ve considered:

1. Truncate the text and display it with an ellipsis (...) if it exceeds a specific width.
2. Use an abbreviated form of the text and provide a tooltip or help text for clarification.
3. Set a fixed width for the trailing text and allow it to break at specific points if it’s too long.
4. Limit the number of characters directly to avoid overly long text.

We’d appreciate your feedback to ensure the implementation meets expectations and works seamlessly.

Best regards,
Behri

[lesliecdubs]

Hi! @bsatarnejad thanks for the offer to contribute this feature! Before we go that route, I'd like to confirm that this feature isn't something that already exists (and may have just been hard to find).

I'm adding this to our First Responder project board to address that question. @camertron can you please investigate and confirm on this issue whether trailing visuals already exist on TextFields or not? If not and you have any contribution guidance to offer, please feel free to add it here.

[camertron]

Hey there 👋 We actually do support a trailing visual clear button, but that's it, unfortunately. Support for text, icons, etc, would be great 😄

[bsatarnejad]

Hi @lesliecdubs and @camertron
Thank you so much for your prompt response. I would greatly appreciate it if you could share your expectations and the specific design approach you have in mind for the trailing text. In particular, could you kindly elaborate on how you envision long texts should be structured and presented?

[camertron]

@bsatarnejad I took a look at the trailing visual slot for the React version of the TextField component and discovered it can either be an icon name (string)... or any React component, i.e. any bit of markup. In other words, it appears we make no effort to limit the number of characters in trailing text and instead leave such decisions to the user. For the PVC component, I would suggest limiting the options a bit more, perhaps drawing inspiration from what we do for the ActionList component, specifically the ActionList::Item's trailing_visual slot, documented here: https://primer.style/components/action-list/rails/alpha#trailing_visual. Note that it's actually a polymorphic slot, you can see the definition here:

view_components/app/components/primer/alpha/action_list/item.rb

Line 100 in c765093

renders_one :trailing_visual, types: {

Because TextField is a form component, it doesn't support slots. We'll have to offer a configuration-based way of defining the trailing visual, eg:

render(
  Primer::Alpha::TextField.new(
    trailing_visual: {
      # Normally you'd only pass one of these options,
      # I'm showing all of them for illustration purposes
      icon: :accessibility,
      text: "Foobarbaz",
      counter: 5,
      label: "Hello world"
    }
  )
)