Add optional text easy clearing in inputs

[daviddkkim]

Is your feature request related to a problem? Please describe.

There's been a request from internal users to be able to clear text with a click of an icon(X).

Describe the solution you'd like

- When there is no text in the input, the X icon does not exist.
- When there is text to be cleared, the X icon appears. (Daniel brought up a great point that this is not accessibility friendly)

• When the input is focused, the X icon appears.

• When the X icon is focused, the X icon stays appeared.

• When neither the X icon or the input is focused, the X icon does not exist.

• The X Icon follows the same color scheme, hover, and active state patterns ( Color changes, transitions .. etc. Most, if not all components, have this behavior so please reference them)

• The X icon is keyboard navigable (Tabs) to align with Accessibility standards.

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

This is from this issue
-[] influxdata/ui#898

[jrenee42]

When neither the X icon or the input is focused, the X icon does not exist.

then how will the users discover this feature? what if they enter text, click away, then the 'x' disappears, then they want to clear it, so then they click in the field, and then it appears? that is non-intuitive.

[daviddkkim]

When neither the X icon or the input is focused, the X icon does not exist.

then how will the users discover this feature? what if they enter text, click away, then the 'x' disappears, then they want to clear it, so then they click in the field, and then it appears? that is non-intuitive.

Cross-posting here and the PR

Good point. I think there is a middle ground here between my first suggestion of making the icon appear on text and Daniel's suggestion of making icon appear on focus for accessibility reasons.

How about

When the input is focused, the X icon appears. When the X icon is focused, the X icon stays appeared. When neither X icon or the input is focused but the text value is non empty, the X icon stays appeared. If neither X icon or the input is focused AND the text value is empty, the X icon disappears.
@mavarius @jrenee42 thoughts?

[kristinarobinson]

Closed UI#898, since issue is solely a clockface issue.

[mavarius]

done