New Input variant: with icon

[JoseWhite]

Feature Description

This new variant of the input would allow using an icon inside the text field as well as tapping into it's click events.

Suggested Solution

function InteractiveIconInput({
  className,
  onIconClick,
  Icon,
  name,
  ...rest
}) {
  return (
    <>
      <Input
        className={classnames(
          'interactive-icon-input',
          className
        )}
        {...rest}
      >
        <Icon className="interactive-icon" onClick={onIconClick} />
      </Input>
    </>
  )
}

Alternatives Considered / Existing Workarounds

Extending the functionality of the regular Input on a per project basis.

Additional Context

Sample use case, Artlook-client project: In this project, the regular input was extended with functionality similar to the described above. The Icon in this case is a calculator and the callback from that icon click is used to display a modal specifically related to the input.

I understand that it is likely that not every project manages their Icon with an Icon component but I still think this could provide a starting point and support for other types of interfaces for icons be added later.