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

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.

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

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?

@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:

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"
    }
  )
)