Ability to show icons within inputs

[chrisrolfe198]

Describe the feature you'd like

To display a copy icon within an input so that when it is clicked the contents is copied to the clipboard.

The documentation for the input says: "Icons: Sometimes inputs can include icons on the right. The icons can: Trigger a custom function (for example a date picker)". Does this mean it's already supported? If so can it be added to the documentation?

Describe alternatives you've considered

Doing it manually separate from wave.

[snapsnapturtle]

Thanks for reporting this. Currently we don't have any guidelines or apis to allow setting an icon for an input. Could you share your use-case with us? :)

[rafael-sepeda]

@christopherrolfe198 this question is, probably, coming from this component? https://monosnap.com/file/SSdOzeCVqAZDwyeBLPUYHaGCCDEGMC

We had a chat yesterday about it with Amanda Espinosa.

@snapsnapturtle regarding use-cases I can list some components that we have already in Wave that feature an clickable right/trailing icon:

• view-icon to show/hide password - this is a dedicated component now
• Chevron in dropdown
• cross icon to clear the SelectList component. This is, basically, a standart feature for text inputs, but we, probably, do not have clear-action in our regular inputs?

If our new design library in Figma we documented such an icon for a regular text input.

Some libraries have this functionality in the core Text field components:

• Material.io allows to setup Leading/Trailing icons in the basic input component.
• Orbit also supports Trailing icons

Would be good to have this also in our library. But I guess since we implemented the password component (that has a Trailing icon) separately having this functionality right away in the core Input component has some cons? Or not?

[chrisrolfe198]

So for me, there are a few issues here:

1. The documentation seems to indicate this feature is supported but it's not, at least not in a way that someone can add the component and add an icon with a custom function
2. We are working off of a design library in Figma that doesn't match the capabilities we have in the library which means when designs come through there is a guessing game of what exists and what doesn't which creates frustrations on the design and development side

[rafael-sepeda]

@christopherrolfe198 Most components in Figma are marked for now with "Not final". During the migration of the design library from Sketch to Figma I was checking the actual implementation (colors, spaces, etc.) but some things like this x-icon where existing in our library but never implemented (or hardcoded somewhere). The reason why I did not removed this feature from the new library because it was already in use in many places. In addition we do not have a dedicated password component in our library and we use the basic input component for it so we needed this functionality in it.

But I agree with you that we need to fix this.

[snapsnapturtle]

It sounds like this is a feature/improvement we should tackle (to match our documentation as well as the product requirements). I was doing some digging how other design systems achieve this and this one seemed to be the most suitable for our use-cases.

It works by providing a startEnhancer and an endEnhancer. For our system, we can probably start with the endEnhancer, which either accepts a render function or a ReactNode. That way, we can put icons there and link them to actions (like the eye icon in the password input to show/hide the plaintext version).

<Input endEnhancer={() => <CopyIcon size="small" />} />

[chrisrolfe198]

A related pattern raised by @duranmla in our PR in stash was around clickable icons for either side and might be worth covering here as well. It also fits the usecase for the password component. I.E. providing a specific interface/pattern for adding onclicks to icons, either through an additional button component that works out of the box with the enhancers or another way.

See screenshot