@bmartinezcalvo makes sense, thanks for handling this!

Hi all,

I've been working in two proposals to solve the end and clear icons position. First of all, in both proposals I've used subtle gray for Start and End (info) icons since they are decorative instead of actions so they shouldn't change the color on hover, active or filled states.

Option 1 (view prototype here to understand the states)

• Start and end icons with gray since they are decorative (subtle) and not interactive
• EndIcon with 16px size (same as clear icon since they are in the same side)
• Clear icon:
  • 16px
  • Interactive with hover and active states since it’s an action and not a decorative icon.
  • Placed before the end icon so the end icon is always in the same place and doesn’t move when the clear icon appears.

Option 2 (view prototype here)

At the moment, the only use cases I've found for TextInputs with EndIcon are the following:

• Info icon: to provide more information about the input.
• Asterisk icon: to inform the user about which input is required or not.

If we are using EndIcon only for this two use cases (info and asterisk) we could solve the problem with the following solution, moving the EndIcon next to the label instead of inside the TextInput. This solution will be more scalable with all our form fields (inputs, selects, etc.)

Requesting feedback from @iamjessklein for design and @Volker_E to know all real cases of text inputs with EndIcon.

Removing the parent task so that this doesn't show up as a subtask of the TypeaheadSearch epic

Another thing to consider here: the required indicator (see T295167). What happens when a TextInput is required, has an end icon, and is clearable (or is this something that should never happen)?

In T305593#7896585, @AnneT wrote:

Another thing to consider here: the required indicator (see T295167). What happens when a TextInput is required, has an end icon, and is clearable (or is this something that should never happen)?

@AnneT I delivered a proposal in this task T306427 to indicate only the optional fields instead of using the asterisk to indicate the required ones. See my last comment in T295167#7899115

Sounds good, thanks, @bmartinezcalvo!

@bmartinezcalvo to reach out to @iamjessklein for followup ; @Volker_E notes there is a technical issue with a visual overlap with asterisks, as well as with OOUI compatibility - good to consult with him as well for context

The smallest common denominator would be to fix that endIcon is not overlapping required icon. That should be a simple fix, to resolve UX confusion for the time being.
I see the general UI changes about required asterisk vs “(optional)” label treatment as absolutely valuable, but low priority from all topics that we're facing. And again, if we are only providing this in Codex that would result in users having to switch between form views facing two different form handling ways in a few clicks. Integrating it in OOUI on the other hand, would be a major undergoing which I don't see us taking on in reasonable future.

In T305593#7954837, @Volker_E wrote:

The smallest common denominator would be to fix that endIcon is not overlapping required icon. That should be a simple fix, to resolve UX confusion for the time being.
I see the general UI changes about required asterisk vs “(optional)” label treatment as absolutely valuable, but low priority from all topics that we're facing. And again, if we are only providing this in Codex that would result in users having to switch between form views facing two different form handling ways in a few clicks. Integrating it in OOUI on the other hand, would be a major undergoing which I don't see us taking on in reasonable future.

@Volker_E it makes sense, so I've created this other task T309594 (to evaluate if we want to update or no the EndIcon in TextInput component) so we can move forward with this task and update the Codex demo with the EndIcon visible when the clear one is displayed.

Updated TextInput component properties in our Codex library in Figma so EndIcon and Clear icon can be visible at the same time.

Change 802653 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] TextInput: Allow clear and end icons to coexist

https://gerrit.wikimedia.org/r/802653

Change 802653 merged by jenkins-bot:

[design/codex@main] TextInput: Allow clear and end icons to coexist

https://gerrit.wikimedia.org/r/802653

Design sign-off done. All is working properly.

This looks good on the Demo site. Thanks, everyone.