Specification

This widget builds on the existing textInput widget and allow the user to specify an 'addon'.

Below is an example of addons from bootstrap. It shows leading, trailing and multiple addons:

Features

• You can have both leading and trailing addons on a single textInput.
• You can specify text, icon, or text + icon for either leading or trailing addons.
• You can include form widgets such as a checkbox or radioCheckbox in an addon.

Value-add of the widget (e.g. why use rather than just use VDom directly)
builds on the existing textInput and offers visual prompts to aid completion, e.g. type of values accepted

List of callback funcs that can be passed in props (if any)
none

Mouse/keyboard interactions (if any)
possibility to show different tooltips when hovering over leading and trailing addons

Mandatory/valid/empty/wait states (if any)
none

Is the widget controlled/uncontrolled
as per textInput

List of any icons needed
any icon in font-awesome that we ship should be usable as either a leading or trailing icon.

Design input required
Need to consider how we style an invalid or mandatory input that has addons.
Need to consider using addons and putting a textInput into a wait state.
Need to consider how we style addons if the textInput is disabled.

Any other considerations:
Initial support will not include changing the icon based on validity of the textInput.
With an input of type search, will Addon provide all we need to effectively offer a Search widget?

Questions

Need to consider if the icons should be spoken as they are included for informative purposes.
Need to consider what happens if long text is specified for an addon. Do we ellid the text, always show, ..

Acceptance criteria

When I specify an addon with text and an invalid icon, then I expect the text to be rendered without the icon.
When I specify an addon with unicode text, then I expect it to render correctly (including adjusting for height of non-latin chars).