🦋 Changeset detected

Latest commit: 472b01b

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

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

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

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.

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!

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.