[TextField] added left/right icon #2932

[skarnecki]

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

Fix #2932.

[nathanmarks]

@oliviertassinari

This component already has enough performance issues re-rendering because of the sheer amount of stuff going on -- do you think this is a good idea to add at this time?

[oliviertassinari]

@skarnecki Thanks for this PR but I agree with @nathanmarks I don't think that we should add a leftIcon and rightIcon to the TextField component.

I guess you try to achieve something like that:

That could but also useful for a SelectField, a DatePicker or a TimePicker #2930.
I think that we should provide a container component for this use case.
@skarnecki Do you want to work on this instead?

[nathanmarks]

@oliviertassinari I think that's a great idea for the multiple use cases 👍

[skarnecki]

@oliviertassinari
I need this for Auto-complete component. Suggested container component is not a solution to my problem. I wanted auto-suggest box to be full width of input, including icon.

If there is a way to achive similar look without modifying textfield I'm please tell me.

[nathanmarks]

@skarnecki You could add padding and use a pseudo element to render a material icon.

I'm closing this for now as we won't be adding more features to the current TextField due to the aforementioned reasons.

[binarykitchen]

@nathanmarks I tried with a pseudo element like that (Reagent)

(defn search []
  [:div
   [icons/action-search]
   [rui/text-field {:hint-text  "Enter search text" :full-width true}]])

But the problem then is that both aren't on the same line and even with inline styles, I can't change that. Any suggestions?